### HTML5常用元素详解
#### 1. `<header>` - 头部
- **定义**：`<header>` 元素用于定义一个页面或者部分的头部。它通常包含与页面或部分相关的标题、logo、导航链接等信息。
- **示例**：
```html
<header>
<h1>网站名称</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
</nav>
</header>
```
#### 2. `<main>` - 页面主体
- **定义**：`<main>` 元素代表文档或应用程序的主要内容，这部分内容直接与文档的主题相关，并且是文档的核心组成部分。
- **示例**：
```html
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
```
#### 3. `<footer>` - 尾部
- **定义**：`<footer>` 元素用于定义页面底部或某个区域的底部。它可以包含版权信息、联系方式等。
- **示例**：
```html
<footer>
<p>版权所有 © 2023 某公司</p>
<address>联系我们: [email protected]</address>
</footer>
```
#### 4. `<nav>` - 导航
- **定义**：`<nav>` 元素用于定义文档中的导航链接部分，如网站的主菜单。
- **示例**：
```html
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
```
#### 5. `<aside>` - 侧栏
- **定义**：`<aside>` 元素用于定义页面内容之外的信息，比如侧边栏中的广告、相关链接等。
- **示例**：
```html
<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
</ul>
</aside>
```
#### 6. `<section>` - 区域/栏目
- **定义**：`<section>` 元素用于定义文档中的独立部分，如章节、页眉、页脚等。
- **示例**：
```html
<section>
<h2>新闻头条</h2>
<article>
<h3>新闻标题</h3>
<p>新闻内容...</p>
</article>
</section>
```
#### 7. `<div>` - 容器
- **定义**：`<div>` 元素是一个通用的容器元素，用于组合其他HTML元素，并为它们添加样式。
- **示例**：
```html
<div class="container">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
```
#### 8. `<article>` - 文章
- **定义**：`<article>` 元素用于定义独立的内容块，这些内容可以被独立分发或复用。
- **示例**：
```html
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
```
#### 9. `<figure>` - 图像/图表
- **定义**：`<figure>` 元素用于表示媒体内容（如图像、图表）以及可选的标题。
- **示例**：
```html
<figure>
<img src="image.jpg" alt="示例图片">
<figcaption>示例图片标题</figcaption>
</figure>
```
#### 10. `<figcaption>` - 图像标题
- **定义**：`<figcaption>` 元素用于为 `<figure>` 提供标题或描述。
- **示例**：
```html
<figure>
<img src="image.jpg" alt="示例图片">
<figcaption>这张图片展示了...</figcaption>
</figure>
```
#### 11. `<dl>` - 定义列表
- **定义**：`<dl>` 元素用于创建定义列表，通常用于词汇表或其他定义性的内容。
- **示例**：
```html
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
```
#### 12. `<dt>` - 定义项
- **定义**：`<dt>` 元素用于定义定义列表中的术语或项目。
- **示例**：
```html
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
```
#### 13. `<dd>` - 定义描述
- **定义**：`<dd>` 元素用于定义定义列表中项目对应的描述。
- **示例**：
```html
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
```
#### 14. `<ul>` - 无序列表
- **定义**：`<ul>` 元素用于创建一个无序列表。
- **示例**：
```html
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
```
#### 15. `<ol>` - 有序列表
- **定义**：`<ol>` 元素用于创建一个有序列表。
- **示例**：
```html
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
```
#### 16. `<li>` - 列表项
- **定义**：`<li>` 元素用于定义列表中的列表项。
- **示例**：
```html
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
```
#### 17. `<a>` - 链接
- **定义**：`<a>` 元素用于创建超链接。
- **示例**：
```html
<a href="http://www.example.com">访问示例网站</a>
```
#### 18. `<button>` - 按钮
- **定义**：`<button>` 元素用于创建可点击的按钮。
- **示例**：
```html
<button type="button">点击我</button>
```
#### 19. `<form>` - 表单
- **定义**：`<form>` 元素用于创建HTML表单。
- **示例**：
```html
<form action="/submit">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<button type="submit">提交</button>
</form>
```
#### 20. `<input>` - 输入字段
- **定义**：`<input>` 元素用于创建输入控件，如文本框、按钮、单选按钮等。
- **示例**：
```html
<input type="text" placeholder="请输入您的名字">
```
#### 21. `<label>` - 标签
- **定义**：`<label>` 元素用于为表单控件定义标签。
- **示例**：
```html
<label for="email">邮箱地址:</label>
<input type="email" id="email" name="email">
```
#### 22. `<span>` - 内联容器
- **定义**：`<span>` 元素用于在文档中对一部分文本应用样式或添加特定功能。
- **示例**：
```html
<p>这是一段文字，其中 <span style="color:red;">红色部分</span> 是高亮显示的部分。</p>
```
#### 23. `<p>` - 段落
- **定义**：`<p>` 元素用于定义一个段落。
- **示例**：
```html
<p>这是一个段落。</p>
```
#### 24. `<strong>` - 强调文本
- **定义**：`<strong>` 元素用于强调文本的重要性。
- **示例**：
```html
<p>这是一个 <strong>非常重要的</strong> 段落。</p>
```
#### 25. `<em>` - 强调文本
- **定义**：`<em>` 元素用于强调文本。
- **示例**：
```html
<p>这是一个 <em>强调的</em> 段落。</p>
```
#### 26. `<time>` - 时间
- **定义**：`<time>` 元素用于表示具体的时间或日期。
- **示例**：
```html
<p>这篇文章发表于 <time datetime="2023-01-01">2023年1月1日</time>。</p>
```
以上是HTML5中一些常见且重要的元素介绍，这些元素可以帮助开发者更清晰地组织和展示网页内容。通过合理使用这些元素，不仅可以提高网页的可读性和可维护性，还能使网页更具语义化，有助于搜索引擎优化和无障碍访问。
