再补充一些 HTML 中稍进阶的知识点，构建更复杂、更规范的网页结构：
14. HTML5 语义化标签详解
除了之前提到的 <header> 、 <nav> 等，HTML5 还有更多语义化标签，它们让代码结构更清晰，便于机器（搜索引擎、屏幕阅读器）理解内容：
- <article> ：独立的文章内容（如博客文章、新闻报道）。
- <section> ：页面中的一个区块（通常包含标题），比如“产品介绍”“用户评价”等。
- <aside> ：侧边栏内容，与主要内容相关但非核心（如广告、相关推荐）。
- <figure> 和 <figcaption> ：用于包裹图片及说明文字，语义更明确。
示例：
html
<figure>
< img src="nature.jpg" alt="自然风光">
<figcaption>图1：山间日出</figcaption>
</figure>
- <time> ：表示时间或日期， datetime 属性用于机器识别（如 datetime="2024-05-20" ）。
15. 内联框架（iframe）
<iframe> 可以在当前页面嵌入另一个网页，常用于展示地图、视频（如 YouTube 嵌入）等：
html
<iframe src="https://example.com" width="800" height="500" title="示例页面"></iframe>
注意： title 属性是必须的，用于提升可访问性；部分网站可能设置了禁止被嵌入（通过 X-Frame-Options 限制）。
16. 全局属性扩展
除了 class 、 id 等，还有一些实用的全局属性：
- hidden ：隐藏元素（浏览器不显示，与 display: none 效果类似）。
html
<p hidden>这段文字会被隐藏</p >
- lang ：指定元素内容的语言（帮助浏览器和翻译工具识别）。
html
<html lang="zh-CN"> <!-- 整个页面为中文 -->
<p lang="en">Hello World</p > <!-- 这段为英文 -->
- data-* ：自定义数据属性，用于存储页面或应用的私有数据（可通过 JavaScript 读取）。
html
<div class="user" data-id="123" data-name="小明">用户信息</div>
17. 字符编码
在 <head> 中通过 <meta> 标签指定字符编码，避免中文乱码：
html
<head>
<meta charset="UTF-8"> <!-- 最常用的编码，支持几乎所有字符 -->
</head>
这是必须设置的，否则页面可能出现乱码。
18. 响应式相关的基础标签
为了让网页在手机、电脑等不同设备上正常显示，HTML 中可配合 <meta> 做基础设置：
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width ：让页面宽度等于设备屏幕宽度。
- initial-scale=1.0 ：初始缩放比例为 1（不缩放）。
这是响应式网页的基础，后续学习 CSS 时会频繁用到。
19. 链接的特殊用法
<a> 标签除了跳转网页，还有其他功能：
- 跳转到页面内指定位置（锚点）：先给目标元素设置 id ，再用 href="#id值" 链接。
html
<a href=" ">跳转到第一部分</a >
...
<div id="section1">第一部分内容...</div>
- 发送邮件： href="mailto:邮箱地址" 。
html
<a href="mailto:example@xxx.com">联系我们</a >
- 拨打电话（移动端有效）： href="tel:电话号码" 。
html
<a href="tel:123456789">打电话</a >
20. 可访问性基础（A11y）
HTML 不仅要实现功能，还要考虑无障碍访问（如帮助视障用户通过屏幕阅读器使用网页）：
- 为图片添加 alt 属性（必做），屏幕阅读器会读取 alt 内容。
- 用 <label> 关联表单元素（如前面表单示例），避免用户不知道输入框的用途。
- 合理使用标题标签 <h1> - <h6> ，形成层级（如 <h1> 是页面主标题， <h2> 是二级标题，帮助屏幕阅读器梳理结构）。
这些知识点覆盖了 HTML 从基础到稍进阶的内容，核心还是“结构为王”——用合适的标签组织内容，让代码既易读又符合规范。
接下来可以尝试一个综合练习：用 HTML5 语义化标签搭建一个完整的网页框架（包含头部导航、主体内容区、侧边栏、底部信息），并加入表单、图片、链接等元素。完成后，你会对 HTML 的应用有更清晰的认识~