【HTML5 系列】HTML5 基础（HTML 元素、HTML 常见标签、HTML 列表、HTML 样式）

当你的才华

还撑不起你的野心时

那你就应该静下心来学习

后续不定期更新HTML5 系列文章，一起学一起努力，冲冲冲~_~嘻嘻(●'◡'●)

0x01 HTML 介绍

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

HTML5 基本结构：

<!DOCTYPE>
<html>
	<head>
		<title>HTML Agan 基础篇</title>
	</head>
	<body>
	</body>
</html>

我们在基本结构里面加一点点内容，请看如下

<!DOCTYPE> 文档声明头，声明说我是HTML，请你按照HTML的文档类型处理我
<html> 标签即根元素
<head> 网页的头部，设置网页相关的信息
<meta> 设置网页的类型、编码等
<title> 设置网页的标题
<body> 定义文档的主体，也就是我们主要的内容

<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML Agan 基础篇</title>
	</head>
	<body>
		<a>Agan 小菜B</a>
	</body>
</html>

浏览器运行结果：

0x02 基础语法

2.0.1 HTML注释

假如，我们在平时操作时候，有时候，可能在改动Bug的时候，某些代码块需要更改，但我又不想之前的代码删掉，或为了标注一个文字，方便别人理解这段代码是什么意思时，我们可以使用HTML 注释来实现想要的效果。

<!-- 在此处写注释 -->

PS：被注释的内容将不会被渲染和显示。

<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML Agan 基础篇</title>
	</head>
	<body>
		<a>此处展示一句话~!<br></a>
		<a>Agan 小菜B</a>
	</body>
</html>

浏览器运行结果如下：

那么此时，我们将<a>此处展示一句话~!<br></a> 用 看看浏览器是什么样的效果？

<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML Agan 基础篇</title>
	</head>
	<body>
		<!--<a>此处展示一句话~!<br></a>-->
		<a>Agan 小菜B</a>
	</body>
</html>

浏览器运行结果如下：

0x03 HTML 常用标签

HTML 是超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签。4

HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。

HTML 标签的大小写无关的，例如 <body> 和 <BODY> 表示的意思是一样的，都代表“主体”，推荐使用小写。

单标签（单标记）

单标签：单个出现，以⾃身单个标签标识结束

PS：单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记

基本语法格式：

<标记名/>

HTML 中的单标签（单标记）

1、<area>：用于图像映射内的区域。

2、<base>：文档中所有相对URL的基本URL。每个文档只能有一个，它必须位于页面的

<head>中。

3、<br>：换行符，通常用于文本内容以创建单个换行符而不是段落。它不应该用于通过堆叠

许多<br>标签在页面上创建视觉分离，因为该函数是视觉需求，因此是CSS的域而不是

HTML。

4、<col>：指定<colgroup>元素中每列的列属性。

5、<command>：指定用户可以调用的命令。

6、<embed>：与外部应用程序和交互式内容一起使用以进行集成。

7、<hr>：水平规则，是页面上的一条直线。在许多情况下，CSS边框用于创建分隔线而不是

此HTML元素。

8、<img>：HTML的主要元素之一，这是图像标记。它用于将图形图像添加到网页。

9、<input>：用于从访问者捕获信息的表单元素。有许多有效的输入类型，从多年来在表单

中使用的常见“文本”输入到属于HTML5的一些新输入类型。

10、<keygen>：此标记创建用于表单的密钥对生成器字段。

11、<meta>：元信息

12、<link>：引入标签

... ...

例子：

<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML Agan 基础篇</title>
	</head>
	<body>
		<a>来一波关注~_~嘻嘻<br></a>
		<img src="https://xxx.jpg" width="258" height="200"><br>
	<form name="input" action="xxx.php" method="get">
		Search Google：<input type="search" name="GoogleSearch_Agan_CSDN博客"> 
					   <input type="Submit">
	</form>
	</body>
</html>

浏览器运行结果如下：

