DevNull 知识库

Appearance

01｜HTML 文档结构与常用标签 ​

浏览器打开页面时最先读取的是 HTML。HTML 不负责好看、不负责交互，只管页面上有哪些内容、这些内容按什么结构组织。CSS 管样式，JavaScript 管交互，HTML 负责搭出页面骨架。理解 HTML 的文档结构和常用标签，是写任何前端页面的第一步。

一、最小页面 ​

一个能被浏览器正确解析的 HTML 文件至少需要以下结构：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>文章管理</h1>
    <p>文章列表与发布记录。</p>
  </body>
</html>

保存为 index.html，双击即可用浏览器打开。页面显示"文章管理"大标题和一段文字——朴素到没有任何样式，但结构已经完整。

几个必须理解的标签：

标签作用省略后果
<!doctype html>声明文档按 HTML5 标准解析浏览器可能进入怪异模式，CSS 表现不一致
<html>整个页面的根元素浏览器仍能渲染，但结构不规范
<head>元信息区域：编码、标题、样式引用标题变成文件名，中文可能乱码
<meta charset="utf-8">字符编码声明中文大概率乱码
<title>浏览器标签页上的文字标签页显示文件名或 URL
<body>页面上能看见的所有内容页面空白

head 和 body 容易混淆：页面上能看见的，放 body；给浏览器和搜索引擎看的说明信息，放 head。

大多数标签成对出现，如 <p>内容</p>。少数标签没有结束标签——<meta>、<link>、<img>、<input>、<br>——因为它们不包裹内容，只在自身位置生效。HTML5 允许这些标签不写自闭合斜杠（<br> 和 <br /> 等价）。

二、文本结构标签 ​

内容放进 body 后，用标题、段落、列表把层次分出来：

标题 ​

html
<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

标题从 h1 到 h6，数字越大字号越小。一个页面通常只有一个 h1，往下按层级用 h2、h3。标题标签表达的是内容层级关系，对屏幕阅读器和搜索引擎很重要，具体字号交给 CSS 控制。

段落与换行 ​

html
<p>这是一个段落。段落之间会自动产生间距。</p>
<p>这是另一个段落。</p>
<p>第一行<br>第二行（br 是强制换行，不产生新段落）</p>

p 标签会自动在上下产生外边距。需要单纯换行而不分段落时，用 <br>。

列表 ​

无序列表（项目符号）：

html
<ul>
  <li>Python 入门</li>
  <li>CSS 布局笔记</li>
  <li>JavaScript 异步编程</li>
</ul>

有序列表（数字序号）：

html
<ol>
  <li>安装环境</li>
  <li>创建项目</li>
  <li>运行服务</li>
</ol>

列表可以嵌套：

html
<ul>
  <li>后端技术
    <ul>
      <li>FastAPI</li>
      <li>SQLAlchemy</li>
    </ul>
  </li>
  <li>前端技术
    <ul>
      <li>Vue</li>
      <li>Pinia</li>
    </ul>
  </li>
</ul>

三、链接与图片 ​

超链接 ​

html
<a href="https://example.com">访问示例网站</a>
<a href="/about.html">关于我们（站内链接）</a>
<a href="mailto:admin@example.com">发送邮件</a>

href 是链接地址。链接文字应该描述目标内容，不要写"点击这里"——这对搜索引擎和屏幕阅读器都不友好。

在新标签页打开（谨慎使用）：

html
<a href="https://example.com" target="_blank" rel="noopener">在新标签页打开</a>

rel="noopener" 防止新页面通过 window.opener 操纵原页面，是安全最佳实践。

图片 ​

html
<img src="logo.png" alt="公司 Logo" width="200" height="60">
属性作用是否必须
src图片文件路径或 URL必须
alt图片无法显示时的替代文字，屏幕阅读器会朗读强烈建议
width / height图片显示尺寸（像素）建议，防止布局抖动

alt 不是装饰——图片加载失败、用户使用屏幕阅读器、搜索引擎抓取时，都依赖这段文字理解图片内容。纯装饰性图片（如背景分隔线）可以设 alt=""，但不要省略 alt 属性。

四、容器标签 ​

div ​

div 是最常用的块级容器，本身没有语义，只负责把相关内容包在一起：

html
<div class="article">
  <h2>文章标题</h2>
  <p>文章内容...</p>
</div>

div 独占一行，前后会产生换行。适合对大块内容分组，后续用 CSS 统一设置样式。

span ​

span 是行内容器，同样没有语义：

html
<p>价格：<span class="price">199</span> 元</p>

span 不会打断文本流，适合在行内对某个词或数字单独设置样式。

块级与行内 ​

特性块级元素（div、p、h1~h6、ul、li）行内元素（span、a、img、strong）
独占一行是否
可设宽高是（默认占满父容器宽度）否（由内容决定）
典型用途大段结构组织行内局部修饰

五、文本修饰标签 ​

html
<p><strong>重要内容</strong>（加粗，有语义强调）</p>
<p><em>需要强调的文本</em>（斜体，有语义强调）</p>
<p><code>print("hello")</code>（代码片段，等宽字体）</p>
<p>原价 <del>299</del>，现价 199（删除线）</p>

strong 和 em 不只是改变样式——它们带有语义：strong 表示重要，em 表示强调。屏幕阅读器会对这些标签使用不同的语调。如果只是想要加粗或斜体效果而没有语义需求，应该用 CSS（font-weight: bold、font-style: italic）。

六、常见错误 ​

标签未闭合 ​

html
<!-- 错误：p 标签未闭合 -->
<p>这是一段文字
<p>这是另一段</p>

浏览器不会报错，但解析结果可能不符合预期：未闭合的 p 会在下一个块级元素前自动闭合。依赖浏览器自动修正会导致不同浏览器表现不一致。

块级元素嵌套在行内元素中 ​

html
<!-- 错误：div 是块级，不能放在 span 里 -->
<span><div>内容</div></span>

HTML 规范不允许这种嵌套。浏览器会尝试修正，但修正方式不一致。

图片缺少 alt ​

html
<!-- 不建议 -->
<img src="chart.png">

<!-- 正确 -->
<img src="chart.png" alt="2024年Q1服务器故障趋势图">

图片缺失 alt 时，屏幕阅读器只能朗读文件名（如"chart-dot-png"），用户体验差，且不利于搜索引擎理解页面内容。