单元一 HTML5基础知识端基础前WebHTML5语义化标签HTML5新增的语义化标签主要有：<article>、<section>、<nav>、<aside>、<header>、<footer>、<time>...语义化标签优点：为了在没有CSS的情况下，页面也能呈现出很好的内容结构比<div>标签有更加丰富的含义，方便开发与维护方便其他设备解析（移动设备等）有利于合作，遵守W3C标准HTML5语义化标签<article>标签<article>标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一篇网站新闻……<article>可以嵌套，则内层的artilce对外层的article标签有隶属的关系。HTML5语义化标签<article>示例<article> <h1>文章标题</h1> 这是一篇文章 <article>评论1...</article> <article>评论2...</article></article>HTML5语义化标签<section>标签<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<section>
HTML5 是一种重要的前端技术，它为Web开发者提供了许多新的特性和改进，其中包括语义化标签的引入。这些标签的设计目的是增强网页内容的结构和意义，使得内容在没有CSS样式的情况下也能保持良好的逻辑结构，同时方便了开发和维护，提高了网页的可访问性和搜索引擎优化。
1. **<article>** 标签：主要用于封装展示独立内容的部分，如博客文章、论坛帖子或新闻报道。它可以嵌套使用，内部的<article>标签表示对外部<article>的从属关系。例如：
```html
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
```
2. **<section>** 标签：定义文档的章节或区段，通常包含有明确主题的内容，如章节、页眉或页脚。它可能包含一个或多个<header>和<footer>，并可以配合<h1-h6>标签使用。示例：
```html
<section>
<h2>章节标题</h2>
<p>章节内容...</p>
</section>
```
3. **<aside>** 标签：用于放置非主要内容，如侧边栏、广告或相关链接。它的内容与主内容有关，但并非不可或缺。例如：
```html
<article>
...
<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
</ul>
</aside>
</article>
```
4. **<hgroup>** 标签：用于组合多个<h1-h6>标题元素，通常用于在一个区段中有连续的标题时，保持标题的层次清晰。例如：
```html
<hgroup>
<h1>主要标题</h1>
<h2>次要标题</h2>
</hgroup>
```
5. **<header>** 标签：定义文档或区段的头部信息，通常包含导航链接、logo或页面介绍。一个页面可以有多个<header>标签。示例：
```html
<header>
<h1>网站名称</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
```
6. **<footer>** 标签：定义文档或section的页脚，常用于包含版权信息、作者信息、创建日期等。同样，一个页面可以有多个<footer>标签。例如：
```html
<footer>
<p>版权所有 © 2022 网站名称</p>
<p>联系方式：[email protected]</p>
</footer>
```
7. **<nav>** 标签：用于定义页面的主要导航链接，帮助用户在网站中导航。不过，并非所有的链接都应放在<nav>中。示例：
```html
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
```
8. **<time>** 标签：用于表示日期和时间，可以是公历日期、时间或两者结合，有助于机器理解并处理这些信息。例如：
```html
<time datetime="2022-01-01">2022年新年快乐！</time>
```
这些语义化标签的应用极大地提升了Web内容的结构化程度，使网页内容在不同设备和浏览器中都能得到正确理解和呈现，同时对于SEO和无障碍访问也有显著提升。作为Web前端开发者，熟练掌握和使用这些HTML5语义化标签是提升网页质量和专业性的关键。