<img> 图标标签（单独再写个），例子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agna 演示沙雕单身直男图片</p>
		<img src="https://www.xxx.com" width="239" height="200">
	</body>
</html>

浏览器运行结果如下：

<hr/> 水平分割线标签，例子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 先生 你最骚，骚先生~_~</p>
		<hr/>
		<P>开始演示：</p>
		<hr/>
		<p>&nbsp;&nbsp;&nbsp;好吧，我不装了，我承认我挺骚的~_~</p>
	</body>
</html>

浏览器运行结果如下：

<br>换行标签，例子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>我想让一段文字："Agan 先生 你最骚，骚先生~_~" 从先生之后就换一行打印在页面</p>
		<P>开始演示：</p>
		<p>Agan 先生<br>你最骚，骚先生~_~</p>
	</body>
</html>

浏览器运行结果如下：

空格字符（ ），例子演示：

PS：为什么，我们需要空格字符呢？

因为，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。此时，我们想要达到多个空格的效果的话，就需要多个空格字符（ ）来实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>我想让一段文字："Agan 先生 你最骚，骚先生~_~" 从先生之后就换一行打印在页面</p>
		<P>开始演示：</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Agan 先生<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你最骚，骚先生~_~</p>
	</body>
</html>

浏览器运行结果如下：

双标签（双标记）

双标签：成对出现，以自身第二个标签标识结束

PS：双标记也称体标记，是指由开始和结束两个标记符组成的标记

基本语法格式：

<标记名></标记名>

1、<html>页面标签</html>

2、<head>头部标签</head>

3、<body>可视标签</body>

4、<title>页面标题</title>

5、<div>盒子标签</div>

6、<p>段落标签</p>

7、<h1></h1>标题标签<h6></h6>

8、<span>空元素</span>

9、<em></em>斜体字体<i></i>

10、<strong></strong>加粗字体<b></b>

11、<ul>
		<li>无序列表</li>
	</ul>

12)、<ol>
		<li>有序列表</li>
	</ol>

13)、<dl>
		<dt>Agan 菜G</dt>
		<dd><Agan 小菜G/dd>
	</dl>

14、<a href=””>超链接</a>

15、<iframe>内联框架</iframe>
... ...

我们依次对上面的标签进行练习，我这里只抽几个标签进行演示，单标签我就不试了，留个你们了

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML Agan 基础篇</title>
	</head>
	<body>
		<a>Agan 小菜B<br></a>
		<p5>点一下快乐按钮，来一波关注~_~嘻嘻</p5>
		<a href="https://yqxy20.blog.csdn.net/">Agan CSDN博客</a>
		<iframe src="https://www.nsfocus.com.cn/" ></iframe>
		
	</body>
</html>

浏览器运行结果如下：

<h></h> 标题标签，例子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Agan HTML 标题（<h></h>）演示</title>
	</head>
	<body>
		<h1>Agna 演示一级标题</h1>
		<h2>Agna 演示二级标题</h2>
		<h3>Agna 演示三级标题</h3>
		<h4>Agna 演示四级标题</h4>
		<h5>Agna 演示五级标题</h5>
		<h6>Agna 演示六级标题</h6>
	</body>
</html>

浏览器运行结果如下：

<p></p> 文字标签，例子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agna 演示沙雕单身直男文字1</p>
		<p>Agna 演示沙雕单身直男文字2</p>
		<p>Agna 演示沙雕单身直男文字3</p>
		<p>Agna 演示沙雕单身直男文字4</p>
		<p>Agna 演示沙雕单身直男文字5</p>
		<p>Agna 演示沙雕单身直男文字6</p>
	</body>
</html>

浏览器运行结果如下：

<a></a> 超链接标签，例子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agna 演示沙雕单身直男超链接</p>
		<a href="https://yqxy20.blog.csdn.net/">Agan CSDN 博客</a>
	</body>
</html>

浏览器运行结果如下：

<div></div> 块级元素标签，例子（1）演示：

