入门
HTML基础
HTML文档结构
教程文章HTML文档结构是网页基础框架,本文详解DOCTYPE声明、html/head/body结构及meta标签配置。
HTML标签与元素
教程文章HTML标签是构建网页的基础单元,本文详解标签语法、元素构成及核心规则。
文本格式化标签
教程文章HTML文本格式化标签用于定义文字显示样式,包括加粗、斜体、下划线、删除线等常用格式。
图像与链接
教程文章HTML图像与链接是网页核心元素,本文详解img标签、a标签的属性用法及最佳实践。
列表与表格
教程文章HTML列表与表格用于组织结构化数据,本文详解无序列表、有序列表、定义列表及表格标签用法。
表单与输入
教程文章HTML表单是用户交互的核心组件,本文详解表单结构、输入类型、表单属性及验证机制。
语义化标签
教程文章HTML5语义化标签清晰描述页面结构,提升可访问性与SEO,本文详解常用语义标签用法。
HTML标签
HTML基本结构
教程文章HTML文档结构是网页的基础框架,本文详解DOCTYPE声明、html/head/body三大核心标签及meta配置。
常用标签
教程文章HTML常用标签是网页开发的基础组件,本文详解文本、链接、图片、列表、容器等高频使用标签。
语义化标签
教程文章HTML5语义化标签清晰描述内容含义,提升SEO效果和可访问性,本文详解header/nav/main/article等语义标签用法。
表单
教程文章HTML表单是用户数据收集的核心组件,本文详解form标签结构、input类型、表单验证及提交机制。
表格
教程文章HTML表格用于展示结构化数据,本文详解表格结构、单元格合并、语义化标签及样式优化方法。
多媒体标签
教程文章HTML多媒体标签支持音视频播放,本文详解video/audio标签属性、嵌入方式及最佳实践。
HTML5新特性
教程文章HTML5引入众多新特性,包括语义化标签、原生多媒体、表单增强、Canvas绘图、本地存储等重大改进。
HTML属性
HTML属性基本概念
教程文章HTML属性为元素提供附加信息,本文详解属性基本语法、分类规则及核心概念。
全局属性
教程文章HTML全局属性可应用于所有元素,本文详解id、class、style、title等核心全局属性用法。
元素特有属性
教程文章HTML元素特有属性针对特定标签生效,本文详解常用元素的专属属性及其用法。
布尔属性
教程文章HTML布尔属性表示开关状态,有则生效、无则不生效,本文详解常用布尔属性及写法规则。
自定义属性(data-*)
教程文章HTML5自定义属性data-*用于在元素上存储额外数据,通过datasetAPI可便捷访问,是前后端数据传递的常用方式。
属性值写法与转义
教程文章HTML属性值需正确使用引号与转义,本文详解属性值写法规则、引号嵌套及特殊字符转义方法。
HTML表单
进阶
原生表单验证
HTML required属性
教程文章required属性标记表单字段为必填项,提交时自动验证是否为空,是最基础的原生验证方式。
HTML type属性验证类型
教程文章HTML5新增的email、url、tel等输入类型,配合type属性实现自动格式验证,无需手写正则表达式。
HTML minlength和maxlength属性
教程文章minlength和maxlength属性限制文本输入的字符长度范围,配合原生验证自动校验输入长度。
HTML min和max属性
教程文章min和max属性用于限制数值、日期等类型输入框的取值范围,配合原生表单验证实现自动校验。
HTML pattern正则验证
教程文章pattern属性使用正则表达式验证文本输入,配合title属性提示规则,实现灵活的自定义格式校验。
HTML validity对象
教程文章validity对象是表单元素的验证状态对象,包含多个布尔属性,用于精确判断具体的验证失败原因。
HTML setCustomValidity自定义错误
教程文章setCustomValidity方法用于设置自定义验证错误信息,配合validity.customError属性实现灵活的业务校验逻辑。
HTML checkValidity和reportValidity
教程文章checkValidity检查验证状态返回布尔值,reportValidity检查并显示错误提示,两者用于手动触发表单验证。
HTML novalidate属性
教程文章novalidate属性禁止表单的原生验证,允许直接提交未通过验证的表单,适用于需要自定义验证逻辑的场景。
CSS伪类:valid和:invalid
教程文章:valid和:invalid伪类根据表单元素的验证状态自动应用样式,实现无需JavaScript的实时视觉反馈。
表单进阶与验证
多媒体与嵌入内容
HTML图像嵌入与图片标签
教程文章HTML中图像嵌入的核心方法,包括img标签基本用法、响应式图片、图片格式选择及性能优化技巧。
HTML视频与音频嵌入
教程文章HTML5原生视频与音频嵌入技术,包括video和audio标签用法、格式兼容性、控件定制及高级功能配置。
HTML iframe与嵌入内容
教程文章HTML iframe嵌入技术详解,包括基本用法、安全属性配置、跨域通信及embed/object等嵌入方式。
HTML SVG与矢量图形
教程文章SVG矢量图形核心技术,包括内联语法、路径绑定、渐变滤镜、动画系统及与Canvas对比,实现高质量可交互图形。
HTML响应式多媒体与自适应
教程文章响应式多媒体核心技术,包括图片自适应、视频响应式布局、媒体查询适配及性能优化策略。
DOM基础与浏览器API
DOM树与节点操作
教程文章DOM树是HTML文档的节点结构,本文详解节点类型、创建/插入/删除/替换操作及节点属性管理。
事件处理与事件流
教程文章JavaScript事件机制是浏览器交互的核心,本文详解事件流模型、事件对象、事件委托及绑定方式。
DOM遍历与选择器
教程文章JavaScript DOM遍历与选择器API提供灵活的元素查询方式,本文详解querySelector、遍历属性及节点导航方法。
CSS样式操作与类管理
教程文章JavaScript动态操作CSS样式和类名是常见需求,本文详解style属性、classList API及样式计算方法。
浏览器BOM与窗口对象
教程文章BOM提供浏览器窗口交互能力,本文详解window对象核心属性、screen/location/history/navigation等API用法。
本地存储与Cookie
教程文章Web本地存储提供客户端数据持久化能力,本文详解localStorage/sessionStorage/Cookie的差异与使用方法。
网络请求与Fetch API
教程文章Fetch API是现代浏览器网络请求标准,本文详解fetch用法、请求配置、响应处理及错误处理机制。
定时器与动画帧
教程文章JavaScript定时器与动画帧API用于延时执行和动画控制,本文详解setTimeout/setInterval/requestAnimationFrame用法及最佳实践。
高级标签与文档结构
HTML figure与details语义化标签
教程文章HTML语义化标签figure、figcaption、details、summary的用法,提升文档结构与可访问性。
HTML元数据标签meta
教程文章HTML meta元数据标签详解,包括字符编码、视口设置、SEO优化、社交分享等核心配置。
HTML链接与脚本标签
教程文章HTML link和script标签详解,包括资源加载、CSS引入、JavaScript执行、预加载优化等核心用法。
HTML全局属性与自定义数据属性
教程文章HTML全局属性与data-*自定义属性详解,包括id/class/style、事件属性、aria属性及dataset使用方法。
HTML实体与字符引用
教程文章HTML实体编码与字符引用详解,包括特殊字符转义、常用实体符号、数字引用及使用场景。
HTML语义化增强标签
教程文章HTML语义化增强标签time、mark、wbr、bdi、bdo的用法,提升内容语义化与可访问性。
专家
高级语义化与结构化数据
结构化数据标记(语义化视角)
教程文章结构化数据标记从语义化视角理解,是将页面内容转化为机器可理解的标准化语义表达,实现内容与数据的语义统一。
微格式
教程文章微格式(Microformats)是嵌入HTML中的轻量级语义标记,通过CSS类名表达结构化信息,适合人物、事件、联系方式等数据。
RDFa
教程文章RDFa(RDF in Attributes)是将RDF语义数据嵌入HTML属性的标准方法,提供完整的三元组语义表达能力。
JSON-LD
教程文章JSON-LD(JSON for Linking Data)是W3C推荐的语义数据格式,以JSON结构表达链接数据,是搜索引擎首选的结构化数据方案。
Schema.org词汇表
教程文章Schema.org是由Google、Bing、Yandex等联合创建的结构化数据词汇表,提供统一的语义词汇定义,覆盖数百种实体类型。
ARIA角色与属性
教程文章ARIA(Accessible Rich Internet Applications)为HTML提供无障碍属性扩展,通过角色、状态、属性帮助辅助技术理解复杂交互组件。
语义化表单
教程文章语义化表单使用正确的HTML标签和属性构建表单结构,提升可访问性、用户体验和表单验证能力。
语义化表格
教程文章语义化表格使用正确的HTML标签构建数据表格结构,通过表头关联、分组、摘要等方式提升可访问性和数据可读性。
语义化导航
教程文章语义化导航使用正确的HTML结构和ARIA属性构建导航系统,帮助用户和辅助技术理解导航层级和关系。
HTML性能优化
HTML 减少 HTTP 请求优化
教程文章HTTP 请求数量直接影响页面加载性能,通过资源合并、内联、精灵图等技术减少请求次数。
HTML 异步加载资源优化
教程文章异步加载通过延迟非关键资源加载时机,优先保障首屏渲染,显著提升页面加载体验。
HTML 代码拆分优化
教程文章代码拆分是提升页面加载性能的核心策略,通过按需加载减少首屏资源体积,加快页面渲染速度。
HTML 预加载与预连接优化
教程文章预加载和预连接通过提前建立连接和加载资源,减少网络延迟,显著提升页面加载性能。
HTML 关键渲染路径优化
教程文章关键渲染路径决定首屏渲染速度,通过优化 DOM 构建、CSSOM 生成和渲染树,加速页面首次渲染。
多媒体嵌入高级用法
响应式多媒体嵌入
教程文章响应式多媒体嵌入技术确保视频、音频在不同设备上自适应显示,提升用户体验并满足移动优先的SEO要求。
无障碍多媒体嵌入
教程文章无障碍多媒体嵌入确保视频、音频内容对所有用户可访问,包括字幕、描述性音频、键盘控制等WCAG合规实践。
HTML5 视频标签与属性
教程文章HTML5 video 标签原生支持视频播放,通过属性控制自动播放、循环、静音、预加载等行为,配合 source 元素实现多格式兼容。
HTML5 音频标签与属性
教程文章HTML5 audio 标签提供原生音频播放能力,支持多格式、预加载控制、JavaScript API,是嵌入音频内容的标准方式。
SVG 与 Canvas 嵌入
教程文章SVG 和 Canvas 是 HTML5 图形绘制的两大核心技术,SVG 适合矢量图形,Canvas 适合位图绑定和游戏开发,各有应用场景。
iframe 高级用法
教程文章iframe 用于嵌入外部网页内容,通过 sandbox、srcdoc、postMessage 等特性实现安全可控的跨域内容嵌入与通信。
嵌入对象标签 object 与 embed
教程文章object 和 embed 标签用于嵌入外部内容如PDF、Flash、插件等,在现代Web中逐渐被更安全的标准替代,但仍需了解其用法。
SEO基础
SEO元标签(title/meta/robots/canonical等)
教程文章SEO元标签包括title、description、robots、canonical等,是控制搜索引擎抓取、索引、展示的核心配置。
语义化HTML(SEO友好结构)
教程文章语义化HTML通过使用具有明确含义的标签构建页面结构,提升搜索引擎理解能力与页面可访问性,是SEO优化的基础实践。
结构化数据标记
教程文章结构化数据标记(Schema.org)帮助搜索引擎理解页面内容,提升搜索结果展示效果,是现代SEO的重要技术手段。
URL结构优化
教程文章SEO友好的URL结构应简洁、可读、包含关键词,便于搜索引擎理解和用户记忆,是页面优化的基础环节。
内部链接策略
教程文章内部链接是连接网站页面的纽带,合理的内链结构能提升页面权重传递效率、改善爬虫抓取、增强用户体验。
图片优化与Alt属性
教程文章图片SEO优化包括格式选择、尺寸控制、Alt属性编写,能提升图片搜索排名、加快页面加载、改善无障碍体验。
标题标签层级
教程文章标题标签(h1-h6)的层级结构对SEO至关重要,合理的层级帮助搜索引擎理解页面内容架构和重点。