共计 9417 个字符，预计需要花费 24 分钟才能阅读完成。
1. 性能元素
1.1. 列表标签
列表标签的作用: 给一堆数据增加列表语义, 也就是通知搜索引擎通知浏览器这一堆数据是一个整体
– HTML 中列表标签的分类
无序列表(最多)(unordered list)
有序列表(起码)(ordered list)
定义列表(其次)(definition list)
1.1.1. 无序列表:
给一堆数据增加列表语义, 并且这一堆数据中所有的数据都没有先后之分
什么叫有先后之分?
例如: 排行榜
什么叫没有先后之分?
例如: 中国有哪些城市
– 无序列表格局:
<ul>
<li> 须要显示的条目内容 </li>
</ul>
li 其实是英文 list item 的缩写
list 是列表的意思
item 是条目标意思
所以联合起来就是 列表条目标意思– 无序列表款式
<ul type="value"></ul>
disc 默认值 实心圆
circle 空心圆
square 实心方块
尽管通过标签属性也能批改款式, 然而在企业开发中千万不要这么干 – 留神点:
1. 肯定要记住 ul 标签是用来给一堆数据增加列表语义的, 而不是用来给他们增加小圆点的
2.ul 标签和 li 标签是一个整体, 是一个组合. 所以个别状况下 ul 标签和 li 标签都是一起呈现, 不会单个呈现. 也就 是说不会独自应用一个 ul 标签或者独自应用一个 li 标签, 都是联合在一起应用
3. 因为 ul 标签和 li 标签是一个组合, 所以 ul 标签中不举荐蕴含其它标签, 也就是说当前你在 ul 标签中只会看到 li 标签
– 无序列表利用场景:
1. 新闻列表
2. 商品列表
3. 导航条
1.1.2. 有序列表
有序列表的作用: 给一堆数据增加列表语义, 并且这一堆数据中所有的数据都有先后之分
– 有序列表格局:
<ol>
<li></li>
</ol>
其它用法和 ul 都差不多, 也就是利用场景 / 留神点都和 ul 差不多– 有序列表款式
<ol type="A"></ol>
1 默认值。数字有序列表。（1、2、3、4）a 按字母顺序排列的有序列表，小写。（a、b、c、d）A 按字母顺序排列的有序列表，大写。（A、B、C、D）i 罗马字母，小写。（i, ii, iii, iv）I 罗马字母，大写。（I, II, III, IV）1.1.3. 定义列表
给一堆数据增加列表语义，先通过 dt 标签定义列表中的所有题目, 而后再通过 dd 标签给每个题目增加形容信息
– 定义列表的格局:
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
其实 dt 和 dd 都是英文的缩写
dt 是英文 definition title 的缩写, 所以 dt 的含意就是用来定义列表中的题目
dd 是英文 definition description 的缩写, 所以 dd 的含意就是用来定义题目对应的形容的– 定义列表的利用场景
做网站尾部的相干信息
做图文混排
– 定义列表的留神点
和 ul/ol 一样, dl 和 dt/dd 是一个整体, 所以他们个别状况下不会独自呈现, 都是一起呈现
和 ul/ol 一样, 因为 dl 和 dt/dd 是一个组合标签, 所以 dl 中倡议只放 dt 和 dd 标签
一个 dt 能够没有对应的 dd, 也能够有多个对应的 dd, 然而无论有或者没有 dd 都不举荐应用.
举荐应用一个 dt 对应一个 dd
和 li 标签一样, 当须要丰盛界面时, 咱们能够在 dt 和 dd 标签中持续增加其它标签
1.2. 表格标签
其实在过来表格标签用的十分十分的多, 绝大多数的网站都是应用表格标签来制作的, 也就是说表格标签是一个时代的代表。但在当初，多用于数据的展现
– 什么是表格标签?
表格标签作用: 用来给一堆数据增加表格语义
其实表格是一种数据的展示模式, 当数据量十分大的时候, 表格这种展示模式被认为是最为清晰的一种展示形 式
– 表格标签格局:
<table>
<tr>
<td> 姓名 </td>
<td> 年龄 </td>
<td> 身高 </td>
</tr>
<tr>
<td> 张三 </td>
<td>19</td>
<td>1.78</td>
</tr>
</table> 其实表格标签中的 table 代表整个表格, 也就是一对 table 标签就是一个表格
其实表格标签中的
, 也就是说一对 tr 标签就是表格中的一行
其实表格标签中的 td 标签代表表格中一行中的一个单元格, 也就是说一对 td 标签就是一行中的一个单元格
补充: 除 td 外，有时也会用到 th，th 外部的文本通常会出现为居中的粗体文本，而 td 元素内的文本通常是左对齐的一般文本。
– 留神点
- 表格标签有一个 border 边框属性, 这个属性决定了边框的宽度. 默认状况下这个属性的值是 0, 所以看不到边框
- 表格标签和列表标签一样, 它是一个组合标签, 所以 table/tr/td 要么一起呈现, 要么一起不呈现, 不会单个呈现
– 宽度和高度的属性
能够给 table 标签和 td 标签应用
- 表格的宽度和高度默认是依照内容的尺寸来调整的, 也能够通过给 table 标签设置 width/height 属性的方 式来手动指定表格的宽度和高度.
- 如果给 td 标签设置 widht/height 属性, 会批改以后单元格的宽度和高度, 不会影响整个表格的宽度和高度
– 程度对齐和垂直对齐的属性
其中程度对齐能够给 table 标签和 tr 标签和 td 标签应用.
垂直对齐只能给 tr 标签和 td 标签应用.
- 给 table 标签设置 align 属性, 能够管制表格在程度方向的对齐形式.
- 给 tr 标签设置 align 属性, 能够管制以后行中所有单元格内容的程度方向的对齐形式.
- 给 td 标签设置 align 属性, 能够管制以后单元格中内容在程度方向的对齐形式.
留神点: 如果 td 中设置了 align 属性, tr 中也设置了 align 属性, 那么单元格中的内容会依照 td 中设置的来对齐. - 给 tr 标签设置 valign 属性, 能够管制以后行中所有单元格中的内容, 在垂直方向的对齐形式.
- 给 td 标签设置 valign 属性, 能够管制以后单元格中的内容在垂直方向的对齐形式.
留神点: 如果 td 中设置了 valign 属性, tr 中也设置了 valign 属性, 那么单元格中的内容会依照 td 中设置的来对齐.
align: left center right
valign: top mid bottom
– 外边距和内边距的属性
只能给 table 标签应用
-
cellspacing 外边距就是单元格和单元格之间的间隔, 咱们称之为外边距
默认状况下单元格和单元格之间的外边距的间隔是 2px -
cellpadding 内边距就是单元格的边框和文字之间的间隙, 咱们称之为内边距
默认状况下内边距是 1留神: 当前在企业开发中所有管制款式的都是通过 CSS 或间接应用组件库中的属性管制，应用表格自带属性管制很少，然而要理解根本的应用。
– 细线表格
在表格标签中想通过指定外边距为 0 来实现细线表格是不靠谱的, 其实它是将 2 条线合并为了一条线, 所以看上去很不难受
细线表格的制作形式:
1. 给 table 标签设置 bgcolor="black"，cellspacing = "1px"
2. 给 tr 标签设置 bgcolor="white"留神点:
table 标签和 tr 标签以及 td 标签都反对 bgcolor 属性
– 表格的残缺构造
因为表格中存储的数据比较复杂, 为了方便管理和浏览以及晋升语义, 咱们能够对表格中存储的数据进行分类
表格中存储的数据能够分为 4 类
- 表格的题目
- 表格的表头信息
- 表格的主体信息
- 表格的页尾信息
表格的残缺构造
<table>
<caption> 表格的题目 </caption>
<thead>
<tr>
<th> 每一列的题目 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 数据 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> 数据 </td>
</tr>
</tfoot>
</table>
caption 作用: 指定表格的题目
thead 作用: 指定表格的表头信息
tbody 作用: 指定表格的主体信息
tfoot 作用: 指定表格的附加信息留神点:
- 如果咱们没有编写 tbody, 零碎会零碎给咱们增加 tbody
– 如果指定了 thead 和 tfoot, 那么在批改整个表格的高度时, thead 和 tfoot 有本人默认的高度, 不会随着表格的高度变动而变动(chrome 下能够，Firefox 下不能够)
– 单元格合并
1. 程度方向上的单元格合并
能够给 td 标签增加一个 colspan 属性, 来指定把某一个单元格当做多个单元格来对待 (程度方向)
例如:
<td colspan="2"></td>含意: 把以后单元格当做两个单元格来对待
留神点:
因为把某一个单元格当做了多个单元格来对待, 所以就会多出一些单元格, 所以须要删掉一些单元格能力失常显示.
肯定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并.
2. 垂直方向上的单元格合并
能够给 td 标签设置一个 rowspan 属性, 来指定把某一个单元格当做多个单元格来对待 (垂直方向)
例如:
<td rowspan="2"></td>含意: 把以后单元格当做两个单元格来对待
1.3.form 表单
表单就是专门用来收集用户信息的
– 什么是表单元素?
表单元素其实还是 HTML 中的一些标签, 只不过这些标签比拟非凡, 在浏览器中所有的表单标签都有非凡的外观和默认的性能
– 表单的格局:
<form action="提交的服务器接口地址">
< 表单元素 >
</form>留神: 表单元素肯定要写在表单中
– 常见的表单元素
-input 标签
input 标签有一个 type 属性, 这个属性有很多类型的取值, 取值的不同就决定了 input 标签的性能和外观的不同
- 明文输入框
<input type="text" name="account" placeholder="请输出用户名">
name: 表单提交时，会作为参数的名称，联合输出的值进行匹配，组成 参数名 = 参数值的构造
placeholder: 提醒
- 暗文输入框
<input type="password" name="password" placeholder="请输出明码">
- 输入框设置默认值
<input type="xxx" value="xxx">
- 单选框
<input type="radio" name="xx" value="xxx">
留神点:
1. 默认状况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个 name 属性, 而后 name 属性还必须设置雷同的值。2. 要想让单选框默认选中某一个, 那么能够给 input 标签增加一个 checked 属性。3. 单选框的 value 值，才是咱们最终须要的值，并不是单选框显示的值。- 多选框
<input type="checkbox" name="xxx" value="xxx">
多选框默认选中 checked
- 提交按钮
<input type="submit">
作用: 将表单中曾经填写好的数据, 提交到近程服务器
留神点:
要想把表单中填写好的数据提交到近程服务器, 必须具备两个条件
1. 须要给 form 表单增加一个 action 的属性, 通过这个 action 属性指定须要提交到的服务器地址
2. 须要给须要提交到服务器的表单元素增加一个 name 属性
-enctype
application/x-www-form-urlencoded
查问字符串，在发送前编码所有字符（默认），转换为?a=a&b=b&c=c
multipart/form-data
不对字符编码。在应用蕴含文件上传控件的表单时，必须应用该值。- 附件上传 <input type="file">
method="POST"
enctype="multipart/form-data"
text/plain
用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，个别用于 email 之类的；- 一般按钮
<input type="button" value="xxx">
能够通过 value 属性来给按钮指定题目
作用: 配合 JS 实现一些操作
- 图片按钮
<input type="image" src="">
作用: 配合 JS 实现一些操作
- 重置按钮
<input type="reset" value="xx">
作用: 用于清空表单中曾经填写好的数据
留神点:
如果想想改重置按钮默认的按钮题目能够通过 value 属性来批改
- 暗藏域
<input type="hidden" name="xx" value="xxx">
暗藏域
作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器
-label 标签
1. 默认状况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让 对应的输入框聚焦, 那么就须要让文字和输入框进行绑定
2. 要想让输入框和文字绑定在一起, 那么咱们能够应用 label 标签
3. 绑定的格局:
3.1 将文字利用 label 标签包裹起来
3.2 给输入框增加一个 id 属性
3.3 在 label 标签中通过 for 属性和输入框中的 id 进行绑定即可
<label for="account">
账号:
</label>
<input type="text" id="account">
-select 标签
作用: 用于定义下拉列表
格局:
<select>
<optgroup label="分组名称">
<option> 列表数据 </option>
</optgroup>
</select>
留神点:
1. 下拉列表不能输出内容, 然而能够间接在列表中抉择内容
2. 能够通过给 option 标签增加一个 selected 属性来指定列表的默认值
3. 能够通过给 option 标签包裹一层 optgroup 标签来给下拉列表中的数据分类
-textarea 标签
作用: 定义一个多行输入框
格局:
<textarea>
</textarea>
留神点:
1. 默认状况下输入框能够有限换行
2. 默认状况下输入框有本人的宽度和高度
3. 能够通过 cols 和 rows 来指定输入框的宽度和高度, 然而尽管指定了列数和行数, 然而还是能够有限往下 输出
4. 默认状况下输入框是能够手动拉伸的
-fieldset 组件
fieldset 组件用于在一个 web 表单中对多个控件和标签进行分组
格局:
<form action="">
<fieldset>
<legend> 请登录 </legend>
账号:<input type="text"><br>
明码:<input type="password">
<input type="submit">
</fieldset>
</form>HTML5 新增表单元素
-datalist 标签
<input type="text" list="xxx">
<datalist id="xxx">
<option>xxx</option>
</datalist>
1. 作用: 给输入框绑定待选项
2.datalist 格局:
<datalist>
<option> 待选项内容 </option>
</datalist>
3. 如何给输入框绑定待选列表
1. 搞一个输入框
2. 搞一个 datalist 列表
3. 给 datalist 列表标签增加一个 id
4. 给输入框增加一个 list 属性, 将 datalist 的 id 对应的值赋值给 list 属性即可
-progress <progress value="70" max="100">70%</progress>
progress 示意工作的实现状况，罕用于进度条
max 定义进度元素所要求的工作的工作量，默认值为 1
value 定义曾经实现的工作量，如果 max 值为 1，该值必须是介于 0~1 之间的小数。- 邮箱 <input type="email">
能够主动校验输出的内容是否合乎邮箱的格局
- 域名 <input type="url">
能够主动校验输出的内容是否是 URL 地址
- 数字 <input type="number">
输入框中只能输出数字
- 工夫 <input type="date">
能够通过日历来抉择工夫
- 色彩 <input type="color">
能够通过取色板来抉择色彩2.Http 协定
HTTP 是一种可能获取如 HTML 这样的网络资源的 protocol(通信协定)。它是在 Web 上进行数据交换的根底，是一种 client-server 协定，也就是说，申请通常是由像浏览器这样的接受方发动的。
HTTP 被设计于 20 世纪 90 年代初期，是一种可扩大的协定。它是应用层的协定，通过 TCP，或者是 TLS-加密的 TCP 连贯来发送，实践上任何牢靠的传输协定都能够应用。因为其良好的扩展性，时至今日，它不仅被用来传输超文本文档，还用来传输图片、视频或者向服务器发送如 HTML 表单这样的信息。HTTP 还能够依据网页需要，仅获取局部 Web 文档内容更新网页。
表单：提交数据
交互：HTTP 协定
客户端大前端 申请 ——>
<—— 响应 服务端 后端
HTTP 报文的分类有两种：申请报文和响应报文。顾名思义，申请报文就是客户端向服务端发送申请的信号，响应报文就是服务端响应解决后回传给客户端的信号。
2.1. 申请报文
HTTP 申请报文由四局部组成，别离是申请行、申请头、空行和申请体，其中空行也是组成部分之一，作用是进行分隔，必不可少。
2.1.1. 申请行
第一行为申请行，由申请办法、URI 和 HTTP 协定版本 3 个字段组成，它们之间用空格分隔，最初以回车和换行符结尾进行内容宰割，示意接下来的内容（下一行开始的）不是申请行的内容。举例，GET /index.php HTTP/1.1，GET 是申请办法，/index.php 是 URL，HTTP/1.1 示意应用的 HTTP 版本为 1.1。
这一行比拟好了解，只有申请办法的类型比拟多，有 GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT，其中 GET、POST 最为罕用，这里具体介绍下。
– GET
GET 最为常见的申请形式，通常用于当客户端要从服务器中读取文档时，比方点击网页上的链接或者通过在浏览器的地址栏输出网址的形式来浏览网页，应用的都是 GET 形式。须要留神的是应用 GET 办法申请时，申请参数和对应的值是跟在 URL 前面，通过问号（“?”）和 and 连接符（“&”）以及“=”号连贯。GET 办法要求服务器将 URL 定位的资源放在响应报文的数据局部，回送给客户端。例如，/index.php?id=100&slec=yes，这样通过 GET 形式传递的数据间接示意在地址中。正式因为要传递的参数和值曾经存在于 URL 中，所以采纳 GET 办法申请的 HTTP 报文是没有申请体的。
很显著，GET 办法把参数以及参数值都裸露在 URL 中了，益处不言而喻，弊病就是不利于数据的窃密和平安。另外浏览器对地址的字符长度是有限度的，尽管各自的规范不同，但个别不超过 1024 个字符，所以如果要传输的数据量比拟大，不宜采纳 GET 办法。
– POST
GET 也是十分常见的申请形式，并且完满补救了 GET 办法的有余。因为 POST 办法将要传输的数据封装在报文的申请体中，并且对传输的数据大小没有限度，所以能够传输大量的数据，并且因为数据封装在申请体中，没有间接裸露在 URL 中，所以比拟私密和平安。
– 其余申请形式
其余申请形式用得比拟少，其中 HEAD 办法偶然用到，服务端承受到 HEAD 申请后只返回响应头，而不会发送响应内容，这样就进步了传输效率。所以当咱们只须要查看某个页面的状态的时候，应用 HEAD 是十分高效的。
2.1.2. 申请头
申请头部由键 / 值对组成，每行一对，键和值用冒号“:”（英文）分隔。申请头部告知服务器所有有对于客户端申请的信息，典型的申请头有：
User-Agent：产生申请的用户代理信息（浏览器信息）：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 等；
Accept：客户端可辨认的内容类型列：text/html,application/xhtml+xml,application/xml；
Accept-Language：客户端可承受的自然语言 – zh-CN,zh;q=0.8,en;q=0.6,id;q=0.4；
Accept-Encoding：客户端可承受的编码压缩格局 – gzip, deflate, sdch, br
Host：申请的主机名，容许多个域名同处一个 IP 地址，即虚拟主机
connection：连贯形式，有 close 和 keep-alive 两种。
close：通知 WEB 服务器或代理服务器，在实现本次申请的响应后，断开连接
keep-alive：通知 WEB 服务器或代理服务器。在实现本次申请的响应后，放弃连贯，以期待后续申请
Cookie：存储于客户端扩大字段，向同一域名的服务端发送属于该域的 cookie – PSTM=1490844191; BIDUPSID=2145FF54639208435F60E1E165379255;
2.1.3. 空行
用户进行内容宰割，示意申请头到此为止，下一行的内容不再是申请头。
2.1.4. 申请体
申请体蕴含的就是申请数据，正如上文提到的，当应用的是 GET 办法的时候，没有申请体。
2.2. 响应报文
客户端向服务端发送申请之后，服务器接管并解决客户端发过来的申请后失常状况下会返回一个 HTTP 的响应音讯，这个就是响应报文。
HTTP 响应也由四个局部组成，别离是：状态行、消息报头、空行和响应注释。模式上除了状态行之外，其余三个局部与申请报文相似。
2.2.1. 状态行
格局为：HTTP-Version Status-Code Reason-Phrase CRLF。其中，HTTP-Version 示意服务器 HTTP 协定的版本；Status-Code 示意服务器发回的响应状态代码；Reason-Phrase 示意状态代码的文本形容。状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。
1xx：批示信息 – 示意申请已接管，持续解决。
2xx：胜利 – 示意申请已被胜利接管、了解、承受。
3xx：重定向 – 要实现申请必须进行更进一步的操作。
4xx：客户端谬误 – 申请有语法错误或申请无奈实现。
5xx：服务器端谬误 – 服务器未能实现非法的申请。
各类型常见状态代码、状态形容的阐明如下：
200 OK：客户端申请胜利。
400 Bad Request：客户端申请有语法错误，不能被服务器所了解。
401 Unauthorized：申请未经受权，这个状态代码必须和 WWW-Authenticate 报头域一起应用。
403 Forbidden：服务器收到申请，然而回绝提供服务。
404 Not Found：申请资源不存在，举个例子：输出了谬误的 URL。
500 Internal Server Error：服务器产生不可预期的谬误。
503 Server Unavailable：服务器以后不能解决客户端的申请，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。
2.2.2. 响应头
和申请报文的申请头相似，响应头也由键值对组成，每行一对，键和值用英文冒号 : 分隔。响应头域容许服务器传递不能放在状态行的附加信息，这些域次要形容服务器的信息和 Request-URI 进一步的信息，典型的响应头有：
Server：蕴含解决申请的原始服务器的软件信息；
Date：服务器日期；
Content-Type：返回的资源类型 (MIME)；
Connection：连贯形式；
close：连贯曾经敞开；
keep-alive：连贯已放弃，在期待本次连贯的后续申请；
Cache-Control：缓存管制；
Expires：设置过期工夫；
Set-Cookie：设置 Cookie 信息。
2.2.3. 空行
作为内容宰割，示意以下不再是响应头的内容。
2.2.4. 响应体
这个是服务器返回给浏览器的响应信息。