本文最后更新于：December 3, 2021 pm

HTML是用于创建网页的语言。我们通过使用HTML标记标签创建html文档来创建网页。HTML代表超文本标记语言。HTML是一种标记语言，它具有标记标签的集合。
HTML标签是由尖括号括起来的词，如<html>， <body>。标签通常成对出现，例如<html>和</html>。
一对中的第一个标签是开始标签;第二个标签是结束标签。在上面的示例中，<html>是开始标签，而</html>是结束标签。
我们还可以将开始标签称为起始标签，结束标签称为闭合标签。
注意：并不是所有的标签都有结束标签的！！！
注意：在本文中，有人民币符号￥的，表示自闭合标签，即不需要结束标签的。

DOCTYPE声明了文档的类型

<html>标签是 HTML 页面的根元素，该标签的结束标志为</html>

<head>标签包含了文档的元数据（meta），如<meta charset=”utf-8”>定义网页编码格式为utf-8。

<title>标签定义文档的标题

<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>

<meta> 字符集设置为UTF-8编码。UTF-8是一种常见的字符编码。涵盖了世界上几乎所有的字符和符号。HTML5的默认字符编码为UTF-8。

1.标题（<h>）

HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的。
六个标题元素，每个元素代表文档中不同级别的内容：
<h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。

用法实例：

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

2.段落（<p>）

HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落。

用法实例：

1 2	`<p>这是一个段落。</p> <p>这是另外一个段落。</p>`

3.空格（ ）

无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空格字符减少为一个单独的空格符，这样做的目的就是为了可读性。

下面的两个代码片段是等价的，实例：

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗        很

       呆 萌。</p>

注意：如果非要用多个空格的话，可以用表示空格，这样写的多个空格会全部表示出来。

用法实例：

1
2
3

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗  &nbsp;&nbsp;&nbsp;很&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;呆 萌。</p>

这样的用法，上面的两个代码片段的效果不是一样的。

4.注释（）

注释是关于 HTML 元素的有用信息。注释使 HTML 文档更易读和可理解。
HTML 中的注释以标签<！– 开头，并以 –> 结尾。
浏览器将忽略您在这些标记中放置的任何内容。

5.元素嵌套

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。HTML 文档由嵌套的 HTML 元素构成。

用法实例：

<html>
<body>
<p>This is my first paragraph.</p> <!--这是注释内容-->
</body>
</html>

6.链接（<a>）

HTML 链接是通过标签<a>来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。在href属性中指定链接的地址。

6.1链接外部

用法实例：

1	`<a href="https://tothefor.com/">这是一个链接</a> <!--这里的链接地址分几种，在后面有记录-->`

6.2链接内部

可以创建超链接，使浏览器窗口中的另一个元素进入视图。可以使用CSS样式ID选择器#id创建内部超链接。

用法实例：

<!DOCTYPE HTML>
<html>
<body>
  <a href="#one">here</a>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br /><!--必须要让页面能够有滚动效果后才能实现，即让页面能够有下滑的空间-->
  <p id="one">This is a test.</p>
</body>
</html>

上面的代码用 href 创建了一个超链接 #one 的值。
当用户单击链接时，浏览器将在文档中查找元素其 id 属性的值为 one ，并跳转到此位置。如果元素不可见屏幕，浏览器将滚动文档以显示它。
如果浏览器不能找到具有所需 id 属性值的元素，它会再次搜索，寻找一个与目标匹配的 name 属性。

6.3相关属性

6.3.1 链接打开方式（target）

默认情况下，浏览器使用显示当前文档的窗口，选项卡或框架显示链接的文档并替换现有文档。即在当前的窗口打开。

_blank - 在新窗口（或选项卡）中打开文档。

_parent - 打开父框架集中的文档。

_self - 在当前窗口中打开文档（这是默认行为）。

_top - 在窗口的整个主体中打开文档。

<frame> - 在指定的框架中打开文档。

7.图像（<img>）￥

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。
请注意：img元素是自关闭元素，不需要结束标记。

