在现代Web开发的世界里，HTML、CSS和JavaScript是构建网页的三大核心技术。它们各自承担着不同的职责，却又紧密协作，共同创造出丰富多彩的互联网体验。HTML（超文本标记语言）负责定义网页的结构和内容，CSS（层叠样式表）负责控制网页的外观和布局，而JavaScript则赋予网页交互和行为。这三者相辅相成，缺一不可，构成了前端开发的基础。
无论你是刚刚踏入编程世界的新手，还是希望巩固基础知识的开发者，掌握这三门技术都是至关重要的。本文将系统全面地梳理HTML、CSS和JavaScript的核心知识点，从基础语法到高级特性，从理论概念到实战技巧，帮助你建立完整的前端知识体系。
第一部分：HTML（超文本标记语言）
一、HTML基础概述
1.1 什么是HTML？
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它通过一系列预定义的标签（Tags）来描述网页的结构和内容。HTML不是编程语言，而是一种标记语言，它使用“标签”来标记文本、图像、链接等内容，告诉浏览器如何显示这些内容。
核心特性：
超文本（HyperText）：指页面内可以包含图片、链接、视频等非文字内容，更重要的是可以通过超链接在不同页面之间跳转。
标记语言（Markup Language）：使用成对的标签（如
和
）来包裹内容，定义内容的语义和结构。结构化：HTML文档具有清晰的层次结构，类似于大纲，便于浏览器解析和搜索引擎理解。
平台无关：任何安装了浏览器的设备（电脑、手机、平板）都可以解析和显示HTML页面。
1.2 HTML文档的基本结构
一个标准的HTML文档有着固定的骨架结构，就像人的身体有头、躯干和四肢一样。这个结构确保了浏览器能够正确理解页面的各个部分。
<!-- 文档类型声明：告诉浏览器使用HTML5标准来解析页面 -->
<!DOCTYPE html>
<!-- html根元素：所有内容的容器，lang属性指定页面语言为中文 -->
<html lang="zh-CN">
<head>
<!-- 字符集声明：使用UTF-8编码，支持全球几乎所有字符 -->
<meta charset="UTF-8">
<!-- 视口设置：控制移动端页面的缩放和宽度，实现响应式设计 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标题：显示在浏览器标签栏上，也是SEO的重要因素 -->
<title>我的第一个网页</title>
<!-- 页面描述：用于搜索引擎结果页面的摘要显示 -->
<meta name="description" content="这是一个学习HTML的示例页面">
<!-- 关键词：帮助搜索引擎理解页面主题（已不是主要排名因素） -->
<meta name="keywords" content="HTML,CSS,JavaScript,学习">
<!-- 作者信息 -->
<meta name="author" content="张三">
<!-- 引入外部CSS样式表 -->
<link rel="stylesheet" href="styles.css">
<!-- 内部样式表 -->
<style>
body { font-family: Arial, sans-serif; }
</style>
<!-- 引入外部JavaScript文件，defer表示延迟执行 -->
<script src="script.js" defer></script>
</head>
<body>
<!-- 页面可见内容 -->
<header>
<h1>欢迎来到我的网站</h1>
</header>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
<main>
<article>
<h2>文章标题</h2>
<p>这是文章的内容...</p>
</article>
</main>
<footer>
<p>© 2024 我的网站. 保留所有权利.</p>
</footer>
</body>
</html>
各部分的作用解释：
<!DOCTYPE html>：这是文档类型声明，不是HTML标签。它告诉浏览器“请用HTML5标准来解析这个页面”。如果没有这一行，浏览器可能会进入“怪异模式”（Quirks Mode），导致页面显示异常。
html：根元素，整个HTML文档的容器。lang="zh-CN"属性告诉搜索引擎和屏幕阅读器这个页面使用的是简体中文。
head：头部区域，包含页面的元数据（Metadata），这些内容不会在页面上直接显示，但对浏览器和搜索引擎至关重要。
meta charset="UTF-8"：字符集声明。UTF-8是一种通用的字符编码，可以表示世界上几乎所有的文字。如果没有这一行，中文字符可能显示为乱码。
meta name="viewport" content="width=device-width, initial-scale=1.0"：视口设置，对移动端页面至关重要。width=device-width让页面宽度等于设备的屏幕宽度，initial-scale=1.0设置初始缩放比例为1。
title：页面标题，显示在浏览器标签栏上。也是搜索引擎优化（SEO）的重要因素，应该准确描述页面内容。
body：身体区域，所有用户能看到的内容都放在这里。
二、HTML常用标签详解
2.1 文本内容标签
文本内容是网页的主体，HTML提供了多种标签来标记文本，赋予它们不同的语义和显示效果。
<!-- 标题标签：h1到h6，重要性递减 -->
<!-- h1通常一个页面只使用一次，用于主标题 -->
<h1>一级标题（最重要）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最不重要）</h6>
<!-- 段落标签：表示一个文本段落，自动添加上下边距 -->
<p>这是一个段落。段落之间会自动添加间距，使文本更易阅读。</p>
<p>这是另一个段落。HTML会忽略源代码中的多余空格和换行，需要使用特定标签来控制格式。</p>
<!-- 换行标签：表示强制换行，是一个自闭合标签 -->
<br>
<!-- 水平分割线：在页面上画一条水平线，常用于内容分隔 -->
<hr>
<!-- 预格式化文本：保留源代码中的空格和换行 -->
<pre>
HTML会保留 这段文本中的
所有 空格
和换行
</pre>
<!-- 引用标签 -->
<!-- 短引用：用于行内引用 -->
<p>孔子说过：<q>学而时习之，不亦说乎</q>。</p>
<!-- 长引用：用于块级引用，浏览器会自动缩进 -->
<blockquote>
这是很长的一段引用内容。它可以跨越多行，通常会以缩进的形式显示。
<footer>— 引用来源</footer>
</blockquote>
<!-- 地址标签：用于显示联系信息 -->
<address>
作者：张三<br>
邮箱：zhangsan@example.com<br>
地址：北京市朝阳区XX路123号
</address>
2.2 文本格式化标签
这些标签用来改变文字的样式，但更重要的是它们赋予了文字特定的语义。
<!-- 强调标签 -->
<!-- strong：表示重要性、严重性，浏览器通常显示为粗体 -->
<strong>非常重要的内容</strong>
<!-- b：仅仅表示粗体，没有额外的语义 -->
<b>粗体文本</b>
<!-- em：表示强调语气，浏览器通常显示为斜体 -->
<em>需要强调的文本</em>
<!-- i：仅仅表示斜体，没有额外的语义 -->
<i>斜体文本</i>
<!-- 特殊文本标签 -->
<!-- mark：高亮显示文本，像荧光笔标记一样 -->
<mark>被高亮的文本</mark>
<!-- small：表示小号字体，通常用于版权声明、免责声明等 -->
<small>版权声明</small>
<!-- del：表示已删除的文本，通常显示为删除线 -->
<del>原价199元</del> 现价99元
<!-- ins：表示插入的文本，通常显示为下划线 -->
<ins>新增加的内容</ins>
<!-- s：表示不再准确或相关的内容，显示为删除线 -->
<s>过时的信息</s>
<!-- u：表示下划线文本 -->
<u>下划线文本</u>
<!-- 上下标 -->
<!-- sub：下标，用于化学公式等 -->
水的分子式是 H<sub>2</sub>O
<!-- sup：上标，用于数学公式等 -->
爱因斯坦的质能方程：E = mc<sup>2</sup>
<!-- 代码标签 -->
<!-- code：表示计算机代码 -->
<p>使用 <code>console.log()</code> 可以在控制台输出信息</p>
<!-- pre + code：用于显示多行代码块 -->
<pre><code>
function hello() {
console.log("Hello, World!");
}
</code></pre>
<!-- kbd：表示键盘输入 -->
<p>保存文件请按 <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<!-- 缩写标签 -->
<!-- abbr：表示缩写，title属性提供完整解释 -->
<abbr title="HyperText Markup Language">HTML</abbr> 是网页的基础。
<!-- 定义标签 -->
<!-- dfn：表示被定义的内容 -->
<p><dfn>HTML</dfn>是一种用于创建网页的标记语言。</p>
<!-- 时间日期标签 -->
<!-- time：表示时间或日期，datetime属性提供机器可读的格式 -->
<p>我出生于 <time datetime="1990-01-01">1990年1月1日</time></p>
<p>会议将在 <time datetime="2024-12-25T14:30">12月25日下午2:30</time> 开始</p>
2.3 列表标签
列表是组织信息的有效方式，HTML提供了三种类型的列表。
<!-- 无序列表（Unordered List）：项目之间没有顺序关系 -->
<!-- 通常用于导航菜单、功能列表、产品特点等 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<!-- 可以嵌套其他列表，创建多级菜单 -->
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>萝卜</li>
</ul>
</li>
</ul>
<!-- 有序列表（Ordered List）：项目有顺序关系 -->
<!-- 通常用于步骤说明、排名等 -->
<ol>
<li>第一步：准备材料</li>
<li>第二步：开始烹饪</li>
<li>第三步：装盘享用</li>
</ol>
<!-- 可以自定义编号类型和起始数字 -->
<ol type="A" start="3"> <!-- 从C开始的大写字母 -->
<li>项目C</li>
<li>项目D</li>
</ol>
<ol type="i"> <!-- 小写罗马数字 -->
<li>第一项</li>
<li>第二项</li>
</ol>
<!-- 定义列表（Description List）：用于术语-描述配对 -->
<!-- 通常用于词汇表、产品规格等 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于控制网页样式</dd>
<dt>JavaScript</dt>
<dd>一种脚本语言，为网页添加交互功能</dd>
</dl>
2.4 链接与导航
链接是Web的核心特性，它让页面之间可以互相连接，形成一个庞大的信息网络。
<!-- 超链接基础语法 -->
<!-- href属性指定链接目标，可以是网址、文件路径、锚点等 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 相对路径：链接到同一网站内的其他页面 -->
<a href="about.html">关于我们</a>
<a href="pages/contact.html">联系我们</a>
<a href="../index.html">返回上一级目录的首页</a>
<!-- 锚点链接：在同一页面内跳转到指定位置 -->
<!-- 先定义锚点 -->
<h2 id="section1">第一节</h2>
<!-- 再创建链接 -->
<a href="#section1">跳转到第一节</a>
<!-- 链接到其他页面的锚点 -->
<a href="help.html#faq">查看常见问题</a>
<!-- 邮件链接：打开默认邮件客户端 -->
<a href="mailto:info@example.com">发送邮件</a>
<!-- 带主题和内容的邮件链接 -->
<a href="mailto:info@example.com?subject=咨询&body=您好，我想咨询...">
发送咨询邮件
</a>
<!-- 电话链接：在手机上点击会拨打电话 -->
<a href="tel:+8613800000000">拨打电话 138-0000-0000</a>
<!-- 下载链接：download属性提示浏览器下载而不是打开 -->
<a href="document.pdf" download="新文件名.pdf">下载PDF文件</a>
<!-- 在新标签页打开：target="_blank" -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
在新窗口打开链接（安全方式）
</a>
<!--
rel="noopener noreferrer" 是安全属性，防止新页面通过 window.opener
访问原页面的敏感信息
-->
<!-- 图片链接：点击图片跳转 -->
<a href="https://example.com">
<img src="logo.png" alt="公司Logo">
</a>
<!-- 空链接：用于占位或配合JavaScript使用 -->
<a href="javascript:void(0);">空链接</a>
<a href="#">返回顶部</a>
<!-- 导航结构 -->
<!-- 使用nav标签包裹主导航 -->
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品中心</a></li>
<li><a href="/services">服务项目</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
<!-- 面包屑导航：显示当前页面在网站中的位置 -->
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products">产品中心</a></li>
<li>当前产品详情</li>
</ol>
</nav>
2.5 多媒体元素
现代网页离不开多媒体内容，HTML提供了专门的标签来嵌入图像、音频和视频。
<!-- 图像标签 -->
<!--
src属性：图像文件路径
alt属性：替代文本（必需！），当图片无法加载时显示，也用于屏幕阅读器
width/height属性：指定图像尺寸（建议使用CSS控制）
title属性：鼠标悬停时显示的提示文字
-->
<img src="photo.jpg" alt="美丽的风景照片" width="500" height="300" title="风景照">
<!-- 响应式图像：使用srcset和sizes属性 -->
<!-- srcset：提供不同尺寸的图像，sizes：告诉浏览器在不同视口宽度下使用哪个尺寸 -->
<img src="image-small.jpg"
srcset="image-small.jpg 480w,
image-medium.jpg 768w,
image-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 90vw,
80vw"
alt="响应式图像">
<!-- 图片懒加载：loading="lazy" -->
<!-- 只有当图片进入视口时才加载，提升页面加载速度 -->
<img src="image.jpg" alt="图片" loading="lazy">
<!-- picture元素：更精细的响应式图像控制 -->
<!-- 可以根据媒体条件、图像格式支持等选择不同的图像源 -->
<picture>
<!-- WebP格式（更小体积，更好质量），如果浏览器支持就使用 -->
<source type="image/webp" srcset="image.webp">
<!-- 根据屏幕宽度选择不同尺寸 -->
<source media="(min-width: 1200px)" srcset="image-large.jpg">
<source media="(min-width: 768px)" srcset="image-medium.jpg">
<!-- 兜底方案：总是会加载 -->
<img src="image-small.jpg" alt="响应式图像">
</picture>
<!-- 音频元素 -->
<!-- controls属性：显示播放控件 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<!-- 当浏览器都不支持时的提示 -->
您的浏览器不支持 audio 元素。
</audio>
<!-- 音频的其他属性 -->
<!-- autoplay：自动播放（需要配合muted） -->
<!-- loop：循环播放 -->
<!-- muted：静音播放 -->
<audio controls autoplay loop muted>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<!-- 视频元素 -->
<!-- controls：显示播放控件 -->
<!-- poster：视频加载前显示的封面图 -->
<video controls width="640" height="360" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<!-- 字幕文件 -->
<track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文">
您的浏览器不支持 video 元素。
</video>
<!-- 视频的其他属性 -->
<!-- autoplay：自动播放（通常需要配合muted） -->
<!-- loop：循环播放 -->
<!-- muted：静音播放 -->
<!-- playsinline：在iOS上内联播放（不全屏） -->
<video controls autoplay loop muted playsinline width="100%">
<source src="video.mp4" type="video/mp4">
</video>
<!-- 嵌入外部内容：iframe -->
<!-- 用于嵌入其他网页、YouTube视频、Google地图等 -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<!-- 嵌入PDF文件 -->
<embed src="document.pdf" type="application/pdf" width="100%" height="600">
<!-- 或者使用object标签（更标准） -->
<object data="document.pdf" type="application/pdf" width="100%" height="600">
<p>您的浏览器不支持PDF预览，<a href="document.pdf">点击下载</a></p>
</object>
2.6 表格标签
表格用于展示结构化数据，如财务报表、成绩单等。
<!-- 简单表格 -->
<!-- border属性：表格边框宽度 -->
<table border="1">
<tr> <!-- 表格行 -->
<th>姓名</th> <!-- 表头单元格，通常加粗居中 -->
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td> <!-- 普通数据单元格 -->
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
<!-- 完整表格结构：使用thead、tbody、tfoot语义化分区 -->
<!--
thead：表头区，通常包含列标题
tbody：表体区，包含主要数据行
tfoot：表尾区，通常包含汇总信息
-->
<table border="1">
<!-- 表格标题 -->
<caption>员工工资表</caption>
<!-- 表头 -->
<thead>
<tr>
<th>员工ID</th>
<th>姓名</th>
<th>部门</th>
<th>基本工资</th>
<th>奖金</th>
<th>实发工资</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>技术部</td>
<td>8000</td>
<td>2000</td>
<td>10000</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>市场部</td>
<td>7000</td>
<td>1500</td>
<td>8500</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<td colspan="5">平均工资</td> <!-- colspan：合并列 -->
<td>9250</td>
</tr>
</tfoot>
</table>
<!-- 单元格合并 -->
<!--
colspan：水平合并（合并列）
rowspan：垂直合并（合并行）
-->
<table border="1">
<thead>
<tr>
<th colspan="2">个人信息</th> <!-- 占2列 -->
<th>成绩</th>
</tr>
<tr>
<th>姓名</th>
<th>班级</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">张三</td> <!-- 占2行 -->
<td>一班</td>
<td>85</td>
</tr>
<tr>
<td>二班（留级）</td>
<td>92</td>
</tr>
</tbody>
</table>
<!-- 列分组：使用colgroup和col定义列样式 -->
<table border="1">
<colgroup>
<col style="background-color: #f0f0f0;"> <!-- 第1列样式 -->
<col span="2" style="background-color: #e0e0e0;"> <!-- 第2-3列样式 -->
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>85</td><td>92</td></tr>
<tr><td>李四</td><td>78</td><td>88</td></tr>
</tbody>
</table>
<!-- 响应式表格：添加水平滚动条 -->
<div style="overflow-x: auto;">
<table>
<!-- 当表格宽度超过父容器时，会出现滚动条 -->
<!-- 大量列的数据表 -->
</table>
</div>
2.7 表单标签
表单是与用户交互的核心，用于收集用户输入的数据。
<!-- 基础表单结构 -->
<!--
action：数据提交的服务器地址
method：提交方式（GET或POST）
enctype：编码类型（文件上传时必须用multipart/form-data）
-->
<form action="/submit-form" method="post" enctype="multipart/form-data">
<!-- 表单字段 -->
</form>
<!-- 文本输入框 -->
<!--
type="text"：普通文本输入
name：字段名，提交时的键
value：默认值
placeholder：提示文本
required：必填字段
readonly：只读
disabled：禁用
maxlength：最大字符数
-->
<label for="username">用户名：</label>
<input type="text" id="username" name="username"
placeholder="请输入用户名" required maxlength="20">
<!-- 密码输入框 -->
<input type="password" name="password" placeholder="请输入密码" autocomplete="off">
<!-- 邮箱输入框（内置邮箱格式验证） -->
<input type="email" name="email" placeholder="your@email.com" required>
<!-- 数字输入框 -->
<input type="number" name="age" min="0" max="150" step="1" value="18">
<!-- 范围滑块 -->
<input type="range" name="volume" min="0" max="100" step="5" value="50">
<!-- 日期和时间输入 -->
<input type="date" name="birthday">
<input type="datetime-local" name="meeting">
<input type="month" name="month">
<input type="week" name="week">
<input type="time" name="time">
<!-- 颜色选择器 -->
<input type="color" name="theme-color" value="#007bff">
<!-- 复选框（多选） -->
<!-- 同一组的checkbox应该使用相同的name -->
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音乐</label>
<!-- 单选框（单选） -->
<!-- 同一组的radio必须有相同的name，不同的value -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
<input type="radio" name="gender" value="other" id="other" checked>
<label for="other">其他</label>
<!-- 文件上传 -->
<!-- accept属性：限制文件类型 -->
<input type="file" name="avatar" accept="image/*">
<!-- multiple属性：允许选择多个文件 -->
<input type="file" name="photos" multiple accept="image/*">
<!-- 隐藏字段：不在页面上显示，但会随表单提交 -->
<input type="hidden" name="user_id" value="12345">
<!-- 多行文本域 -->
<!-- rows：显示行数，cols：显示列数 -->
<textarea name="bio" rows="5" cols="40" placeholder="个人简介"></textarea>
<!-- 下拉选择框 -->
<select name="city" required>
<option value="">请选择城市</option> <!-- 默认选项 -->
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option> <!-- selected：默认选中 -->
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<!-- 多选下拉框（按住Ctrl多选） -->
<select name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
</select>
<!-- 选项分组 -->
<select name="product">
<optgroup label="电子产品">
<option value="phone">智能手机</option>
<option value="laptop">笔记本电脑</option>
<option value="tablet">平板电脑</option>
</optgroup>
<optgroup label="服装">
<option value="shirt">衬衫</option>
<option value="pants">裤子</option>
<option value="shoes">鞋子</option>
</optgroup>
</select>
<!-- 数据列表（自动完成） -->
<input list="browsers" name="browser" placeholder="选择或输入浏览器">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
<!-- 按钮 -->
<!-- 普通按钮 -->
<input type="button" value="普通按钮">
<!-- 提交按钮：触发表单提交 -->
<input type="submit" value="提交">
<!-- 重置按钮：重置表单内所有字段 -->
<input type="reset" value="重置">
<!-- button标签更灵活 -->
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<!-- 可以包含HTML内容 -->
<button type="button">
<img src="icon.png" alt="图标"> 点击我
</button>
<!-- 字段集分组：将相关字段分组 -->
<fieldset>
<legend>个人信息</legend>
<label>姓名：<input type="text" name="name"></label>
<label>年龄：<input type="number" name="age"></label>
</fieldset>
<fieldset disabled> <!-- disabled：禁用整个组 -->
<legend>已禁用字段</legend>
<input type="text" name="disabled-field">
</fieldset>
2.8 HTML5新增标签
HTML5引入了许多语义化标签和新功能，让网页结构更清晰，功能更强大。
<!-- 结构语义化标签 -->
<header>页眉：网站标志、导航等</header>
<nav>导航：主要导航链接</nav>
<main>主内容：页面核心内容，一个页面只能有一个</main>
<article>文章：独立的内容区块，如博客文章、新闻条目</article>
<section>区块：文档的一个区域，通常有标题</section>
<aside>侧边栏：相关内容、广告、引用等</aside>
<footer>页脚：版权信息、相关链接等</footer>
<!-- 其他语义化标签 -->
<mark>高亮文本</mark>
<time datetime="2024-01-01">2024年1月1日</time>
<progress value="70" max="100">70%</progress>
<meter value="0.7" min="0" max="1" low="0.3" high="0.8">70%</meter>
<!-- details和summary：可折叠内容 -->
<details>
<summary>点击展开查看详情</summary>
<p>这里是详细信息内容，默认是隐藏的。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</details>
<!-- dialog：对话框 -->
<dialog id="myDialog">
<p>这是一个对话框</p>
<button onclick="document.getElementById('myDialog').close()">关闭</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">打开对话框</button>
2.9 全局属性
全局属性是所有HTML元素都可以使用的属性。
<!-- class：类名，用于CSS样式或JavaScript选择 -->
<div class="container main-content">内容</div>
<!-- id：唯一标识符，同一页面中不能重复 -->
<div id="unique-element">唯一元素</div>
<!-- style：内联样式 -->
<div style="color: red; font-size: 16px;">红色文字</div>
<!-- title：鼠标悬停时的提示文本 -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- lang：语言声明 -->
<p lang="en">Hello World</p>
<!-- data-*：自定义数据属性 -->
<!-- 用于存储页面或应用程序私有的自定义数据 -->
<div data-user-id="12345" data-role="admin" data-theme="dark">
用户信息
</div>
<script>
const div = document.querySelector('div');
console.log(div.dataset.userId); // "12345"
console.log(div.dataset.role); // "admin"
</script>
<!-- hidden：隐藏元素 -->
<div hidden>这个内容不会显示</div>
<!-- contenteditable：元素内容可编辑 -->
<div contenteditable="true">双击编辑这段文字</div>
<!-- draggable：元素可拖拽 -->
<div draggable="true">拖拽我</div>
<!-- spellcheck：拼写检查 -->
<textarea spellcheck="true">检查拼写错误</textarea>
<!-- tabindex：Tab键导航顺序 -->
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<button tabindex="3">按钮</button>
<!-- accesskey：快捷键 -->
<a href="/" accesskey="h">首页 (Alt+H)</a>
<!-- dir：文字方向 -->
<p dir="rtl">这段文字从右向左显示</p>
<!-- translate：翻译控制 -->
<p translate="no">这段文字不会被翻译</p>
https://htnus.cn/category/hardware-review.html
