HTML知识点总结（下）

(8)、列表标签

　　列表形式在网站设计中占有比较大的比重，内容显示非常整齐直观，便于理解。HTML 的列表元素是一个有列表标签封装的结构，包含的列表项由 <li> 标签组成。

　　<li> 标签定义列表项目。可用在有序列表 <ol>、无序列表 <ul> 和菜单列表 <menu> 中。可以使用 CSS 来定义列表和列表项目的类型。

　　<ul> 标签定义无序列表。将 <ul> 标签与 <li> 标签一起使用，创建无序列表。可以使用 CSS 为列表定义样式。

　　<ol> 标签定义了一个有序列表。 列表排序以数字来显示，使用 <li> 标签定义列表选项。可以使用 CSS 来定义列表样式。在 HTML5 中增加了一个新属性，reversed 属性用于指定列表倒序（9,8,7...）。

　　有序列表是编号列表，用于对网页中的某些内容进行编号排列，以便使读者清晰的了解每行的顺序。同样，有序列表也是一列项目，列表项目默认使用数字进行标记。有序列表始于 <ol> 标签，每个列表项始于 <li> 标签。<ol> 标签可用 CSS 样式进行定义：type 和 start ，type 用于指定编号的样式，如：1.A.a.I.i。start 用于指定起始编号，如不定义 start，默认使用阿拉伯数字。

　　无序列表是项目列表，列表的内容可以按任意顺序排列，列表项目不是连续编号而是一个特定的符号默认来标记，也就是使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul>标签，<li> 标签是列表项。<ul> 标签可用 CSS 样式定义项目编号的显示，disc 默认的实体圆点，circle 空心圆圈，square 实心方块。

　　将一个列表嵌入到另一个列表中，作为另一个列表的一部分，叫做嵌套列表，无论是有序列表的嵌套还是无序列表的嵌套，浏览器都可以自动的分行排列。HTML嵌套列表使用的标签：<ol> <ul> <li>。

　　有时候无序列表不需要 <li> 标签前边默认的圆点，比如在 HTML 页面布局时，可以使用无序列表创建导航栏选项，那么这时候需要清除他的默认样式，则用 CSS 样式定义：list-style:none。

 

　　自定义列表用于对清单条目进行简短的说明，一个列表可以对应一个或多个说明项，因每个列表项有一个缩进的说明项，与字典的编排有相同的格式，所以有称为“字典列表”。自定义列表不仅仅是一列项目，而是项目及其注释的组合。首标签 <dl> 和 尾标签 </dl> 之间为列表内容，列表项目标签用 <dt>，列表项目的说明用标签 <dd>，通常 <dt> 和 <dd> 是一起出现的。

　　<dl> 标签定义一个描述列表。<dl> 标签与 <dt> 和 <dd> 一起使用。在 HTML4 中，<dl> 标签定义一个定义列表，而在 HTML5 中，<dl> 标签定义一个描述列表。

　　<dt> 标签定义一个描述列表的项目/名字。在 HTML4 中，<dt> 标签定义一个定义列表的条目，而在 HTML5 中，<dt> 标签定义一个描述列表的项目/名字。

　　<dd> 标签被用来对一个描述列表中的项目/名字进行描述。在 <dd> 标签内，可以放置段落、换行、图片、链接以及其他列表等等。在 HTML4 中，<dd> 标签被用来描述一个定义列表中的条目，而在 HTML5 中，<dd> 标签被用来描述一个描述列表的项目/名字。

 

　　<menu> 标签定义了一个命令列表或菜单。<menu> 标签通常用于文本菜单，工具条和命令列表选项，可以使用 CSS 来定义菜单列表样式。HTML4 的 <menu> 元素已废弃，而在 HTML5 中 <menu> 元素被重新定义，并且新增加了2个属性：type 属性值为（list、context、toolbar）用于描述显示菜单的类型，默认值为 "list"，规定一个用户可执行或激活的命令列表（li 元素）。context：规定一个上下文菜单，菜单必须在用户与命令进行交互之前被激活。toolbar：规定一个工具栏菜单，主动式命令，允许用户立即与命令进行交互。label 属性用于描述菜单项的标记。目前几乎没有主流浏览器支持这2个属性。

 