PS：浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div style="width:262px;height=300px;background:Aqua">
			Agna 沙雕单身直男~_~
			<img src="https://www.xxx.com" width="258" height="238">
		</div>
		
		<p>Agna 演示沙雕单身直男超链接</p>
		<a href="https://yqxy20.blog.csdn.net/">Agan CSDN 博客</a>
	</body>
</html>

浏览器运行结果如下：

<span> 文本的容器标签，没有特别的含义和样式，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。

该标签是一个内联元素，它与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。

例子演示：

https://www.w3school.com.cn/cssref/css_colornames.asp

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#aganbox {
				width:  300px;
				height: 25px;
				background: Azure;
				}
		</style>
	</head>
	<body>
		<div id=aganbox>Agna 沙雕单身直男~_~(会自动换行）</div>
		
		<p>标题：Agna 演示沙雕单身直男文本容器标签（不自动换行）</p>
		<a href="https://yqxy20.blog.csdn.net/">Agan CSDN 博客</a><span>Agan CSDN 博客</span>
	</body>
</html>

浏览器运行结果如下：

<ul>

<li></li>

</ul> 无序列表标签，例子演示：

PS：

type 属性定义了列表项前项目符号的类型

<ul> 标签的 type 属性：

值	备注
disc（默认）	实心圆
circle	空心圆
square	小方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示无序列表</p>
		<ul>
			<li>Agan 沙雕单身直男001</li>
			<li>Agan 沙雕单身直男002</li>
			<li>Agan 沙雕单身直男003</li>
			<li>Agan 沙雕单身直男004</li>
			<li>Agan 沙雕单身直男005</li>
			<li>Agan 沙雕单身直男006</li>
		</ul>
	</body>
</html>

浏览器运行结果如下：

演示有序列表的type属性，这里已type=square(小方块)做为演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示有序列表</p>
		<ul type="square">
			<li>Agan 沙雕单身直男001</li>
			<li>Agan 沙雕单身直男002</li>
			<li>Agan 沙雕单身直男003</li>
			<li>Agan 沙雕单身直男004</li>
			<li>Agan 沙雕单身直男005</li>
			<li>Agan 沙雕单身直男006</li>
		</ul>
	</body>
</html>

浏览器运行结果如下：

<ol>

<li>每个列表开始都是li和/li结束</li>

</ol> 无序列表标签，例子演示：

PS：

type 属性定义了列表项前项目符号的类型

<ol> 标签的 type 属性：

值	备注
1（默认）	数字表示（1，2，3...)
A	大写字母表示（A,B,C...)
a	小写字母表示（a,b,c...)
I	大写罗马数字表示(I,II,III…)
i	小写罗马数字表示(i,ii,iii…)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示有序列表</p>
		<ol>
			<li>Agan 沙雕单身直男001</li>
			<li>Agan 沙雕单身直男002</li>
			<li>Agan 沙雕单身直男003</li>
			<li>Agan 沙雕单身直男004</li>
			<li>Agan 沙雕单身直男005</li>
			<li>Agan 沙雕单身直男006</li>
		</ol>
	</body>
</html>

浏览器运行结果如下：

演示无序列表的type属性，这里已type=a（小字母表示）做为演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示有序列表</p>
		<ol type="a">
			<li>Agan 沙雕单身直男001</li>
			<li>Agan 沙雕单身直男002</li>
			<li>Agan 沙雕单身直男003</li>
			<li>Agan 沙雕单身直男004</li>
			<li>Agan 沙雕单身直男005</li>
			<li>Agan 沙雕单身直男006</li>
		</ol>
	</body>
</html>

浏览器运行结果如下：

<dl>

<dt>每个自定义列表以dt开始</dt>

<dd>每个自定义列表项的定义以dd开始</dd>

</dl>

自定义列表标签，例子演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示自定义列表</p>
		<dl>
			<dt>Agan</dt>
				<dd>沙雕单身直男001</dd>
			<dt>Agan</dt>
				<dd>沙雕单身直男002</dd>
			<dt>Agan</dt>
				<dd>沙雕单身直男003</dd>
			<dt>Agan</dt>
				<dd>沙雕单身直男004</dd>
			<dt>Agan</dt>
				<dd>沙雕单身直男005</dd>
			<dt>Agan</dt>
				<dd>沙雕单身直男006</dd>
		</dl>
	</body>
