HTML 结构与常用标签
HTML（超文本标记语言）是构建网页的基础，掌握其核心结构和常用标签对于前端开发至关重要。本文将详细介绍 HTML 的基本结构以及最常用的标签，帮助初学者快速入门。
一. HTML 的基本结构
一个标准的 HTML 文档包含以下基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>（1）<!DOCTYPE html>：声明文档类型，告诉浏览器这是 HTML5 文档
（2）<html>：根元素，包裹整个 HTML 文档
（3）<head>：包含文档的元数据，如标题、字符集等
（4）<body>：包含网页的可见内容
二. 常用 HTML 标签分类
1. 文档结构标签
这些标签用于组织网页的整体结构，提升文档的语义化：
（1）<header>：定义文档的头部区域，通常包含标题、logo 和导航
（2）<nav>：定义导航链接的部分
（3）<main>：指定文档的主要内容
（4）<article>：表示独立的文章内容
（5）<section>：定义文档中的节或区域
（6）<aside>：表示与主要内容相关的附加信息
（6）<footer>：定义文档的页脚
2. 文本内容标签
用于展示各种文本内容：
（1）<h1> 到 <h6>：定义标题，h1 级别最高，h6 级别最低
（2）<p>：定义段落
（3）<a href="url">：创建超链接
（4）<strong>：表示重要文本（加粗）
（5）<em>：表示强调文本（斜体）
（6）<u>：定义下划线文本
（7）<br>：插入换行
（8）<hr>：创建水平分隔线
（9）<blockquote>：定义长引用
（10）<q>：定义短引用
（11）<code>：定义计算机代码
（12）<pre>：定义预格式化文本（保留空格和换行）
3. 列表标签
（1）<ul>：定义无序列表
（2）<ol>：定义有序列表
（3）<li>：定义列表项
（4）<dl>：定义描述列表
（5）<dt>：定义描述列表中的术语
（6）<dd>：定义描述列表中术语的描述
4. 媒体标签
（1）<img src="url" alt="描述">：插入图像
（2）<audio>：定义音频内容
（3）<video>：定义视频内容
（4）<iframe>：嵌入另一个 HTML 文档
5. 表格标签
（1）<table>：定义表格
（2）<tr>：定义表格行
（3）<td>：定义表格单元格
（4）<th>：定义表头单元格
（5）<thead>：定义表格的表头部分
（6）<tbody>：定义表格的主体部分
（7）<tfoot>：定义表格的页脚部分
6. 表单标签
（1）<form>：定义表单
（2）<input>：定义输入控件（文本框、复选框等）
（3）<label>：定义表单元素的标签
（4）<select>：定义下拉列表
（5）<option>：定义下拉列表中的选项
（6）<textarea>：定义多行文本输入控件
（7）<button>：定义按钮
学习建议
-
语义化优先：尽量使用语义化标签（如 <header>, <article>）而非通用的 <div>，这有助于搜索引擎理解页面结构，也提高了代码的可读性。
-
实践出真知：学习 HTML 最好的方式是动手编写代码，尝试组合使用不同的标签创建页面。
-
关注标准：HTML 标准在不断发展，关注最新的 HTML5 标准可以了解新特性和最佳实践。
-
兼容性考虑：虽然现代浏览器对 HTML5 支持良好，但在开发时仍需考虑目标用户群体使用的浏览器版本。