第15课：选择器（下）——伪元素、权重计算与 !important上节课我们学习了基础选择器、组合选择器、属性选择器和伪类选择器。本节课将继续深入 CSS 选择器的剩余核心领域：伪元素——它们让你能创建“不存在于 HTML 中的虚拟元素”；选择器权重（Specificity）的精确计算方法——这是解决样式冲突的底层逻辑；以及 !important 的工作原理、危害与唯一正当使用场景。掌握这三者，你就能在任何复杂度的样式表中游刃有余地诊断和解决优先级问题。
1. 伪元素：创建虚拟的元素伪元素以 :: 开头（CSS3 规范推荐双冒号，以区别于伪类的单冒号），用于选择元素的某个特定部分，或在...
第14课：选择器（上）——基础选择器、组合选择器、属性选择器、伪类选择器CSS 选择器是连接 HTML 结构与视觉样式的桥梁。它决定了“哪些元素应该被赋予样式”。选择器的精准度直接影响代码的可维护性、可复用性以及样式冲突的概率。本节课将系统讲解四类核心选择器的语法、行为与使用场景：从最基础的类型和类选择器，到能匹配复杂模式的属性选择器和伪类选择器。
1. 基础选择器：四种最基本的元素定位方式基础选择器是所有选择器组合的原子单位。掌握它们的权重与行为，是理解更复杂选择器的前提。
1.1 通配选择器（Universal Selector）* 匹配文档中所有元素。
12345* {...
第12课：HTML 最佳实践与标准演进经过前面 11 节课的学习，我们已经掌握了 HTML 的各个具体领域——从文档结构到语义标签，从表单到多媒体，从可访问性到嵌入内容。本节课作为 HTML 部分的收官之作，将从宏观视角审视 HTML 标准的发展历程、当前生态以及工业级最佳实践。理解 HTML 的标准制定机制和演进方向，将帮助你穿透纷繁的框架与工具，看到 Web 平台的底层脉络，并在长期的技术选型与代码维护中做出更稳健的决策。
1. HTML 标准简史：从 W3C 到 WHATWG1.1 分道扬镳：XHTML 2.0 的失败与 WHATWG 的诞生1990 年代末至 2000 年代初，...
第11课：iframe 与嵌入内容——安全、沙箱与跨域通信<iframe> 允许将一个完整的 HTML 文档嵌入到另一个文档中，是实现第三方内容集成（如地图、广告、支付页面、代码演示）的核心技术。然而，它也是前端安全领域最危险的元素之一——点击劫持、恶意代码注入、跨域信息泄露等攻击常借 <iframe> 实施。本节课将深入讲解 <iframe> 的基础用法、安全属性 sandbox 的精细化控制、allow 权限策略，以及现代跨文档通信 API postMessage 的安全实践。
1. <iframe> 基础：嵌入另一个浏览上下文<...
第10课：可访问性（a11y）基础——ARIA、键盘导航与屏幕阅读器可访问性（Accessibility，常缩写为 a11y，因首尾字母间有 11 个字母）是指让网站或应用对所有用户——包括残障人士——可感知、可操作、可理解、稳健（WCAG 四大原则）。这不仅是道德和法律（如 ADA、Section 508）的要求，更直接扩大用户群体、提升 SEO、改善整体代码质量。本节课将深入讲解可访问性的核心支柱：语义 HTML 的基础作用、ARIA 属性的正确用法、键盘导航的实现以及屏幕阅读器兼容性。
1. 可访问性的基石：语义化 HTML在讨论 ARIA 之前，必须明确一个最高原则：好的可访问...
第9课：HTML5 语义区块标签在 HTML5 之前，开发者只能使用 <div> 来划分页面的各个区域，通过 id 或 class 赋予其含义（如 <div id="header">）。HTML5 引入了一套全新的语义区块标签，让页面的结构具有内在的含义。这些标签不仅让代码更具可读性，更是搜索引擎优化（SEO）和可访问性（a11y）基础设施的核心。本节课将逐一剖析 <header>、<footer>、<main>、<article>、<section>、<aside> 和 ...
第8课：表单元素（下）——选择框、文本域、字段集与原生验证上一节课我们掌握了 <form> 容器与各类 <input> 类型。然而，一个完整的表单系统还需要处理多行文本、下拉选择、选项分组以及结构化的字段组织。本节课将继续深入表单世界，讲解 <select> 下拉框、<datalist> 智能提示、<textarea> 多行文本、<fieldset> 与 <legend> 的分组语义，以及 HTML5 提供的原生表单验证机制。这些元素共同构成了现代 Web 表单的完整交互能力。
1. <selec...
第7课：表单元素（上）——<form>、<input> 类型与标签关联表单是 Web 交互的灵魂。从登录注册到搜索过滤，从数据提交到文件上传，表单承载了用户与服务器之间的核心数据交换。掌握 HTML 表单元素的正确用法，不仅关乎功能实现，更直接影响可用性、可访问性以及数据完整性。本节课将深入剖析 <form> 容器的基础配置、<input> 的二十余种类型及其行为差异，以及 <label> 显式关联的不可替代性。
1. <form> 表单容器：数据提交的总控中心<form> 元素定义了一个表单区域，内部...
第6课：图像与多媒体网页内容早已从纯文本进化到富媒体时代。图像让页面生动，音视频带来沉浸式体验。然而，不恰当的使用方式会导致页面加载缓慢、移动流量浪费以及可访问性缺失。本节课将系统讲解 HTML 中图像与多媒体标签的正确用法，包括响应式图片的现代解决方案 <picture> 和 srcset、语义化配图标签 <figure>，以及原生音视频标签 <audio> 和 <video> 的完整控制能力。
1. <img> 图像标签基础<img> 是一个空元素（自闭合），用于将图像嵌入文档。
1<img src=&q...
第5课：列表与表格在网页中组织信息时，列表和表格是两种最基础且强大的结构。列表适用于呈现具有并列、顺序或定义关系的一组条目；表格则用于展示多维度的结构化数据。正确使用它们不仅是语义化的要求，更能大幅提升内容的可读性与可访问性。本节课将逐一拆解 HTML 中三类列表的适用场景、嵌套规则，以及表格的完整结构与无障碍设计要点。
1. 无序列表 <ul>：并列关系的集合<ul>（Unordered List）表示项目之间没有先后顺序的列表，例如导航菜单、功能列表、标签云。
123456<h3>前端开发需掌握的三大语言</h3><ul>...
