6.5.2 软件-＞W3C HTML5、CSS3标准（W3C Recommendation）：HTML（HyperText Markup Language）

HTML（超文本标记语言，HyperText Markup Language）是构建网页结构的核心语言，它不是编程语言，而是标记语言------ 通过一系列「标签」描述网页的结构和内容（如标题、段落、图片、链接等），浏览器会解析这些标签并渲染出可视化的网页

HTML 核心基础

基本结构（必背）

所有标准 HTML 文档都遵循固定的骨架结构，缺一不可：

复制代码

<!DOCTYPE html> <!-- 声明文档类型为HTML5，必须放在第一行 -->
<html lang="zh-CN"> <!-- 根元素，lang指定页面语言（利于SEO） -->
<head> <!-- 头部：页面元信息，不直接显示在页面上 -->
  <meta charset="UTF-8"> <!-- 字符编码，UTF-8兼容所有字符 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配移动端 -->
  <title>页面标题</title> <!-- 浏览器标签页显示的标题 -->
</head>
<body> <!-- 主体：页面可见内容都放在这里 -->
  <h1>这是一级标题</h1>
  <p>这是一个段落</p>
</body>
</html>

标签的核心规则

标签分类：
- 双标签：有开始和结束标签（如 <p>内容</p>、<div>内容</div>）
- 单标签（自闭合标签）：无需结束标签（如 <img>、<input>、<br>）

标签属性 ：为标签添加额外信息，格式为 属性名="属性值"，多个属性用空格分隔：

复制代码

<img src="logo.png" alt="网站logo" width="100">
<!-- src：图片路径；alt：图片加载失败时的替代文本；width：宽度 -->

嵌套规则 ：标签需正确嵌套，不能交叉（如 <div><p>内容</div></p> 是错误的）

HTML 常用标签分类

文本结构标签（语义化核心）

语义化标签的作用：让代码更易读、利于 SEO（搜索引擎优化）、提升无障碍访问性

复制代码

<!-- 标题标签：h1-h6，权重递减，一个页面建议只写一个h1 -->
<h1>一级标题（最重要）</h1>
<h2>二级标题</h2>

<!-- 段落标签：独占一行，自动换行 -->
<p>这是一个独立的段落，浏览器会自动在段落前后添加空白。</p>

<!-- 文本格式化标签 -->
<strong>加粗文本（语义强调）</strong>
<em>斜体文本（语义强调）</em>
<span>行内通用容器（无默认样式）</span>
<div>块级通用容器（独占一行，无默认样式）</div>

链接与导航标签

复制代码

<!-- 超链接：核心属性href（跳转地址），target指定打开方式 -->
<a href="https://www.example.com" target="_blank">跳转到示例网站</a>
<!-- target="_blank"：新标签页打开；_self：当前页打开（默认） -->

<!-- 锚点链接：跳转到页面内指定位置 -->
<a href="#section1">跳转到第一部分</a>
<div id="section1">第一部分内容</div>

媒体标签

复制代码

<!-- 图片标签：核心属性src（图片路径）、alt（替代文本，必加） -->
<img src="images/photo.jpg" alt="风景照片" width="300" height="200">

<!-- 音频标签 -->
<audio src="music.mp3" controls autoplay></audio>
<!-- controls：显示播放控件；autoplay：自动播放（多数浏览器禁用） -->

<!-- 视频标签 -->
<video src="video.mp4" controls width="500"></video>

列表标签

复制代码

<!-- 无序列表（ul）：默认带圆点，常用导航、列表项 -->
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<!-- 有序列表（ol）：默认带数字 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

<!-- 定义列表（dl）：用于名词+解释 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
</dl>

表单标签（交互核心）

用于收集用户输入，核心是 <form> 包裹各类表单控件：

复制代码

<!-- form：表单容器，action指定提交地址，method指定提交方式 -->
<form action="/submit" method="post">
  <!-- 文本输入框 -->
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  
  <!-- 密码输入框 -->
  <label for="pwd">密码：</label>
  <input type="password" id="pwd" name="pwd">
  
  <!-- 单选框 -->
  <input type="radio" name="gender" id="male" value="male">
  <label for="male">男</label>
  <input type="radio" name="gender" id="female" value="female">
  <label for="female">女</label>
  
  <!-- 提交按钮 -->
  <button type="submit">提交</button>
</form>

关键属性：name（表单提交时的键名）、id（与 label 的 for 关联）、required（必填）

HTML5 新增语义化标签

HTML5 新增了更具语义的块级标签，替代传统的 <div> 嵌套：

复制代码

<header>页面头部（导航、logo等）</header>
<nav>导航栏</nav>
<main>页面主要内容（唯一）</main>
<section>文档中的章节/区块</section>
<article>独立的文章内容（如博客、新闻）</article>
<aside>侧边栏（相关推荐、广告等）</aside>
<footer>页面底部（版权、联系方式等）</footer>

HTML 核心特性

语义化

核心：用正确的标签做正确的事（如用 <nav> 做导航，而非 <div class="nav">）
好处：代码可读性高、搜索引擎易抓取、屏幕阅读器（无障碍）更友好

兼容性

HTML5 兼容所有现代浏览器，老旧浏览器（如 IE）可通过 polyfill 兼容
编写时遵循「渐进增强」原则：核心功能适配所有浏览器，高级功能仅在支持的浏览器生效

与 CSS/JS 的配合

HTML 负责结构，CSS 负责样式，JavaScript 负责交互
三者分离是前端开发的最佳实践，便于维护和扩展

HTML 最佳实践

始终声明 <!DOCTYPE html>，确保浏览器以标准模式渲染
优先使用语义化标签，减少无意义的 <div>
为图片添加 alt 属性，为表单控件添加 label 关联
页面编码统一用 UTF-8，避免乱码
移动端页面添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 适配屏幕

总结

HTML 是网页的「骨架」，核心是通过语义化标签描述页面结构，而非样式
标准 HTML 文档必须包含 <!DOCTYPE html>、<html>、<head>、<body> 四大核心部分
HTML5 新增的 <header>/<nav>/<main> 等语义标签，让页面结构更清晰，利于 SEO 和维护

官网参考书

W3school：HTML 标签参考手册