Chendi Wu

Appearance

HTML 学习指南（2025 版） ​

什么是 HTML？ ​

HTML（超文本标记语言，HyperText Markup Language）是网页的骨架，用来定义页面结构。大白话讲，它就是告诉你浏览器“放个标题在这儿”“这儿来张图片”“那块儿弄个按钮”。无论你是手写网页，还是用 React、Vue 这样的前端框架，最终都得靠 HTML 来渲染页面。

为什么要学 HTML？

  • 它是前端开发的起点，网页开发绕不开。
  • 框架里的 JSX（React）或 template（Vue）本质上都会转成 HTML。
  • 想做 SEO（搜索引擎优化）、无障碍访问，或者只是写个简单的页面，HTML 都是基础。

HTML 基础 ​

HTML 是什么样子的？ ​

HTML 由 元素（elements）和 标签（tags）组成。标签通常成对出现，比如 <p>内容</p>，也有自闭合标签，比如 <img src="图片地址" />。一个简单的 HTML 文件长这样：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎体验 HTML</h1>
  <p>这是一个段落，简单吧？</p>
</body>
</html>
  • <!DOCTYPE html>：告诉浏览器这是 HTML5 文档。
  • <html>：页面根元素。
  • <head>：放元数据，比如标题、字符编码。
  • <body>：放实际显示的内容。

谁在管 HTML？ ​

HTML 标准由 WHATWG（网页超文本应用技术工作小组）维护，2004 年由 Apple、Mozilla 和 Opera 发起，负责制定 HTML 的规范（也叫 HTML Living Standard）。想看最权威的文档，可以直接去 WHATWG 官网。

怎么学 HTML？ ​

学习 HTML 不难，主要是记住常用标签、理解它们的作用，然后多动手写。以下是推荐的学习路径：

1. 快速上手（1-6 小时） ​

  • 目标：了解 HTML 的基本结构和常见元素。
  • 方法：
    • 浏览 MDN HTML 元素参考，看看每个标签长啥样、干啥用。
    • 打开浏览器（推荐 Chrome），用开发者工具（F12）查看网页的 HTML 结构。
    • 在 VS Code 里写点简单的 HTML，装上插件：
      • Emmet：输入 div>p 按 Tab，自动生成 <div><p></p></div>，超省力。
      • Auto Close Tag：自动补全闭合标签。
      • Auto Rename Tag：改开始标签，结束标签自动同步。
  • 动手练习：试试 <input> 标签的各种类型（文本、复选框、按钮等），感受浏览器内置的功能。

2. 实战进阶 ​

  • 目标：能独立写一个简单的网页。
  • 方法：
    • 写个小项目，比如个人主页，包含标题、导航、图片、表单。
    • 用 <div> 和 <span> 组织结构，试试嵌套标签。
    • 查文档解决问题，比如 MDN 或 W3Schools。
  • 推荐练习：
    • 做一个博客页面，包含文章标题、正文和评论表单。
    • 用 <form> 做一个登录框，包含用户名、密码和提交按钮。

3. 深入学习 ​

  • SEO 优化：用 <meta> 标签设置关键词、描述，优化搜索引擎排名。
  • 语义化：用 <article>、<section>、<nav> 等语义标签，让代码更清晰，方便机器（比如搜索引擎、读屏软件）理解。
  • 无障碍访问：学习 ARIA，给 <img> 加 alt 属性，提升网页对残障人士的友好度。
  • Web Components：了解 <template>、<slot>，体验自定义 HTML 元素（目前用得不多，但挺酷）。

HTML 核心知识点 ​

1. 常见元素分类 ​

HTML 元素按功能和显示方式可以分为几大类：

  • 结构元素：组织页面布局
    • <div>：万能容器，块级元素。
    • <span>：行内容器，常用来加样式。
    • <article>、<section>、<header>、<footer>：语义化标签，清晰表达内容结构。
  • 文本元素：处理文字样式
    • <h1> 到 <h6>：标题，从大到小。
    • <p>：段落。
    • <strong>、<em>：加粗和斜体，带语义。
    • <code>、<pre>：展示代码。
  • 多媒体元素：嵌入图片、音视频
    • <img>：图片，记得加 alt 属性。
    • <video>、<audio>：视频和音频，支持多种格式。
  • 表单元素：收集用户输入
    • <form>：表单容器，支持提交功能。
    • <input>：输入框，类型丰富（text、checkbox、radio 等）。
    • <select>、<textarea>：下拉菜单和多行文本框。
  • 互动元素：
    • <a>：超链接，跳转页面。
    • <button>：按钮，常用于触发事件。
    • <details>、<summary>：折叠内容，点击可展开。

2. 元素显示类型 ​

HTML 元素按默认显示方式分三种：

  • 块级元素（block）：
    • 独占一行，可设置宽高。
    • 比如：<div>、<p>、<h1>、<ul>。
  • 行内元素（inline）：
    • 不独占一行，宽高由内容决定。
    • 比如：<span>、<a>、<strong>。
  • 行内块元素（inline-block）：
    • 不独占一行，但可设置宽高。
    • 比如：<img>、<input>、<button>。

提示：可以用 CSS 的 display 属性自由切换，比如让 <div> 变成行内元素（display: inline）。

3. 全局属性 ​

这些属性几乎所有元素都能用：

  • id：唯一标识符，全页面不能重复。
  • class：分类名，方便 CSS 和 JS 批量操作。
  • style：内联 CSS，少用为妙。
  • data-*：自定义数据，JS 常用。
  • aria-*：无障碍属性，提升可访问性。

4. HTML5 新特性 ​

