换行标签

:表示将后续内容转移到新行上

:H5 新增的，表示当长度超过当前浏览器窗口的内容适合在此换行。

两者都是换行，前者是强制换行，后者是建议在这里换行，但什么时候换行，由浏览器根据当前窗口大小决定，后者通常用于指定单词的换行。

I am dasu, and i am coding. I am ...

标签用于表示段落，标签围起来的文本内容表示一个段落。

因为浏览器会忽略所有的空格、缩进、换行，最多只会解析成一个空格，所以，即使文本内容的段落结构很好，但经由浏览器解析出来后的文本内容全部都挤到一堆。

因此，

段落标签还是很有必要的。

可以用此来标记哪些文本内容作为一个段落。

用法见上例。

标签用于保留源文档中的格式。

标签用于表示代码块。

由于浏览器会合并空白字符，忽略掉换行，导致如果文档中含有代码块时显示不符合开发工具下的代码格式风格。

此时，可以借助 标签和 一起使用，来阻止浏览器合并空白字符，达到保留代码格式的目的。

标签用于表示有序列表， 标签用于表示列表中的每一项。

ol1

既然是有序列表项，那么序号的起始以及样式是支持通过属性设定的，如下：

ol2

通过 start 属性设置起始的编号，通过 type 属性设置编号的样式，可设置的 type 样式如下 :

ol3

如果要实现编号是非连续的，那么可以借助 标签的 value 属性实现 ：

ol4

注：每个 ol 列表项都是独立存在，编号默认都从 0 开始，如果想实现不同列表项的编号连贯，或者想以跨度 2 或其他数递增，那么只用标签属性实现局限很多。这时，可考虑通过 CSS 的 ::before 选择器实现，具体实现后续再说。

标签用于表示无序列表， 标签表示列表里的每一项.

ul

因为是无序列表，所以用法比起有序列表 简单很多，无需使用任何属性，直接用无序标签 包含一系列子项 即可。

至于，每一项前的样式，可通过 CSS 样式，通过 list-style-type 属性实现，以上样式对应的 CSS：

标题标签，对应一级到六级标题。

p

至于每个标题具体字号样式如何，取决于各个浏览器或者网站。

表格标签，但貌似现在不常用了。

HTML 文档做一个表格挺复杂的，涉及的标签很多，如 , , 等等。

但根节点总是 ，一份表格无外乎就是各种单元格组成，而单元格标签为 ，另外，浏览器解析表格文本时，是以行为单位来构建表格，并不是列，所以每个单元格都需要指定位于哪一行中，行标签为 。而所有行的单元格都是表格的主要内容，因此都在 标签中。

以上是表格的最基本要素，因此一张最简单的表格，至少需要 ，，， 三种标签。

table

有时候，写表格标签时，如果没有其他表头 部分，或者表脚 时，会将 省略，但这并不是说就可以不用 标签，而是很多浏览器会自动将 填补上，所以如果有省略 的场景下，使用 css 选择器时得稍微注意一下。

由于浏览器是以行为单位构建表格，所以一个表格有多少行就是通过 标签来控制，哪些单元格属于哪一行，就放在那一行的 标签中。

虽然说表格都是由一个个的单元格组成，但单元格之间还可以继续划分含义，有些单元格是表示内容，而有些单元格则是表示属性值，或者说列头或行头。

通常来说，这些标题类型的表格都是在第一行或第一列的单元格：

table1

这是一个很常见的二维表格，通过 和 来将表格的单元格含义区分开。

：标签用于表示单元格的表头

：标签用于表格单元格的内容

既然是单元格，那么就会存在合并单元格的现象，通俗的讲也就是有些表格的大小并不是只占据一格，而是有可能多行多列。此时，可通过属性来实现：

属性

含义

colspan

单位数值，如1表示占据1列

rowspan

单位数值，如2表示占据2行

类似于 HTML 文档有一些专门用于表明文档结构的标签，表格同样有一些用于指示表格结构的标签。引入表格结构标签，是为了更好的区分出各个单元格的含义。

比如， 标签用来表示表头类型的单元格，但不管是第一行的表头，还是第一列的表头，用的都是 ，那如果还想继续划分这个表头是属于第一行或者第一列时该怎么做呢？

所以，引入了一些结构性标签有便于对表格各个单元格更加具体的细分，以满足各种复杂场景。

table2

: 是表格的根节点

: 用来标记表格的标题行

: 用来标记组成脚的行。

不用 ，表格最终效果也一样，但用了 之后，如果 CSS 想分别作用第一行，或者第一列，这时就可以很容易的通过 thread th 以及 tbody th 来达到目的了。

所以，结合表格结构性标签的使用，可以让表格的结构更加明确。

表格除了一张表格内容外，通常还会需要有表格的标题，此时用 标签来标记。

table示例

表单标签。

表单在网页中的角色很重要，因为表单是用来接收用户输入的信息并提交发送给服务器的中间角色。

表单并不是说，流程器就呈现给用户一张表单，反而通常呈现给用户的只是各自输入控件，比如输入框，或者勾选控件之类的。

表单，我的理解是，浏览器会将用户输入的这些数据收集起来生成一张表单提交给服务端。

标签则是表单的根节点。

因为表单需要收集用户输入的信息，以及提交服务端的时机，因此，一般来说，表单还需要有 标签以及 标签。

一份基本的表单如下：

form1

标签的属性 method 用来指明发送表单数据时使用哪种方式，有两种 get, post。

action 属性用于指明表单数据要发送到哪里，如果没有设置，则默认发送到所在 HTML 文档的地址。

如果表单过于复杂，需要将各个 收集的信息进行归类，可以使用 标签。而 有个子标签 ，是用来对这个分组提供相关说明使用。

示例：

name:

city:

name2:

city2:

form2

标签用来标记在表单中的按钮，但按钮的作用有三类，可通过属性值 type 来设置。如下：

type属性值

含义

submit

默认值，表示按钮的用途是提交表单

reset

表示按钮用途是重置表单

button

表示按钮是一个普通的按钮，没有任何语义

如果 标签不放在 标签内，那么它就需要指定绑定的是哪个 表单，通过 form 属性绑定 form 表单的 id，所以这种场景下，form 表单必须设置 id 属性值。

标签是用于收集用户输入的标签，因此它的形态有各自各样，可通过属性 type 来设置。

另外，它有很多属性，每个属性都有各自的含义，一些基本的属性需要了解一下。

name 属性，用于设置该 的 key 值，value 值就是用户的输入，key 和 value 组合成表单中的一项用于发送给服务端。如 :

input

表明有两个 控件，一个 key 值为 name，一个 key 值为 city，收集用户输入后组成表单上传。

不同 type 的 作用不同，分别来看下：

默认的 的 type 值，在浏览器中呈现一个单行文本输入框。

这种类型下，还可以配合一些属性使用，如

placeholder: 数据提示，类似于 hint 功能

list: 结合 标签使用，用于给出一系列输入提示

其他还有一些属于用于设置 是否可用，是否聚焦，宽度，输入最大长度等等。

示例：

input2

这类型的 在浏览器上的呈现跟 type=”text” 类型一致，功能也基本一致，唯一的区别就是这是个密码框，也就是当用户输入数据时，在浏览器上是以掩饰字符替换，如···

input3

这三种类型的用途跟 标签一样，所以想要设置按钮，用 也可以，唯一的区别就是， 是虚元素，也就是它没有标记任何文本内容，而 是可以标记文本内容的 。

input4

该类型 浏览器会将其隐藏，不显示在网页上。通常是用于一些需要传给服务端的数据，但又没有必要让用户知道的场景下的使用。如：

如上，用户只需输入名字信息，但提交给服务端时还需要一个 name_id 信息，这个数据没必要让用户知道，此时可以通过 hidden 来实现。

该类型的 其实就是个图片按钮。跟 标签的区别也就是，这个是可点击的， 只是将图片嵌入进来：

input5

当在 form 表单中有 type=”image” 类型的 时，点击这张图片，发送给服务端的信息是点击的坐标点。

该类型的 可以让用户选择本地文件：

input6

复选框，示例：

input7

多选框，通常配合 一起使用，将同类型的集合管理在一起。当然，不用也可以。

input8

这类 type 的 ，用途只是用于限定用户的输入格式，比如 number，这个输入框就只能输入数字。

HTML 文档中是可以嵌入其他 HTML 文档的，通过 标签标记。

通过src属性设定目标HTML文档地址，width,height设置区域大小。

基本每个网页都会有图片，在 HTML 中嵌入一张图片用 标签，跟 Android 中的 ImageView 控件很类似，同样需要指定图片来源，区域宽高。

容器类标签是我自行对其进行的划分，并不是说，这类标签只能用于当容器使用，只能用于包含其他标签，而是说，常见的用法，这类标签基本都是表示具有某种含义的某一块区域，具体这块区域内既可以包含各种标签，也可以直接是文本内容。

都是通用标签，没什么具体的语义

: 标签通常用于标记段落中的某块文本内容，然后通过该标签，可以单独为这块文本内容增加 CSS 样式

: 标签一般用于，将屏幕某块区域划分出来后，用该标签标记后可通过选择器作用自定义的 CSS 样式。

标签用于表示文档中的某一节，其实也就是某一块区域，这块区域有自己单独独立的含义。通俗的理解，有些类似于第一节，第二节的概念。

每一节 都是相互独立的，因此方便各节里面独自使用 和 。

section

: 标签表示某一节的首部，像某些网页通常会有一些 Logo 之类的首部信息。

: 标签表示某一节的尾部，最常见的基本每个网页尾部都会有版权信息，作者介绍，相关链接，免责声明等信息，这部分信息都适用于放在尾部标签 里。

例如：

header

footer

标签表示文档中某一个区域，它包含着到其他页面或者同一页面的其他部分的链接。

直译其实也就是导航的作用。

nav

常见的标签基本就这些了，当然，这里并没有列出一些 HTML5 新增的标签，因为刚入门，对于那些标签的使用场景也不熟悉，总之，了解以上的标签，基本足够查看任意个网站的源代码了。

另外，如有需要，再去查找具体标签即可：

https://developer.mozilla.org/zh-CN/docs/Web/HTML