HTML 理论知识点

HTML 语义化

HTML 语义化是指根据内容的结构化（内容语义化）来选择合适的标签（代码语义化），即用正确的标签做正确的事情

语义化的优点

HTML 语义化增强文档的可识别性

• 可以使页面在没有 CSS 样式表的情况下也能呈现出很好的内容结构
• 有利于 SEO 优化（爬虫依赖 HTML 的标签来确定渲染关键字的权重）
• 方便其他设备解析（屏幕阅读器、盲人阅读器）提升了用户体验
• 增强了代码的可读性和可维护性

常用的语义化标签

• <article>：表示文章主体部分
• <aside>：表示跟文章主体不那么相关的部分，一般包含导航、广告等工具性质的内容
• <details> 和 <summary>：表示可以查看或隐藏的其他详细信息
• <figure> 和 <figcaption>：表示与文章相关的图像、照片等流内容
• <footer>：通常出现在尾部，包含作者信息、相关链接、版权信息等
• <header>：表示导航或者介绍性的内容
• <h1> ~ <h6>：表示文章中不同层级的标题
• <main>：表示文章的主要内容
• <nav>：表示导航
  • 在 header 中大多表示文章目录
  • 在 aside 中大多是关联页面或者是整站地图
• <section>：表示文章中的“节”或“段”
• <time>：表示日期或时间

HTML5 标签选择流程图

HTML 中的语义 —— MDN

技巧

使用空格实体字符实现文本两端对齐

三种空格实体字符

•   不换行空格（No-Break Space）
  • 占据的宽度可能会受到字体样式、容器宽度、CSS 布局和其他相关因素的影响
•   半角空格（En Space）
  • 占据的宽度正好是 1/2 个中文字符的宽度
•   全角空格（Em Space）
  • 占据的宽度正好是 1 个中文字符的宽度

HTML 5

HTML5 的新特性包括以下部分：

1. 语义化元素：HTML5 引入了一些新的语义元素，如 <header>、<footer>、<nav>、<article>、<section> 等，有助于更清晰地定义网页内容的结构和目的。
2. 视频和音频支持：HTML5 提供了 <video> 和 <audio> 元素，使嵌入视频和音频变得更容易，不再需要使用第三方插件如 Flash。
3. Canvas 绘图：HTML5 中的 <canvas> 元素允许通过 JavaScript 绘制图形、动画和交互式图表，从而创建复杂的图形应用程序。
4. 本地存储：HTML5 引入了 Web Storage 和 IndexedDB，这些技术使得在浏览器中存储数据更加方便，而不依赖于服务器。
5. 新的表单元素和表单验证特性：HTML5 引入了一些新的表单元素，如 <input type="date">、<input type=color>、<input type=email> 等，同时 HTML5 提供了内置的表单验证功能，可以减少对客户端脚本的依赖，包括 required、pattern、min、max 等属性。
6. 改进的拖拽功能：HTML5 提供了更强大的拖放功能，使得在网页中实现拖放操作更容易。
7. 地理位置服务：HTML5 允许网页应用获取用户的地理位置信息，以提供基于位置的服务。
8. 增强的跨文档消息传递：HTML5 引入了跨文档消息传递 API，允许不同窗口或框架之间的通信。
9. WebSocket：HTML5 引入了 WebSocket API，允许双向通信，从而支持实时应用程序。
10. Web Workers：HTML5 允许通过 Web Workers 在后台线程中执行 JavaScript 代码，以提高性能和响应速度。