　　<command> (H5) 定义命令按钮，比如单选按钮、复选框或按钮。<command> 标签可以定义用户可能调用的命令，当使用 <menu> 元素时，command 元素将作为菜单或者工具栏的一部分显示出来。但是，用 command 规定键盘快捷键时，command 元素能被放置在页面的任何位置，但元素不可见。注意：目前，主流浏览器都不支持 <command> 标签。label 属性是必需的属性，规定 command 的名字，对用户可见。type 属性用于定义 command 的类型，该属性的值为：command 默认值，规定带有 action 的普通命令。checkbox：使用复选框规定可切换的命令。radio：使用单选按钮规定可切换的命令。disabled 属性规定 command 是否可用。checked 属性规定当页面加载时，command 是否被选中，仅用于 radio 或 checkbox 类型。icon 属性值为 URL 用于规定作为 command 来显示的图像的 URL。radiogroup 属性规定可进行切换且将被切换的 command 所属的组名，仅在类型为 radio 时使用。

 

　　(9)、表格标签

　　表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，还是需要显示边框。可以使用边框属性来显示一个带有边框的表格：<table border="1"><tr><td>100吨</td></tr></table>，若 border=""，则表示无边框。在 HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值为 "" 或 "1"，而且只支持该属性。

　　一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。水平显示的表头，是把所有表头 <th> 标签添加到一个表格 <tr> 标签内，竖直显示的表头，就是把每个表头 <th> 标签添加到每个表格 <tr> 标签内。

　　<tr> 标签定义 HTML 表格中的行。一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。在 HTML5 中，不支持 <tr> 标签在 HTML4 中的任何属性。

　　<th> 标签定义 HTML 表格中的表头单元格。大多数浏览器会把表头显示为粗体居中的文本。<td> 标签定义 HTML 表格中的标准单元格。HTML 表格有两种单元格类型：表头单元格，即包含头部信息（由 <th> 元素创建）。标准单元格，即包含数据（由 <td> 元素创建）。<th> 元素中的文本通常呈现为粗体并且居中，而 <td> 元素中的文本通常是普通的左对齐文本。HTML 5 中不再支持 HTML4 中的某些属性。如果需要将内容横跨多个行或列，可以使用 colspan 和 rowspan 属性！colspan 属性规定表头单元格可横跨的列数。rowspan 属性规定表头单元格可横跨的行数。headers 属性值为 header_id 用于规定与表头单元格相关联的一个或多个表头单元格。scope 属性值为（col、colgroup、row、rowgroup）用于规定表头单元格是否是行、列、行组或列组的头部。<td> 元素除了不支持 <th> 元素的 scope 属性外，其余3个都支持。

　　可以使用 CSS 样式 vertical-align 定义表头单元格内容的垂直排列方式。他的默认值为：baseline 基线对齐。vertical-align:top 顶部对齐。vertical-align:middle 中间对齐。vertical-align:bottom 底部对齐。

 

　　<caption> 标签定义表格的标题。<caption> 标签必须直接放置到 <table> 标签之后，并且只能对每个表格定义一个标题，通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 可用来设置标题的对齐方式和显示位置。caption-side 主要用来规定表格标题的放置方式，默认值为 top，即把表格标题定位在表格之上。caption-side:bottom 规定把把表格标题定位在表格之下。

　　<thead> 标签用于组合 HTML 表格的表头内容。<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。注意：<thead> <tbody> <tfoot>元素内部必须包含一个或者多个 <tr> 标签。<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。在 HTML5 中，不再支持 HTML4 中这3个标签的任何属性。

　　<tbody> 标签用于组合 HTML 表格的主体内容。<tbody> 元素应该与 <thead> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）。<tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。

　　<tfoot> 标签用于组合 HTML 表格的页脚内容。<tfoot> 元素应该与 <thead> 和 <tbody> 元素结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。<tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。

　　<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。注意：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。HTML5 只支持 span 属性用于规定列组应该横跨的列数。

　　<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。在 HTML 中，<col> 标签没有结束标签。HTML5 只支持 span 属性用于规定 <col> 元素应该横跨的列数。

 

　　(10)、插件标签

　　<embed> (H5) 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。src 属性规定被嵌入内容的 URL。type 属性规定嵌入内容的 MIME 类型。width 和 height 属性规定嵌入内容的宽度/高度。

 

　　<object> 标签定义一个嵌入的对象。此元素允许你规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。<object> 标签用于包含对象，比如图像、音频、视频、Java applets（用 Java 编写的可包含在网页中的小应用程序）、ActiveX、PDF 以及 Flash。

　　object 的初衷是取代 img 和 applet 元素，<applet> 元素已被废弃，从其字面来理解就是小程序，主要被用于定义嵌入的小程序。不过由于漏洞以及缺乏浏览器支持，这一点并未实现，浏览器的对象支持有赖于对象类型，不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素，每个对应一个浏览器。

