????????这篇文章将根据页面的基本组成，补充一些标签元素，由于这些标签元素都比较容易理解，有些地方就不多做解释。提前说明：下面给出的代码都是放在<body></body>标签里的。
二、<header> 标签
概念：<header>标签定义文档或者文档的一部分区域的页眉。<header> 元素作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 <header> 元素。
注意：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
代码：
<header>
<h1>header 标签</h1>
<p>注意：header 标签不能被放在 footer、address 或者另一个 header 元素内部。</p>
</header>运行结果：
一、<footer> 标签
概念：<footer> 标签定义文档或者文档的一部分区域的页脚。典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个 <footer> 元素。假如使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用<address>标签。
代码：
<footer>
<p>footer 标签</p>
<p><time pubdate datetime="022-01-28"></time></p>
<p>作者：hurary</p>
</footer>运行结果：
一、<time> 标签
概念：<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，对时间进行一个标准，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
<time>标签有两个属性：
（1）datetime?属性：datetime 属性规定日期或时间。在该元素的内容中未指定日期或时间时，使用该属性。
语法：<time datetime="YYYY-MM-DDThh:mm:ssTZD">
- YYYY - 年 (例如 2022)
- MM - 月 (例如 01 表示 January)
- DD - 天 (例如 01)
- T - 必需的分隔符，若规定时间的话
- hh - 时 (例如 18 表示 6.00pm)
- mm - 分 (例如 09)
- ss - 秒 (例如 03)
- TZD - 时区标识符 (Z 表示祖鲁，也称为格林威治时间，常用的有PRC（中国）UTC（西方时间）)
（2）pubdate属性：指示 <time> 元素中的时间是文档最新的发布日期
代码：
<p>time标签</p>
<p>每天晚上 <time>11:00</time> 前睡觉减少脱发。</p>
<p>祝你<time datetime="2022-10-05T05:10:05PRC">生日</time>快乐</p>
<p><time pubdate datetime="022-01-28"></time></p>运行结果：
一、<aside> 标签
概念：<aside> 标签是用来做辅助区域内容标注，<aside> 标签常定义 <article> 标签外的内容，
aside 的内容应该与附近的内容相关。
代码：
<article>
<p>
article 标签里p标签的内容
</p>
<aside>
<h4>aside 标签</h4>
<p>这里的 aside 标签是用来做内容标注</p>
</aside>
</article>运行结果：
?
三、<article> 标签
概念：<article> 标签定义独立的内容。<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。<article> 的潜在来源有：论坛帖子、博客文章、新闻故事、评论等
?代码：
<h1>article 标签</h1>
<p> <article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分</p>运行结果：
四、<hgroup> 标签
概念：当标题有多个层级时，<hgroup> 标签被用来对标题元素<hn>进行分组。
代码：
<hgroup>
<h1>这是一个标签</h1>
<h2>这是其他的标题</h2>
</hgroup>
<p>这是段落</p>运行结果：
一、<section> 标签
概念：<section> 标签定义了文档（这个文档一般是个有明确主题的文档）的某个区域。比如章节、头部、底部或者文档的其他区域。
代码：
<section>
<h1>标题一</h1>
<p>段落一</p>
</section>
<section>
<h1>标题二</h1>
<p>段落二</p>
</section>运行结果：
一、<figure> 标签
概念：用于标注图像。
格式：<figure>?<img src="./img/1.jpeg（图片的路径+带后缀的文件名）" width="200" height="200">?</figure>
<figcaption>?标签：可用于给<figure>标签的元素带标题。
代码：
<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
<figure>
<img src="./img/1.jpeg" width="200" height="200">
<figcaption>星空图1</figcaption>
</figure>
<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>运行结果：
一、video 标签
概念：<video> 标签定义视频。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
格式：<video ?width="320" height="240" controls>
? ? ? ? <source src="./mp4/陈奕迅 - 孤勇者.ogg（文件路径+带后缀的文件名）" ?type="video/ogg">
? ? ? ? 您的浏览器不支持 HTML5 video 标签</video>
放置于video标签中的文本：可用于提示不支持 video?元素的浏览器，浏览器会显示出该标签的信息
<video>中的controls 属性规定浏览器应该为视频提供播放控件。如果设置了该属性，则规定不存在作者设置的脚本控件。
浏览器控件包括：播放、暂停、定位、音量、全屏切换、字幕（部分浏览器有）、音轨（部分浏览器有）
代码：
<video width="320" height="240" controls>
<source src="./mp4/陈奕迅 - 孤勇者.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签
</video>运行结果：
?
一、<mark> 标签
概念：mark 标签用于凸显某些文本把文字的背景颜色变成明亮的黄色。
代码：
<p>mark 标签用于凸显<mark>某些</mark>文本</p>运行结果：
一、<progress> 标签
概念：<progress> 标签定义运行中的任务进度，<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。若需要表示度量衡，使用?<meter>?标签代替。如果单独使用 progress 标签不做任何在不同浏览器上有不同的效果。
语法:?<progress value（当前值）="20" max（最大值）="100">
代码：
<p>
下载进度：
<progress value="20" max="100">
</progress>运行结果：
?一、<meter> 标签
概念：<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。
注意区分?<meter>标签和<progress>,<meter>标签不能作为一个进度条来使用，进度条用<progress>标签。
代码：
<meter value="1" min="0" max="1000">1000分之1</meter><br>
<meter value="0.1">0.1就是10%</meter>运行结果：
一、<wbr> 标签
概念：<wbr> (Word Break Opportunity) 标签规定在文本中的适合的地方添加换行符。如果单词太长，或者担心浏览器会在错误的位置换行，那么可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。<wbr>不会像<br>标签一样强制换行，但是会根据浏览器窗口大小在合适的地方换行。
代码：
<p>尝试缩小浏览器窗口，以下段落的 "XMLHttpRequest" 单词会被分行：</p>
<p>努力玩，努力工作。努力玩，努力工作。努力玩，努力工作。play hard <wbr>a<wbr>nd work hard</p>
<p><b>注意：</b> IE 浏览器不支持 wbr 标签。</p>运行结果：
?
一、<from>标签
概念：
代码：
运行结果：
代码解析：
一、<input> 标签
概念：<input> 标签规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。注意:?<input> 元素是空的,它只包含标签属性。提示:?你可以使用 <lable>元素来定义 <input> 元素的标注。
代码：
<form action="demo-form.php">
First name :<input type="text" name="FirstName" value="请填入名字"><br>
Last name :<input type="text" name="LastName" value="请填入性氏"><br>
Gender :<input type="text" list="data"><br>
<input type="submit" value="提交">
<datalist id="data">
<option value="女">
<option value="男">
<option value="其他">
</datalist>
</form>
<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>运行结果：
?
代码解析：
<input> 元素在 <form> 元素中使用，第三个<input>标签中添加了一个 list="data" 其中 data 指的是 datalist 标签的id，用来规定待选项的来源。图表标签<from>将在后面讲。这里知到可以结合使用就行。
一、<datalist> 标签
概念：<datalist> 标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。 出了上面的用法，details 标签还可以给一段内容增加详情。注意<datalist>标签只能在谷歌浏览器和Safari 6浏览器上使用，暂时其他浏览器不支持。
代码：
<p>
details 标签可以给一段内容增加详情，例如如下使用案例：
</p>
<details>
<summary>水果的种类</summary>
<p>蔷薇科
梨果：苹果、沙果、海棠、野樱莓、枇杷、欧楂、山楂、梨（香梨、雪梨 等）、温柏、蔷薇果、花楸 等
</p>
<p>芸香科
柑果：橘子、砂糖桔、橙子、柠檬、青柠、柚子、金桔、葡萄柚、香橼、佛手、指橙、黄皮果 等
</p>运行结果：
点开前：
?点开后：
?
代码解析：以上示例中，summary 标签是整个详情标签 details 的标题，而其他内容例如 p 标签将会收起。
一、<address> 标签
概念：<address> 标签定义文档作者/所有者的联系信息。一般不用于描述邮政地址，除非这些信息是联系信息的组成部分。如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。<address> 元素通常被包含在<footer>标签元素的其他信息<address>标签标记的文本呈斜体。
代码：
<p>对比文本
<address>
作者：hurary<br/>
联系方式：12345678910
</address>
</p>运行结果：
参考自：[1]【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素_1_bit 的博客-CSDN博客
[2] 菜鸟教程