HTML 基础 - 标签语法

这是我前端自学的第一篇笔记。写后端写久了, 页面一直是别人的事, 现在决定从零把前端补起来。这一篇解决最基础的问题: 网页到底是个什么东西, HTML 的标签语法怎么写。不需要任何前置知识, 会用记事本就够了。

网页就是一个文本文件

我一开始以为做网页得先装一堆环境, 结果发现起点简单得离谱: 网页就是一个后缀为 .html 的纯文本文件, 记事本写完保存, 双击, 浏览器就把它打开并画出来了。

浏览器天生认识 HTML, 不用编译, 不用装运行时。写 Java 的对照一下会更清楚: .java 要经过 javac 编译成字节码再交给 JVM 跑, 而 .html 是浏览器直接读文本、直接渲染, 中间没有任何工序。

HTML 全称 HyperText Markup Language, 超文本标记语言。人话版: 一种给内容”打标记”的写法, 告诉浏览器”这段是标题、这段是段落、这里放一张图”。它只负责页面的结构和内容; 页面好不好看归 CSS 管, 能不能交互归 JavaScript 管, 那是后面两篇的事。

动手: 创建第一个网页

先别看理论, 三分钟把第一个网页做出来:

在桌面新建一个文本文档, 重命名为 hello.html。注意 Windows 默认隐藏扩展名, 要先在资源管理器的”查看”里勾上”文件扩展名”, 确认后缀真的从 .txt 变成了 .html。
右键, 用记事本打开, 输入下面的内容, 保存时编码选 UTF-8。
双击这个文件, 浏览器打开, 页面就出来了。

代码块HTML · 11 行收起展开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>这是我亲手写的第一个网页。</p>
</body>
</html>

在记事本里随便改几个字, 保存, 回浏览器按 F5 刷新, 变化立刻能看到。“改完刷新就能看”这个循环, 就是前端最原始也最直接的开发方式。

文件里那些尖括号是什么, 下面拆开讲。

标签: HTML 的基本单位

HTML 的一切都由标签 (tag) 组成, 也就是用尖括号包起来的名字:

代码块HTML · 1 行收起展开

<tagname>内容</tagname>

写过 Maven 的人看这个会很眼熟: pom.xml 也是一层层的尖括号标签, 因为 HTML 和 XML 本来就是近亲。差别在于 pom.xml 里标签的含义由 Maven 定义, 而 HTML 的标签名是网页标准里定好的一套固定词汇表, 每个标签浏览器都知道该怎么画。

大部分标签成对出现: <p> 是开始标签, </p> 是结束标签 (多一个斜杠), 中间夹着内容:

代码块HTML · 3 行收起展开

<p>这是一个段落</p>
<h1>这是一级标题</h1>
<a href="https://example.com">这是一个链接, 点击会跳转</a>

自闭合标签

少数标签没有”中间的内容”, 自己单独出现, 不写结束标签:

代码块HTML · 4 行收起展开

<img src="photo.jpg" alt="照片">   <!-- 图片: 内容就是图片本身 -->
<br>                               <!-- 换行 -->
<input type="text">                <!-- 输入框 -->
<hr>                               <!-- 水平分隔线 -->

顺便认识一下注释:  之间的内容浏览器会无视, 相当于 Java 里的 //。

属性: 给标签补充信息

标签可以带属性 (attribute), 写在开始标签里, 格式是 名字="值", 用来描述这个标签的细节:

<div class="container" id="main">
  <img src="avatar.png" alt="头像" width="100">
  <a href="/page" target="_blank">在新标签页打开</a>
</div>

出现频率最高的是 `class` 和 `id`。class 给元素起个"类名", 同一个类名可以挂在很多元素上, 下一篇 CSS 就是靠它批量选中元素来上样式; id 是唯一标识, 一个页面里不应该重复。
其余属性大多跟着具体标签走: `<img>` 用 `src` 指定图片路径, 用 `alt` 提供图片加载失败时的替代文字; `<a>` 用 `href` 指定链接地址, 加上 `target="_blank"` 表示在新标签页打开。

嵌套: 标签套标签

标签可以层层嵌套, 整个页面因此形成一棵树: <html> 是根, 往下分枝, 一层层长下去:

代码块HTML · 10 行收起展开

<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <div class="header">
      <h1>欢迎</h1>
    </div>
  </body>
</html>

这个”树”的说法后面会反复出现: 浏览器内部真的把页面存成一棵树 (叫 DOM 树), 以后用 JavaScript 操作页面, 本质上就是操作这棵树。

嵌套只有一条规矩: 后打开的标签先关闭, 不能交叉:

代码块HTML · 5 行收起展开

<!-- 错误: div 和 p 交叉了 -->
<div><p>文本</div></p>

<!-- 正确: p 完整地包在 div 里面 -->
<div><p>文本</p></div>

有个隐蔽的坑: 浏览器对 HTML 出奇宽容, 嵌套写错了页面往往照样显示, 只是结构悄悄变了样, 之后排查问题反而更费劲。所以从第一天起就写规矩点, 层级用缩进对齐, 一眼能看出谁包着谁。

完整的 HTML 文档结构

回头看”第一个网页”那份代码, 每一行都有它的角色:

代码块HTML · 15 行收起展开

<!DOCTYPE html>            <!-- 声明这是 HTML5 文档, 固定写在第一行 -->
<html lang="zh-CN">        <!-- 根元素, lang 声明页面语言是中文 -->
<head>
  <!-- head 是元信息区, 写给浏览器和搜索引擎看, 不显示在页面上 -->
  <meta charset="UTF-8">   <!-- 告诉浏览器用 UTF-8 解码这个文件 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 上面这行是移动端适配, 让手机别把页面当成缩小版电脑页来显示 -->
  <title>页面标题</title>   <!-- 浏览器标签页上显示的文字 -->
</head>
<body>
  <!-- body 里才是页面上真正可见的内容 -->
  <h1>Hello World</h1>
  <p>这是我的第一个网页。</p>
</body>
</html>

<meta charset="UTF-8"> 这行别省。我第一次用记事本保存时编码没选对, 又没写这行声明, 打开满屏乱码。文件本身用 UTF-8 保存, 再加上这行, 中文才稳。

常用标签速查

HTML 标签总量上百个, 但常用的就一小把。按用途分组过一遍, 不用背, 写的时候回来查。

结构与文本

<div> 和 <span> 是两个”本身没含义”的容器: div 独占一行, 用来划分区块, 页面布局基本靠它一层层搭; span 嵌在文本行内, 用来包住一小段文字单独处理。

标题用 <h1> 到 <h6>, 数字越大级别越低, 一个页面一般只放一个 <h1>。段落用 <p>。强调一段文字用 <strong> (加粗) 或 <em> (斜体)。

链接与图片

代码块HTML · 2 行收起展开

<a href="https://example.com">点我跳转</a>
<img src="avatar.png" alt="头像">

列表

无序列表 <ul> 显示圆点, 有序列表 <ol> 显示编号, 里面的每一项都用 <li>: