P标签用来定义段落。当我们需要在网页上显示一段一段的内容时，就可以使用P标签。每一个段落之间互不影响，为单独的内容。当我们使用了P标签来定义段落时，每个段落之间会有上下间隙，而且即使我们的内容很少或者没有占满一整行，那么P标签的内容也会自动占满一整行，既除P标签以外的内容会自动换行显示。
P标签为双标签，所以必须有首尾标签。段落的内容既为P标签的内容。例如：
我是一个P标签
代码块123如上面所说，P标签会默认占一整行，即使我们的内容很少，其余的内容也会自动换行，且上下会有间距。比如我们定义以下两个P标签：我是第一个P标签
我是第二个P标签
代码块123456那么他们在页面上会呈现以下效果：首先P标签被称之为块级元素，块级元素默认占一整行，且可以为之设置宽高。其次P标签默认带有样式，上下会有间距（在CSS中称为外边距）。就如我们之前所讲到的，每个P标签形成的段落之间互不影响，独立成段，所以我们在使用P标签的时候，需要事先划分好页面的结构。
P标签里面可以嵌套其他标签，例如：
我们在上一章节已经学过了段落标签P标签，而且我们也学习了P标签是可以嵌套其他标签的。当我们定义的段落里，有一些文字或者一句话有单独的样式时，则我们需要单独的处理这些内容，最好的方式则是用span标签将这些内容包裹起来。例如：
搜索的网页名称及路径标识，都是通过p标签生成的。
span标签用来定义文本内容，可以是单独的一句话，一些内容，也可以是段落里面的内容。如果不对span应用样式，那么span元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的span元素仍然为p元素增加了额外的结构。span标签是不带任何默认样式的，所以它极大的提高了我们可以对文本内容自定义样式的需求。
span标签为双标签，所以必须有首尾标签。文本的内容既为span标签的内容。例如：
我是一个文本内容代码块123SPAN标签没有默认样式，所以上述内容会在页面上呈现以下效果：
1.span标签为行内元素，行内元素和块级元素（p标签）不同，默认是在同一排排列，如我们写两个span标签，会呈现以下效果：
2.span不能使用CSS为其设置宽高，即使设置了宽高也会无效。
3.span标签里也可以嵌套其他标签。例如：
我是span标签里的p标签
1.如果我们这样书写代码，每段代码都换行，例如：
我是其他内容我是第一个span标签我是第一个span标签代码块123那么两个span标签之间左右会有间距，如下图所示：
如何解决这个问题呢，我们只需要讲所有代码写在同一行即可，如：
2.span标签为行内元素，不能对其设置宽高属性，如果既想保持行内元素在同一行排列的特性，又想为其设置宽高，我们可以利用CSS的display属性将其设置为行内块元素即可。
前端开发规范（节选）：
而HTML给我们提供了从H1-H66个选择，让我们可以超大标题到超小标题自由选择，可以适应各种场景。
H1-H6标签都为双标签，所以必须有首尾标签。例如：
我是h1标签
我是h2标签
我是h3标签
我是h4标签
我是h5标签
我是h6标签
代码块123456那么在页面上会呈现以下效果：例如：
腾讯新闻
地方考察中，强调的重点内容有哪些
代码块1网易云音乐大部分的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标签里面可以嵌套其他任意标签，例如：
我是div标签里面的p标签
\1.因为div标签没有任何的默认样式，所以我们推荐网页时，使用div标签。\2.我们可以给某些单独的标签外层包裹一个div，比如img标签，a标签，这样方便我们后续为其设置样式。\3.div为块级元素，默认占一整行，如果想让div在同一行排列，可以为其设置CSSdisplay属性，或者使用flex（弹性盒模型）布局。\4.div可以嵌套任意标签，所以我们可以让其他标签和div标签任意组合，来构成我们的网页。
夜猫网官网首页（部分）
在之前的章节中，我们学习了块级元素（p标签，h标签，div标签），行内元素（span标签），块级元素的特点是默认占一整行，会自动换行，行内元素默认是在同一行排列，如果我们想让两个行内元素换行显示，除了设置CSS样式之外，就是使用换行标签br标签了。
如果我们在编写代码时，通过回车让我们的代码换行，但是在页面上并不会产生换行的效果。例如：
我是第一行的内容
我是第二行的内容
在页面上会呈现以下效果：
所以如上图显示，我们的内容并没有产生换行的效果，所以浏览器并不识别回车换行的写法。
如果我们需要达到换行的效果，那么就必须使用br标签了。
BR标签为单标签，没有尾标签，它有两种写法，第一种为
,第二种写法为
,两种写法没有任何区别，哪一种都可以使用。
比如我们想实现两个span标签换行的效果，我们可以编写一下代码：
我是第一行的内容
我是第二行的内容代码块123我们只需要在两个span标签中间加上一个br标签，既会产生一下效果：
这样我们就实现了换行的效果，是不是很简单呢。
1.由于HTML的作用就是用来给文本添加语义，而br标签的语义是不另起一个段落换行，而在企业开发中的一般情况下需要换行都是因为需要另起一个段落，所以在企业开发中很少使用br标签；
2.如果想达到换行的效果，我们可以使用块级元素来布局我们的网页。
BootStrapv3中文网（部分）
Since9+4=13>12,this4-column-widedivgetswrappedontoanewlineasonecontiguousunit.
Subsequentcolumnscontinuealongthenewline.
在我们某些特定的场景中，我们需要创建分割线来将我们的文档分隔开，以表示每个区域是单独的区域。这个时候我们就需要借助到水平线标签hr标签了。
hr标签在HTML页面中创建一条水平线。水平分隔线可以在视觉上将文档分隔成各个部分。hr标签为单标签，其表现形式为一条横线。具体如下图所示：
hr标签的表现为一条水平线，我们可以用它来分隔文档。而且我们通过给hr标签设置属性来达到不同的效果，比如我们可以hr标签的宽度、颜色等，来适应我们不同的应用场景。
hr标签默认宽度为100%，既整个屏幕的宽度，这时我们就可以通过控制其属性来达到不同的效果，例如：
设置hr标签的宽度，效果如下图：
设置hr标签的颜色，效果如下图：
我们在很多时候都需要列表属性，列表通常分为有序列表和无序列表。这一章节我们就先来介绍无序列表。无序列表，顾名思义就是没有顺序的列表，每一个列表项没有前后顺序之分，呈同级关系。例如以下效果：
如果在HTML当中想要呈现无序列表的效果，那么我们就需要ul和li标签了。
我们在之前的章节中介绍过，理论上标签与标签之间是可以任意嵌套的。但是ul和li标签比较特殊，ul标签里只能嵌套li标签。ul代表整个列表，li标签代表无序列表的每一个选项。我们可以把ul标签理解为一个壳，里面嵌套着li代表的选项。如下图所示：
ulli标签用来定义无序列表，但ulli标签会有默认样式，所有的列表选项前面会有一个实心的圆点，如想修改该圆点的样式，需要借助CSS样式。通常无序列表代表每一个选项没有特定顺序，呈同级关系，且相互之间没有影响。无序列表不仅可以代表列表选项，也可以用来导航栏、侧边栏等的显示。
淘宝网（部分）
我们在上一章节学习了无序列表，这一章节我来学习列表的另一种分类：有序列表。有序列表，顾名思义就是有顺序的列表，每一个列表项有前后顺序之分，呈先后排列关系。例如以下效果：
如果在HTML当中想要呈现有序列表的效果，那么我们就需要ol和li标签了。
我们在之前的章节中介绍过，理论上标签与标签之间是可以任意嵌套的。但是ol和li标签比较特殊，ol标签里只能嵌套li标签。ol代表整个列表，li标签代表有序列表的每一个选项。我们可以把ol标签理解为一个壳，里面嵌套着li代表的选项。如下图所示：
olli标签用来定义有序列表，但olli标签会有默认样式，所有的列表选项默认以阿拉伯数字1，2，3开始排列，如想修改列表的排列的样式，可以设置ol的type属性。通常有序列表代表每个列表选项之间都顺序排列。适应于排行，通知等实际场景。
如果如果设置oltype属性为a，则列表排列方式为a、b、c…的英文大写字母排列，如下图：
如果如果设置oltype属性为i，则列表排列方式为i、ii、iii、iv…的小写罗马数字排列，如下图：
如果如果设置oltype属性为I，则列表排列方式为I、II、III、IV…的大写罗马数字排列，如下图：
内部通知
在我们的网页当中，图片肯定是必不可少的元素，有了图片之后，我们的网页网站就会变得更加的丰富起来。那么我们要在HTML当中插入图片的话，就会用到我们的img图片标签了。例如：
img标签为单标签，所以没有尾标签。而img标签有一个必填的属性：src属性，代表图片的路径。图片的路径可以为图片的相对路径，绝对路径和网络路径。这里我们以网络路径示范：
img标签还有一个属性为alt属性，alt属性表示错误提示，如果图片的路径既src属性的地址出错时，会显示alt属性的内容，我们把上面例子稍微修改一下，把路径写错，既：
如果图片路径出错，那么就不会显示对应的图片，而会显示一个图片加载失败的样式。这时候我们编写的ALT属性里面的内容也会呈现在页面上，就表示我们当前这张加载失败的图片的错误提示。
注意：
alt属性的内容只会在图片加载失败时显示，既图片路径出错时，如果图片加载成功，则alt属性的内容会自动隐藏。alt属性起到一个提示作用，如果我们在编写代码时，不小心把图片路径写错，则会提示我们该张图片为哪一张，具体内容是什么。而alt属性还有一个重要的作用就是网站的SEO作用（搜索引擎爬取网页的内容），假设由于下列原因用户无法查看图像，alt属性可以为图像提供替代的信息：
反过来讲，当搜索引擎要判断网页的关键词时，图片的alt-代替属性是一个可信任的参考点。所以，别忘了在图片的alt-代替属性。
img标签还可以设置width和height属性来改变图片的宽高，例如：
图片的宽高为100*100。
Tips：IMG标签的width和height属性的值为数字，一般情况下为正整数。
百度搜索（部分）
本章节只能展示a标签在网页上呈现的效果，实际跳转效果需自己编写代码操作。
注意:
a标签还有一个属性为target，表示跳转的网页为在当前页面跳转，还是新开一个页面跳转。默认值为_self,表示为在当前页面跳转，如果将a标签的target属性设置为_blank，则表示新开一个网页跳转，代码如下：
我们如果是编写新闻类网站或者电商类网站，有一个需求是点击图片也可以跳转到对应的详情页面，这个时候就需要用到图片链接了。其实图片链接非常简单，我们只需要在a标签中嵌套一个img标签即可，这样就可以实现点击图片跳转网页了。
a标签还有一个重要的功能，那就是锚点定位。什么是锚点定位呢？通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。那么a标签实现锚点定位，需要两个部分组成：锚记和指向锚记的链接。有以下方法：
\1.方法一：使用a标签作为锚记和链接，俗称使用name定位，代码如下：
\2.方法二：使用a标签作为链接，使用其他元素（建议使用块元素）作为锚记，俗称id定位，代码如下：
思否论坛首页
在使用表格标签之前，我们需要先认识一下在html中表格是由哪些结构构成的。一般情况下，表格都表头、表身构成。表头里面放每一列对应的字段，一般是一个描述，如姓名、年龄等，表身则放每一个表头对应的具体的值，如张三对应表头的姓名，20对应表头的年龄。表格有行和列的概念，行就代表一个数据的所有属性，比如姓名：张三，年龄：20，而列则表示一个表头对应的所有数据，比如姓名这一列就只有姓名，如张三、李四等。通常情况下，我们都是先确定表头，然后再确定每行对应表头的具体数据。
想要编写表格，需要用到表格的一组标签。table标签表示表格整体，类似ul和ol表示列表整体一样。在table标签里，thead标签表示表头，tbody标签表示表示。在table表头中，tr标签代表行，th标签代表表头的每一项。在tbody标签中，tr标签代表行，td标签代表每一个表头对应的具体数据。代码如下：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 小明 | 20 | 男 |
| 小红 | 18 | 女 |
我们可以给表格添加border属性给表格添加边框，border属性的值为正整数，默认为0，则无边框，我们把border设置为1，代码如下：
我们还可以给table设置cellpadding来使用单元格填充来创建单元格内容与其边框之间的空白，cellpadding值也是正整数，我们把表格的cellpadding设置为10，代码如下：
我们还可以给table设置cellspacing来设置单元格与单元格直接的距离，cellspacing值也是正整数，我们把表格的cellspacing设置为10，代码如下：
我们也可以为表格添加标题，那么我们就需要在thead标签前加上caption标签，而caption标签的内容则是表格的标题，代码如下：
北京大学官网
input的类型有很多，我们依次为大家介绍。
普通输入框既可以输入任意内容，没有格式和内容要求。代码如下：
input标签的type属性默认为text。
把input的type属性设置为password则表示密码框。密码框既输入的内容为密文显示，呈现的效果为实心黑点，不会显示具体的输入内容。代码如下：
把input的type设置为number则表示数字框，那么就只能输入数字，输入其他字符无效，且输入框最右侧会有加减按钮。代码如下：
把input的type属性设置为radio则表示单选框，因为input标签是单标签，所有单选框的内容直接写在input标签后面，如果单选框有多个选项，则需要写多个input标签，且每个input标签必须添加name属性，否则不能成为一组的单选框（既可以选多个）。代码如下：
单选框可以添加checked属性，表示默认选中一项。代码如下：
Tips：如果给多个单选框设置checked属性，则会默认选中最后一个设置checked属性的选项。
把input的type属性设置为checkbox，则表示多选框。多选框和单选框一样，需要设置name属性，且多选框也可以设置checked属性表示默认选中，多选框的checked属性可以设置多个。代码如下：
INPUT标签可以设置placeholder属性为占位符。占位符的作用为输入提示，如果输入框没有内容，则会显示占位符的内容，一旦输入框有内容，则会显示输入框的内容，占位符的内容消失。代码如下：
京东
label需要和input标签搭配一起使用。LABEL标签的for属性需要和input的id属性一致，这样才能点击label标签的内容使对应的input输入框自动获取焦点。代码如下：
表单控件都是内联元素所以他俩会在一行显示。在网页中当我们点击label标签的内容或文本框时都会在文本框中出现光标，这个就是label标签的功能了。说白了label标签就是他所关联的表单控件的延伸，即鼠标点击了他，就会出现和点击他所关联的表单控件一样的效果。而这前提是label的for属性的属性值与想要关联的表单控件的id一样。
除了增强用户体验外，还为行动不便人士上网提供了便利。比如说，视力障碍者是借助“网页朗读器”发出的声音来浏览网页的，若没有label标签的关联，上网者就在脑海中不能想象出那种对应性，不能很好理解网站表单所想表达的内容。再比如，肢体有缺陷的上网者对于鼠标的控制是很辛苦的，运用label后点击的目标变大了，有利于操作。
我们直接书写textarea标签既代表文本域标签，代码如下：
代码块1效果如下：
我们可以通过可以通过COLS和ROWS属性来规定textarea的尺寸。cols设置文本域的宽度，rows设置文本域的高度。代码如下：
需要注意的是，文本域的右下角有一个可以拖拽的区域，可以通过拖拽来改变文本的宽高，如果想要取消这个功能，需要通过CSS样式来取消。
文本域也可以设置placeholder属性来实现占位符的效果，用法和作用和input的placeholder属性一样。
效果如下：
简书
使用下拉菜单一方面列表框为用户输入数据提供了一种便捷方式，只要把已知的数据项列举出来，用户在列表框中选择列表项就可以；另一方面可以把需要搜集的数据规范化，防止因用户输入数据的随意性而造成后端处理数据的混乱。例如，在搜集用户个人信息时，可能需要用户输入职业信息，后端程序需要按照职业信息对用户进行职业分类。在这种情况下，采用列表框元素就是比较好的获取用户数据的方式，可以预先规划好职业信息，把规划好的职业信息以列表框方式展现给用户，用户只需要选择列表项就可以了，无需让用户输入职业信息。
selectoption标签和ulli标签类似，select标签代表下拉菜单整体，而option则是下拉菜单的每一个选项，代码如下：
代码块12345效果如下：
我们可以给给option标签设置disabled属性，代表当前选项是禁用项，不能选择的，代码如下：
我们也可以给option标签设置selected属性来表示默认选中的选项，代码如下：
下拉菜单默认宽度为选项内容宽度撑开，如果想设置下拉菜单的样式，可以借助CSS。
夜猫编程
京东官网
form标签和ulselect标签类似，代表表单整体，而里面嵌套的元素则是表单具体的内容。我们来做一个用户名和密码的表单，这需要用到之前我们讲的label标签和input标签的知识，代码如下：
代码块1234567效果如下：表单呈现的形式和普通输入框无异，但它的作用就是我们要做提交表单的操作（既我们需要把用户输入的信息传给后台），那么普通的输入框就做不到这个功能了。那么提交表单的时候，我们可以给form标签加上一个method属性，这个属性表示当前提交表单的方式，一般为get或者post，这个需要后台先行告知。form标签还有一个action属性，表示表单提交的地址，这个也需要后台先行告知。