一、基本元素
HTML 元素可以分为两大类：基本元素和容器元素。基本元素通常是指那些有特定含义和功能的单个标签，用于标记内容的类型，例如标题、段落、图片等。
1.1、标题元素
标题元素一共有6个，分别对应一级标题到六级标题。浏览器对于标题元素有默认的CSS样式，一级标题到6级标题字体大小逐级递减。标签为<h1> 到 <h6>
<h1>这是一级标题</h1>
<h3>这是三级标题</h3>
1.2、段落元素
段落元素用于标记一段文本，标签为<p>
<p>这里是一段文字</p>
1.3、换行元素
html存在空白折叠的现象，因此代码中键入的换行是不生效的。因此html提供了一个用于换行的元素，标签为<br>
1.4、pre元素
pre表示预定义格式文本，在pre元素中出现的内容不会出现空白折叠。例如我们在网页中插入代码，默认空白折叠会取消代码中的换行和空格，但是使用pre元素就不会出现这个问题。pre元素的本质也是CSS样式实现的，设置CSS样式 write_space为pre时，就不会再有空白折叠。因此根据语义化的要求，我们插入代码应该使用code元素，然后给code元素通过CSS来取消空白折叠。
1.5、链接元素
链接元素即a元素，它是一个超链接。可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。
<a href="https://www.baidu.com">百度一下</a>
<a href="#1">跳转第一章</a>
<a href="#1">跳转第二章</a>
<h1 id="1">第一章正文</h1>
<h1 id="2">第二章正文</h1>
<a href="other.html#1">跳转第一章</a>
<a href="#">回到顶部</a>
这里我们用到了 id 属性，它是一个全局属性，所有的元素都可以用这个属性，一个页面中id应该是唯一的。<a>还可以在其他页面跳转到指定页面的指定位置。如果<a>元素的href属性只写了一个#，它的作用是回到页面的顶部。
<a>除了前面这种实现普通链接和锚链接之外，还可以实现功能链接，点击之后触发一个功能，例如写邮件，打电话，执行js代码等。
<a href="mailto:[email protected]">给作者发邮件</a>
<a href="tel:+10086">给作者打电话</a>
<a href="javascript:alert('hello')">给作者打电话</a>
最后再接个一个 target 属性，它表示打开新的页面是在当前标签页还是新的标签页，默认属性是_self当前页，改为_blank即可在新的标签页打开页面。
1.6、图片元素
图片元素没有结束标签，也就是说它是一个空元素。它有一个src属性用来填写图片资源的路径。资源可以是站内资源，也可以是站外资源，站内资源一般使用相对路径。还有一个alt属性，它用于当网络问题或资源问题导致图片无法加载时，显示出来的提示文字
<img src="https://c.pxhere.com/photos/30/cc/bike_bmx_sky_silhouette_person-38863.jpg!d" alt="图片加载失败">
在实现点击图片进行链接跳转转，就可以在图片元素外套一层<a>元素。也可以实现点击图片的不同位置跳转到不同的页面，就需要用到<map>元素，它把图片看成是一张地图。<map>的具体使用就不再介绍，它相对复杂一点且使用场景并不多。
1.7、figure元素
<figure> 元素代表一段独立的内容，可能包含
<figure>
<img
src="/shared-assets/images/examples/elephant.jpg"
alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption><figure>
</figure>
如上，<figcaption>是对图片的解释，可以包裹在<figure>作为一个独立单元。<figcaption>也可以再嵌套如标题元素。这样写不会有渲染效果，只是增强了语义化。
1.8、列表元素
列表元素包含三种，分别是有序列表、无序列表和定义列表。
<!--有序列表-->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
<!--无序列表-->
<ul>
<li>女的</li>
<li>活的</li>
</ul>
有序列表默认的展示效果会在前面加一个数字，这个也是CSS控制的。<ol>有一个type属性，默认值为1，即以数字显示序号，也可以设置为i，使用罗马数字，也可以使用字母，a或A。一般还是使用CSS来控制序号的形式。
无序列表的默认效果是前面只有一个原点，同样也是CSS可以来控制。定义列表很少用到，使用<dl>标签定义，子元素需要<dt>和<dd>一个标题一个描述。这里不再给示例。
二、容器元素
容器元素是一种特殊的HTML元素，它们的主要作用是组织、包裹和分组其他HTML元素。它们本身不具备特定的语义或视觉效果，但通过对内容的“打包”，可以更方便地应用样式（CSS）或进行布局
早期容器元素只有一个div，它是没有语义的，只用来划分一个区域。因此浏览器不能理解div元素中是什么内容。到了html5后引入了新的语义化容器元素。
- header 用来表示页头或文章头部
- footer 表示页脚或文章尾部
- nav 表示导航链接 比如菜单，索引，目录等都可以使用
- main 定义文档主要内容
- artical 表示整篇文章
- section 表示文章章节
- aside 表示页面的附加信息，如侧边栏等
这些容器和div一样没有任何效果，只是用来划分区域的，和div不同的是，他们具体语义了。
2.1、元素包含关系
在语义化容器中，元素可以进行嵌套，这就是元素之间的包含关系。在html5以前，块级元素可以包含行内元素，行内元素不可以包含块级元素，但是<a>例外。在html5后弃用了这种说法，
但是元素的包含关系变的更复杂了。元素的包含关系由元素的内容类别决定。
html5中对每个元素都进了分类，每个元素都属于一个或多个分类，以及每个元素可以放置哪些分类。不需要去记，需要时查询mdn文档即可，仅需记住容器元素可以包含任意元素。a元素也基本可以包含任意元素，还有一些特定元素如 ol元素只能包含li元素。
三、html元素周期表
我们在这里只介绍了一些比较常用的元素，但是html提供的元素远不止这些，需要时可以去查询文档，也可以通过html元素周期表查询所有的html元素。
「真诚赞赏，手留余香」
WangFuJie Blog
真诚赞赏，手留余香
使用微信扫描二维码完成支付