</html>

浏览器运行结果如下：

PS：其次，说一下，双标签结尾时，都要有一个结尾的标签，例如双标签<titile>HTML Agan 基础篇</title>，这个元素定义了一个开始标签<title>，以及一个结束标签</title>，元素为HTML Agan 基础篇

标签的关系

嵌套关系

补充知识：

HTML4 嵌套规则

  在我们的印象中会有这样的嵌套规则：



内联元素不能嵌套块元素

<p>元素和<h1~6>元素不能嵌套块元素

那么到底什么是块元素，什么是内联元素？

以下是W3C CSS2.1规范中对块元素和内联元素的定义：

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

上述英文，可以理解为：块元素一般都从新行开始，内联元素在一行内显示，我们也可以通过CSS属性display的'inline' 或 ' block' 来改变元素为内联元素或块元素，当然这是CSS中对元素的分类，显然用 'display' 的属性值来对html元素进行分类是不严谨的。

如果按照上述规则来讲，那么FACEBOOK的做法就是一种错误的做法，因为他在内联元素<a>元素中嵌套了块元素元素<div>，但是细心的读者应该会发现上述规则是基于HTML4/xHTML1的strict模式，而FACEBOOK现在已经统一使用了HTML5的doctype，那么这个规则到底还是是否适用？

HTML5 嵌套规则

HTML5的元素嵌套规则，元素的嵌套规则和页面头部申明的DTD有着千丝万缕的关系，那么在最新的HTML5规范中是否对元素嵌套有着新的规范呢？

让我们先了解下W3C在最新的HTML5规范中对元素的分类方式：



如上图，元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。

Flow（流式元素）

在应用程序和文档的主体部分中使用的大部分元素都被分类为流式元素。

a， abbr， address， area（如果它是map元素的后裔）， article， aside， audio， b， bdi， bdo， blockquote， br， button， canvas， cite， code， command， datalist， del， details， dfn， div， dl，em， embed， fieldset， figure， footer， form， h1， h2， h3， h4， h5， h6， header， hgroup， hr， i， iframe， img， input， ins， kbd， keygen， label， map， mark， math， menu， meter，nav， noscript， object， ol， output， p， pre， progress， q， ruby， s， samp， script， section， select， small， span， strong， style（如果该元素设置了scoped属性）， sub， sup， svg， table，textarea， time， u， ul， var， video， wbr， text

Heading（标题元素）

标题式元素定义一个区块/章节（section）（无论是明确的使用章节式内容的元素标记，或者标题式内容自身所隐含的）的标题。

h1， h2， h3， h4， h5， h6， hgroup

Sectioning（章节元素）

章节式元素是用于定义标题及页脚范围的元素。

article， aside， nav， section

Phrasing（段落元素）

段落式元素是文档中的文本、标记段落级文本的元素。

a（如果其只包含段落式元素）， abbr， area（如果它是map元素的后裔）， audio， b， bdi， bdo， br， button， canvas， cite， code， command， datalist， del（如果其只包含段落式元素）， dfn， em， embed， i，iframe， img， input， ins（如果其只包含段落式元素）， kbd， keygen， label， map（如果其只包含段落式元素）， mark， math， meter， noscript， object， output， progress， q， ruby， s， samp， script，select， small， span， strong， sub， sup， svg， textarea， time， u， var， video， wbr， text

Embedded（嵌入元素）

嵌入式元素是引用或插入到文档中其他资源的元素。

audio， canvas， embed， iframe， img， math， object， svg， video

Interactive（交互元素）

交互式元素是专门用于与用户交互的元素。

a， audio（如果设置了controls属性）， button， details， embed， iframe， img（如果设置了usemap属性）， input（如果type属性不为hidden状态）， keygen， label， menu（如果type属性为toolbar状态），object（如果设置了usemap属性）， select， textarea， video（如果设置了controls属性）