HTML5（<DOCTYPE html>）比老版本更强大：

  • 新语义标签：<article>、<section>、<nav>、<footer> 等。
  • 增强表单：新输入类型（email、date、range 等），省去很多 JS 验证。
  • 多媒体：<video>、<audio> 原生支持，不用 Flash。
  • 新 API：
    • canvas：画图、做动画。
    • localStorage、sessionStorage：本地存储数据。
    • 离线缓存、实时通信等。

页面结构与语义化 ​

为什么要做语义化？ ​

  • 对人：代码清晰，团队协作和维护更方便。
  • 对机器：搜索引擎、读屏软件能更好理解页面，提升 SEO 和无障碍性。

注意事项 ​

  • 少用 <div> 和 <span>：能用语义标签的地方尽量用，比如用 <nav> 替代 <div class="nav">。
  • 嵌套规则：行内元素不能直接包块级元素（比如 <a> 里不能直接放 <div>）。
  • 标准结构：
    • <head> 里放元数据（<title>、<meta>）。
    • <body> 里放内容，保持层级清晰。

CSS 相关概念（简单了解） ​

HTML 离不开 CSS，这里稍微提几个跟 HTML 强相关的概念：

1. 盒模型 ​

每个 HTML 元素都是一个“盒子”，从内到外包括：

  • content：内容。
  • padding：内边距。
  • border：边框。
  • margin：外边距。

盒模型有两种计算方式：

  • 标准模型（box-sizing: content-box）：宽高只算内容。
  • IE 模型（box-sizing: border-box）：宽高包含内容 + padding + border（更常用）。

2. 边距重叠 ​

相邻的垂直外边距（margin）会合并，取较大的值。解决办法：

  • 用 padding 替代。
  • 加透明边框（border: 1px solid transparent）。
  • 触发 BFC（块级格式化上下文）。

3. BFC（块级格式化上下文） ​

BFC 是一个独立的布局环境，特点：

  • 内部元素垂直排列。
  • 不会与浮动元素重叠。
  • 外边距可能合并。

触发 BFC 的方法：

  • overflow: hidden。
  • display: flex 或 inline-block。
  • float: left/right。
  • position: absolute/fixed。

用处：

  • 清除浮动。
  • 防止边距重叠。
  • 实现自适应布局。

4. 浮动（float） ​

浮动原本用于文字环绕图片，但常被“误用”于布局。特点：

  • 元素脱离文档流，靠左/右排列。
  • 可能导致父元素高度塌陷。

清除浮动 的方法：

  • 加 clear: both 的空标签。
  • 父元素用 overflow: hidden。
  • 用伪元素（.clearfix）：
css
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

现代替代：用 Flexbox 或 Grid 布局，灵活又省心。

5. 定位（position） ​

  • static：默认，无定位。
  • relative：相对自身偏移，不影响别人。
  • absolute：脱离文档流，相对最近的定位祖先移动。
  • fixed：固定在窗口位置，滚动不影响。

其他实用知识 ​

1. <form> 的作用 ​

表单是用户交互的核心，<form> 的好处：

  • 支持直接提交数据。
  • 浏览器可保存表单历史。
  • 配合 JS 库，能轻松验证和提取数据。

常用元素：

  • <input>：多种类型（text、password、file 等）。
  • <select>、<option>：下拉菜单。
  • <textarea>：多行文本。

2. 单位：px、em、rem ​

  • px：像素，固定单位，适合精确控制。
  • em：相对父元素字体大小，动态调整。
  • rem：相对根元素（<html>）字体大小，统一管理。

兼容性：px 全面支持，em/rem 除 IE6-8 外都支持。推荐：用 rem 做响应式，px 做固定尺寸。

3. src vs href ​

  • src：指向资源地址，替换元素内容（比如 <img src="图片.jpg">）。
  • href：建立跳转链接（比如 <a href="页面.html">）。

4. link vs @import ​

  • <link>：HTML 标签，加载 CSS，同时支持其他功能（RSS、rel 属性）。
  • @import：CSS 语法，页面加载完才加载 CSS，可能导致闪烁。
  • 建议：优先用 <link>，兼容性更好。

学习资源 ​

文档 ​

视频 ​

  • HTML Crash Course：60 分钟入门，英文，带字幕。
  • 国内平台（如 B 站）搜索“HTML 入门”，很多免费教程。

工具 ​

  • 浏览器：Chrome（开发者工具超好用）。
  • 编辑器：VS Code + Emmet。
  • 在线练习：CodePen、JSFiddle，边写边看效果。

常见问题 ​

  1. HTML 和 HTML5 有什么区别？

    • HTML 是广义的超文本标记语言，HTML5 是最新版本，新增了语义标签、多媒体支持和 API。
    • HTML5 更简单（Doctype 只要 <!DOCTYPE html>），功能更强。

  2. XHTML 是什么？

    • XHTML 是 HTML 的 XML 化版本，要求更严格（标签必须闭合、小写等），现在用得少。

  3. 怎么保证页面兼容老浏览器？

    • 用 HTML5 的新标签时，IE9 以下需要引入 html5shiv.js。
    • 测试时用 BrowserStack 或老版本虚拟机。

  4. 学 HTML 要多久？

    • 基础：1-2 天能上手。
    • 熟练：1-2 周，多写项目。
    • 精通：结合 CSS、JS，1-3 个月。

下一步 ​

学完 HTML，建议：

  • CSS：学布局（Flexbox、Grid）、响应式设计。
  • JavaScript：让页面动起来，操作 DOM、处理事件。
  • 框架：试试 React 或 Vue，体验现代开发。