　　name 属性为对象规定名称，type 属性规定对象的 MIME 类型。usemap 属性值为（#加上要使用的 map 元素的名称）用于规定与对象一起使用的图像映射的名称，该属性与 <map> 元素的 name 属性相关联，创建对象和映射之间的关系。width 和 height 属性规定对象的宽度/高度。其余在 HTML4 中定义的属性在 HTML5 中都不被支持，但是新增加了一个属性：form 属性规定对象所属的一个或多个表单。在 HTML5 中，object 可以在 form 表单中提交，并且不再出现在 <head> 元素区域内。

 

　　<param> 标签定义对象的参数。<param> 元素允许为插入文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 <object> 标签提供参数。run-time 是运行电脑的时间，简称运行时，就是系统在运行的时候的一些机制，其中最主要的是消息机制。name 属性定义参数的名称，该属性通常与 value 属性一起使用来规定由 <object> 标签规定的插件的参数，name 属性的值可以是指定对象支持的任何名称。value 属性描述参数值。在 HTML 中，<param> 标签没有结束标签。大部分主流浏览器都支持 <param> 标签，但是 <object> 定义的文件格式并不是所有的浏览器都支持。

 

　　(11)、框架标签

　　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。HTML 框架通过 <iframe> 标签来实现。定义一个内联的 iframe(内联框架/内嵌框架)。

　　语法：<iframe src="URL"></iframe> 该 URL 指向不同的网页。

　　<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档，包括滚动条。你可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。可以使用 CSS 为 <iframe> 定义样式，包括滚动条和移除边框等。src 属性规定在 <iframe> 中显示的文档的 URL。width 和 height 属性规定 <iframe> 的宽度/高度，默认单位为像素，也可以指定其按比例显示（如："80%"）。name 属性规定 <iframe> 的名称。HTML5 废弃了其余在 HTML4 中的一些属性，并增加了新的属性，seamless 属性规定 <iframe> 看起来像是父文档中的一部分。srcdoc 属性值为 HTML_code 用于规定页面中的 HTML 内容显示在 <iframe> 中，即要显示在 iframe 中的 HTML 内容，值必需是有效的 HTML 语法。sandbox 属性用于对 <iframe> 的内容定义一系列额外的限制，它的值为：""(启用所有限制条件)、allow-forms(允许表单提交)、allow-scripts(允许执行脚本)、allow-same-origin（允许将内容作为普通来源对待，如果未使用该关键字，嵌入的内容将被视为一个独立的源）、allow-top-navigation（嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境，如果未使用该关键字，这个操作将不可用）。

　　如果指定了空字符串：sandbox=""，那么该属性对呈现在 iframe 框架中的内容将启用一些额外的限制条件。sandbox 属性的值既可以是一个空字符串，将会启用所有的限制，也可以是用空格分隔的一系列指定的字符串。HTML5 通过 sandbox 属性提升 iFrame 的安全性，该属性可以防止不信任的 Web 页面执行某些操作，还可以防止如下操作：①、防止访问父页面的 DOM。从技术角度来说，这是因为相对于父页面 iframe 已经成为不同的源了。②、防止执行脚本。③、防止通过脚本嵌入自己的表单或是操控表单。④、防止对 Cookie、本地存储或本地 SQL 数据库的读写。

　　<iframe> 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性，如下实例：

<iframe src="index.html" name="iframeA"></iframe>
<p>
<a href="https://keleyi.com" target="iframeA">百度知道</a>
</p>
　　上面的代码中，因为 <a> 标签的 Target 属性是名为 iframeA 的 iframe 框架，所以在点击链接时页面会显示在 iframe 框架中。可自定义一个页面保存为 index.html 用于演示。

 

3、HTML 知识

　　(1)、布局

　　网页布局对改善网站的外观非常重要，需要慎重设计网页布局，常使用 DIV+CSS 的方式进行页面布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样。

　　HTML 页面布局主要使用 <div> 元素，该元素是用于分组 HTML 元素的块级元素。<div> 标签定义文档的区块，<span> 标签定义文档中的节，可用于组合文档中的行内元素。

　　CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护，通过编辑单一的文件，就可以改变所有页面的布局。由于创建高级的布局非常耗时，使用模板是一个快速的选项，通过搜索引擎可以找到很多免费的网站模板，也可以使用这些预先构建好的网站布局，然后对其进行优化。

　　(2)、统一资源定位器

