HTML语义化标签
HTML5 引入了许多语义化标签，这些标签不仅增强了文档的结构，还使得内容更具可读性和可访问性。语义化标签能够清楚地描述内容的含义和作用，而不是仅仅为了样式化。以下是一些常用的HTML语义化标签：
1. **头部和导航**:
- `<header>`: 定义文档或节的头部，通常包含导航链接、Logo等。
- `<nav>`: 定义导航链接的部分。
2. **主要内容**:
- `<main>`: 定义文档的主要内容，内部通常包含多个 `<section>` 和 `<article>`。
- `<section>`: 定义文档中的一个节或部分，通常包含一个标题 `<h1>-<h6>`。
- `<article>`: 定义独立的、自成一篇的内容，如博客条目、新闻故事等。
- `<aside>`: 定义与页面内容略微分离的内容，如侧边栏。
3. **表格内容**:
- `<table>`: 定义表格。
- `<thead>`: 定义表格的表头。
- `<tbody>`: 定义表格的主体。
- `<tfoot>`: 定义表格的页脚。
- `<tr>`: 定义表格行。
- `<td>`: 定义表格单元格。
- `<th>`: 定义表格头部单元格。
4. **文本内容**:
- `<blockquote>`: 定义从另一个源引用的大段文本。
- `<cite>`: 定义作品的标题。
- `<dfn>`: 定义定义项目。
- `<em>`: 定义强调文本。
- `<strong>`: 定义重要文本。
- `<code>`: 定义计算机代码文本。
- `<pre>`: 定义预格式化的文本。
5. **表单和输入**:
- `<form>`: 定义表单。
- `<input>`: 定义输入控件，如文本字段、复选框、单选按钮、按钮等。
- `<textarea>`: 定义多行文本输入控件。
- `<select>`: 定义下拉列表。
- `<option>`: 定义下拉列表中的选项。
- `<button>`: 定义按钮。
6. **分组和划分**:
- `<div>`: 定义文档中的一个部分或节，通常用于样式化或脚本化。
- `<span>`: 定义文档中的行内的小块或节。
7. **页脚**:
- `<footer>`: 定义文档或节的页脚，通常包含作者信息、版权信息、联系信息等。
使用语义化标签的好处包括：
- **可访问性**：屏幕阅读器和其他辅助技术能够更好地解析和呈现页面内容。
- **SEO**：搜索引擎能够更好地理解页面内容，从而提高搜索排名。
- **维护性**：语义化标签使得文档结构清晰，便于开发和维护。
在编写HTML时，应该尽量使用合适的语义化标签来代替纯粹用于样式目的的 `<div>` 和 `<span>` 标签。
