HTML 理论知识点

HTML 语义化

HTML 语义化（Semantic HTML）的核心思想是利用恰当的标签来构建页面结构，确保代码能够准确描述其内容的含义。简单来说，就是让正确的标签各司其职。

采用语义化标签带来的益处

• 提升代码可读性：即使在没有 CSS 的裸奔状态下，页面也能呈现清晰的内容结构。
• 利于 SEO：搜索引擎爬虫依赖 HTML 标签来理解网页内容，语义化有助于提高关键词权重。
• 改善无障碍体验：辅助技术（如屏幕阅读器）能更好地解析页面，提升视障用户的浏览体验。
• 便于维护：结构清晰的代码更易于团队协作和后续维护。

常见语义化标签一览

• <article>：用于定义独立的内容区块，如文章正文、博客帖子等。
• <aside>：表示与周围内容关联度较低的部分，常用于侧边栏、广告或导航链接。
• <details> & <summary>：用于创建可折叠的详情组件，<summary> 定义标题。
• <figure> & <figcaption>：用于封装流内容（如图片、图表），<figcaption> 为其提供标题。
• <footer>：通常位于页面或区块底部，包含版权、作者信息或相关链接。
• <header>：定义页面或区块的头部，常包含导航或介绍性信息。
• <h1> ~ <h6>：定义不同层级的标题，构建文档大纲。
• <p>：定义文本段落。
• <main>：指定文档的主体内容，每个页面应只有一个唯一的 <main>。
• <nav>：定义导航链接部分。
• <section>：定义文档中的一个章节或区块。
• <time>：用于标记日期或时间。

注意：

• <header> 在文章中通常包含标题和目录。
• <aside> 在侧边栏中常用于关联链接或全站导航。

HTML5 新特性概览

HTML5 标准的推出极大地丰富了 Web 开发的能力，主要改进包括：

• 语义化增强：新增 <header>, <footer>, <article>, <section> 等标签，使文档结构更具描述性。
• 多媒体原生支持：通过 <audio> 和 <video> 标签直接嵌入音视频，无需第三方插件。
• 图形绘制能力：引入 <canvas> 元素，支持通过 JavaScript 进行 2D/3D 图形绘制和动画制作。
• 表单控件升级：<input> 增加了 date, email, url 等新类型，简化了数据验证。
• 本地存储进化：引入 Web Storage (localStorage/sessionStorage) 和 IndexedDB，提供了比 Cookie 更强大、容量更大的客户端存储方案。
• 地理定位：Geolocation API 允许网页（经用户授权）获取设备地理位置。
• 多线程处理：Web Workers 允许脚本在后台运行，避免复杂计算阻塞 UI 渲染。

HTML5 与 "H5" 的区别

• HTML5：特指 HTML 标准的第五个版本，是 Web 技术的核心规范。
• H5：这并非一个专业技术术语，而是国内互联网行业的一种通俗叫法。它通常泛指那些专为移动端设计、包含丰富动画和交互效果的营销页面（Marketing Page），底层往往综合运用了 HTML5、CSS3 和 JavaScript 技术。