learnNote

主题

第 01 章 · HTML 基础 ​

一句话开篇：HTML 是网页的「骨架」，告诉浏览器"页面里有哪些东西、谁是标题、谁是段落、谁是图片"。

0. 生活类比（先建立直觉） ​

把一个网页想象成一家奶茶店的菜单牌：

  • HTML 决定菜单上"有哪些项目"——大标题"招牌系列"、小标题"果茶"、每杯奶茶的名字、价格、配图。
  • CSS（下一章）决定"菜单长什么样"——粉色渐变背景、字体大小、圆角边框。
  • JavaScript（再下一章）决定"菜单能做什么"——点一下"加入购物车"会响应、会计算总价。

如果只有 HTML，菜单也能看（黑白朴素）；但如果没有 HTML，浏览器连"招牌系列"和"果茶"都分不清谁是标题谁是商品。

再换个类比：HTML 就像盖房子的钢筋骨架。

阶段盖房子做网页
第一步立钢筋骨架（HTML）写 HTML 标签结构
第二步砌墙、刷漆、装修（CSS）写样式
第三步装电梯、门禁、自动门（JS）写交互逻辑

钢筋立得歪，后面再怎么装修也救不回来——这就是为什么我们要花一整章学 HTML 的语义化和结构。

1. 概念是什么 ​

HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，不是编程语言。

  • "超文本"：可以包含图片、链接、视频，不只是纯文字。
  • "标记语言"：用「标签」（tag）把内容包起来，告诉浏览器"这一段是标题、这一段是段落"。

最小的 HTML 文档长这样：

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，世界</h1>
    <p>这是一个段落。</p>
  </body>
</html>

逐行拆解：

行含义类比
<!DOCTYPE html>告诉浏览器："我是 HTML5 文档"告诉送货员"这是冰箱不是洗衣机"
<html lang="zh-CN">整个文档的根，并声明语言是中文房子的地基
<head>头部信息（不会显示在页面上）菜单牌背面的二维码、店家信息
<meta charset="UTF-8">字符编码，避免中文乱码告诉打印机"用支持中文的字体"
<title>浏览器标签页上的名字店招牌上的店名
<body>页面主体（用户看到的内容）菜单牌正面
<h1>一级标题招牌字"招牌系列"
<p>段落商品介绍那一行小字

2. 为什么需要它（语义化的价值） ​

很多新手会写出这样的"div 满天飞"代码：

html
<!-- 反面教材 -->
<div class="header">
  <div class="title">我的博客</div>
  <div class="nav">
    <div>首页</div>
    <div>关于</div>
  </div>
</div>
<div class="content">
  <div class="article">
    <div class="article-title">今天学了 HTML</div>
    <div class="article-body">很有趣……</div>
  </div>
</div>

页面看起来一样能跑。但有 4 个隐藏问题：

  1. 搜索引擎看不懂：Google 爬虫看到一堆 <div> 不知道哪个是标题、哪个是文章主体，SEO 排名会很差。
  2. 盲人用屏幕阅读器听不懂：屏幕阅读器靠标签语义朗读"这是导航、这是文章"，全 div 它只能傻读。
  3. 同事维护时痛苦：6 个月后回来看，要从 class="article-title" 这种字符串里反推语义，全靠注释。
  4. 样式默认值丢失：<button> 自带可点击、键盘 Tab 可达；用 <div> 模拟按钮还得手动加 tabindex、role、键盘事件。

正确写法（语义化 HTML5）：

html
<header>
  <h1>我的博客</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>
<main>
  <article>
    <h2>今天学了 HTML</h2>
    <p>很有趣……</p>
  </article>
</main>

一句话：语义化 = 让代码自己会说话，给浏览器、爬虫、屏幕阅读器都看懂。

3. 怎么用（最小示例） ​

一个最小的、完整可用的语义化页面：

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>
  <header><h1>张三</h1></header>
  <main>
    <article>
      <h2>关于我</h2>
      <p>前端学习者，喜欢喝奶茶。</p>
    </article>
  </main>
  <footer><small>© 2026 张三</small></footer>
</body>
</html>

10 行代码，浏览器双击即可打开。

4. 进阶要点 ​

4.1 文档结构标签（HTML5 语义化标签全家桶） ​