用法实例：

1	`<img src="logonew2.png" width="206" height="36">`

7.1相关属性

7.1.1提示信息（alt）

alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

用法实例：

1	`<img src="boat.gif" alt="Big Boat">`

7.1.2宽度高度（height、width）

height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。

用法实例：

1
2

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<!--如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。-->

7.1.3图像边框（border）

使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

用法实例：

1	`<img src="pulpit.jpg" alt="Pulpit rock" border = "3">`

7.1.4图像对齐（align）

默认情况下，图像在页面中将显示为左侧对齐，可以使用align属性将设置图像的对齐方式：left(左侧)或center(居中)或right(右侧)。

用法实例：

1	`<img src="pulpit.jpg" alt="Pulpit rock" align="right">`

1.假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。
2.加载图片是需要时间的。

7.2图像映射

创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。不同点击有不同的效果。
map标签用来定义图像地图。area用来定义图像地图中的可点击区域，即可以在图像上划分区域，这些区域是可以点击的，并且对应不同的操作。

用法实例：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.gif"> 
<area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif"> 
<area shape="circle" coords="124,58,8" alt="Venus" href="venglobe.gif">
</map>
<!--三个不同的区域，点击实现不同的效果-->
其中：
coords 属性规定区域的 x 和 y 坐标。与 shape 属性配合使用，来规定区域的尺寸、形状和位置。图像左上角的坐标是(0,0)。

8.链接地址的几种方式

首先，所建HTML文档T在 C://User/HTML 目录下，并且该目录下还有一张图片A和另一个HTML文档B。

8.1相对地址

如果文档T需要用到A或B，可以直接在链接处写A或B的名称（包括后缀名）。如：

1	`<img src="A.png" width="206" height="36">`

8.2绝对地址

若需要链接其他的，需要写全链接地址，如：

1	`<img src="C://User/HTML/A.png" width="206" height="36">`

如果所需文档或链接等不在本目录下，而在上一目录文件下，则可以用 ../ 来实现访问上一目录，再进入所需要的文件即可。如：在C://User/ 目录下还有一个test文件夹，里面还有一张图片C，则访问它需要 <img src=”../test/C.png” width=”206” height=”36”> ，这是相对访问，如果用绝对访问，直接写链接即可，即 C://User/test/C.png

8.3外部链接

即，可以正常访问的网页等。如：

1	`<a href="https://tothefor.com/">here</a>`

9.换行（<br>）￥

用法实例：

<br>

10.水平分割线（<hr>）￥

<hr>

11.文字样式

11.1 <strong> 与 <b>

11.2 <em> 与 <i>

通常标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。

11.3 上标与下标

1	`这是 <sub> 下标</sub> 和 <sup> 上标</sup>`

12.实体

实体是浏览器替换特殊字符的代码。有一些字符在HTML文档中有特殊的含义，例如< 和> 字符。要在内容中使用这些字符而不被解释为HTML，您可以使用HTML实体。

部分常用实体：
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| ——– | —————– | ——– | ——– |
| | 空格 |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| ¢ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |

13.属性

属性是为 HTML 元素提供的附加信息。

HTML 元素可以设置属性。
属性可以在元素中添加附加信息。
属性一般描述于开始标签。
属性总是以名称/值对的形式出现，比如：name=”value”。

实例：

1	`<a href="https://tothefor.com/">这是一个链接使用了 href 属性</a>`

13.1适用于大多数HTML元素的属性

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

14.搜索引擎关键词（<meta>）

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

用法实例：

//meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
//meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />

15.样式（<style>）

用法实例：

<style type="text/css">        
body {background-color:yellow}        
p {color:blue}        
</style>

16.加载脚本（<script>）

17.使用CSS

CSS 可以通过以下方式添加到 HTML 中：

内联样式- 在 HTML 元素中使用 “style” 属性

内部样式表 -在 HTML 文档头部 <head>> 区域使用 <style> 元素来包含 CSS

