HTML基础语法与常用标签详解
HTML（超文本标记语言）是构建网页结构的核心语言。它通过一系列预定义的标签来描述内容的语义和层次，浏览器据此渲染出可视化的页面。与编程语言不同，HTML 本身不具备逻辑运算能力，而是作为内容的"骨架"，配合 CSS 和 JavaScript 实现完整的网页功能。
HTML 文档基本结构
一个标准的 HTML5 文档必须包含以下核心部分：
<!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><!DOCTYPE html>：声明文档类型，强制浏览器以 HTML5 模式解析。<html lang="zh-CN">：根元素，lang属性指定页面语言，有助于搜索引擎和屏幕阅读器理解内容。<head>：元信息容器，不直接显示在页面上，包含标题、编码、视口设置、外部资源链接等。<title>：定义浏览器标签页或搜索引擎结果中显示的标题，对 SEO 至关重要。<meta charset="UTF-8">：指定字符编码，确保中文等非 ASCII 字符正确显示。<meta name="viewport">：控制移动端页面的缩放行为，是响应式设计的基础。<body>：页面可见内容的容器，所有用户看到的元素都应置于其中。
常用文本标签
标题与段落
HTML 提供六级标题标签，语义层级清晰：
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>
<p>这是一个段落，用于组织连续文本内容。</p>语义化标题有助于搜索引擎理解页面结构，也方便辅助技术（如读屏器）导航。
文本样式
语义化强调内容含义，而非视觉表现：
| 标签 | 语义 | 视觉效果 |
|---|---|---|
<em> |
强调内容 | 斜体 |
<strong> |
重要性提升 | 粗体 |
<u> |
下划线（非语义） | 下划线 |
<del> |
已删除内容 | 删除线 |
<ins> |
新增内容 | 下划线（通常为绿色） |
<sup> |
上标 | 上标 |
<sub> |
下标 | 下标 |
避免使用 <b>、<i>，除非纯粹用于视觉修饰（如品牌名、外文术语）。
列表
无序列表（项目符号）：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>有序列表（编号）：
<ol start="5">
<li>第一步</li>
<li>第二步</li>
</ol>列表可嵌套，用于构建多级菜单或目录结构。
换行与分隔线
<br>：强制换行，常用于地址、诗歌等需要保留换行的场景。<hr>：水平分隔线，表示内容主题的切换，如章节间分隔。
注释
<!-- 这是注释，浏览器不会显示，仅用于开发者阅读 -->结构化语义标签
HTML5 引入了更具语义的容器标签，提升代码可读性与无障碍访问性：
| 标签 | 用途 |
|---|---|
<header> |
页面或区块的头部，通常含 Logo、导航 |
<nav> |
导航链接集合 |
<main> |
页面核心内容区域（每个页面唯一） |
<article> |
独立可分发的内容，如博客、新闻 |
<section> |
内容的逻辑分组，如章节、产品分类 |
<aside> |
与主内容相关但非必需的侧边内容，如广告、推荐 |
<footer> |
页面或区块的底部，含版权、联系方式 |
<div> |
无语义的通用容器，用于样式或脚本分组 |
<span> |
内联容器，用于对文本片段应用样式 |
语义化标签不改变默认样式，但极大提升代码的可维护性和 SEO 表现。
媒体资源嵌入
图像
<img src="images/logo.png" alt="公司Logo" width="200" loading="lazy">关键属性：
src：图像路径（支持相对路径与绝对 URL）alt：图像无法加载时的替代文本，对无障碍访问和 SEO 至关重要width / height：设置尺寸，避免布局抖动loading="lazy"：延迟加载，提升首屏性能
推荐格式：
.jpg：照片类图像，高压缩率.png：需透明背景或文字图标.webp：现代格式，体积比 JPEG/PNG 小 30%+，推荐优先使用.svg：矢量图形，可无限缩放，适合图标、图表
视频与音频
视频：
<video width="640" controls preload="metadata" poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>音频：
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>使用 <source> 标签提供多种格式，确保兼容性。关键属性：
controls：显示播放控件autoplay：自动播放（移动端通常被禁止）loop：循环播放preload：预加载策略（none/metadata/auto）
内嵌网页
<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>注意：内嵌第三方内容可能带来安全与性能风险，需谨慎使用。
SVG 图形
直接在 HTML 中绘制矢量图形：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>优点：可缩放、轻量、可动画、可 CSS 样式控制。
画布（Canvas）
<canvas id="myCanvas" width="300" height="200"></canvas>Canvas 是一个位图绘制区域，需通过 JavaScript 进行动态绘图，常用于游戏、数据可视化。
超链接与锚点
使用 <a> 标签创建链接：
<a href="https://www.example.com" target="_blank" rel="noopener">外部链接</a>
<a href="#section2">跳转到章节2</a>
<h2 id="section2">章节2</h2>关键属性：
href：目标地址target="_blank"：在新标签页打开rel="noopener"：安全属性，防止新页面访问原页面的window.opener#anchor：页面内锚点跳转，需配合id使用
表单元素
表单是用户与网站交互的核心：
<form action="/submit" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="18" max="100">
<label>
<input type="checkbox" name="agree" required>
我同意用户协议
</label>
<label for="country">国家：</label>
<select id="country" name="country">
<option value="cn">中国</option>
<option value="us">美国</option>
</select>
<button type="submit">提交</button>
</form>关键标签与属性：
<form>：表单容器，method（GET/POST）和action（提交地址）必设<label>：绑定输入控件，提升可访问性，点击标签即可聚焦输入框input[type="..."]：支持多种类型（text、email、password、date、range、file 等）required：必填校验placeholder：占位提示<select>+<option>：下拉选择<textarea>：多行文本输入<button type="submit">：触发表单提交
表格
用于展示结构化数据：
<table>
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>85</td>
<td>92</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>78</td>
<td>88</td>
</tr>
<tr>
<td>82</td>
<td>90</td>
</tr>
</tbody>
</table>关键标签：
<thead>、<tbody>：语义化分组<th>：表头单元格，默认加粗居中<td>：数据单元格rowspan、colspan：跨行/跨列合并
焦点与可访问性
用户可通过 Tab 键在可聚焦元素间切换：
- 默认可聚焦元素：
<a>、<button>、<input>、<select>、<textarea> tabindex="0"：使非默认元素可聚焦tabindex="-1"：可编程聚焦，但不参与 Tab 顺序autofocus：页面加载时自动聚焦
良好的焦点管理是无障碍设计的重要部分，确保键盘用户能顺畅操作页面。
