2八、HTML

时间 2019-11-22

标签 html 栏目 HTML 繁體版

原文原文链接

javaWeb：使用Java语言开发基于互联网的项目php

软件架构：html

一、C/S ：Client/Server 客户端/服务器端html5

在用户本地有一个客户端程序，在远程有一个服务器端程序java

优势：用户体验好编程

缺点：开发，安装，部署，维护，麻烦浏览器

二、B/S：Browser/Server 浏览器/服务器端安全

只须要一个服务器，用户经过不一样的网址，客户访问不一样的服务器端程序服务器

优势：开发，安装，部署，维护简答架构

缺点：若是应用过大，用户的体验可能会受到影响jsp

对硬件要求太高

服务器端资源分类：

一、静态资源：

使用静态网页开发技术发布的资源

特色：全部用户访问，获得的结果是同样的

例如：文本，图片，音频，视频，HTML，CSS，JavaScript

若是用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，能够展现静态资源

二、动态资源：

使用动态网页及时发布的资源

特色：全部用户访问，获得的结果可能不同

例如：jsp/servlet，php，asp···

若是用户请求的是动态资源，那么服务器会执行动态资源，转换成静态资源，再发送给浏览器

静态资源：

HTML：用于搭建基础网页，展现页面内容

CSS：用于美化页面，布局页面

JavaScript：控制页面的元素，让页面有一些动态的效果

HTML：超文本标记语言，最基础的网页开发语言

超文本：超文本就是用超链接的方法，将各类不一样空间的文字信息组织在一块儿的网状文本

标记语言：由标签构成的语言。 <标签名称> 如HTMl，XML

注意：标记语言不是编程语言

HTML快速入门：

一、文件后缀名为html或者htm

二、标签分类：围堵标签：有开始标签和结束标签。如<html></html>

自闭合标签：开始标签和结束标签在一块儿。如<br/>

三、标签能够嵌套：须要正确的嵌套

错误：<a><b></a></b>

正确：<a><b></b></a>

四、在开始标签中能够定义属性，属性是有键值对构成，值须要用引号（‘单双均可’）引发来

五、html的标签不区分大小写，可是建议使用小写

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello
</body>
</html>

HTML的标签：

一、文件标签：构成html最基本的标签

一、html：html文档的根标签

<html lang="en"> </html>

二、head：头标签。用于指定html文档的一些属性。引入外部的资源

<head> </head>

三、title：标题标签

<title>Title</title>

四、body：体标签

<body> </body>

五、<！DOCTYOPE html>：html5中定义文档为html文档

<!DOCTYPE html>

二、文本标签：和文本相关的标签

一、注释：

二、<h1> to <h6>：标题标签

<h1> 标题</h1>
<h2> 标题</h2>
<h3> 标题</h3>
<h4> 标题</h4>
<h5> 标题</h5>
<h6> 标题</h6>

h1-h6:字体大小逐渐递减

三、<p>：段落标签

<p>段落</p>

四、<br>：换行标签

<br>

五、<hr>：展现一条水平线

属性：color，颜色

width，宽度

size ，高度

align，对齐方式

<hr color="red" size="20" width="100%" align="right" >

六、<b>:字体加粗

<b>加粗字</b>

七、<i>:字体斜体

<i>斜体字</i>

八、<center>：居中标签

<center><h1>标题居中</h1></center>

九、<font>:字体标签

属性：color，颜色

size，大小

face，字体

属性定义：color ：一、英文单词：red，green，blue

二、rgb（值1，值2，值3）：值的范围：0-255

三、#值1值2值3:值的范围00-FF

size：一、数值：默认是px（像素）

二、数值%：占比相对于父元素的比例

<font color="blue" size="17" >字体</font>

三、图片标签：显示图片

<img>

属性：src：图片相对路径

align：对齐方式

alt：图片显示不成功，显示的文字

width：宽度

height：高度

注意：相对路径：./表明当前目录

../表明上一级目录

<img src="image/WechatIMG5.jpeg" height="1438" width="1080" align="center" alt="图片加载失败"/>

四、列表标签：

有序列表：<ol>

<li>

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ol>

无序列表：<ul>

<li>

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

五、连接标签：

<a>

属性：href：须要跳转的位置

target：是否打开新窗口，_self，本页面内打开

_blank，新窗口打开

<a href="#" target="_self"> 超连接</a>

六、div和span：

<div>：每个div占满一整行，块级标签

<div></div>

<span>:文本信息在一行展现，行内标签，内联标签

<span></span>

七、语意化标签：在html3中为了提升程序的可读性，没有任何样式

<header></header>

<footer></footer>

七、表格标签：

<table>定义表格

属性：width，宽度

border，边框

cellpadding，内容和单元格距离

cellspacing，单元格之间的距离

bgcolor，背景色

align，对齐方式

<tr>定义行

属性：bgcolor，背景色

align，对齐方式

<td>定义单元格

属性：colspan：合并列

rowspan，合并行

<th>定义表头单元格

<caption>:表格标题

<thead>:表格头部分

<tbody>:表格体部分

<tfoot>：表格脚部分

<table border="1">
    <caption>这是一个表格</caption>
    <thead></thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
    <tfoot></tfoot>
</table>

八、表单标签：用于采集用户输入的数据，用于和服务器进行交互

<form>：用于定义表单，能够定义一个范围，范围表明采集用户数据的范围

属性：action：指定提交数据的url

method：指定提交方式

分类：一个7种，2种比较经常使用

get：请求参数会在地址栏中显示

请求参数大小是有限制的

不太安全

post：请求参数不会在地址栏中显示，会封装在请求体中

请求参数的大小没有限制

较为安全

注意：表单项种的数据想要被提交，必须指定其name属性

<form></form>

<input>：能够经过type属性值，改变表单的样式

type属性：一、text，文本输入框，默认值

<input type="text">

二、password：密码输入框

可搭配placeholder属性：指定提示内容

<input type="password">

三、radio：单选框

<input type="radio">

四、checkbox：复选框

注意：一组内容，name属性必须同样，value属性表示选中的值，checked属性表示默认值

<input type="checkbox">

补充：label的for属性与input的id属性对应后，点击标签，自动获取输入框的输入

五、file：文件选择框

<input type="file">

六、hidden：隐藏域

<input type="hidden">

七、submit：提交按钮

<input type="submit">

八、button：普通按钮

<input type="button">

九、image：图片提交按钮，src属性指定图片的路径

<input type="image">

<select>：

子元素<option>，指定列表项

<select>
    <option></option>
    <option></option>
    <option></option>

</select>

<textarea>:

属性：cols：列数

rows：行数

<textarea></textarea>