┌────────────────────────────────────────┐
│  <header>  顶部（logo / 导航）          │
├────────────────────────────────────────┤
│  <nav>     主导航                       │
├──────────────┬─────────────────────────┤
│  <aside>     │  <main>                 │
│  侧边栏       │   ┌────────────────┐   │
│              │   │ <article>      │   │
│              │   │  独立文章        │   │
│              │   │  ┌──────────┐  │   │
│              │   │  │<section> │  │   │
│              │   │  │ 章节      │  │   │
│              │   │  └──────────┘  │   │
│              │   └────────────────┘   │
├──────────────┴─────────────────────────┤
│  <footer>  页脚（版权 / 备案）          │
└────────────────────────────────────────┘
标签用途通俗说
<header>页面或区块的"头部"简介区
<nav>导航链接组菜单栏
<main>页面主体（每页只能一个）主舞台
<article>独立内容（拿出去也能看懂）一篇文章/一条微博
<section>主题相关的内容分组章节
<aside>侧边栏 / 相关推荐旁边的小广告位
<footer>页脚（版权、联系方式）店招底下那行小字

4.2 常用文本标签 ​

标签含义示例
<h1>~<h6>1～6 级标题<h2>章节</h2>
<p>段落<p>正文</p>
<strong>强调（重要），加粗+语义<strong>必读</strong>
<em>强调（斜体），语气重<em>请务必</em>
<a>超链接<a href="https://...">去看看</a>
<img>图片<img src="cat.jpg" alt="一只猫" />
<ul>/<ol>/<li>无序/有序/列表项见下方
<br>换行（自闭合）第一行<br>第二行
<hr>水平分割线<hr>
html
<ul>
  <li>珍珠奶茶</li>
  <li>椰果奶茶</li>
</ul>

<ol>
  <li>选杯型</li>
  <li>选甜度</li>
  <li>付款</li>
</ol>

4.3 表单（form） ​

表单是网页和用户双向沟通的入口，相当于奶茶店的点单小票：

html
<form action="/submit" method="POST">
  <label for="name">姓名：</label>
  <input id="name" name="name" type="text" required />

  <label for="age">年龄：</label>
  <input id="age" name="age" type="number" min="0" max="150" />

  <label for="city">城市：</label>
  <select id="city" name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
  </select>

  <label>
    <input type="checkbox" name="agree" required />
    我已阅读用户协议
  </label>

  <button type="submit">提交</button>
</form>

关键属性表：

属性含义类比
action表单提交去哪个 URL小票送到哪个柜台
methodGET（明文跟在 URL）/ POST（藏在请求体）公开喊单 / 悄悄递小票
name字段名（提交时的 key）字段标签
for ↔ idlabel 和 input 的"配对"点 label 也能聚焦输入框
required必填"必选项"
placeholder占位提示灰色提示文字

input type 大全（每种都有自带的键盘 / 校验）：

type用途移动端表现
text普通文本普通键盘
password密码（自动遮蔽）普通键盘
email邮箱@键盘
tel电话数字键盘
number数字数字键盘
date日期日期选择器
file文件上传调用相机/相册
radio单选—
checkbox多选—
range滑块拖动条
color取色器调色板
hidden隐藏字段不显示

4.4 多媒体 ​

html
<!-- 图片：alt 是必填项（无障碍 + 加载失败时显示） -->
<img src="logo.png" alt="公司 Logo" width="120" />

<!-- 音频 -->
<audio src="music.mp3" controls></audio>

<!-- 视频 -->
<video src="intro.mp4" controls width="640" poster="cover.jpg">
  您的浏览器不支持视频
</video>

<!-- 嵌入网页（B 站视频、地图等） -->
<iframe src="https://example.com" width="600" height="400"></iframe>

4.5 SEO 基础（搜索引擎优化） ​

SEO = 让你的网站在 Google/Baidu 搜索结果里排得更靠前。HTML 层面能做的：

  1. <title>：30 字以内，含关键词。这是搜索结果的标题。
  2. <meta name="description">：120 字以内的页面描述，搜索结果的灰字。
  3. <meta name="keywords">：（已不重要，但写无妨）
  4. <h1> 唯一：每页一个 h1，包含核心关键词。
  5. alt 写好：图片搜索靠这个。
  6. <a> 用真实 href，不要用 <div onclick>：爬虫不点 div。
  7. 语义化标签：让爬虫知道哪是导航、哪是正文。
  8. 结构化数据（JSON-LD）：高级用法，告诉爬虫"这页是文章 / 商品 / 食谱"。
html
<head>
  <title>从0到1学前端 - 第1章 HTML 基础</title>
  <meta name="description" content="零基础入门 HTML，包含语义化标签、表单、多媒体、SEO 实战。" />
  <meta property="og:title" content="HTML 基础教程" />
  <meta property="og:image" content="https://example.com/cover.png" />
