HTML 是超文本标记语言，用于构建网页结构。1991 年 Tim Berners-Lee 发明了 HTML，此后经历多个版本演进，现行标准为 HTML5…

HTML 是超文本标记语言，用于构建网页结构。1991 年 Tim Berners-Lee 发明了 HTML，此后经历多个版本演进，现行标准为 HTML5。HTML 是 Web 技术栈的基础，与 CSS、JavaScript 共同构成互联网内容展示的核心。

HTML 文档由元素组成。元素使用标签标记，标签成对出现，分别为开始标签和结束标签。空元素使用自闭合标签如
、。元素可嵌套，形成树形结构。

基本文档结构包括 DOCTYPE、html、head、body。DOCTYPE 声明文档类型，html 根元素包含所有内容。head 元素放置元数据，body 元素包含可见内容。

标题通过 h1 到 h6 标签定义。h1 是页面主标题，一个页面只应有一个。搜索引擎高度重视标题标签，合理使用有助于 SEO 优化。

段落使用 p 标签。每个段落自动前后空一行。浏览器会自动合并连续空白字符。内容较长的文本应合理分段，提高可读性。

链接使用 a 标签，href 属性指定目标地址。mailto: 协议创建邮件链接，tel: 协议创建电话链接。target=”_blank” 在新标签页打开链接。rel=”noopener” 提高安全性。

图片使用 img 标签，src 属性指定图片地址，alt 属性提供替代文本。width 和 height 属性避免页面抖动。响应式图片使用 srcset 属性提供多分辨率版本。

列表用于组织内容。无序列表 ul 使用圆点标记，有序列表 ol 使用数字标记，列表项使用 li 标签。定义列表 dl 配合 dt 和 dd 展示术语定义。

表格使用 table、tr、th、td 标签。table 包裹表格，tr 定义行，th 定义表头单元格，td 定义数据单元格。caption 标签添加表格标题，thead 和 tbody 分组表头和表体。

表单用于收集用户输入。form 标签包裹表单元素，action 属性指定提交地址，method 属性指定提交方法。input 是多功能输入标签，type 属性决定其行为。

input 标签的 type 属性值丰富。text 创建单行文本框，password 创建密码框，email 验证邮件格式，number 限制数字输入。checkbox 创建复选框，radio 创建单选框。

按钮使用 button 标签或 input[type=”submit”]。type 属性区分提交、重置、普通按钮。button 标签可嵌套内容，样式更灵活。点击事件通过 JavaScript 处理。

textarea 创建多行文本输入框。cols 和 rows 属性设置列数和行数。placeholder 属性提供输入提示。maxlength 限制输入长度。

select 和 option 创建下拉选择框。multiple 属性支持多选。optgroup 标签对选项分组。selected 属性设置默认选项。

表单验证提升数据质量。required 属性必填，pattern 属性使用正则验证，min 和 max 设置数值范围。浏览器原生验证无需 JavaScript。

无语义元素 div 和 span。div 是块级容器，span 是行内容器。无语义元素用于布局和样式控制。语义化标签如 nav、article、section、aside 替代部分 div 使用。

HTML5 新增语义标签。header 和 footer 定义页头页脚。nav 定义导航区域。article 定义独立内容。section 定义文档章节。aside 定义侧边栏。

媒体元素丰富网页内容。audio 嵌入音频，video 嵌入视频。controls 属性显示播放控件。source 标签提供多格式源。preload 属性控制预加载策略。

嵌入第三方内容使用 iframe 标签。常用场景包括地图、视频、社交插件。sandbox 属性增强安全性，allow 属性控制权限。

元数据标签位于 head 中。charset 指定文档编码，viewport 控制移动端视口，description 提供页面描述。title 定义浏览器标题，link 引入外部资源。

脚本加载使用 script 标签。defer 属性延迟加载，async 属性异步加载。noscript 标签提供脚本禁用时的替代内容。

数据存储提升用户体验。localStorage 持久存储，sessionStorage 会话存储。IndexedDB 存储结构化数据。Web Storage API 使用简单。

离线能力通过 manifest 实现。Service Workers 拦截网络请求，实现离线缓存和后台同步。Web App Manifest 定义应用元数据，支持添加到主屏幕。

可访问性确保所有人能使用网页。语义化标签帮助屏幕阅读器理解结构。aria-* 属性补充语义。alt 属性为图片提供文本说明。表单关联 label 标签。

SEO 优化依赖 HTML 结构。标题标签包含关键词。meta description 影响搜索结果展示。语义化标签帮助搜索引擎理解内容。面包屑导航提升用户体验。

响应式设计依赖 HTML 和 CSS 配合。img 标签的 srcset 和 sizes 属性提供响应式图片。picture 标签根据条件加载不同图片。语义化标签在不同设备上保持结构清晰。

链接和导航的 URL 结构影响用户体验和 SEO。清晰的 URL 层次反映网站结构。相对路径和绝对路径各有适用场景。canonical 标签避免重复内容。

调试 HTML 使用浏览器开发者工具。Elements 面板查看和编辑 DOM。Network 面板分析资源加载。Console 面板显示脚本错误和控制台输出。

HTML 模板加速开发。VS Code 的 Emmet 插件快速生成 HTML 骨架。HTML5 Boilerplate 提供完整项目模板。框架组件封装可复用结构。

理解 HTML 是 Web 开发的基础。语义化、结构化、可访问性是编写优质 HTML 的关键。持续学习规范更新，实践最佳方案。

（本文为 HTML 技术系列文章的第 81 篇）