　　统一资源定位器即 URL(Uniform Resource Locators)， Web 浏览器通过 URL 从 Web 服务器请求页面，URL 编码会将字符转换为可通过因特网传输的格式，URL 是一个网页地址，可以由字母组成，如"baidu.com"，或互联网协议(IP)地址： 202.108.22.5。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。当你点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址，一个统一资源定位器(URL) 用于定位万维网上的文档。

　　一个网页地址例子：http://run.zghekuiwu.com/html/index.html　　语法规则：scheme://host.domain:port/path/filename。说明：

　　　　scheme(方案)：定义因特网服务的类型，最常见的类型是 http。

　　　　host(主机)：定义域主机（http 的默认主机是 www）。

　　　　domain(域)：定义因特网域名，比如 baidu.com。

　　　　:port(端口)：定义主机上的端口号（http 的默认端口号是 80）。

　　　　path(路径)：定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

　　　　filename(文件名)：定义文档/资源的名称。

　　常见的 URL Schemes(方案)：http，超文本传输协议，用于以 http:// 开头的普通网页，不加密。https，安全超文本传输协议，用于安全网页，解密所有信息交换。ftp，文件传输协议，用于将文件下载或上传至网站。file，本地计算机上的文件。

　　URL 只能使用 ASCII 字符集来通过因特网进行发送，由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式，URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格，URL 编码通常使用 +(%2B) 来替换空格。

　　(3)、HTTP 方法

　　什么是 HTTP？HTTP 即超文本传输协议，他被设计目的是保证客户端与服务器之间的通信。HTTP 的工作方式是客户端与服务器之间的请求 - 响应协议，即客户端(浏览器)向服务器提交 HTTP 请求，服务器向客户端返回响应，响应包含关于请求的状态信息以及可能被请求的内容。

　　在客户端和服务器端进行数据交互时，有很多种方法，最常被用到的两种方法是：GET 和 POST，GET 是从指定的资源请求数据，而 POST 是向指定的资源提交要被处理的数据。

　　GET 与 POST 的区别：

比较项 GET POST
后退按钮/刷新 不影响 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
对数据长度的限制 当发送数据时，GET 方法向 URL 添加数据，URL 的长度是受限制的，URL 的最大长度是 2048 个字符。 无限制。
书签 可收藏为书签 不可收藏为书签
缓存 能被缓存 不能缓存
历史 参数保留在浏览器历史中 参数不能保留在浏览器历史中
可见性 数据在 URL 中对所有人都是可见的 数据不会显示在 URL 中
安全性 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
　　注意：在发送密码或其他敏感信息时绝不能使用 GET 请求！

　　(4)、HTTP 消息

　　当浏览器从 web 服务器请求服务时，可能会发生错误，最常见的就是 404：服务器无法找到被请求的页面。

　　(5)、HTML 字符集

　　字符集用于规定浏览器正确的显示 HTML 页面，万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。由于很多国家使用的字符并不属于 ASCII，现代浏览器的默认字符集是 ISO-8859-1，如果网页使用不同于 ISO-8859-1 的字符集，就应该在 <meta> 标签进行指定。

　　ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集，但是这些符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准，该标准涵盖了世界上的所有字符、标点和符号，不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。

　　Unicode 联盟开发了该标准的目标是用标准的 Unicode 转换格式 (UTF) 来取代现有的字符集，许多操作系统以及所有的现代浏览器都支持 Unicode 标准，Unicode 可以被不同的字符集兼容，最常用的编码方式是 UTF-8，也是国际编码格式，还有 UTF-16，而 GB2312 是由中国国家标准总局发布的汉字编码字符集，适用于汉字处理、汉字通信等系统之间的信息交换，通行于中国大陆，中国大陆几乎所有的中文系统和国际化的软件也都支持 GB2312。

　　(6)、字符实体

　　在 HTML 中，某些字符是预留的。HTML 中的预留字符必须被替换为字符实体，一些在键盘上找不到的字符也可以使用字符实体来替换。在 HTML 中不能使用小于号（<）和大于号（>），因为浏览器会误认为它们是标签，如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体。如需显示小于号，必须这样写：&lt; 或 &#60; ，如需显示大于号，必须这样写：&gt; 或 &#62;，使用实体名而不是数字的好处是，名称易于记忆，不过坏处是，浏览器也许并不支持所有实体名称，但对实体数字的支持却很好。

　　HTML 中的常用字符实体是不间断空格(&nbsp;)。浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个，如需在页面中增加空格的数量，必须使用：&nbsp; 或 &#160; 。