</head>

4.6 全局属性（每个标签都能用） ​

属性用途
id唯一标识（页面里只能有一个）
class样式分类（可重复，可多个）
style内联样式
title鼠标悬停时的小提示
data-*自定义数据（JS 可读）
tabindexTab 键聚焦顺序
hidden隐藏元素
lang语言（如 lang="en"）

4.7 块级 vs 行内元素 ​

块级（block）：               行内（inline）：
独占一行                        在一行里排队
可设宽高                        宽高跟随内容
                              
┌──────────────┐               ─[ a ]─[ span ]─[ strong ]─
│   <div>      │
└──────────────┘
┌──────────────┐
│   <p>        │
└──────────────┘
类型代表标签
块级div, p, h1~h6, ul, li, header, main, section, article, form
行内span, a, strong, em, img, input, label
行内块img, input（可设宽高，但不独占行）

用 CSS 的 display 可以互相切换，但默认行为要记住。

4.8 自闭合标签（void elements） ​

不需要结束标签的标签（不能包含内容）：

<br />  <hr />  <img />  <input />  <meta />  <link />

HTML5 中 <br> 也合法，加 / 主要是 XHTML 习惯，写不写都行。

5. 实战案例 ​

详见 examples/ 目录：

  • semantic-tags.html — 语义化标签综合示例
  • form.html — 各种表单控件演示
  • media.html — 图片 / 音频 / 视频 / iframe

完整 demo 见 demo/index.html：一个综合性的"个人主页"。

6. ⚠️ 易踩的坑 ​

坑 1：<h1> 用了好几个，或者 0 个 ​

错：

html
<h1>站名</h1>
<h1>文章标题</h1>
<h1>侧边栏</h1>

对：每页只放一个 <h1>（核心标题），其余降级为 <h2>～<h6>，且层级不要跳跃（h2 之后不能直接 h4）。

坑 2：<img> 不写 alt ​

html
<!-- ❌ -->
<img src="cat.jpg" />

<!-- ✅ -->
<img src="cat.jpg" alt="一只橘猫趴在窗台上" />

<!-- ✅ 装饰性图片：写空 alt 而不是不写 -->
<img src="divider.png" alt="" />

alt 三大作用：图加载失败时显示文字、屏幕阅读器朗读、SEO 索引。

坑 3：<a> 链接外部网址不加 rel="noopener" ​

html
<!-- ⚠️ 安全隐患 -->
<a href="https://other.com" target="_blank">外部网站</a>

<!-- ✅ -->
<a href="https://other.com" target="_blank" rel="noopener noreferrer">外部网站</a>

不加 rel="noopener" 时，新打开的页面可以通过 window.opener 反向控制你的页面，是经典安全漏洞。

坑 4：表单按钮不写 type，默认是 submit ​

html
<form>
  <button>取消</button>  <!-- ❌ 点了会触发表单提交！ -->
</form>

<form>
  <button type="button">取消</button>  <!-- ✅ -->
  <button type="submit">提交</button>
</form>

坑 5：<input> 没有 name 属性 ​

没有 name 的 input 提交时不会被发送，相当于白填。

坑 6：用 <table> 来排版 ​

20 年前的老把戏，今天只用 <table> 展示数据表（如成绩单、价目表），布局请用 Flex / Grid。

坑 7：中文乱码 ​

<head> 里第一行就要写 <meta charset="UTF-8">。写晚了浏览器已经按默认编码解析过一遍，可能出现"锟斤拷烫烫烫"。

坑 8：label 和 input 没关联 ​

html
<!-- ❌ 点 label 不会聚焦 input -->
<label>邮箱</label>
<input type="email" />

<!-- ✅ 用 for 关联 -->
<label for="email">邮箱</label>
<input id="email" type="email" />

<!-- ✅ 或者直接嵌套 -->
<label>邮箱 <input type="email" /></label>

关联后用户点击文字也能聚焦输入框，对手机用户尤其友好。

坑 9：把 <section> 当 <div> 用 ​

<section> 必须包含一个标题（h1～h6），否则用 <div> 就好。

坑 10：忘了 <meta name="viewport"> ​

html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

不写这一行，移动端会按"桌面宽度"缩放，看起来字超小。

7. 一句话总结 ​

HTML 是网页的骨架，标签的语义比好看更重要——选对标签，等于告诉浏览器、爬虫和屏幕阅读器"这段东西是什么"，后面所有事情才好办。

8. 延伸阅读 ​