外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用 CSS 文件。

17.1 内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式，你可以在 <head> 部分通过 <style> 标签定义内部样式表。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

实例一：

<!--改变段落的颜色-->
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

实例二：

<!--背景颜色-->
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

实例三：

1
2
3

<!--字体颜色 ，字体大小-->
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

现在通常使用 font-family（字体），color（颜色），和 font-size（字体大小）属性来定义文本样式，而不是使用 <font> 标签。

17.2 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。可以在 <head> 部分通过 <style> 标签定义内部样式表：

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

17.3外部引用

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点（或全部页面）的外观。

1
2
3

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"><!--href地址为外部样式链接的地址-->
</head>

18.表格（<table>）

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字会自动加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

用法实例：

<table>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
</table>

18.1相关属性

18.1.1边框（border）

如果不定义边框属性，表格将不显示边框。如果我们希望显示边框，使用边框属性border来显示一个带有边框的表格。

用法实例：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

18.1.2表头单元格（<th>）

表格的表头单元格使用<th>标签进行定义。表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。大多数浏览器会把表头显示为粗体居中的文本。

用法实例：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

18.1.3表格标题（<caption>）

　在<table>标签中我们可以使用<caption> … </ caption>标签作为标题，并在表的顶部显示出来。
　但需要注意的是：此标签在较新版本的HTML / XHTML中已弃用

用法实例：

<table border = "1">
<caption>这是标题</caption>
    <tr>
    	<td>row 1, column 1</td><td>row 1, columnn 2</td>
    </tr>         
    <tr>
    	<td>row 2, column 1</td><td>row 2, columnn 2</td>
    </tr>
</table>

18.1.4表格高度和宽度

在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。也可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

用法实例：

<table border = "1" width = "400" height = "150">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

18.1.5表格背景

可以使用以下方法之一设置 HTML 表格的背景：

bgcolor属性：可以为整个表格或仅为一个单元格设置背景颜色。

background属性：可以为整个表设置背景图像或仅为一个单元设置背景图像。

bordercolor属性：可以设置边框颜色。

注意的是：HTML5 中不推荐使用bgcolor，background和bordercolor属性。

用法实例：

<table border = "1" bordercolor = "green" background = "test.png">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>

18.1.6表格间距

以下两个属性，用于调整 HTML 表格中单元格的空间：

cellspacing属性：定义表格单元格之间的空间

cellpadding属性：表示单元格边框与单元格内容之间的距离

用法实例：

<table border = "1" cellpadding = "5" cellspacing = "5">
    <tr>
        <th>Name</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>其琛</td>
        <td>5000</td>
    </tr>
    <tr>
        <td>曼迪</td>
        <td>7000</td>
    </tr>
</table>

18.1.7合并单元格

可以将多行（或列）进行合并成一行。

如果要将两个或多个列合并为一个列，将使用colspan属性。

如果要合并两行或更多行，则将使用rowspan属性。

<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
   		<td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>

18.1.8表格的头部、主体、页脚

表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。
头部，主体和页脚的对应的三个标签是：

<thead> - 创建单独的表头。

<tbody> - 表示表格的主体。

<tfoot> - 创建一个单独的表页脚。

表可以包含多个<tbody>元素以指示不同的页面。
但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前。

用法实例：

<table border = "1" width = "100%">
    <thead>
        <tr>
        	<td colspan = "4">This is the head of the table</td>
        </tr>
    </thead>       
    <tfoot>
        <tr>
            <td colspan = "4">This is the foot of the table</td>
        </tr>
    </tfoot>     
    <tbody>
        <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        </tr>
    </tbody>         
</table>

18.1.9表格的嵌套

可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

用法实例：

<table border = "1" width = "100%">
<tr>
    <td>
           <table border = "1" width = "100%">
                            <tr>
                                <th>Name</th>
                                <th>Salary</th>
                            </tr>
                            <tr>
                                <td>其琛</td>
                                <td>5000</td>
                            </tr>
                            <tr>
                                <td>曼迪</td>
                                <td>7000</td>
                            </tr>
           </table>
    </td>
