当我们需要在网页上展示一段话时，就需要用到段落标签P标签了。比如我们需要展示新闻的详情、文章的详情、商品介绍等，这些内容都是由一段一段的内容构成的，那么我们的 P 标签就派上用场了。例如：
P 标签用来定义段落。当我们需要在网页上显示一段一段的内容时，就可以使用 P 标签。每一个段落之间互不影响，为单独的内容。当我们使用了 P 标签来定义段落时，每个段落之间会有上下间隙，而且即使我们的内容很少或者没有占满一整行，那么 P 标签的内容也会自动占满一整行，既除 P 标签以外的内容会自动换行显示。
P 标签为双标签，所以必须有首尾标签。段落的内容既为 P 标签的内容。例如：
如上面所说，P 标签会默认占一整行，即使我们的内容很少，其余的内容也会自动换行，且上下会有间距。比如我们定义以下两个 P 标签：
那么他们在页面上会呈现以下效果：
首先 P 标签被称之为块级元素，块级元素默认占一整行，且可以为之设置宽高。其次 P 标签默认带有样式，上下会有间距（在 CSS 中称为外边距）。就如我们之前所讲到的，每个 P 标签形成的段落之间互不影响，独立成段，所以我们在使用 P 标签的时候，需要事先划分好页面的结构。
P 标签里面可以嵌套其他标签，例如：
P 默认会自带上下边距的样式，如果我们不需要默认样式，可以通过 CSS 来删除或改变它；
P 标签为块级元素，内容会默认占一整行，即使内容很少，所以我们在使用 P 标签的时候，需要事先划分页面结构；
P 标签的应用场景主要为新闻、论坛、商品介绍等网站；
P 标签可以在任何有合适的文本流的地方出现，例如文档的主体中、列表的元素里，但是只能在body标签的范围内。
脱贫全面小康、现代化，一个民族都不能少（节选）
重构的重构 - 《重构》 第二版导读（节选）
P 标签为双标签，必须有尾标签。
P 标签默认占一整行，自带换行效果。
P 标签里面可以嵌套其他标签。
掌握 P 标签的应用场景，在合适的场景使用合适的标签。
我们在上一章节已经学过了段落标签 P 标签，而且我们也学习了 P 标签是可以嵌套其他标签的。当我们定义的段落里，有一些文字或者一句话有单独的样式时，则我们需要单独的处理这些内容，最好的方式则是用 span 标签将这些内容包裹起来。例如：
搜索的网页名称及路径标识，都是通过p标签生成的。
span 标签用来定义文本内容，可以是单独的一句话，一些内容，也可以是段落里面的内容。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。span 标签是不带任何默认样式的，所以它极大的提高了我们可以对文本内容自定义样式的需求。
span 标签为双标签，所以必须有首尾标签。文本的内容既为 span 标签的内容。例如：
SPAN 标签没有默认样式，所以上述内容会在页面上呈现以下效果：
1. span 标签为行内元素，行内元素和块级元素（p标签）不同，默认是在同一排排列，如我们写两个 span 标签，会呈现以下效果：
2. span 不能使用 CSS 为其设置宽高，即使设置了宽高也会无效。
3. span 标签里也可以嵌套其他标签。例如：
4. span 标签的应用场景多数为为某些内容单独设置样式，我们可以用 span 标签将这些包裹起来，这样既单独设置了样式，也不会影响其他内容。当然，如果你想内容在同一排排列，也可以使用 span 标签包裹这些内容。
1. 如果我们这样书写代码，每段代码都换行，例如：
那么两个 span 标签之间左右会有间距，如下图所示：
如何解决这个问题呢，我们只需要讲所有代码写在同一行即可，如：
那么问题就解决了，如下图所示：
2. span 标签为行内元素，不能对其设置宽高属性，如果既想保持行内元素在同一行排列的特性，又想为其设置宽高，我们可以利用 CSS 的 display 属性将其设置为行内块元素即可。
夜猫手记技术文章。
前端开发规范（节选）：
新浪新闻：
span 标签为双标签，它总是成对出现的，需要首尾标签；
span 用于对文档中的行内元素进行组合；
span 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 SPAN 应用样式，那么 SPAN 元素中的文本与其他文本不会任何视觉上的差异；
span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式；
span 标签不会自动换行，他们会在同一行显示，但是左右会有间隙。如想解决此问题，把代码书写在一行即可。
我们这一章节所说的标题标签，和我们之前讲的 title 标签并不是同一个意思，我们这一章节说的标题标签，是指在网页上定义标题，如文章的标题，段落的标题等，而 title 标签特指网页的标题。所有，当我们需要给文章或者段落定义标题时，就需要用到 H 标签了。H 标签分为 H1、H2、H3、H4、H5、H6，H1 位超大标题，然后依次递减，H6 为最小的标题。
H 标签直观的告诉用户，网页哪部分是重要的，哪些是不那么重要的。H 标签通常用来为用户展现网页的结构，由于 H 标签通常会使某些文字比普通的文字大，对于用户来说，便于他们更直观地看出这些文字的重要性，而且可以帮助他们理解标题文字下方的内容。多种渐变大小的标题一开始主要为网页的内容创建分层结构，便于用户直观地浏览网站。当我们需要在页面上，特别是为文章或段落定义标题时，我们就需要用 H 标签了。例如：
而 HTML 给我们提供了从 H1 - H6 6 个选择，让我们可以超大标题到超小标题自由选择，可以适应各种场景。
H1 - H6 标签都为双标签，所以必须有首尾标签。例如：
那么在页面上会呈现以下效果：
H 标签和 P 标签一样，也是块级元素，所以也会默认占一整行；
H 标签有默认样式：字体大小和字体粗细，所有标题标签的字体均为加粗的字体，且字体大小会随 H6-H1 逐渐增大；
H 标签上下也有间距（CSS 中的外边距）。
例如：
H 标签通常用来标题，但是如果想定义文本加粗的内容，也可以使用 H 标签代替；
H 标签有默认样式，如果想清楚该样式，必须借助 CSS 为其设置属性；
H1、H2、H3、H4、H5、H6 作为标题标签，并且依据重要性递减。遵循这样的原则是很有必要的，它能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等；
H1 标签在一个页面中只能使用一次，因为它代表了页面的主标题（这相当于一篇文章不会有很多主标题一样），但是 H2 到 H6 标签可以使用多次，不过建议都是用一次，多次使用会稀释权重。使用 H1 关键词的时候，不要让题头失去可读性，内容要能概括文章主题，要考虑读者的感受。
腾讯新闻
网易云音乐
H 标签均为双标签，必须具有首尾标签；
H 标签从 H1 开始，H6 结束，字体均为加粗，H1 标签字体最大，H6 标签字体最小；
H 标签均为块级元素，既默认占一整行，自带换行效果；
H 标签均有上下边距，既 CSS 中的外边距。
大部分的 HTML 标签都是有默认样式的，如果我们不想使用标签自带的默认样式，那么我们就需要借助 CSS 来清除这些默认样式。那有没有哪一个标签是没有默认样式的呢？答案是肯定的，就是我们的 div 标签。因为 div 标签是没有默认样式的，所以在网页布局时，我们更推荐使用 div 标签去搭建我们网页的结构，这样我们所有的样式都可以自定义了。
div 标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。可定义文档中的分区或节。div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。div 就相当于一个区域，我们把我们网页内容的都放在这个区域里面。
div 元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。div 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由 div 标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
DIV 标签为双标签，所以必须有首尾标签。区域内的内容既为 div 标签的内容。例如：
那么在页面上就会程序一下效果：
\1. div 标签是块级元素，默认占一整行，可以设置宽高。如我们写两个 div 标签，会呈现以下效果：
\2. div 没有任何的默认样式，所以它不会像 P 标签和 H 标签一样，有上下间距。\3. div 标签里面可以嵌套其他任意标签，例如：
\4. 我们可以给 div 设置任意的样式。
\1. 因为 div 标签没有任何的默认样式，所以我们推荐网页时，使用 div 标签。\2. 我们可以给某些单独的标签外层包裹一个 div，比如 img 标签，a 标签，这样方便我们后续为其设置样式。\3. div 为块级元素，默认占一整行，如果想让 div 在同一行排列，可以为其设置 CSS display 属性，或者使用 flex（弹性盒模型）布局。\4. div 可以嵌套任意标签，所以我们可以让其他标签和 div 标签任意组合，来构成我们的网页。
夜猫网官网首页（部分）
京东首页（部分）
div 标签为双标签，它总是成对出现的，需要首标签尾标签。
div 标签用来定义文档中的分区或节。
div 标签可以把文档分割为独立的、不同的部分。
可以使用 div 元素来组合元素，这样就可以使用样式对它们进行格式化。
div 默认占一整行，而且没有任何默认样式。
在之前的章节中，我们学习了块级元素（ p 标签，h 标签， div 标签），行内元素（span 标签），块级元素的特点是默认占一整行，会自动换行，行内元素默认是在同一行排列，如果我们想让两个行内元素换行显示，除了设置 CSS 样式之外，就是使用 换行标签 br 标签了。
如果我们在编写代码时，通过回车让我们的代码换行，但是在页面上并不会产生换行的效果。例如：
在页面上会呈现以下效果：
所以如上图显示，我们的内容并没有产生换行的效果，所以浏览器并不识别回车换行的写法。
如果我们需要达到换行的效果，那么就必须使用 br 标签了。
BR 标签为单标签， 没有尾标签，它有两种写法， 第一种为 <br>, 第二种写法为 <br/>, 两种写法没有任何区别，哪一种都可以使用。
比如我们想实现两个 span 标签换行的效果，我们可以编写一下代码：
我们只需要在两个 span 标签中间加上一个 br 标签，既会产生一下效果：
这样我们就实现了换行的效果，是不是很简单呢。
br 标签会产生换行的效果；
一个 br 标签代表换一行，如果想要换多行，那么就需要使用多个 br 标签；
BR 是单标签，所有没有尾标签，也没有内容。
1.由于 HTML 的作用就是用来给文本添加语义，而 br 标签的语义是不另起一个段落换行，而在企业开发中的一般情况下需要换行都是因为需要另起一个段落，所以在企业开发中很少使用 br 标签；
2.如果想达到换行的效果，我们可以使用块级元素来布局我们的网页。
BootStrap v3 中文网（部分）
Vue 官网 Api（部分）
br 标签为空标签，没有结束标签，可以写成<br>，也可以写成 <br/>；
br 标签用于换行；
一个 br 标签代表换一行，如果需要换多行，就需要写多个 br 标签。
在我们某些特定的场景中，我们需要创建分割线来将我们的文档分隔开，以表示每个区域是单独的区域。这个时候我们就需要借助到 水平线标签 hr 标签了。
hr 标签在 HTML 页面中创建一条水平线。水平分隔线可以在视觉上将文档分隔成各个部分。hr 标签为单标签，其表现形式为一条横线。具体如下图所示：
hr 标签的表现为一条水平线，我们可以用它来分隔文档。而且我们通过给 hr 标签设置属性来达到不同的效果，比如我们可以 hr 标签的宽度、颜色等，来适应我们不同的应用场景。
hr 标签默认宽度为 100%，既整个屏幕的宽度，这时我们就可以通过控制其属性来达到不同的效果，例如：
设置 hr 标签的宽度，效果如下图：
设置 hr 标签的颜色，效果如下图：
hr 标签是块级元素，宽度默认为100%，既整个屏幕的宽度，自带换行效果；
hr 标签表现为一条水平线，默认为黑色；
hr 标签为单标签，没有尾标签；
可以给 hr 标签设置width属性来改变 hr 标签的宽度；
可以给 hr 标签设置color属性来改变 hr 标签的颜色。
hr 标签为单标签，没有内容，也没有尾标签；
因为 hr 标签的表现很固定，所以我们真实场景中需要做分割线的效果，尽量还是使用 CSS 控制；
给 hr 标签设置宽度之后，默认是相对于居中显示，如需要控制其位置，还是需要借助 CSS 。
腾讯新闻
hr 标签为单标签，没有尾标签；
hr 标签为块级元素，默认占一整行，自带换行效果；
可以设置 width 属性来改变 hr 标签的宽度；
可以设置 color 属性来改变 hr 标签的颜色；
hr 标签可以用于分隔文档。
我们在很多时候都需要列表属性，列表通常分为有序列表和无序列表。这一章节我们就先来介绍无序列表。无序列表，顾名思义就是没有顺序的列表，每一个列表项没有前后顺序之分，呈同级关系。例如以下效果：
如果在 HTML 当中想要呈现无序列表的效果，那么我们就需要 ul 和 li 标签了。
我们在之前的章节中介绍过，理论上标签与标签之间是可以任意嵌套的。但是 ul 和 li 标签比较特殊，ul 标签里只能嵌套 li 标签。ul 代表整个列表，li 标签代表无序列表的每一个选项。我们可以把 ul 标签 理解为一个壳，里面嵌套着 li 代表的选项。如下图所示：
ul li 标签用来定义无序列表，但 ul li 标签会有默认样式，所有的列表选项前面会有一个实心的圆点，如想修改该圆点的样式，需要借助 CSS 样式。通常无序列表代表每一个选项没有特定顺序，呈同级关系，且相互之间没有影响。无序列表不仅可以代表列表选项，也可以用来导航栏、侧边栏等的显示。
ul 标签代表整个列表，里面只能 li 标签，li 标签代表列表的每一项；
ul li 标签的程序方式默认为竖向排列，如想横向排列，需要借助 CSS ；
ul li 标签列表项前默认会有一个实心黑点的样式；
每一个列表项并无顺序，呈同级关系；
li 标签里可以再嵌套 ul 标签，如 li 标签嵌套了 ul 标签，内层列表的默认样式会改变，为黑色空心点，具体如下图所示：
ul 标签里只能嵌套 li 标签， 而 li 标签里可以嵌套任意标签；
ul 和 li 均为双标签，都有首尾标签；
ul 和 li 默认为竖向排列；
li 标签默认样式为前面有一个黑色实心点。如内层 还有 li 标签，默认样式为黑色空心点。
淘宝网（部分）
京东（部分）
ul li 标签代表无序列表， ul 代表列表整体，li 代表列表的每一个选项。
ul 标签里面只能嵌套 li 标签， li 标签可以嵌套任意标签。
ul li 标签默认为竖向排列。
ul li 标签默认样式为每个列表选项前有一个黑色实心点。
我们在上一章节学习了无序列表，这一章节我来学习列表的另一种分类：有序列表。有序列表，顾名思义就是有顺序的列表，每一个列表项有前后顺序之分，呈先后排列关系。例如以下效果：
如果在 HTML 当中想要呈现有序列表的效果，那么我们就需要 ol 和 li 标签了。
我们在之前的章节中介绍过，理论上标签与标签之间是可以任意嵌套的。但是 ol 和 li 标签比较特殊，ol 标签里只能嵌套 li 标签。ol 代表整个列表，li 标签代表有序列表的每一个选项。我们可以把 ol 标签 理解为一个壳，里面嵌套着 li 代表的选项。如下图所示：
ol li 标签用来定义有序列表，但 ol li 标签会有默认样式，所有的列表选项默认以阿拉伯数字 1，2，3 开始排列，如想修改列表的排列的样式，可以设置 ol 的 type 属性。通常有序列表代表每个列表选项之间都顺序排列。适应于排行，通知等实际场景。
ol 标签代表整个列表，里面只能 li 标签，li 标签代表列表的每一项；
ol li 标签的程序方式默认为竖向排列，如想横向排列，需要借助 CSS ；
ol li 标签列表项前默认以阿拉伯数字 1、2、3…排列；
每一个列表项有顺序；
li 标签里可以再嵌套 ol 标签，如 li 标签嵌套了 ol 标签，内层列表的默认排列方式不会改变，具体如下图所示：
这样代表外层的列表的第一个选项又是一个列表。
如果想改变 LI 列表选项的排列方式，可以设置 ol 的 type 属性， type 属性的可选值为 1、A、a、I、i，默认为1。
如果设置 ol type 属性为 A，则列表排列方式为 A、B、C…的英文大写字母排列，如下图：
如果如果设置 ol type 属性为 a，则列表排列方式为 a、b、c…的英文大写字母排列，如下图：
如果如果设置 ol type 属性为 i，则列表排列方式为 i、ii、iii、iv…的小写罗马数字排列，如下图：
如果如果设置 ol type 属性为 I，则列表排列方式为 I、II、III、IV…的大写罗马数字排列，如下图：
ol 标签里只能嵌套 li 标签， 而 li 标签里可以嵌套任意标签。
ol 和 li 均为双标签，都有首尾标签。
ol 和 li 默认为竖向排列。
li 标签默认排列方式为阿拉伯数字 1、2、3…排列。如内层 还有 li 标签，默认排列方式不变。
如果想改变排列方式，可以设置 ol 标签的 type 属性。
因为 ol 的type属性比较多，可以根据实际需求来设置。
内部通知
ol li 标签代表有序列表， ol 代表列表整体，li 代表列表的每一个选项。
ol 标签里面只能嵌套 li 标签， li 标签可以嵌套任意标签。
ol li 标签默认为竖向排列。
ol li 标签默认排列方式为1、2、3…。
可以设置 ol 的 type 属性来改变列表项的排列方式。
在我们的网页当中，图片肯定是必不可少的元素，有了图片之后，我们的网页网站就会变得更加的丰富起来。那么我们要在 HTML 当中插入图片的话，就会用到我们的 img 图片标签了。例如：
img 标签为单标签，所以没有尾标签。而 img 标签有一个 必填的属性：src 属性，代表图片的路径。图片的路径可以为图片的相对路径，绝对路径和网络路径。这里我们以网络路径示范：
会呈现以下效果：
img 标签还有一个属性为 alt 属性，alt 属性表示错误提示，如果图片的路径既 src 属性的地址出错时，会显示 alt 属性的内容，我们把上面例子稍微修改一下，把路径写错，既：
则会在页面上呈现以下效果：
如果图片路径出错，那么就不会显示对应的图片，而会显示一个图片加载失败的样式。这时候我们编写的 ALT 属性里面的内容也会呈现在页面上，就表示我们当前这张加载失败的图片的错误提示。
注意：
alt 属性的内容只会在图片加载失败时显示，既图片路径出错时，如果图片加载成功，则 alt 属性的内容会自动隐藏。alt 属性起到一个提示作用，如果我们在编写代码时，不小心把图片路径写错，则会提示我们该张图片为哪一张，具体内容是什么。而 alt 属性还有一个重要的作用就是网站的 SEO 作用 （搜索引擎爬取网页的内容），假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
网速太慢；
src 属性中的错误；
浏览器禁用图像；
用户使用的是屏幕阅读器。
其重要性主要有：网页内容相关性是关键词优化的前提，搜索引擎认为，网页上的图片应该与网页主题相关。
反过来讲，当搜索引擎要判断网页的关键词时，图片的 alt - 代替属性是一个可信任的参考点。所以， 别忘了在图片的 alt - 代替属性。
img 标签还可以设置 width 和 height 属性来改变图片的宽高，例如：
则会呈现以下效果：
图片的宽高为 100 * 100。
Tips：IMG 标签的
width和height属性的值为数字，一般情况下为正整数。
img 标签为单标签，没有尾标签；
img 标签的 width 和 height 都不要写单位，直接写数字即可；
src 是 img 标签的必填属性。
百度搜索（部分）
淘宝网（部分）
img 标签为单标签，没有尾标签。
img 标签的 src 属性为必选项，其余属性为可选项。
img 标签可以嵌套在任意标签里。
img 标签图片路径可以为图片的相对路径，绝对路径和网络路径，通常情况下我们采用相对路径。
我们在很多应用场景需要点击标签而跳转到一个新的网页，比如点击文章标题进入到文章详情，点击商品名称进入到商品详情，这个时候我们就需要用到超链接标签 a 标签了， a 标签页成为了我们在实际网站开发过程中，用的比较多的标签。
注意：
本章节只能展示 a 标签在网页上呈现的效果，实际跳转效果需自己编写代码操作。
a 标签为双标签，需要有首尾标签。a 标签的 href 属性为必填属性，表示该 a 标签点击过后跳转网页的地址。例如：
在网页中会呈现以下效果：
注意:
a 标签的 href 属性必须添加网络协议，如：HTTP 或者 HTTPS 协议，一般为 HTTPS 协议，不能单纯的编写网址；
a 标签有很多默认样式，默认字体为蓝色，文本有下划线，点击过后，字体变为偏紫色；
a 标签默认在本页面跳转，既不会新开一个网页跳转；
a 标签的 href 属性如果为错误的网络地址，则页面会跳转，但不会显示网页的内容。
a 标签还有一个属性为 target，表示跳转的网页为在当前页面跳转，还是新开一个页面跳转。默认值为 _self, 表示为在当前页面跳转，如果将 a 标签的 target 属性设置为 _blank，则表示新开一个网页跳转，代码如下：
a 标签的 target 属性为可选属性。
我们如果是编写新闻类网站或者电商类网站，有一个需求是点击图片也可以跳转到对应的详情页面，这个时候就需要用到图片链接了。其实图片链接非常简单，我们只需要在 a 标签中嵌套一个 img 标签即可，这样就可以实现点击图片跳转网页了。
a 标签还有一个重要的功能，那就是锚点定位。什么是锚点定位呢？通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。那么 a 标签实现锚点定位，需要两个部分组成：锚记 和 指向锚记的链接。有以下方法：
\1. 方法一：使用 a 标签作为锚记和链接，俗称使用 name 定位，代码如下：
被点击的 a 标签的 href 属性需要和目标位置的 a 标签的 name 属性对应，而且被点击的 a 标签的 href 属性必须加上 # ，但是很多时候锚点对象不一定是 a 标签，那就不必要为了使用锚点定位而额外增加一个 a 标签了。
\2. 方法二：使用 a 标签作为链接，使用其他元素（建议使用块元素）作为锚记，俗称 id 定位，代码如下：
被点击的 a 标签的 href 属性必须和目标位置的 HTML 标签的 id 名一致，而且被点击的 a 标签的 href 属性也必须加上 # 。需要注意的是，目标位置的 HTML 元素最好是块级元素。
a 标签为双标签，有首尾标签；
a 标签必须写内容，否则在页面上不会显示；
a 标签的 href 属性为必填属性，表示跳转网页的地址；
a 标签的 target 属性为可选属性，表示是在当前页面跳转还是新开一个页面跳转，默认在当前页面跳转；
A 标签有一些默认样式。
通常情况下我们会清除 a 标签的默认样式；
如果我们不想 a 标签跳转页面，我们可以设置 HREF 属性为 # 或者 javascript:;；
我们也可以通过 js 阻止 a 标签的默认事件，这样 A 标签页不会跳转页面；
a 标签为行内块元素，默认在同一行排列，可以设置宽高，所以我们通常用来做导航栏。
思否论坛首页
京东首页（部分）
a 标签为双标签，有首尾标签，且必须有内容。
a 标签必须填写 href 属性，href 属性为跳转的地址路径。
a 标签为行内元素，不可以设置宽高，且在一行排列。
a 标签通常用于制作导航栏。
a 标签设置 target 属性来设置跳转页面的打开方式。
表格在我们的网页中是非常常见的，比如我们要展示商品信息，工作安排，产品参数等都需要用到表格。那么在 html 中，使用表格就需要用到 table 标签了。但是表格不仅是 table 一个标签，需要用到和表格相关的一组标签，这一小节我们就来学习这些标签吧。
在使用表格标签之前，我们需要先认识一下在 html 中表格是由哪些结构构成的。一般情况下，表格都表头、表身构成。表头里面放每一列对应的字段，一般是一个描述，如姓名、年龄等，表身则放每一个表头对应的具体的值，如张三对应表头的姓名，20 对应表头的年龄。表格有行和列的概念，行就代表一个数据的所有属性，比如姓名：张三，年龄：20，而列则表示一个表头对应的所有数据，比如姓名这一列就只有姓名，如张三、李四等。通常情况下，我们都是先确定表头，然后再确定每行对应表头的具体数据。
想要编写表格，需要用到表格的一组标签。table 标签表示表格整体，类似 ul 和 ol 表示列表整体一样。在 table 标签里， thead标签表示表头， tbody 标签表示表示。在 table 表头中， tr 标签代表行， th 标签代表表头的每一项。在 tbody 标签中， tr 标签代表行， td 标签代表每一个表头对应的具体数据。代码如下：
效果如下:
我们可以给表格添加 border属性给表格添加边框，border属性的值为正整数，默认为 0，则无边框，我们把border 设置为 1，代码如下：
则会呈现以下效果：
我们还可以给 table 设置cellpadding来使用单元格填充来创建单元格内容与其边框之间的空白，cellpadding值也是正整数，我们把表格的 cellpadding设置为 10，代码如下：
则效果如下：
我们还可以给 table 设置cellspacing来设置单元格与单元格直接的距离，cellspacing值也是正整数，我们把表格的 cellspacing设置为 10，代码如下：
效果如下：
我们也可以为表格添加标题，那么我们就需要在 thead 标签前加上 caption 标签，而 caption 标签的内容则是表格的标题，代码如下：
效果如下：
tr 标签只能嵌套 th 和 td 标签，不能嵌套其他标签；
tr 代表表格的每一行；
td 标签的内容必须和表头的信息对应。
北京大学官网
表格的结果为表头和表身，可以为表格添加标题。
thead 代表表头，tbody 代表表身， thead 嵌套 tr 和 th， tbody 里嵌套 tr 和 td。
tr 里只能嵌套 th 和 td， th 一般用来表示表头，有加粗的样式。td 代表表头对应的具体数据。
原生的表格样式比较丑，我们可以通过 CSS 为表格设置样式。
输入框是我们网页中常见的元素，登录、注册、个人资料、收货地址等都需要用到输入框。而在 HTML 中，输入框的类型和属性都有很多，我们可以根据实际需求来决定使用哪一类输入框。
在 HTML 中， input 标签表示输入框，而输入框有很多类型，比如普通文本输入框、密码框、邮箱框（只能输入邮箱格式的内容）、网址框（只能输入框网址格式的内容）、数字框（只能输入数字）、单选框、多选框等。我们可以改变 input 标签的 type 属性来显示不同的输入框类型。
input 的类型有很多，我们依次为大家介绍。
普通输入框既可以输入任意内容，没有格式和内容要求。代码如下：
效果如下：
input 标签的 type 属性默认为text。
把 input 的 type 属性设置为 password则表示密码框。密码框既输入的内容为密文显示，呈现的效果为实心黑点，不会显示具体的输入内容。代码如下：
效果如下：
把 input 的 type 设置为 email则表示邮箱框，那么输入的内容会有规则限制，输入的内容必须包含 @，且 @ 后必须有内容才满足验证规则，否则会有错误提示。代码如下：
效果如下：
把 input 的 type 设置为 url则表示网址框，那么输入的内容会有规则限制，输入的内容需要以 http:// 或者 https:// 开头 ，且 @ 后必须有内容才满足验证规则，否则会有错误提示。代码如下：
Tips：这里的网站和我们平时输入的网站不同，前面必须加上网络协议，既 http:// 或者 https://
把 input 的 type 设置为 number则表示数字框，那么就只能输入数字，输入其他字符无效，且输入框最右侧会有加减按钮。代码如下：
效果如下：
把 input 的 type 属性设置为 radio则表示单选框，因为 input 标签是单标签，所有单选框的内容直接写在 input 标签后面，如果单选框有多个选项，则需要写多个 input 标签，且每个 input 标签必须添加 name 属性，否则不能成为一组的单选框（既可以选多个）。代码如下：
效果如下：
单选框可以添加 checked 属性，表示默认选中一项。代码如下：
效果如下：
Tips：如果给多个单选框设置
checked属性，则会默认选中最后一个设置checked属性的选项。
把 input 的 type 属性设置为 checkbox，则表示多选框。多选框和单选框一样，需要设置 name属性，且多选框也可以设置 checked 属性表示默认选中，多选框的 checked 属性可以设置多个。代码如下：
效果如下：
INPUT 标签可以设置 placeholder属性为占位符。占位符的作用为输入提示，如果输入框没有内容，则会显示占位符的内容，一旦输入框有内容，则会显示输入框的内容，占位符的内容消失。代码如下：
效果如下：
单选框和多选框必须给 name 属性，name 属性的值为自定义内容；
邮箱框和网站框对输入内容有限制，需按照其验证规则输入正确的内容；
占位符一般为输入提示，所以占位符的内容为此输入框的提示，输入内容后消失。
京东
简书官网
改变 input 的 type 属性来设置输入框不同的类型。
单选框和多选框需要设置 name 属性。
邮箱框、网站框需要按照一定规则书写内容。
输入框类型比较多，可以根据实际需求决定使用哪个类型。
label 标签的作用为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如：
label 需要和 input 标签搭配一起使用。LABEL 标签的 for 属性需要和 input 的 id 属性一致，这样才能点击 label 标签的内容使对应的 input 输入框自动获取焦点。代码如下：
效果如下：
表单控件都是内联元素所以他俩会在一行显示。在网页中当我们点击 label 标签的内容或文本框时都会在文本框中出现光标，这个就是 label 标签的功能了。说白了 label 标签就是他所关联的表单控件的延伸，即鼠标点击了他，就会出现和点击他所关联的表单控件一样的效果。而这前提是 label 的 for 属性的属性值与想要关联的表单控件的 id 一样。
除了增强用户体验外，还为行动不便人士上网提供了便利。比如说，视力障碍者是借助“网页朗读器”发出的声音来浏览网页的，若没有 label 标签的关联，上网者就在脑海中不能想象出那种对应性，不能很好理解网站表单所想表达的内容。再比如，肢体有缺陷的上网者对于鼠标的控制是很辛苦的，运用label后点击的目标变大了，有利于操作。
label 标签里面需要写内容，才会在页面显示。
label 标签的 for 属性必须和 input 输入框的 id 一致。
京东
拼多多
label 标签一般和 input 一起使用。
label 标签的内容会和 input 在同一排显示。
点击 label 标签的内容，会让 input 输入框获取焦点。
label 标签的 for 属性必须和 input 的 id属性一致。
文本域既表示一个文本的区域，通俗来说就是可以一个区域内，可以输入多行文本，普通的输入框只能输入单行文本。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。比如网站中的评论、留言等功能都可以使用 textarea 文本域标签来实现。
我们直接书写 textarea 标签既代表文本域标签，代码如下：
效果如下：
我们可以通过可以通过 COLS 和 ROWS 属性来规定 textarea 的尺寸。cols 设置文本域的宽度，rows 设置文本域的高度。代码如下：
效果如下：
需要注意的是，文本域的右下角有一个可以拖拽的区域，可以通过拖拽来改变文本的宽高，如果想要取消这个功能，需要通过 CSS 样式来取消。
文本域也可以设置 placeholder 属性来实现占位符的效果，用法和作用和 input 的 placeholder 属性一样。
效果如下：
效果如下：
文本域可以设置 cols 和 rows 属性来改变文本域的宽高，不过更好的办法是使用 CSS 的 height 和 width 属性;
文本域默认右下角有一个可以拖拽区域，通常情况下我们不需要这个功能，所以需要借助 CSS 来取消这个功能。
简书
夜猫编程
文本域为双标签，如果在文本域的标签当中写内容，则内容会出现在文本域中。
文本域可以通过设置 cols 和 rows 来改变文本域的宽高。
文本域可以设置placeholder 属性来添加占位符。
下拉菜单也是我们在网页中比较常见的场景。如果我们的选项过多，如果是放单选框或者多选框的话，会造成页面显示不太优雅，会铺放很多的选项。这个时候我们使用下拉菜单是最合适不过的。下拉菜单可以提供很多选项，是比较方便的一种操作。例如以下情况：
使用下拉菜单一方面列表框为用户输入数据提供了一种便捷方式，只要把已知的数据项列举出来，用户在列表框中选择列表项就可以；另一方面可以把需要搜集的数据规范化，防止因用户输入数据的随意性而造成后端处理数据的混乱。例如，在搜集用户个人信息时，可能需要用户输入职业信息，后端程序需要按照职业信息对用户进行职业分类。在这种情况下，采用列表框元素就是比较好的获取用户数据的方式，可以预先规划好职业信息，把规划好的职业信息以列表框方式展现给用户，用户只需要选择列表项就可以了，无需让用户输入职业信息。
select option 标签和 ul li 标签类似，select 标签代表下拉菜单整体，而 option 则是下拉菜单的每一个选项，代码如下：
效果如下：
我们可以给给 option 标签设置 disabled属性，代表当前选项是禁用项，不能选择的，代码如下：
我们也可以给 option 标签设置 selected属性来表示默认选中的选项，代码如下：
效果如下：
下拉菜单默认宽度为选项内容宽度撑开，如果想设置下拉菜单的样式，可以借助 CSS 。
select 标签里面只能嵌套 option 标签，不能嵌套其他标签；
为了增强用户体验，我们一般把下拉菜单的第一项设置为请选择，然后设置为默认选项。
夜猫编程
京东官网
select 标签表示下拉菜单整体，option 标签表示下拉菜单的每一个选项。
select 标签里只能嵌套 option 标签。
设置 option 标签的 disabled属性，可以禁用该选项。
设置 option 标签的 selected 属性，可以默认选择该选项。
表单是我们网页中常见的场景，比如登录、注册，填写个人信息，填写收货地址等。在 HTML 当中创建表单和表格一样，也是需要一组标签，而且表单的属性和表单的元素都比较多，我们可以根据实际需求来定制我们的表单内容。表单里可以嵌套各个类型的输入框，比如普通输入框、密码框等，也可以嵌套单选框、多选框以及下拉菜单。
form 标签和 ul select 标签类似，代表表单整体，而里面嵌套的元素则是表单具体的内容。我们来做一个用户名和密码的表单，这需要用到之前我们讲的 label 标签和 input 标签的知识，代码如下：
效果如下：
表单呈现的形式和普通输入框无异，但它的作用就是我们要做提交表单的操作（既我们需要把用户输入的信息传给后台），那么普通的输入框就做不到这个功能了。那么提交表单的时候，我们可以给 form 标签加上一个 method 属性，这个属性表示当前提交表单的方式，一般为 get 或者 post，这个需要后台先行告知。form 标签还有一个 action 属性，表示表单提交的地址，这个也需要后台先行告知。
我们在编写表单时，需要先行和后台人员沟通，以获取到表单的提交方式和提交地址；
表单里面可以嵌套多个元素，这个需要根据实际需求来决定；
所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 form 标签之间（否则用户输入的信息可提交不到服务器上）。
京东
简书官网
form 标签代表表单整体，在页面上并无特殊样式显示。
form 标签里面嵌套的内容是表单的内容，可以是输入框、单选框、多选框、下拉菜单、文本域等。
form 标签需要设置 method属性，为提交表单的方式。
form 标签需要设置 action属性，为提交表单的地址。
联系客服