Metadata（元数据元素）

元数据元素是可以被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素

base，command，link，meta，noscript，script，style，title

各分类会有交叉或重叠的现象，这说明在html5中，元素可能属于上述所有分类中的一个或多个。

例子(1)：<h1>~<h6>元素：

Categories:

Flow content.

Heading content.

Palpable content.

Contexts in which this element can be used:

As a child of an hgroup element.

Where flow content is expected.

Content model:

Phrasing content.

其中的「Categories」说明该元素的类别，「Contexts in which this element can be used」说明该元素能在何种场景下被使用，也就是它的父元素是什么，「Content model」说明该元素可以包含的内容是什么，由于页面中的元素是层层嵌套的，一个元素有可能既是父元素同时也是子元素的角色，所以下面我们以「Content model」也就是可包含的子元素做讨论。

那么对于h1~h6元素：

它们同时属于Flow content 、Heading content 和 Palpable content三个分类

它们的父元素可以是<hgroup>，同时那些子元素是流式元素的元素也可以作为h1-h6元素的父元素

它们允许的子元素是段落式元素

例子(2)：<div>元素

Categories:

Flow content.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Flow content.

对于<div>元素：

同时属于Flow content 、 Palpable content分类

父元素必须是那些子元素为段落式元素的元素

允许的子元素是流式元素

<div>元素允许的子元素是流式元素，流式元素基本涵括了页面中的大部分元素，所以我们在用<div>时可以不用担心嵌套错误的问题。

但对于<h1>~<h6>元素，它们允许的子元素为段落式元素，而段落式元素并不包含诸如<div>、<p>、<ul><ol>之类的元素，这就说明按照html5的规范，是不允许在标题元素内部嵌入<div>、<p>、<ul><ol>之类的元素。

例子(3)：<a>元素

Categories:

Flow content.

Phrasing content.

Interactive content.

Palpable content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Transparent, but there must be no interactive content descendant.

对于<a>元素：

同时属于Flow content 、 Phrasing content、Interactive content、Palpable content分类

父元素必须是那些子元素为段落式元素的元素

允许的子元素是以它的父元素允许的子元素为准，但不能包含交互式元素

这样看<a>元素还是挺有意思的，允许的子元素要看它的父元素所能包含的子元素。

来看看如下代码：
 <ul>
   <li><h4><a href=""><div></div></a></h4></li>
 </ul>
这时<a>的父元素为<h4>，对于<h1>~<h6>的标题元素上面已经提过，允许的子元素是段落式元素，那么此时对于<a>允许的子元素即为段落式元素，而段落式元素中是不包含<div>元素的，所以FCAEBOOK这样的嵌套方法是错误的！

让我们来把代码做一下修改：
<ul>
   <li><div><a href=""><div></div></a></div></li>
 </ul>
这时<a>的父元素为<div>，而<div>元素允许的子元素是流式元素，流式元素中包含<div>元素，所以这样的情形下在<a>里面嵌套<div>就是正确的做法！

嵌套错误可能引起的问题

上面讲了HTML5对元素新的分类方式和以<h1>~<h6>、<div>、<a>元素举例讲述了各自的嵌套规则，但FACEBOOK即使不按照标准去嵌套也不会有大的错误问题，这就给我们带来了一个思考：嵌套错误到底会不会有问题？

例子(1)：开始与结束标签嵌套错误
<div><h2>内容</div></h2>
测试结果：

例子(2)：<p>元素嵌套<div>元素
<p><div>内容</div></p>
测试结果：

例子(3)：列表元素<li>兄弟元素为<div>
<ul><li>内容</li><div>内容</div></ul>
测试结果：

例子(4)：<h2>元素嵌套<div>元素
<h2><div>内容</div></h2>
测试结果：

例子(5)：<a>元素嵌套<a>元素
<a href=""><a href="">内容</a></a>
测试结果：

通过上述例子，我们总结如下：

元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误

在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误

在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常

在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误