</tr>       
</table>

19.列表

HTML 支持有序、无序和定义列表。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
每个列表项始于 <li> 标签。

19.1无序列表（<ul>）

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表适合成员之间无级别顺序关系的情况。

用法实例：

<ul style="list-style-type:disc"> <!--以小黑点表示-->
<li>Coffee</li>
<li>Milk</li>
</ul>
<!-- 将disc可以换成以下这些类型：
disc ----实心圆（默认）
circle ----空心圆
square ----实心方块
decimal ----以数字1开始表示
-->

除去上面所写类型外，以下表格中的类型用在有序列表中是不正确的，在有序列表中使用时，会自动转化为默认的情况（即数字表示）。

属性值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

19.2有序列表（<ol>）

有序列表也是一列项目，列表项目使用数字进行标记。有序列表适合各项目之间存在顺序关系的情况。列表项项使用数字来标记。

用法实例：

<ol type="A"> <!--不写类型 默认为数字从1开始-->
<li>Coffee</li>      
<li>Milk</li>       
</ol>
<!--也可以是以下类型
A --- 表示以大写字母从A开始
a --- 表示以小写字母从a开始
I --- 表示以罗马数字从I开始
i --- 表示以罗马数字从i开始
⭐需要注意的是，若用非法的(不正确的)类型，会自动转化为默认类型（即从数字1表示）
-->

19.3自定义列表（<dl>）

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

用法实例：

<dl>
    <dt>Coffee</dt>
    	<dd>- black hot drink1</dd>
    	<dd>- black hot drink2</dd>
    <dt>Milk</dt>
    	<dd>- white cold drink1</dd>
    	<dd>- white cold drink2</dd>
</dl>

20.区块

20.1区块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。即会单独占据一行。
如：<h1>, <p>, <ul>, <table>

20.2内联元素

内联元素在显示时通常不会以新行开始。
如：<b>, <td>, <a>, <img>

20.3元素<div>

<div> 标签可以把文档分割为独立的、不同的部分。
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

20.4元素<span>

HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

WEB前端

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/519872696.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

WEB前端-HTML基础知识复习（二） Previous

计算机操作系统-1.操作系统的概念、功能和目标 Next

WEB前端-HTML基础知识复习（一）

目录

0.网页基础

1.标题（<h>）

2.段落（<p>）

3.空格（&nbsp;）

4.注释（）

5.元素嵌套

6.链接（<a>）

6.1链接外部

6.2链接内部

6.3相关属性

6.3.1 链接打开方式（target）

7.图像（<img>）￥

7.1相关属性

7.1.1提示信息（alt）

7.1.2宽度高度（height、width）

7.1.3图像边框（border）

7.1.4图像对齐（align）

7.2图像映射

8.链接地址的几种方式

8.1相对地址

8.2绝对地址

8.3外部链接

9.换行（<br>）￥

10.水平分割线（<hr>）￥

11.文字样式

11.1 <strong> 与 <b>

11.2 <em> 与 <i>

11.3 上标与下标

12.实体

13.属性

13.1适用于大多数HTML元素的属性

14.搜索引擎关键词（<meta>）

15.样式（<style>）

16.加载脚本（<script>）

17.使用CSS

17.1 内联样式

17.2 内部样式表

17.3外部引用

18.表格（<table>）

18.1相关属性

18.1.1边框（border）

18.1.2表头单元格（<th>）

18.1.3表格标题（<caption>）

18.1.4表格高度和宽度

18.1.5表格背景

18.1.6表格间距

18.1.7合并单元格

18.1.8表格的头部、主体、页脚

18.1.9表格的嵌套

19.列表

19.1无序列表（<ul>）

19.2有序列表（<ol>）

19.3自定义列表（<dl>）

20.区块

20.1区块元素

20.2内联元素

20.3元素<div>

20.4元素<span>

3.空格（）