【FrontEnd】HTML

HTML 相关知识点详解

一、HTML 基础概念

HTML（Hypertext Mark-up Language），即超文本标记语言，是用于创建网页和网页应用的标准标记语言。它使用一系列标签（tags）来描述网页的结构和内容。

二、HTML5 特性

优点：

• 多设备、跨平台：HTML5 提供了更好的跨平台兼容性，使得网页能够在多种设备上良好显示。
• 标准统一：HTML5 制定了统一的标准，减少了不同浏览器之间的兼容性问题。
• 用户体验：引入了新的标签和属性，提升了用户体验，如语义化标签、多媒体元素等。
• 新技术：支持 Web Worker、WebSocket、Geolocation 等新技术，增强了网页的功能性。
• 本地离线存储：提供了 localStorage 和 sessionStorage，使得网页可以在没有网络连接的情况下存储数据。

缺点：

• 安全性：存在一定的安全问题，需要开发者注意防范。
• 完善性：老浏览器需要加载 HTML5 Shiv 文件来解决兼容性问题。
• 技术门槛高：对于初学者来说，掌握 HTML5 的全部特性可能有一定难度。
• 性能低：在某些情况下，HTML5 的性能可能不如预期。

三、HTML 元素分类

块级元素（Block-level Elements）：

• 特性：每个块级元素都会从新的一行开始，独占一行，可以直接控制宽度、高度等 CSS 属性。
• 用途：用于大布局、大结构的搭建。

行级元素（Inline Elements）：

• 特性：和其他行内元素从左到右在一行显示，不可以直接控制宽度、高度等 CSS 属性，但可以直接设置内外边距的左右值。
• 用途：用于文字、小图标、小结构的搭建。

四、HTML 与相关技术的关系

• XHTML：基于 XML 的可扩展超文本标记语言，比 HTML 更严格，要求标签必须正确嵌套、关闭，且标签名小写。
• DHTML：动态超文本标记语言，包含动态样式、动态内容、动态定位等特性。
• XML：可扩展标记语言，用于数据交换，与 HTML 类似，但更注重数据的描述和存储。

五、浏览器存储机制

• Cookies：用于辨别用户身份，存储在客户端，但不能跨域，且数量和大小有限制。
• localStorage：长期存储数据，浏览器关闭数据不丢失，同源文档可共享，独立存储空间大，有丰富 API。
• sessionStorage：与 localStorage 类似，但数据在浏览器关闭后会丢失。

六、W3C 标准与 SEO 优化

W3C 标准：

• 构成：结构层 HTML、表示层 CSS、行为层 JS。
• 要求：标签闭合、标签小写、不乱嵌套等，以提高搜索机器人搜索几率和网页性能。

SEO 优化：

• 合理的 title、description、keywords。
• 语义化的 HTML 代码，符合 W3C 规定。
• 重要内容 HTML 代码放在最前，避免用 JS 输出内容。
• 少用 iframe，因为搜索引擎不会抓取 iframe 中的内容。
• 非装饰性图片必须加 alt 属性。
• 提高网站速度，因为网站速度是搜索引擎排序的一个重要指标。

七、HTTP 协议与浏览器渲染

HTTP 协议：

• HTTP1.0：解析基于文本。
• HTTP1.1：增加了长连接，支持多个请求排队串行化处理。
• HTTP2：传输可基于明文或 HTTPS，解析基于二进制格式，支持多路复用、服务端推送等特性。

浏览器渲染：

• 渐进式渲染：用于提高网页性能，包括图片懒加载、分层次渲染等。
• 渐进增强与优雅降级：渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行改进；优雅降级则从复杂的现状开始，并试图减少用户体验的供给。
• 重绘与重排：重绘是改变元素的外观而不影响其布局；重排是重新定义元素的大小和位置，可能导致整个页面的重新布局。

八、一次完整的 HTTP 事务过程

1. 域名解析：将域名解析为 IP 地址。
2. TCP 三次握手：建立 TCP 连接。
3. 发起 HTTP 请求：在 TCP 连接上发送 HTTP 请求。
4. 服务器端响应：服务器返回 HTTP 响应，包括 HTML 代码等资源。
5. 浏览器解析 HTML：浏览器解析 HTML 代码，并请求 HTML 代码中的资源。
6. 页面渲染：浏览器对页面进行渲染，呈现给用户。

综上所述，HTML 作为网页开发的基础语言，具有广泛的应用和丰富的特性。掌握 HTML 及其相关技术，对于网页开发和优化至关重要。