在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误

其实，这里说解析错误并不是很合理，应该是说浏览器解析出来的结果和我们期望的结果不一致，但任何的嵌套错误都不会导致页面呈现有很大的出错。

我们知道JS代码如果写的有语法错误，浏览器的JS解释器就会拒绝执行并且报错，而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。

严格嵌套约束、语义嵌套约束

通过上面的示例我们发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。

严格嵌套约束规则：

a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)

<p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等

暂时没有发现更多，有的欢迎告诉我

语义嵌套约束：

每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，这和下面要讲的容错机制有关。

浏览器的容错机制

并不是每位同学在写完页面后去做合法性检查，因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页，每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套，并且会去猜测前端们到底想如何呈现网页，这是浏览器的容错机制。

这其实在告诉我们，我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样，但那其实是浏览器的一种容错机制，我们没有理由让自己以一个随性的态度去coding，对待自己的代码应该一丝不苟，即使HTML5的胸襟很宽广。

拥抱WEB标准

原本我们认为从HTML4到XHTML是一个时代，现在又从XHTML跨到了HTML5，新时代新标准的诞生，我们应该敞开胸怀去拥抱，而不是排斥。

你关注或不关注，标准就在那里，只增不减。我们应该感谢W3C这样一个组织，让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然，也许你会像90年代那样，JS引用一个元素都需要为某个浏览器写一套自己的代码。

WEB标准只会使我们吃饭变得更香，睡眠变得更好，新的技术或标准会推动我们去富有热情的coding，而不是每天在重复劳动。

以上内容介绍来自：http://www.5icool.org/a/201308/a2081_2.html

<head>
	<meta charset="UTF-8">
	<title>Agan</title>
    <a herf="https://yqxy20.blog.csdn.net/">
</head>

PS：<head>和<meta>、<title>、<a> 标签父子关系，也叫嵌套关系，<html>和<head>标签同理

并列关系

<head></head>
<body></body>

PS：<head>和<body>是兄弟关系，也叫并列关系，<meta>和<title>标签同理

0x04 样式

HTML 的 style 属性 style 属性的作用：

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。

通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

菜鸟教程 css教程或w3school css教程教程中学习关于样式和 CSS 的所有知识。

在这里，我将使用 style 属性演示 HTML 样式，通过HTML 标签定义 style 属性，通过 style 属性来改变 HTML 元素的样式。

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

HTML 背景颜色样式，例子（"background-color" 属性值的设置来给背景设置颜色）演示：

CSS 样式属性参考手册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示HTML 样式实例-背景颜色</p>
		<dl>
			<dt>Agan</dt>
				<dd style="background-color:Aqua">沙雕单身直男001</dd>
		</dl>
	</body>
</html>

浏览器运行结果如下：

HTML 字体, 字体颜色，字体大小样式，例子（font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式）演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示HTML 样式实例-字体、字体颜色、字体大小</p>
		<dl>
			<dt>Agan</dt>
				<dd style="font-family:arial;color:Aqua;font-size:20px;">沙雕单身直男001</dd>
		</dl>
	</body>
</html>

浏览器运行结果如下：

HTML 字体, 字体颜色，字体大小样式，例子（ftext-align属性来定义文本居中对齐、左对齐等的样式）演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Agan 演示HTML 样式实例-文本对齐</p>
		<dl>
			<dt>Agan</dt>
				<dd style="font-family:arial;color:Aqua;font-size:20px;text-align:center;">沙雕单身直男001</dd>
		</dl>
	</body>
</html>

浏览器运行结果如下：

0x05 简单的案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div style="width:500px;height:300px;background:Aqua">
      <h2 style="text-align:center">Agan HTML5 基础演示案例1</h2>
      <p style="text-align:center">
		<a href="https://yqxy20.blog.csdn.net">个人博客</a>
      </p>
	  <p style="text-align:center">
		<img src="https://www.xxx.com">
	  </p>
    </div>
	<h4>~~~~~一起共勉... ...在路上~_~</h4>
  </body>
</html>