对于HTML：HTML常见标签的解析—上

ShineWinsu2026-10-13 11:35

开篇介绍：

hello 大家，本篇博客我们来学习HTML的常见标签

前言：

在开始我们的 HTML 标签探索之旅前，先问大家一个问题：我们每天在浏览器里看到的精彩纷呈的网页，到底是由什么构成的呢？答案其实很简单 ------HTML 标签。

如果把网页比作一栋大楼，那么 HTML 标签就是这栋大楼的 "钢筋水泥" 和 "基本构件"：标题是大楼的 "楼层标识"，段落是 "房间里的家具"，图片是 "墙上的装饰画"，超链接则是 "连接不同房间甚至不同大楼的通道"。没有这些基础标签，再华丽的网页也无从谈起。

准备好了吗？让我们正式开始这段 HTML 标签的探索之旅吧！

第一章：注释标签 ------ 代码的 "隐形笔记"

1.1 什么是注释标签？

想象一下，你在写一篇很长的文章，或者做一道复杂的数学题，是不是会在旁边写一些小笔记，提醒自己这里为什么这么写、那里是什么意思？在 HTML 代码中，注释标签就是干这个用的。

注释标签里的内容，不会显示在浏览器的页面上------ 它是专门写给写代码的人（也就是你和其他开发者）看的。它的作用就是提高代码的可读性：当你过了几个月再回头看自己的代码，或者别人看你的代码时，通过注释就能快速明白这段代码是干什么的，不用再费劲去猜。

1.2 注释标签的语法与快捷键

注释标签的语法非常简单，格式是：

html 复制代码 
<!-- 这里写你想注释的内容 -->

我们来拆解一下这个语法：

  • <!--：这是注释的 "开始标记"，告诉浏览器："嘿，从这里开始，后面的内容是注释，不用显示在页面上。"
  • 这里写你想注释的内容：这是注释的正文，你可以写任何你想写的东西，比如代码的功能说明、修改日期、待办事项等等。
  • -->：这是注释的 "结束标记"，告诉浏览器："注释到这里就结束了，后面的内容恢复正常解析。"

在实际开发中，我们不用每次都手动敲这一串字符，几乎所有的代码编辑器（比如 VS Code、Sublime Text 等）都有快捷键可以快速添加或取消注释：

  • Windows/Linux 系统 ：按下 Ctrl + / 键
  • Mac 系统 ：按下 Command + / 键

你只需要把光标放在想注释的那一行代码上，或者选中多行代码，然后按下快捷键，编辑器就会自动给这些代码加上注释标签；再按一次快捷键，注释标签就会被取消，非常方便。

1.3 注释的书写原则

虽然注释是写给人看的，但也不是想怎么写就怎么写的，遵循一些基本的原则能让你的注释更有用、更专业：

  1. 要和代码逻辑一致：注释要准确描述代码的功能，不能代码写的是 A，注释写的是 B，这样会误导看代码的人。
  2. 尽量使用中文：如果你是和国内的开发者一起工作，或者自己看代码，用中文写注释会比英文更直观、更容易理解。
  3. 不要传递负能量：注释里不要写抱怨、吐槽或者消极的内容，保持代码的整洁和专业。
  4. 不要写废话：注释要简洁明了，只写必要的内容，不要写 "这是一行代码" 这种谁都知道的废话。

1.4 如何让注释 "显示" 在页面上？（转义字符）

刚才我们说了，注释标签里的内容不会显示在页面上。但如果你偏偏想把 "注释标签本身" 作为普通文本显示在页面上，让用户看到 <!-- 我是注释 --> 这段字符，该怎么办呢？

这时候就需要用到转义字符 了。在 HTML 中，有些字符是有特殊含义的（比如 < 和 > 用来表示标签），如果我们想在页面上显示这些特殊字符本身，就需要把它们 "转义" 成其他字符。

对于注释标签来说，核心是把 < 转成 &lt;，把 > 转成 &gt;。所以，如果你想在页面上显示 <!-- 我是注释 -->，你需要在代码里这么写：

复制代码 
&lt;!-- 我是注释 --&gt;

这样浏览器在解析的时候，就会把 &lt; 还原成 <，把 &gt; 还原成 >，最终在页面上显示出完整的注释标签字符。

1.5 注释的实战应用场景

注释在实际开发中的用处非常多，我们举几个常见的例子：

  1. 代码功能说明：

    网站logo

  2. 暂时隐藏一段代码：如果你想暂时去掉页面上的某部分内容，但又不想直接删除代码（怕以后还要用），就可以用注释把它包起来：

  3. 待办事项标记：在开发过程中，你可以用注释标记还没完成的功能：

1.6 注释的注意事项

使用注释时，有几个小细节需要注意：

  • 注释不能嵌套：你不能在一个注释里面再写另一个注释，比如这样是错误的：
html 复制代码 
<!-- 这是外层注释 <!-- 这是内层注释，错误写法！ --> -->

  • 注释不要写在标签内部：注释要写在标签的外面，不能插在标签的属性中间，比如这样是错误的

    >这是一段文字

第二章：标题标签 h1-h6------ 网页的 "层级骨架"

2.1 标题标签的基本概念

我们平时看报纸、看书、看文章，都会有标题：有大标题、小标题、分标题，它们把文章分成不同的部分，让文章结构清晰，我们读起来也能快速抓住重点。

在 HTML 中，标题标签就是用来干这个的。

HTML 提供了 6 个级别的标题标签，从 <h1> 到 <h6>，其中：

  • h 是英文 Header（标题）的缩写
  • 数字从 1 到 6，数字越大，字体越小，标题的级别越低

也就是说，<h1> 是最大、最重要的标题，<h6> 是最小、最不重要的标题。

2.2 从 h1 到 h6：层级关系与视觉表现

我们先来看一个最基础的示例，直观感受一下这 6 个标题标签的大小区别：

复制代码 
<h1>这是一级标题（h1）</h1>
<h2>这是二级标题（h2）</h2>
<h3>这是三级标题（h3）</h3>
<h4>这是四级标题（h4）</h4>
<h5>这是五级标题（h5）</h5>
<h6>这是六级标题（h6）</h6>

当你把这段代码放到 HTML 文件中，用浏览器打开，你会看到：

  • <h1> 的字体最大，非常醒目
  • 从 <h1> 到 <h6>，字体依次变小
  • <h6> 的字体最小，甚至可能比普通的段落文字还要小

但这里要特别注意：标题标签的核心作用不是 "让字体变大或变小"，而是表示内容的 "层级关系" 和 "重要性"。字体大小只是浏览器给标题标签的默认样式，我们以后可以用 CSS 随意改变标题的字体大小，但标题的层级语义是不能改变的。

2.3 标题标签的语义化重要性

刚才提到了 "语义化"，这是 HTML 中一个非常重要的概念。什么是 "语义化" 呢？简单来说，就是用正确的标签做正确的事情------ 每个 HTML 标签都有它特定的含义，我们要根据内容的性质，选择最合适的标签来包裹它。

标题标签的语义化体现在：

  • 它告诉浏览器和搜索引擎："这部分内容是标题，是这篇文章 / 这个页面的核心主题。"
  • 它告诉屏幕阅读器（给视障人士使用的辅助工具）："这是标题，方便用户快速导航页面内容。"

举个反例：如果你想让一段文字变大变粗，你不用 <h1> 标签，而是用 CSS 把普通的 <p> 标签样式改成和 <h1> 一样，虽然视觉上看起来一样，但在语义上是完全错误的 ------ 浏览器和搜索引擎不知道这段文字是标题，这对网站的搜索引擎优化（SEO）是非常不利的。

2.4 每个标题标签的使用场景

那么在实际开发中，我们该怎么选择使用哪个级别的标题标签呢？这里给大家一个通用的参考：

  1. <h1> 标签 ：一个页面一般只有一个 <h1> 标签，用来表示页面的核心主题 。比如：
    • 博客文章的文章标题
    • 网站首页的网站名称
    • 产品详情页的产品名称
  2. <h2> 标签 ：用来表示页面的主要章节标题 ，是 <h1> 下面的一级子标题。比如博客文章中的 "引言""正文""结语"。
  3. <h3> 标签 ：用来表示 <h2> 下面的二级子标题 ，是对 <h2> 内容的进一步细分。比如 "正文" 下面的 "第一小节""第二小节"。
  4. <h4> 到 <h6> 标签 ：以此类推，用来表示更细层级的子标题。一般来说，我们用到 <h3> 或 <h4> 就足够了，很少会用到 <h5> 和 <h6>，除非内容的层级非常深。

我们可以把标题标签的层级关系想象成一本书的目录：

  • <h1> 是书名
  • <h2> 是书的章
  • <h3> 是章下面的节
  • <h4> 是节下面的小点

这样是不是就好理解多了？

2.5 标题标签的默认样式与 CSS 调整

浏览器会给标题标签设置一些默认的样式，主要包括：

  • 字体大小 ：从 <h1> 到 <h6> 依次递减
  • 字体粗细：标题标签默认是加粗的（font-weight: bold）
  • 外边距：标题标签的上下会有默认的外边距（margin），用来和其他内容保持距离

但这些默认样式不是固定的，我们以后学习了 CSS，就可以随意调整标题标签的样式，比如：

  • 改变字体大小：让 <h2> 比默认的小一点，让 <h3> 比默认的大一点
  • 改变字体颜色：把 <h1> 改成红色，把 <h2> 改成蓝色
  • 去掉加粗：让标题标签不再加粗
  • 调整外边距：让标题之间的距离变大或变小

这里我们先简单提一下，让大家有个印象，等后面学习 CSS 的时候再详细讲解。

2.6 使用标题标签的常见误区

在使用标题标签时，有几个常见的误区大家一定要避免：

  1. 一个页面使用多个 <h1> 标签 ：虽然从技术上来说，多个 <h1> 标签浏览器也能解析，但从语义化和 SEO 的角度来说，一个页面最好只有一个 <h1> 标签，用来突出页面的唯一核心主题。
  2. 用标题标签来做样式 ：比如你只是想让一段文字变大变粗，就用 <h1> 或 <h2> 标签，这是不对的。样式的事情应该交给 CSS 来做，标题标签只用来表示标题。
  3. 跳过标题层级 ：比如直接从 <h1> 跳到 <h3>，中间没有 <h2>，这也是不对的。标题层级应该是连续的，就像书的目录不能直接从 "第一章" 跳到 "第三节" 一样。
  4. 滥用标题标签：不要什么内容都用标题标签，只有真正是标题的内容才用标题标签。

2.7 实战示例：构建文章的标题结构

我们来结合一个实际的例子，看看怎么用标题标签构建一篇文章的结构。假设我们要写一篇关于 "如何学习 HTML" 的文章，我们可以这样安排标题：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>如何学习HTML</title>
</head>
<body>
    <!-- h1：文章的核心标题 -->
    <h1>如何系统地学习HTML：从入门到精通</h1>

    <!-- h2：主要章节 -->
    <h2>一、什么是HTML？</h2>
    <!-- h3：h2下面的子章节 -->
    <h3>1.1 HTML的定义</h3>
    <h3>1.2 HTML的发展历史</h3>

    <h2>二、学习HTML前的准备</h2>
    <h3>2.1 安装代码编辑器</h3>
    <h3>2.2 了解基本的文件操作</h3>

    <h2>三、HTML的核心标签</h2>
    <h3>3.1 基础结构标签</h3>
    <h4>3.1.1 html标签</h4>
    <h4>3.1.2 head标签</h4>
    <h4>3.1.3 body标签</h4>
    <h3>3.2 常见文本标签</h3>

    <h2>四、总结与展望</h2>
</body>
</html>

你看，通过 <h1> 到 <h4> 标签，我们就把这篇文章的结构清晰地搭建起来了，无论是作者自己写，还是读者读，都能一目了然。

第三章：段落标签 p------ 文本的 "容器管家"

3.1 段落标签的定义与作用

我们平时写文章，都会把内容分成一个一个的段落，每个段落表达一个相对独立的意思，段落之间空一行，这样文章读起来才不会累。在 HTML 中，段落标签 <p> 就是用来把文字分成段落的。

p 是英文 Paragraph（段落）的缩写。它的作用就是把一段相对完整的文字包裹起来，告诉浏览器："这是一个段落，要和其他段落区分开。"

3.2 段落标签的语法

段落标签是一个闭合标签，也就是说它有开始标签和结束标签，语法格式是：

复制代码 
<p>这里写段落的内容</p>

我们来举一个最简单的例子：

复制代码 
<p>这是我的第一个段落。</p>
<p>这是我的第二个段落。</p>

当你把这段代码放到浏览器中，你会看到：

  • 这两句话分别显示在不同的行
  • 它们之间有一段明显的垂直空隙（这是浏览器给段落标签设置的默认外边距）

3.3 深入理解 HTML 的 "空白折叠" 规则

在讲段落标签的更多特性之前，我们必须先讲一个 HTML 中非常重要的规则 ------空白折叠规则。这个规则会直接影响我们的文本在页面上的显示效果，很多初学者刚开始都会在这里踩坑。

什么是 "空白折叠" 呢？我们通过几个例子来理解：

  • HTML 内容首尾处的换行、空格均无效：

    这是一个段落。

这段代码中，我们在 <p> 标签后面换了行，内容前面加了空格，内容后面也换了行。但在浏览器中显示时，这些首尾的换行和空格都会被忽略 ，最终显示的效果和 <p>这是一个段落。</p> 是一样的。

  • 文字之间的多个空格只相当于一个空格：

    这是 一个 有很多空格的 段落。

这段代码中，我们在文字之间加了很多个空格。但在浏览器中显示时，这些连续的空格会被合并成一个空格，最终显示的是 "这是 一个 有很多空格的 段落。"

  • 直接输入换行不会真的换行，而是相当于一个空格：

    这是第一行。 这是第二行。 这是第三行。

这段代码中，我们在代码里直接按了回车键换行。但在浏览器中显示时，这些换行符会被当作一个空格处理，最终这三句话会显示在同一行，中间用空格隔开。

为什么会有 "空白折叠" 规则呢？这是因为 HTML 的核心作用是定义内容的结构和语义 ，而不是控制内容的显示样式。显示样式的事情应该交给 CSS 来做。

这样的设计能让 HTML 代码更灵活，比如你可以在代码里随意换行、加空格来让代码更易读，而不用担心影响页面的显示效果。

3.4 段落标签的默认样式：外边距的奥秘

刚才我们提到了，段落标签之间会有一段明显的垂直空隙，这是怎么来的呢？这是因为浏览器给 <p> 标签设置了默认的上下外边距（margin）。

外边距是 CSS 中的一个概念，我们这里先简单理解：外边距就是元素周围的 "空白区域"，用来和其他元素保持距离。浏览器给 <p> 标签设置的默认上下外边距，能让段落之间区分得更明显，读起来更舒服。

当然，和标题标签一样，我们以后学习了 CSS，也可以随意调整段落标签的外边距：

  • 可以把外边距调大，让段落之间的距离更大
  • 可以把外边距调小，让段落之间的距离更小
  • 甚至可以把外边距设为 0，让段落之间没有空隙

3.5 首行缩进怎么实现？（CSS 铺垫）

我们平时写中文文章，习惯在每个段落的第一行空两个字的位置，这叫 "首行缩进"。但在 HTML 的默认样式中，<p> 标签是不会自动首行缩进的。

那怎么实现首行缩进呢？这里我们先提前透露一个 CSS 属性：text-indent。等以后学习了 CSS，你只需要给 <p> 标签加上这样一行样式：

复制代码 
p {
    text-indent: 2em;
}

这里的 2em 表示 "两个字符的宽度"，这样每个段落的第一行就会自动空两个字的位置了。现在大家先记下来有这么个东西，等后面学习 CSS 的时候再详细实践。

3.6 段落标签与浏览器宽度的流式布局

HTML 页面采用的是流式布局机制，什么意思呢？就是页面的内容会自动根据浏览器窗口（或父容器）的宽度进行排版。

对于段落标签来说，当你把一段长文字放到 <p> 标签中：

  • 文字会从左到右依次显示
  • 当文字到达浏览器窗口的右边缘时，会自动换行，不需要你手动按回车键
  • 当你调整浏览器窗口的宽度时，文字会自动重新排版，适应新的宽度

这是 HTML 一个非常重要的特性，也是网页能够适应不同屏幕尺寸（比如电脑屏幕、手机屏幕、平板屏幕）的基础之一。

3.7 实战示例：把一段长文本分成多个段落

我们来结合用户提供的文档中的一段文字，看看怎么用段落标签把它排版好。这段文字是关于 "CSS 中的 1px 并不等于设备的 1px" 的，我们来给它分成合适的段落：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS中的1px</title>
</head>
<body>
    <h1>CSS中的1px并不等于设备的1px</h1>

    <p>在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。</p>

    <p>在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。</p>

    <p>还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。</p>
</body>
</html>

你看，通过 <p> 标签，我们就把这段长文字分成了三个逻辑清晰的段落，页面显示出来也非常整洁易读。

3.8 段落标签的注意事项

最后，我们再强调一下使用段落标签的几个注意事项：

  1. 段落标签是用来包裹段落的，不要用来换行 ：如果你只是想让文字换一行，不要用 <p> 标签，要用我们下一章要讲的 <br> 标签。
  2. 不要在段落标签里面放块级元素 ：虽然浏览器可能不会报错，但从语义化和规范的角度来说，<p> 标签里面应该只放文本、图片、格式化标签等行内元素，不要放其他的块级元素（比如另一个 <p> 标签、标题标签等）。
  3. 合理分段：段落的长度要适中，不要太长也不要太短。太长的段落读起来累，太短的段落会让页面显得零散。一般来说，一个段落表达一个相对独立的意思即可。

第四章：换行标签 br------ 文本的 "强制换行器"

4.1 br 标签的全称与核心作用

上一章我们讲了段落标签 <p>，它可以让文字分成段落，段落之间有空隙。

但有时候我们只是想让文字单纯地换一行，不想有段落之间的那个大空隙，比如写一首诗、写一个地址、写几行代码，这时候该怎么办呢？

这时候就轮到我们的换行标签 <br> 出场了！

br 是英文 Break（打断、中断）的缩写，它的核心作用就是在文本流中强制插入一个换行符。它会立即中断当前正在进行的文本行，让紧随其后的内容强制换到下一行的开头继续显示。

4.2 单标签的特性：为什么没有结束标签？

在前面我们学的标签中，无论是注释标签、标题标签还是段落标签，都是闭合标签 （有开始标签和结束标签）。但 <br> 标签不一样，它是一个典型的单标签（也叫 "空元素"）。

什么是 "单标签" 呢？就是它只有开始标签，没有对应的结束标签（也就是说，你不需要写 </br>）。

为什么 <br> 标签没有结束标签呢？这是由它的作用决定的：

  • 像 <p> 或 <h1> 这样的标签，它们的作用是 "包裹一段内容"，所以需要一个开始标签标记 "内容从这里开始"，一个结束标签标记 "内容到这里结束"。
  • 但 <br> 标签的作用是 "执行一个换行动作"，它不是用来包裹内容的，它只是在那个位置 "插一刀"，让文字换行，所以它不需要结束标签。

4.3 br 标签与 p 标签的视觉对比：空隙的区别

很多初学者容易搞混 <br> 标签和 <p> 标签，因为它们都能让内容 "换一行"。但其实它们的视觉效果有本质的区别，我们通过一个例子来直观感受一下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>br与p的区别</title>
</head>
<body>
    <h2>用p标签换行：</h2>
    <p>这是第一段。</p>
    <p>这是第二段。</p>

    <h2>用br标签换行：</h2>
    <p>这是第一行。<br>
    这是第二行。</p>
</body>
</html>

当你把这段代码放到浏览器中，你会看到：

  • 用 <p> 标签 ：两段文字之间有一段明显的垂直空隙（这是 <p> 标签的默认外边距）。
  • 用 <br> 标签 ：两行文字之间没有额外的垂直空隙，它们是紧贴在一起的（行高由字体或 CSS 决定）。

这就是它们的核心区别：

  • <p> 标签是用来区分 "不同的段落" 的，所以段落之间要有空隙。
  • <br> 标签是用来在 "同一个段落内部" 强制换行的，所以换行后没有额外空隙。

我们再举两个适用场景的例子，帮助大家理解：

  • 用 <br> 标签：写一首诗，诗的每一行之间需要紧凑换行，不需要空隙。
  • 用 <p> 标签：写一篇文章，文章的不同段落之间需要空隙，区分开。

4.4 br 标签的写法规范：<br>还是<br/>？

细心的同学可能会发现，在不同的地方，<br> 标签的写法可能不一样：有的地方写的是 <br>，有的地方写的是 <br/>。那么到底哪种写法是对的呢？

这里给大家一个明确的答案：两种写法在现代浏览器中都能正常工作，但 <br/> 是更推荐的规范写法。

为什么呢？

  • <br/> 的写法源自 XML/XHTML 规范 。在 XML 和 XHTML 中，单标签必须以 /> 结尾来表示 "自我闭合"，这是一种严谨的写法。
  • 虽然现代的 HTML5 规范对单标签的写法比较宽松，<br> 也能被识别，但 <br/> 更符合代码的严谨性 和通用性 。在团队协作、旧项目维护或需要严格遵循 XML 规范的场景下，<br/> 更不容易出错。

所以，建议大家在写代码的时候，尽量使用 <br/> 这种规范写法。

4.5 适用场景举例

我们再举几个 <br> 标签的典型适用场景，帮助大家更好地掌握什么时候用 <br>：

  1. 写诗歌：

    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。

  2. 写地址：

    中国北京市朝阳区
    某某街道某某小区
    1号楼2单元304室

4.6 实战示例：用 br 标签排版一首诗

我们来完整地写一个 HTML 文件，用 <br> 标签排版一首诗，看看效果：

复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
</head>
<body>
    <h1>静夜思</h1>
    <h2>李白</h2>

    <p>
        床前明月光，<br/>
        疑是地上霜。<br/>
        举头望明月，<br/>
        低头思故乡。
    </p>
</body>
</html>

你看，用 <br> 标签排版出来的诗，每一行之间紧凑相连，非常符合我们读诗的习惯。

4.7 使用 br 标签的常见误区

最后，我们再讲一下使用 <br> 标签的几个常见误区，大家一定要避免：

  1. 用 <br> 标签来做段落间距 ：很多初学者为了让段落之间的距离变大，会在两个 <p> 标签之间加很多个 <br> 标签，比如：

    这是第一段。




    这是第二段。

这是非常不规范的写法！段落间距应该用 CSS 的 margin 属性来调整，而不是用 <br> 标签。

    1. 滥用 <br> 标签 ：不要什么换行都用 <br> 标签。如果是不同的段落，一定要用 <p> 标签；只有在同一个段落内部需要强制换行时，才用 <br> 标签。
    1. 用 <br> 标签来调整布局 ：比如为了让某个元素往下移一点，就加几个 <br> 标签，这也是不对的。布局的事情应该交给 CSS 来做。

第五章：格式化标签 ------ 文本的 "美容师"

5.1 格式化标签概述：HTML 与 CSS 的分工

我们平时看文章，除了标题和段落，还会看到有些文字是加粗 的，有些是倾斜 的，有些有删除线 ，有些有下划线 。这些效果能让文章的重点更突出，层次更分明。在 HTML 中，我们可以用格式化标签来实现这些效果。

不过这里要先说明一点：虽然 HTML 格式化标签能实现这些视觉效果，但在现代 Web 开发中，我们更推荐用 CSS 来实现文本的样式 。HTML 格式化标签的核心作用其实是语义化------ 它告诉浏览器和搜索引擎："这段文字有特殊的含义，需要强调或注意。" 而视觉效果只是它附带的功能。

当然，这并不是说 HTML 格式化标签就不用学了。学习它们能帮助我们理解 HTML 的语义化，而且在一些简单的场景下，用格式化标签比用 CSS 更方便快捷。

接下来，我们就一组一组地学习这些格式化标签：加粗标签（strong vs b）、倾斜标签（em vs i）、删除线标签（del vs s）、下划线标签（ins vs u）。

5.2 加粗标签：strong vs b

首先是加粗标签，HTML 提供了两个标签可以让文字加粗：<strong> 和 <b>。虽然它们视觉上都是让文字变粗，但它们的语义化含义是完全不同的。

5.2.1 语义化区别：强调 vs 单纯加粗
  • <strong> 标签：表示重要的强调内容。它的语义是："这段文字非常重要，需要读者重点注意。"
  • <b> 标签：表示单纯的样式加粗，没有额外的语义。它的语义只是："这段文字在视觉上需要加粗，但没有强调的含义。"

在 HTML5 的规范中，<strong> 标签的语义被进一步强化，它表示 "内容的重要性"；而 <b> 标签则被定义为 "出于实用目的而提醒注意的文本，不表示额外的重要性或强调"。

5.2.2 语法与示例

两个标签的语法都很简单，都是闭合标签，把需要加粗的文字包裹起来即可：

复制代码 
<p>这是一段普通的文字。</p>
<p>这是一段<strong>用strong标签强调的重要文字</strong>。</p>
<p>这是一段<b>用b标签单纯加粗的文字</b>。</p>

其实我还是推荐大家能自己手动敲一遍出来，然后再运行查看效果，这比我直接贴出截图其实是会好很多的

5.2.3 默认样式

在浏览器的默认样式中，<strong> 和 <b> 标签的视觉效果是完全一样的------ 它们都会让文字的字体变粗（font-weight: bold）。

5.2.4 使用场景

那么在实际开发中，我们该怎么选择用哪个标签呢？这里给大家一个参考：

  • 用 <strong> 标签 ：当你想表示这段文字很重要，需要强调的时候。比如：
    • 文章的核心关键词
    • 警告提示中的重要内容
    • 产品的核心卖点
  • 用 <b> 标签 ：当你只是想让文字在视觉上加粗，但没有强调的含义的时候。比如：
    • 文章中的摘要关键词
    • 产品列表中的产品名称（只是为了醒目，不表示重要性）
    • 导航栏中的菜单项

不过在实际开发中，<strong> 标签的使用频率比 <b> 标签高很多，因为我们大多数时候加粗文字都是为了强调。

5.2.5 CSS 替代方案

如果你只是想让文字加粗，但不想用 HTML 标签，或者想更灵活地控制加粗的程度（比如半粗、特粗），你可以用 CSS 的 font-weight 属性：

复制代码 
/* 普通加粗，和strong、b标签默认效果一样 */
.bold-text {
    font-weight: bold;
}

/* 更细的控制：400是正常，700是加粗，900是特粗 */
.semi-bold {
    font-weight: 600;
}
.extra-bold {
    font-weight: 900;
}

5.3 倾斜标签：em vs i

接下来是倾斜标签，和加粗标签类似，HTML 也提供了两个标签可以让文字倾斜：<em> 和 <i>。它们的视觉效果一样，但语义化含义不同。

5.3.1 语义化区别：强调 vs 单纯倾斜
  • <em> 标签 ：是英文 Emphasis （强调）的缩写，表示语气上的强调。它的语义是："这段文字在语气上需要重读，以表达不同的含义。"
  • <i> 标签 ：是英文 Italic （斜体）的缩写，表示单纯的样式倾斜，没有额外的语义。它的语义只是："这段文字在视觉上需要倾斜，但没有强调的含义。"

举个例子帮助大家理解 <em> 的语气强调：

  • 这句话："我今天要去北京。"（普通陈述）
  • 这句话："我<em>今天</em>要去北京。"（强调是 "今天"，不是明天或后天）
  • 这句话："我今天要去<em>北京</em>。"（强调是去 "北京"，不是上海或广州）

你看，加上 <em> 标签后，句子的含义重点就不一样了，这就是语气强调的作用。

5.3.2 语法与示例

两个标签的语法也很简单，都是闭合标签：

复制代码 
<p>这是一段普通的文字。</p>
<p>这是一段<em>用em标签在语气上强调的文字</em>。</p>
<p>这是一段<i>用i标签单纯倾斜的文字</i>。</p>
5.3.3 默认样式

在浏览器的默认样式中，<em> 和 <i> 标签的视觉效果也是完全一样的------ 它们都会让文字的字体变倾斜（font-style: italic）。

5.3.4 使用场景
  • 用 <em> 标签：当你想表示语气上的强调，改变句子的含义重点的时候。
  • 用 <i> 标签 ：当你只是想让文字在视觉上倾斜，但没有语气强调的含义的时候。比如：
    • 书籍、电影、歌曲的名称
    • 专业术语
    • 外语单词
5.3.5 CSS 替代方案

同样，如果你想用 CSS 实现文字倾斜，可以用 font-style 属性：

复制代码 
.italic-text {
    font-style: italic;
}

5.4 删除线标签：del vs s

接下来是删除线标签，HTML 提供了 <del> 和 <s> 两个标签来给文字加删除线。

5.4.1 语义化区别：删除内容 vs 装饰性删除线
  • <del> 标签：是英文 Delete（删除）的缩写，表示被删除的内容。它的语义是："这段文字已经被删除了，不再有效。"
  • <s> 标签：是英文 Strikethrough（删除线）的缩写，表示装饰性的删除线，没有 "内容被删除" 的语义。它的语义只是："这段文字在视觉上有删除线，但不表示内容无效。"
5.4.2 语法与示例
复制代码 
<p>这是一段普通的文字。</p>
<p>这是一段<del>被删除的、不再有效的内容</del>。</p>
<p>这是一段<s>有装饰性删除线的内容</s>。</p>
5.4.3 默认样式

在浏览器的默认样式中，<del> 和 <s> 标签都会给文字加上一条中间的横线（text-decoration: line-through）。

5.4.4 使用场景
  • 用 <del> 标签 ：当你想表示内容已经被删除，不再有效的时候。比如：
    • 文档修改时删除的旧内容
    • 商品的原价（表示这个价格已经不用了）
    • 日程表中取消的安排
  • 用 <s> 标签 ：当你只是想给文字加装饰性的删除线，不表示内容无效的时候。不过在实际开发中，<s> 标签的使用频率比较低，大多数时候我们会用 CSS 来实现装饰性删除线。

我们举一个商品价格的例子，这是 <del> 标签最常见的使用场景之一：

复制代码 
<p>
    商品原价：<del>199元</del><br/>
    商品现价：<strong>99元</strong>
</p>
5.4.5 CSS 替代方案

用 CSS 实现删除线，可以用 text-decoration 属性：

复制代码 
.strikethrough-text {
    text-decoration: line-through;
}

5.5 下划线标签：ins vs u

最后是下划线标签，HTML 提供了 <ins> 和 <u> 两个标签来给文字加下划线。

5.5.1 语义化区别：插入内容 vs 装饰性下划线
  • <ins> 标签：是英文 Insert（插入）的缩写，表示新插入的内容。它的语义是："这段文字是新添加进来的。"
  • <u> 标签：是英文 Underline（下划线）的缩写，表示装饰性的下划线，没有 "内容被插入" 的语义。

这里要特别注意 <ins> 标签，它通常和我们刚才讲的 <del> 标签配合使用，用来表示文档的修改：<del> 显示删除的旧内容，<ins> 显示新插入的新内容。

5.5.2 语法与示例
复制代码 
<p>这是一段普通的文字。</p>
<p>这是一段<ins>新插入的内容</ins>。</p>
<p>这是一段<u>有装饰性下划线的内容</u>。</p>

我们再举一个 <ins> 和 <del> 配合使用的例子，展示文档的修改：

复制代码 
<p>
    我们明天<del>上午</del><ins>下午</ins>去公园玩。
</p>

这个例子表示：原来的计划是 "明天上午去"，现在修改成了 "明天下午去"。

5.5.3 默认样式

在浏览器的默认样式中：

  • <ins> 标签会给文字加下划线（text-decoration: underline）
  • <u> 标签也会给文字加下划线

不过这里要特别提醒大家：在实际开发中，要谨慎使用 <u> 标签给普通文字加下划线 ！因为在网页中，带下划线的文字通常会被用户认为是超链接。如果你给普通文字加下划线，用户可能会去点击它，发现点不动，这会造成用户的困惑。

所以，除非你有特别的理由，否则尽量不要用 <u> 标签给普通文字加下划线。装饰性的下划线也尽量少用，或者用其他方式（比如改变颜色、加粗）来代替。

5.5.4 使用场景
  • 用 <ins> 标签 ：和 <del> 配合使用，表示文档中新插入的内容。
  • 用 <u> 标签：尽量少用，除非你有明确的装饰性需求，并且不会让用户误以为是超链接。
5.5.5 CSS 替代方案

用 CSS 实现下划线，同样可以用 text-decoration 属性：

复制代码 
.underline-text {
    text-decoration: underline;
}

5.6 实战示例：格式化一篇文章的重点内容

我们来结合一个例子，综合运用一下这些格式化标签：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>格式化标签示例</title>
</head>
<body>
    <h1>HTML格式化标签使用指南</h1>

    <p>
        在学习HTML格式化标签时，我们要记住一个核心原则：<strong>HTML负责语义，CSS负责样式</strong>。
        虽然HTML标签能实现一些视觉效果，但它们的核心作用是<em>语义化</em>。
    </p>

    <h2>常见格式化标签</h2>
    <p>
        1. <strong>strong标签</strong>：表示重要的强调内容<br/>
        2. <em>em标签</em>：表示语气上的强调<br/>
        3. <del>del标签</del>：表示被删除的内容（这里只是示例，不是真的删除）<br/>
        4. <ins>ins标签</ins>：表示新插入的内容
    </p>

    <h2>商品价格示例</h2>
    <p>
        <i>《HTML从入门到精通》</i>这本书正在促销：<br/>
        原价：<del>99元</del><br/>
        现价：<strong>49元</strong><br/>
        赶紧点击下方链接购买吧！
    </p>
</body>
</html>

第六章：图片标签 img------ 网页的 "视觉窗口"

6.1 图片标签的重要性：网页离不开图片

我们常说 "一图胜千言"，一张好的图片能比一大段文字更直观、更生动地传达信息。在网页中也是一样：如果一个网页只有文字，没有图片，会显得非常枯燥乏味；而有了图片，网页就会变得丰富多彩，更有吸引力。

在 HTML 中，我们用图片标签 <img> 来在网页中插入图片。可以说，图片标签是 HTML 中最重要的标签之一，几乎没有哪个网站是不用图片的。

6.2 图片标签的基本语法：单标签的代表

图片标签 <img> 是一个单标签（和我们之前学的 <br> 标签一样），也就是说它只有开始标签，没有结束标签。

图片标签的最简语法格式是：

复制代码 
<img src="图片的地址">

我们来拆解一下这个最简语法：

  • <img>：这是图片标签的开始标记。
  • src：这是图片标签的核心属性，是英文 Source（来源）的缩写。
  • "图片的地址"：这是 src 属性的值，告诉浏览器图片在哪里，浏览器会根据这个地址去找到图片并显示在页面上。

这里要特别注意：src 属性是图片标签必不可少的属性，没有 src 属性，图片标签就不知道要显示什么图片，浏览器也就什么都不会显示。

6.3 核心属性 src：图片的 "地址入口"

刚才我们说了，src 属性是图片标签的核心属性，它的值是图片的地址。那么图片的地址有哪些类型呢？主要分为两种：绝对路径 和相对路径 ，另外还有一种是网络路径（其实网络路径也是一种绝对路径）。

在讲路径之前，我们先来讲一下目录结构。对于一个复杂的网站，我们会有很多文件：HTML 文件、图片文件、CSS 文件、JavaScript 文件等等。如果把这些文件都随便乱放，会非常混乱，难以管理。所以我们通常会用 ** 文件夹（目录）** 把这些文件整理好。

比如一个简单的网站目录结构可能是这样的：

复制代码 
my-website/          （网站根文件夹）
├── index.html       （首页HTML文件）
├── about.html       （关于我们HTML文件）
├── images/          （存放图片的文件夹）
│   ├── logo.png
│   ├── banner.jpg
│   └── photos/      （images下面的子文件夹，存放照片）
│       ├── photo1.jpg
│       └── photo2.jpg
└── css/             （存放CSS文件的文件夹）
    └── style.css

有了清晰的目录结构，我们才能准确地找到图片的地址。

6.3.1 什么是路径？绝对路径 vs 相对路径

简单来说，路径就是告诉浏览器 "文件在哪里" 的一串字符。

  • 绝对路径 ：是一个完整的地址，从 "根目录" 开始，一直指向文件的位置。无论你当前在哪个文件夹里，绝对路径都是固定的。
  • 相对路径 ：是以当前 HTML 文件所在的位置为基准，去找到图片的位置。当前 HTML 文件的位置变了，相对路径也会跟着变。

为了帮助大家理解，我们可以用生活中的 "找路" 来类比：

  • 绝对路径：就像 "中国北京市朝阳区某某街道某某小区 1 号楼 2 单元 304 室"，这是一个完整的地址，无论你在世界上的哪个地方，用这个地址都能找到这个地方。
  • 相对路径：就像 "从你现在的位置，往前走 100 米，左转，再走 50 米就到了"，这个路径是基于你 "现在的位置" 的，如果你现在的位置变了，这个路径也就不对了。
6.3.2 相对路径详解：同级、下一级、上一级

相对路径是我们在开发中最常用的路径类型，因为它灵活、方便，而且当我们把网站文件夹整个移动到其他地方时，相对路径不需要修改就能正常工作。

相对路径主要有三种情况：同级路径 、下一级路径 、上一级路径。我们结合刚才的目录结构来详细讲解：

情况一：同级路径（图片和 HTML 文件在同一个文件夹里）

假设我们在 index.html 文件中，想插入和它在同一个文件夹里的 logo.png 图片（哦，不对，在我们的目录结构里，logo.png 是在 images 文件夹里的，我们假设 index.html 旁边还有一个 test.jpg 图片）：

复制代码 
my-website/
├── index.html
└── test.jpg       （和index.html同级）

这时候，相对路径直接写图片的文件名 即可（或者前面加 ./，./ 表示 "当前文件夹"）：

复制代码 
<img src="test.jpg">
<!-- 或者 -->
<img src="./test.jpg">
情况二：下一级路径（图片在 HTML 文件所在文件夹的子文件夹里）

假设我们在 index.html 文件中，想插入 images 文件夹里的 logo.png 图片：

复制代码 
my-website/
├── index.html
└── images/
    └── logo.png   （在index.html的下一级images文件夹里）

这时候，相对路径的写法是：子文件夹名 / 图片文件名：

复制代码 
<img src="images/logo.png">

如果是更深的子文件夹呢？比如我们在 index.html 中，想插入 images/photos/ 文件夹里的 photo1.jpg：

复制代码 
my-website/
├── index.html
└── images/
    └── photos/
        └── photo1.jpg

这时候就一层一层往下写：子文件夹名 / 子子文件夹名 / 图片文件名：

复制代码 
<img src="images/photos/photo1.jpg">
情况三：上一级路径（图片在 HTML 文件所在文件夹的父文件夹里）

现在假设我们在 images/photos/ 文件夹里新建了一个 photo.html 文件，我们想在这个文件中插入 images 文件夹里的 logo.png 图片：

复制代码 
my-website/
├── index.html
└── images/
    ├── logo.png       （我们要插入的图片）
    └── photos/
        └── photo.html （当前HTML文件在这里）

这时候，photo.html 在 images/photos/ 里，logo.png 在 images/ 里，也就是 photo.html 的上一级文件夹里。

在相对路径中，我们用 ../ 表示上一级文件夹。所以写法是：

复制代码 
<img src="../logo.png">

这里的 ../ 表示 "从当前的 photos 文件夹，回到上一级的 images 文件夹"，然后在 images 文件夹里找到 logo.png。

如果要回到更上一级呢？比如我们在 photo.html 中，想插入根文件夹里的 test.jpg（假设根文件夹里有 test.jpg）：

复制代码 
my-website/
├── test.jpg           （我们要插入的图片，在根文件夹）
├── index.html
└── images/
    ├── logo.png
    └── photos/
        └── photo.html （当前HTML文件在这里）

这时候需要回到上两级文件夹 ，所以用两个 ../：

复制代码 
<img src="../../test.jpg">

第一个 ../ 回到 images 文件夹，第二个 ../ 回到根文件夹 my-website，然后找到 test.jpg。

6.3.3 网络路径：直接引用网上的图片

除了引用我们自己电脑里的图片，我们还可以直接引用网上的图片，这时候 src 属性的值就是图片的网络地址（URL）。

比如用户提供的文档中有一个图片链接：https://images0.cnblogs.com/blog/130623/201407/300958470402077.png，我们可以直接把这个网络地址放到 src 属性里：

复制代码 
<img src="https://images0.cnblogs.com/blog/130623/201407/300958470402077.png">

这样浏览器就会从网络上下载这张图片并显示在页面上。

不过这里要注意：

  • 引用网上的图片时，要确保你有这张图片的使用权，不要随便引用别人的图片，避免版权纠纷。
  • 网上的图片可能会被删除或移动，导致你的页面上的图片无法显示（也就是 "图片挂了"）。所以如果是重要的图片，最好下载到自己的电脑里，用相对路径引用。
6.3.4 目录结构的最佳实践

最后，我们再给大家几个关于目录结构的最佳实践建议：

  1. 把图片放在专门的文件夹里 ：比如创建一个 images 或 img 文件夹，专门用来放图片，不要把图片和 HTML 文件随便混放在一起。
  2. 文件夹和文件名用英文：虽然现在的浏览器对中文文件名的支持越来越好，但为了避免兼容性问题，建议文件夹和文件名都用英文，不要用中文，也不要用空格和特殊字符。
  3. 文件名要有意义 ：比如 logo.png、banner.jpg、product-01.jpg，这样一看就知道图片是干什么的，不要用 1.jpg、2.jpg 这种没有意义的名字。
6.3.5 实战示例：不同路径的图片引用

我们来写一个完整的 HTML 文件，综合练习一下不同路径的图片引用（假设我们已经按照之前的目录结构放好了图片）：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片路径示例</title>
</head>
<body>
    <h1>图片路径练习</h1>

    <h2>1. 同级路径（假设根文件夹有test.jpg）</h2>
    <img src="test.jpg" alt="同级路径图片">

    <h2>2. 下一级路径（images文件夹里的logo.png）</h2>
    <img src="images/logo.png" alt="下一级路径图片">

    <h2>3. 更深的下一级路径（images/photos里的photo1.jpg）</h2>
    <img src="images/photos/photo1.jpg" alt="更深的下一级路径图片">

    <h2>4. 网络路径</h2>
    <img src="https://images0.cnblogs.com/blog/130623/201407/300958470402077.png" alt="网络路径图片">
</body>
</html>

6.4 alt 属性：图片的 "替代文本"

刚才我们讲了图片标签的核心属性 src，接下来我们讲另一个非常重要的属性 ------alt 属性。

alt 是英文 Alternative （替代）的缩写，alt 属性的值是图片的替代文本。

6.4.1 alt 属性的作用：图片加载失败时的救星

alt 属性主要有两个作用：

  1. 图片加载失败时显示替代文本：当因为某些原因（比如图片地址写错了、图片被删除了、网络不好）导致图片无法加载时，浏览器会在图片的位置显示 alt 属性里的文本，告诉用户这里本来应该有一张什么图片。
  2. 语义化与无障碍：对屏幕阅读器友好：对于视障人士来说，他们是用 "屏幕阅读器" 来浏览网页的。屏幕阅读器会读取 alt 属性里的文本，告诉视障人士这张图片的内容是什么。如果没有 alt 属性，屏幕阅读器就会跳过这张图片，视障人士就不知道这里有一张图片。

正是因为这两个作用，alt 属性虽然不是图片标签必须的属性，但我们强烈建议大家在写图片标签时，一定要加上 alt 属性。这是一种良好的开发习惯，也是对用户（尤其是视障用户）的尊重。

6.4.2 如何写好 alt 文本？

写好 alt 文本也是一门学问，这里给大家几个原则：

  1. 简洁明了：用简短的语言描述图片的核心内容，不要太长。
  2. 准确描述：准确地描述图片里有什么、是什么，不要写无关的内容。
  3. 不要重复 ：如果图片旁边的文字已经描述了图片的内容，alt 文本可以简单一点，或者如果图片只是装饰性的，alt 文本可以设为空（alt=""）。
  4. 不要以 "图片 of" 或 "图片 of" 开头 ：屏幕阅读器会自动告诉用户这是一张图片，所以你不需要在 alt 文本里写 "这是一张图片"。

我们举几个例子：

  • 好的 alt 文本：alt="网站logo"、alt="一只可爱的橘猫在晒太阳"、alt="2024年产品销量柱状图"
  • 不好的 alt 文本：alt="图片"（太笼统）、alt="这是一张非常好看的图片，是我去年在旅游的时候拍的，照片里有..."（太长）、alt=""（如果是重要图片，设为空就不好了）
6.4.3 实战示例：alt 属性的正确使用

我们来给之前的图片示例加上 alt 属性：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>alt属性示例</title>
</head>
<body>
    <h1>alt属性练习</h1>

    <img src="images/logo.png" alt="我的个人网站logo">
    <img src="images/photos/cat.jpg" alt="一只橘色的小猫趴在窗台上晒太阳">
    <img src="https://example.com/non-existent-image.jpg" alt="示例图片（如果看不到说明图片加载失败了）">
</body>
</html>

你可以试试把第三个图片的地址写错，看看浏览器会不会显示 alt 文本。

6.5 title 属性：图片的 "提示文本"

接下来是 title 属性，title 属性的值是图片的提示文本。

6.5.1 title 属性的作用：鼠标悬停的小提示

title 属性的作用是：当用户把鼠标悬停在图片上时，浏览器会显示一个小提示框，里面显示 title 属性里的文本。

这个属性可以用来给用户提供一些额外的信息，比如图片的详细说明、拍摄时间、作者等等。

6.5.2 alt 与 title 的区别

很多初学者容易搞混 alt 属性和 title 属性，我们来对比一下它们的区别：

属性 作用 显示时机 重要性
alt 替代文本，图片加载失败时显示，供屏幕阅读器读取 图片加载失败时，或屏幕阅读器读取时 非常重要，强烈建议必须加
title 提示文本，鼠标悬停时显示 鼠标悬停在图片上时 可选，根据需要添加

简单来说：alt 是 "必须的救命稻草"，title 是 "可选的锦上添花"。

6.5.3 实战示例：title 属性的使用

我们给图片加上 title 属性：

复制代码 
<img src="images/photos/cat.jpg" 
     alt="一只橘色的小猫趴在窗台上晒太阳" 
     title="这是我家的小猫，名字叫橘子，拍摄于2024年春天">

现在你把鼠标悬停在这张图片上，就会看到 title 属性里的提示文本了。

6.6 width 与 height 属性：控制图片的 "身材"

接下来是 width 和 height 属性，它们用来控制图片的宽度 和高度。

6.6.1 只改一个的好处：等比例缩放

width 和 height 属性的值通常是像素值（px） ，比如 width="500" 表示图片的宽度是 500 像素。

这里有一个非常重要的原则：一般情况下，我们只改宽度或只改高度，不要同时改两个。

为什么呢？因为图片是有原始宽高比 的（也就是宽度和高度的比例）。如果你只改宽度，浏览器会自动根据原始宽高比计算出高度，让图片等比例缩放，不会变形；如果你只改高度，浏览器会自动计算出宽度。

但如果你同时改宽度和高度，而且改的比例和原始宽高比不一样，图片就会变形（变胖或变瘦、变高或变矮），看起来非常难看。

我们举个例子：假设一张图片的原始尺寸是 400px 宽 × 300px 高（宽高比是 4:3）。

  • 只改宽度：width="200"，浏览器会自动把高度设为 150px（保持 4:3），图片不变形。
  • 只改高度：height="600"，浏览器会自动把宽度设为 800px（保持 4:3），图片不变形。
  • 同时改：width="200" height="200"，宽高比变成了 1:1，图片就会变形。
6.6.2 单位：像素 px 的使用

在 HTML 中，width 和 height 属性的值默认就是像素，所以你不需要写 px 单位，直接写数字即可。比如 width="500" 就可以了，不需要写 width="500px"（虽然写了也不会报错，但不规范）。

6.6.3 CSS vs HTML 属性：推荐用哪种？

和之前的格式化标签一样，虽然 HTML 的 width 和 height 属性可以控制图片大小，但在现代 Web 开发中，我们更推荐用 CSS 来控制图片的大小。

用 CSS 控制图片大小有几个好处：

  1. 更灵活：CSS 可以用更多的单位（比如百分比、em、rem），可以实现更复杂的效果（比如响应式图片，图片大小随屏幕宽度变化）。
  2. 分离关注点：HTML 负责结构，CSS 负责样式，代码更清晰。
  3. 更容易维护：如果有很多图片，你可以用一个 CSS 类统一控制它们的大小，不用一个个去改 HTML 属性。

当然，在 HTML 中用 width 和 height 属性也有一个好处：浏览器在加载图片之前，就可以根据这两个属性预留出图片的位置，避免页面在图片加载时发生 "跳动"（布局偏移）。所以现在的最佳实践是：在 HTML 中写上原始的 width 和 height 属性（告诉浏览器图片的原始尺寸），然后用 CSS 来控制实际显示的大小。

这个我们等后面学习 CSS 的时候再详细讲解，现在大家先知道有这么回事即可。

6.6.4 实战示例：调整图片大小

我们来练习一下用 HTML 属性调整图片大小：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片大小示例</title>
</head>
<body>
    <h1>图片大小练习</h1>

    <h2>1. 原始大小（假设原始是400x300）</h2>
    <img src="images/cat.jpg" alt="橘猫">

    <h2>2. 只改宽度为200px（高度自动等比例缩放）</h2>
    <img src="images/cat.jpg" alt="橘猫" width="200">

    <h2>3. 只改高度为600px（宽度自动等比例缩放）</h2>
    <img src="images/cat.jpg" alt="橘猫" height="600">

    <h2>4. 同时改宽高为200x200（图片会变形，不推荐）</h2>
    <img src="images/cat.jpg" alt="橘猫" width="200" height="200">
</body>
</html>

6.7 border 属性：给图片加 "边框"

最后是 border 属性，它用来给图片加边框。

6.7.1 border 属性的语法

border 属性的值是边框的宽度（像素） ，比如 border="5" 表示给图片加一个 5 像素宽的边框。

6.7.2 为什么推荐用 CSS 加边框？

和图片大小一样，虽然 HTML 的 border 属性可以加边框，但在现代 Web 开发中，我们几乎不用它，而是用 CSS 来加边框。

原因很简单：HTML 的 border 属性只能设置边框的宽度，而且边框的样式是固定的（黑色实线），非常丑。而用 CSS 加边框，你可以：

  • 控制边框的宽度
  • 控制边框的样式（实线、虚线、点线、双线等等）
  • 控制边框的颜色
  • 控制边框的圆角
  • 甚至可以给四个边设置不同的样式

所以，border 属性大家了解一下即可，实际开发中用 CSS。

6.7.3 实战示例：border 属性的使用

我们简单看一下 border 属性的效果：

复制代码 
<img src="images/cat.jpg" alt="橘猫" border="5">

你会看到图片周围有一个黑色的、5 像素宽的实线边框。

6.8 图片标签的属性注意事项

最后，我们再总结一下图片标签属性的几个注意事项：

  1. 属性可以有多个，不能写到标签之前 ：属性要写在 <img> 标签的里面，不能写在 <img> 前面。
  2. 属性之间用空格分割：多个属性之间用空格隔开，可以是一个空格，也可以是多个空格，还可以换行（为了代码易读，属性多的时候可以换行写）。
  3. 属性之间不分先后顺序 ：src、alt、title 这些属性的顺序可以随便放，不影响效果。
  4. 属性使用 "键值对" 的格式 ：格式是 属性名="属性值"，属性值要用双引号（或单引号）括起来。

6.9 实战综合示例：在页面中插入一张带所有属性的图片

我们来写一个完整的示例，在页面中插入一张带所有常用属性的图片：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片标签综合示例</title>
</head>
<body>
    <h1>我家的小猫</h1>

    <img 
        src="images/photos/juzi.jpg" 
        alt="一只橘色的小猫趴在阳台上，看着外面的风景" 
        title="这是我家的小猫，名字叫橘子，今年2岁了，最喜欢趴在阳台上看风景" 
        width="400"
        border="2">
</body>
</html>

第七章：超链接标签 a------ 网页的 "导航桥梁"

7.1 超链接的重要性：网页之间的连接纽带

什么是 "互联网"？简单来说，互联网就是由无数个 "网页" 通过 "链接" 连接在一起组成的一张大网。如果没有链接，每个网页都是孤立的，用户只能通过输入网址来访问网页，那互联网就不会像现在这么方便了。

在 HTML 中，我们用超链接标签 <a> 来创建链接。a 是英文 Anchor（锚）的缩写，这个名字非常形象 ------ 超链接就像一个锚一样，把两个网页 "锚定" 在一起，让用户可以从一个网页跳转到另一个网页。

超链接标签是 HTML 中最核心的标签之一，正是因为有了它，互联网才成为了 "互联" 的网。

7.2 超链接标签的基本语法：闭合标签的代表

超链接标签 <a> 是一个闭合标签，它有开始标签和结束标签。

超链接标签的最简语法格式是：

复制代码 
<a href="目标地址">提示文字（或其他元素）</a>

我们来拆解一下这个语法：

  • <a>：超链接标签的开始标记。
  • href：超链接标签的核心属性，是英文 Hypertext Reference（超文本引用）的缩写。
  • "目标地址"：href 属性的值，告诉浏览器点击链接后要跳转到哪里。
  • 提示文字（或其他元素）：这是超链接的 "内容"，放在 <a> 和 </a> 之间。用户在页面上看到的就是这个内容，点击它就会跳转。
  • </a>：超链接标签的结束标记。

和图片标签的 src 属性一样，href 属性是超链接标签必不可少的属性，没有 href 属性，超链接就不知道要跳转到哪里。

7.3 核心属性 href：链接的 "目标地址"

href 属性是超链接标签的核心，它的值是链接的目标地址。和图片标签的 src 属性类似，href 属性的值也可以是绝对路径、相对路径或网络路径。

根据 href 属性值的不同，超链接可以分为很多种类型：外部链接、内部链接、空链接、下载链接、锚点链接、禁止跳转链接。我们一种一种来详细讲解。

7.3.1 外部链接：跳转到其他网站

外部链接是指跳转到其他网站的链接，href 属性的值是一个完整的网络地址（URL）。

比如我们想在页面上放一个链接，点击后跳转到百度，就可以这样写：

复制代码 
<a href="http://www.baidu.com">去百度搜索</a>

这里的 http://www.baidu.com 就是百度的网络地址，用户点击 "去百度搜索" 这几个字，浏览器就会跳转到百度首页。

外部链接的网络地址通常以 http:// 或 https:// 开头（https:// 是加密的，更安全，现在大多数网站都用 https://）。

我们再举几个外部链接的例子，结合用户提供的文档中的网站：

复制代码 
<a href="https://www.sogou.com">去搜狗</a>
<a href="https://www.example.com">示例网站</a>
7.3.2 内部链接：网站内部页面的跳转

内部链接是指跳转到自己网站内部其他页面的链接，href 属性的值是相对路径（或者绝对路径，但相对路径更常用）。

比如我们的网站有两个页面：index.html（首页）和 about.html（关于我们），它们在同一个文件夹里。我们想在 index.html 里放一个链接，点击后跳转到 about.html，就可以这样写：

复制代码 
<a href="about.html">关于我们</a>

这里的 about.html 就是相对路径（同级路径），用户点击 "关于我们"，就会跳转到 about.html 页面。

如果 about.html 在子文件夹里，或者在父文件夹里，写法和我们之前学的图片路径的相对路径是一样的：

  • 下一级路径：href="pages/about.html"
  • 上一级路径：href="../index.html"

内部链接是我们在开发网站时最常用的链接类型，通过内部链接，我们可以把网站的所有页面连接在一起，形成一个完整的网站结构。

7.3.3 空链接：用 #占位

空链接是指 href 属性的值为 # 的链接。

空链接的特点是：点击它不会跳转到其他页面，也不会刷新页面，而是会回到当前页面的顶部。

空链接主要用于开发阶段占位：比如你现在还没想好这个链接要跳转到哪里，就可以先用 # 占位，等以后想好了再改成真正的地址。

空链接的写法：

复制代码 
<a href="#">这是一个空链接（点击回到顶部）</a>
7.3.4 下载链接：点击下载文件

如果 href 属性的值是一个文件的地址（比如 .zip、.pdf、.exe、.docx 等），那么点击这个链接时，浏览器会下载这个文件，而不是打开它。

比如我们想让用户点击链接后下载一个 test.zip 文件，这个文件和当前 HTML 文件在同一个文件夹里，就可以这样写：

复制代码 
<a href="test.zip">点击下载压缩包</a>

用户点击 "点击下载压缩包"，浏览器就会开始下载 test.zip 文件。

下载链接的地址也可以是网络路径，比如：

复制代码 
<a href="https://example.com/files/report.pdf">点击下载报告（PDF）</a>
7.3.5 锚点链接：快速定位到页面的某个位置

锚点链接是一种非常特殊的链接，它不是跳转到其他页面，而是跳转到当前页面（或其他页面）的某个特定位置。

比如我们看一篇很长的文章，文章开头有一个目录，点击目录里的某个标题，页面就会自动滚动到那个标题所在的位置，这就是锚点链接的作用。

要实现锚点链接，我们需要做两步：

  1. 给目标位置的标签设置 id 属性：id 属性的值是这个位置的 "唯一标识符"，就像给这个位置起个名字。
  2. 在超链接的 href 属性中引用这个 id：格式是 href="#id值"，# 后面跟目标位置的 id 值。

我们来举一个完整的例子，帮助大家理解：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>锚点链接示例</title>
</head>
<body>
    <h1>一篇很长的文章</h1>

    <!-- 目录：这里是锚点链接 -->
    <h2>目录</h2>
    <p><a href="#section1">第一部分：HTML简介</a></p>
    <p><a href="#section2">第二部分：CSS简介</a></p>
    <p><a href="#section3">第三部分：JavaScript简介</a></p>

    <!-- 文章内容：这里是目标位置，设置了id属性 -->
    <h2 id="section1">第一部分：HTML简介</h2>
    <p>这里是第一部分的内容...（为了演示效果，这里可以多写一些文字，让页面变长）</p>
    <p>更多内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>

    <h2 id="section2">第二部分：CSS简介</h2>
    <p>这里是第二部分的内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>

    <h2 id="section3">第三部分：JavaScript简介</h2>
    <p>这里是第三部分的内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>
    <p>更多内容...</p>
</body>
</html>

在这个例子中：

  1. 我们给三个 <h2> 标签分别设置了 id 属性：id="section1"、id="section2"、id="section3"。
  2. 我们在目录里放了三个锚点链接，href 属性分别是 #section1、#section2、#section3。

当你点击目录里的 "第一部分：HTML 简介" 时，页面就会自动滚动到 id="section1" 的那个 <h2> 标签所在的位置，非常方便！

锚点链接不仅可以跳转到当前页面的某个位置，还可以跳转到其他页面 的某个位置，写法是：href="页面地址#id值"。比如：

复制代码 
<a href="article.html#section2">跳转到article.html页面的第二部分</a>
7.3.6 禁止跳转：javascript:void (0) 与 javascript:;

有时候我们想给某个元素加上超链接的样式（比如鼠标放上去变成小手），但又不想让它点击后跳转或刷新页面，这时候我们可以用 javascript:void(0) 或 javascript:; 作为 href 属性的值。

这两种写法的作用都是：告诉浏览器 "这是一个 JavaScript 代码，执行它，什么都不会发生"，所以点击链接后页面不会跳转，也不会刷新。

写法如下：

复制代码 
<a href="javascript:void(0);">点击我，什么都不会发生</a>
<!-- 或者 -->
<a href="javascript:;">点击我，什么都不会发生</a>

这两种写法的效果是一样的，用哪种都可以，不过 javascript:void(0); 更常见一些。

这种链接通常用于配合 JavaScript 代码实现一些交互效果（比如点击后弹出一个对话框），我们等后面学习 JavaScript 的时候再详细讲解。

7.3.7 实战示例：各种 href 的使用

我们来写一个完整的 HTML 文件，综合练习一下各种类型的 href：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超链接href示例</title>
</head>
<body>
    <h1>超链接类型练习</h1>

    <h2>1. 外部链接</h2>
    <p><a href="https://www.baidu.com">去百度</a></p>
    <p><a href="https://www.sogou.com">去搜狗</a></p>

    <h2>2. 内部链接（假设同级有about.html）</h2>
    <p><a href="about.html">关于我们</a></p>

    <h2>3. 空链接</h2>
    <p><a href="#">这是一个空链接（点击回到顶部）</a></p>

    <h2>4. 下载链接（假设同级有test.zip）</h2>
    <p><a href="test.zip">点击下载压缩包</a></p>

    <h2>5. 锚点链接</h2>
    <p><a href="#bottom">跳转到页面底部</a></p>

    <!-- 这里多写一些内容，让页面变长 -->
    <p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p>
    <p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p>
    <p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p>

    <!-- 页面底部，设置id为bottom -->
    <h2 id="bottom">页面底部</h2>
    <p><a href="#">回到顶部</a></p>

    <h2>6. 禁止跳转</h2>
    <p><a href="javascript:void(0);">点击我，什么都不会发生</a></p>
</body>
</html>

7.4 target 属性：链接的 "打开方式"

接下来我们讲超链接标签的另一个重要属性 ------target 属性。target 属性用来控制链接的打开方式：是在当前浏览器标签页打开，还是在新的浏览器标签页打开。

target 属性有几个常用的值，我们主要讲两个最常用的：_blank 和 _self。

7.4.1 _blank：新标签页打开

当 target="_blank" 时，点击链接会在新的浏览器标签页或窗口中打开目标页面。当前页面会保留，用户看完新页面后，还可以回到原来的页面继续浏览。

写法如下：

复制代码 
<a href="https://www.baidu.com" target="_blank">在新标签页打开百度</a>
7.4.2 _self：当前标签页打开（默认）

当 target="_self" 时，点击链接会在当前浏览器标签页中打开目标页面。当前页面会被新页面替换掉。

_self 是超链接标签的默认值------ 如果你不写 target 属性，默认就是 target="_self"。

写法如下：

复制代码 
<a href="about.html" target="_self">在当前标签页打开关于我们</a>
<!-- 或者直接不写target属性，效果一样 -->
<a href="about.html">在当前标签页打开关于我们</a>
7.4.3 其他 target 值

除了 _blank 和 _self，target 属性还有几个值，比如 _parent（在父框架中打开）、_top（在顶层框架中打开），还有自定义的框架名称。不过这些值在现代 Web 开发中用得比较少（因为框架用得少了），所以我们这里简单提及一下，大家有个印象即可，等以后用到了再查资料。

7.4.4 实战示例：target 属性的使用

我们来练习一下 target 属性：

复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>target属性示例</title>
</head>
<body>
    <h1>链接打开方式练习</h1>

    <p><a href="https://www.baidu.com" target="_blank">在新标签页打开百度（target="_blank"）</a></p>
    <p><a href="https://www.baidu.com" target="_self">在当前标签页打开百度（target="_self"）</a></p>
    <p><a href="https://www.baidu.com">在当前标签页打开百度（不写target，默认就是_self）</a></p>
</body>
</html>

7.5 rel 属性：链接的 "关系说明"（配合 target="_blank"）

接下来我们讲 rel 属性，rel 是英文 Relationship （关系）的缩写，它用来定义当前页面与目标页面的关系。

rel 属性有很多值，我们这里主要讲一个最常用的组合：noopener noreferrer，这个组合通常配合 target="_blank" 一起使用。

7.5.1 noopener noreferrer 的作用：安全防护

为什么要配合 target="_blank" 使用 rel="noopener noreferrer" 呢？这是因为有一个安全隐患 ：当你用 target="_blank" 在新标签页打开一个外部网站时，那个外部网站可以通过 JavaScript 代码恶意篡改你的原页面（比如把原页面改成一个钓鱼网站），这是非常危险的。

而 rel="noopener noreferrer" 就是用来防止这种安全隐患的：

  • noopener：防止新打开的页面通过 window.opener 属性访问原页面，从而防止恶意篡改。
  • noreferrer：防止新打开的页面获取到原页面的地址（Referer），保护用户的隐私。

虽然现代浏览器已经在一定程度上修复了这个安全隐患，但为了兼容性和安全性，我们还是强烈建议：只要你用了 target="_blank"，就一定要加上 rel="noopener noreferrer"。

7.5.2 实战示例：rel 属性的使用

我们给 target="_blank" 的链接加上 rel="noopener noreferrer"：

复制代码 
<a href="https://www.baidu.com" 
   target="_blank" 
   rel="noopener noreferrer">
   在新标签页打开百度（安全写法）
</a>

7.6 download 属性：文件的 "下载助手"

接下来我们讲 download 属性，这个属性是配合下载链接使用的。

7.6.1 download 属性的作用

我们之前讲了，如果 href 属性的值是一个文件地址，点击链接会下载文件。但有些时候，浏览器可能会尝试在浏览器中打开这个文件（比如 .pdf、.jpg 文件，有些浏览器会直接在浏览器里显示，而不是下载）。

这时候我们可以加上 download 属性，强制浏览器下载这个文件，而不是打开它。

7.6.2 如何设置下载后的文件名？

download 属性的值是可选的：

  • 如果你写了 download="文件名"，那么下载后的文件就会以你写的这个文件名保存。
  • 如果你只写了 download，没有写值，那么下载后的文件就会以原来的文件名保存。

写法如下：

复制代码 
<!-- 强制下载，下载后的文件名是"我的报告.pdf" -->
<a href="report.pdf" download="我的报告.pdf">点击下载报告</a>

<!-- 强制下载，下载后的文件名是原来的文件名 -->
<a href="report.pdf" download>点击下载报告</a>
7.6.3 实战示例：download 属性的使用

我们来练习一下 download 属性：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>download属性示例</title>
</head>
<body>
    <h1>下载链接练习</h1>

    <p><a href="report.pdf">普通下载链接（浏览器可能会直接打开）</a></p>
    <p><a href="report.pdf" download>强制下载（用原文件名）</a></p>
    <p><a href="report.pdf" download="2024年度工作总结.pdf">强制下载（自定义文件名）</a></p>
</body>
</html>

7.7 title 属性：链接的 "提示文本"

和图片标签一样，超链接标签也有 title 属性，作用也是一样的：当用户把鼠标悬停在链接上时，浏览器会显示一个小提示框，里面显示 title 属性里的文本。

写法如下：

复制代码 
<a href="https://www.baidu.com" 
   target="_blank" 
   rel="noopener noreferrer"
   title="点击这里跳转到百度首页，进行搜索">
   去百度
</a>

7.8 超链接的嵌套：给图片加链接

之前我们讲的超链接，<a> 和 </a> 之间放的都是文字。但其实，<a> 和 </a> 之间可以放任何 HTML 元素，最常见的就是放图片标签------ 这样用户点击图片，就会跳转到目标地址。

给图片加链接的语法很简单：把 <img> 标签整个放到 <a> 和 </a> 之间即可：

复制代码 
<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">
    <img src="images/baidu-logo.png" alt="百度logo">
</a>

这样，用户点击百度 logo 的图片，就会跳转到百度首页了。

除了图片，你还可以放其他元素，比如放一段文字加一张图片，或者放一个按钮（当然按钮我们还没学），只要是合法的 HTML 元素，都可以放在 <a> 标签里面。

7.9 超链接标签的注意事项

最后，我们再总结一下使用超链接标签的几个注意事项：

  1. href 属性是必须的 ：虽然技术上可以不写，但没有 href 属性的超链接是没有灵魂的，也不会有超链接的样式（比如鼠标放上去不会变成小手）。
  2. 外部链接尽量用 target="_blank" 并加 rel="noopener noreferrer"：这样用户不会离开你的网站，而且更安全。
  3. 内部链接尽量用相对路径：这样网站文件夹移动后，链接不需要修改就能正常工作。
  4. 提示文字要清晰明了：超链接的提示文字要准确描述目标页面的内容，不要用 "点击这里" 这种模糊的文字（比如 "点击这里了解更多" 就不如 "了解更多关于我们的信息" 好）。
  5. 不要给普通文字随便加下划线：我们之前讲格式化标签的时候也提到了，超链接默认有下划线，如果你给普通文字加下划线，用户会误以为是超链接。

7.10 实战综合示例：制作一个包含多种链接的导航栏

我们来写一个综合示例，制作一个简单的网站导航栏，包含多种类型的链接：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超链接综合示例</title>
</head>
<body>
    <!-- 网站头部和导航栏 -->
    <header>
        <!-- logo：点击图片跳转到首页 -->
        <a href="index.html">
            <img src="images/logo.png" alt="我的网站logo" width="100">
        </a>

        <!-- 导航链接 -->
        <nav>
            <a href="index.html">首页</a> |
            <a href="about.html">关于我们</a> |
            <a href="products.html">产品展示</a> |
            <a href="contact.html">联系我们</a>
        </nav>
    </header>

    <main>
        <h1>欢迎来到我的网站</h1>

        <p>这是一个超链接综合示例页面。</p>

        <h2>外部链接</h2>
        <p>
            你可以去 
            <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer" title="百度一下，你就知道">百度</a> 
            或者 
            <a href="https://www.sogou.com" target="_blank" rel="noopener noreferrer">搜狗</a> 
            搜索更多信息。
        </p>

        <h2>下载链接</h2>
        <p>
            <a href="files/brochure.pdf" download="公司宣传册.pdf">点击下载公司宣传册（PDF）</a>
        </p>

        <h2>锚点链接</h2>
        <p><a href="#footer">跳转到页面底部</a></p>

        <!-- 这里多写一些内容，让页面变长 -->
        <p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p>
        <p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p><p>内容...</p>
    </main>

    <!-- 页面底部 -->
    <footer id="footer">
        <p>© 2024 我的网站 版权所有</p>
        <p><a href="#">回到顶部</a></p>
    </footer>
</body>
</html>

第八章：实战综合案例 ------ 打造一篇图文并茂的博客文章

8.1 案例需求：结合所学标签，还原一篇博客

学习了这么多标签，现在我们来做一个综合实战案例：结合我们这篇文章学的所有标签（注释标签、标题标签、段落标签、换行标签、格式化标签、图片标签、超链接标签），打造一篇图文并茂的博客文章。

我们就用用户提供的文档中关于 "移动前端开发之 viewport" 的内容作为博客文章的素材，来进行排版。

8.2 步骤一：搭建 HTML 基本结构

首先，我们先搭建 HTML 的基本结构，包括 <!DOCTYPE html>、<html>、<head>、<body> 标签，在 <head> 标签中设置字符编码和页面标题：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 设置字符编码为UTF-8，防止中文乱码 -->
    <meta charset="UTF-8">
    <!-- 设置viewport，让页面在移动设备上显示更好（这个标签我们以后会详细讲，这里先加上） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>移动前端开发之viewport的深入理解</title>
</head>
<body>
    <!-- 博客文章内容将放在这里 -->
</body>
</html>

8.3 步骤二：用标题标签构建文章层级

接下来，我们用标题标签 <h1> 到 <h3> 来构建文章的层级结构：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动前端开发之viewport的深入理解</title>
</head>
<body>
    <!-- 文章标题：h1 -->
    <h1>移动前端开发之viewport的深入理解</h1>

    <!-- 文章章节：h2 -->
    <h2>一、viewport的概念</h2>

    <h2>二、css中的1px并不等于设备的1px</h2>

    <h2>三、PPK的关于三个viewport的理论</h2>

    <h2>四、利用meta标签对viewport进行控制</h2>

    <h2>五、把当前的viewport宽度设置为 ideal viewport 的宽度</h2>
</body>
</html>

8.4 步骤三：用段落标签和 br 标签排版文本

然后，我们把文章的内容用段落标签 <p> 包裹起来，需要在段落内部换行的地方用 <br/> 标签：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动前端开发之viewport的深入理解</title>
</head>
<body>
    <h1>移动前端开发之viewport的深入理解</h1>

    <h2>一、viewport的概念</h2>
    <p>通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。</p>
    <p>在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。</p>

    <h2>二、css中的1px并不等于设备的1px</h2>
    <p>在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。</p>
    <p>在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。</p>

    <!-- 后续章节内容省略，大家可以自己补充 -->
</body>
</html>

8.5 步骤四：用格式化标签突出重点

接下来，我们用格式化标签（<strong>、<em>、<code> 等，<code> 是表示代码的标签，我们这里简单用一下）来突出文章中的重点内容：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动前端开发之viewport的深入理解</title>
</head>
<body>
    <h1>移动前端开发之viewport的深入理解</h1>

    <h2>一、viewport的概念</h2>
    <p>通俗的讲，移动设备上的<strong>viewport</strong>就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。</p>
    <p>在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为<strong>980px</strong>或<strong>1024px</strong>（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现<strong>横向滚动条</strong>，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。</p>

    <h2>二、css中的1px并不等于设备的1px</h2>
    <p>在css中我们一般使用<strong>px</strong>作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，<em>css中的像素只是一个抽象的单位</em>，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。</p>
    <p>在早先的移动设备中，屏幕像素密度都比较低，如<strong>iphone3</strong>，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从<strong>iphone4</strong>开始，苹果公司便推出了所谓的<strong>Retina屏</strong>，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于<strong>两个物理像素</strong>的。</p>

    <!-- 后续章节内容省略 -->
</body>
</html>

8.6 步骤五：插入图片并设置属性

然后，我们在文章中插入图片，设置好 src、alt、title、width 等属性。我们用用户提供的文档中的图片链接作为网络路径示例：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动前端开发之viewport的深入理解</title>
</head>
<body>
    <h1>移动前端开发之viewport的深入理解</h1>

    <h2>一、viewport的概念</h2>
    <p>通俗的讲，移动设备上的<strong>viewport</strong>就是设备的屏幕上能用来显示我们的网页的那一块区域...</p>
    <p>下图列出了一些设备上浏览器的默认viewport的宽度：</p>
    <!-- 插入图片 -->
    <img 
        src="https://images0.cnblogs.com/blog/130623/201407/300958470402077.png" 
        alt="各设备浏览器默认viewport宽度表格" 
        title="图中列出了iPhone、iPad、Android等设备的默认viewport宽度"
        width="600">

    <!-- 后续内容省略 -->
</body>
</html>

8.7 步骤六：添加超链接（内部、外部、锚点）

最后，我们在文章中添加一些超链接，比如外部链接到参考资料，锚点链接到文章的不同章节：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动前端开发之viewport的深入理解</title>
</head>
<body>
    <h1>移动前端开发之viewport的深入理解</h1>

    <!-- 文章目录：锚点链接 -->
    <h2>文章目录</h2>
    <p><a href="#section1">一、viewport的概念</a></p>
    <p><a href="#section2">二、css中的1px并不等于设备的1px</a></p>
    <p><a href="#section3">三、PPK的关于三个viewport的理论</a></p>

    <h2 id="section1">一、viewport的概念</h2>
    <p>通俗的讲，移动设备上的<strong>viewport</strong>就是设备的屏幕上能用来显示我们的网页的那一块区域...</p>
    <p>ppk大神对于移动设备上的viewport有着非常多的研究，有兴趣的同学可以去看一下他的文章（这里我们可以加一个外部链接，假设是ppk的博客）：</p>
    <p><a href="https://www.quirksmode.org/mobile/viewports/" target="_blank" rel="noopener noreferrer">PPK的viewport研究文章（外部链接）</a></p>

    <h2 id="section2">二、css中的1px并不等于设备的1px</h2>
    <p>在css中我们一般使用<strong>px</strong>作为单位...</p>

    <h2 id="section3">三、PPK的关于三个viewport的理论</h2>
    <p>ppk认为，移动设备上有三个viewport...</p>

    <p><a href="#">回到顶部</a></p>
</body>
</html>

8.8 最终代码与效果展示

把以上所有步骤结合起来，我们就得到了一篇图文并茂、结构清晰的博客文章的 HTML 代码。虽然现在页面的样式还比较简单（只有浏览器的默认样式），但等我们以后学习了 CSS，就可以给它加上漂亮的样式，让它变得更加专业和美观。

示例代码：

html 复制代码 
<!-- ok大家，本文件我们就来学习html的常见标签~~~
毕竟我们学习完了html的结构之后，接下来就要看看html的常见标签，也是这些标签组成了html的核心哦~~~ -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>HTML常见标签</title>
        <meta name="description" content="解析html的常见标签">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!-- 我们就要在这里面，一个一个学习常用标签，那么其实还是很简单的，我们只要知道怎么用即可，不用记忆，需要了就查询一下即可 -->
        
        <h2>注释标签</h2>
        第一个就是注释标签，格式很简单，格式为为 <!-- --> 还是很简单的，我们可以使用ctrl + / 快捷键快速进行注释/取消注释.
        如果你想把注释的内容作为普通文本显示在页面上，需要对注释里的特殊字符进行转义（核心是把 < 转成 &lt;，把 > 转成 &gt;）。
        也就是 &lt;!--&gt

        ------------------------------------------------------------------------------------------------------------
        <h2>标题标签: h1-h6</h2>
        标题标签有6个，从h1一直到h6，依次从大到小，这个还是很好理解的啦~~~
        格式也是很简单，标题标签是闭合标签，所以也就是有两个
        那么格式就是 <h数字>这里面填写标题内容</h数字>
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
        一个一个标签是上下级的关系，上一级的标签会包含下一级的标签哦，以此类推~

        ------------------------------------------------------------------------------------------------------------
        <h2>段落标签: p</h2>
        如果我们把一大段文字直接丢到html中，那么当我们打开页面显示的时候，会发现，即使我们在html中的文字有分段
        但是显示出来的页面，诶，就是没有，所谓的换行只是变为了一个空格，那么我们要怎么才能让页面实现换行呢？
        那么就是需要p标签，同样的，p标签也是闭合标签，一个段落的文字放在其中
        格式为<p>一个段落的文字</p>
        <p></p>想要在页面上显示的话就是：&lt;p&gt

        <h3>HTML 文本与段落渲染的核心注意事项：</h3>

        <h4>关于 <p> 标签之间的空隙</h4>
        浏览器会为 <p> &lt;p&gt标签默认设置上下外边距（margin），因此多个 <p> &lt;p&gt标签之间会自动产生一段垂直空隙。
        这是浏览器的默认样式行为，并非手动添加的空格或换行，后续可通过 CSS 调整该外边距的大小或消除空隙。

        <h4>标签的首行缩进</h4>
        在默认的 HTML 渲染中，<> &lt;p&gt标签描述的段落不会自动产生首行缩进效果。
        若需要实现首行缩进，需使用 CSS 的 text-indent 属性进行设置（这部分将在后续 CSS 学习中详细讲解）。

       <h4>关于浏览器宽度与排版的关系</h4>
        HTML 页面采用流式布局机制，内容会自动根据浏览器窗口（或父容器）的宽度进行排版。
        当文字内容到达容器边缘时，会自动换行以适应宽度，无需手动干预，这也是 HTML 能够适应不同屏幕尺寸的基础特性之一。

        <h4>关于 HTML 内容首尾处的换行与空格</h4>
        浏览器在解析 HTML 时，会自动忽略元素内容开头和结尾处的空白字符（包括换行符、空格、制表符等）。
        也就是说，在 HTML 标签的内容开头或结尾输入的换行、空格，不会对页面的最终渲染效果产生任何影响。

        <h4>关于文字之间的多个空格</h4>
        HTML 中存在"空白折叠"规则：在文字内容之间输入的连续多个空白字符（包括空格、换行符、制表符等），
        浏览器在渲染时只会将它们合并为一个空格显示。因此，无论在代码中输入多少个连续空格，最终页面上都只会看到一个空格的效果。

        <h4>关于直接输入换行的效果</h4>
        在 HTML 代码中直接通过回车键输入换行符，并不会在页面渲染时产生真正的换行效果。
        根据"空白折叠"规则，这种直接输入的换行符会被浏览器当作一个空格来处理。
        若需要在页面上实现强制换行，需使用 <br> &lt;br&gt标签或通过 CSS 调整元素的显示属性。

        ------------------------------------------------------------------------------------------------------------
        <h2>换行标签: br</h2>
        那么我们上面说了，我们在html文件中直接输入换行，也就是直接按下回车的话，页面是不会显示的，只会显示一个空格
        那么我们要怎么实现换行呢？用p标签的话，又会有空隙，不像正常换行一样没有间隙
        其实就是使用br标签，它可是单标签哦，不是双标签
        格式为<br/>

        1. 标签全称与核心含义
        &lt;br&gt; 是英文 "Break"（意为"打断、中断"）的缩写，其核心作用是在文本流中强制插入一个**换行符**。
        它会立即中断当前正在进行的文本行，让紧随其后的内容强制换到下一行的开头继续显示，是 HTML 中专门用于控制文本换行的标签。

        2. 单标签特性详解
        &lt;br&gt; 是典型的"单标签"（也叫"空元素"），这意味着它只有开始标签，没有对应的结束标签（即不需要写 &lt;/br&gt;）。
        原因在于：&lt;br&gt; 的作用是执行一个"换行动作"，而不是用来包裹一段内容
        （不像 &lt;p&gt; 或 &lt;div&gt; 那样需要把文字包在中间），因此不需要结束标签来标记"内容的结尾"。

        3. 与 &lt;p&gt; 标签的空隙对比（核心区别）
        &lt;br&gt; 标签和 &lt;p&gt; 标签虽然都能让内容"换一行"，但视觉效果有本质区别：
        - &lt;p&gt; 标签：浏览器会默认给 &lt;p&gt; 标签设置上下外边距（margin），因此两个 &lt;p&gt; 
        标签之间会有一段明显的垂直空隙（看起来像"空了一行"），这是用于区分不同段落的。
        - &lt;br&gt; 标签：它只是单纯的"强制换行"，不会添加任何额外的垂直间距，
        换行后的两行文字是紧贴在一起的（行高由字体或 CSS 决定，没有额外空隙）。
        【适用场景举例】：
        - 写一首诗、一个地址，需要每行紧凑换行时，用 &lt;br&gt;；
        - 区分两个独立的段落时，用 &lt;p&gt;。

        4. 写法规范说明
        在 HTML 写法中，&lt;br/&gt; 是更推荐的规范写法，而不建议写成简单的 &lt;br&gt;，原因如下：
        - &lt;br/&gt; 的写法源自 XML/XHTML 规范（在这些规范中，单标签必须以 /&gt; 结尾来表示"自我闭合"），
        这种写法在 HTML5 中也完全兼容，属于"通用严谨写法"。
        - 虽然现代浏览器对 &lt;br&gt; 也有很好的兼容性（能识别并正常换行），但 &lt;br/&gt; 
        更符合代码的严谨性，在团队协作、旧项目维护或需要严格遵循 XML 规范的场景下更不容易出错。

        ------------------------------------------------------------------------------------------------------------
        <h2>格式化标签</h2>
        那么接下来，我们再来学习，如何实现我们平时看到的页面中，有的有加粗，有的有倾斜，有的有删除线，有的有下划线的操作
        其实这个也是使用标签哦，当然也可以使用css实现，实际开发中也确实是以css为主，但是我们这里学习也是可以的
        注意：接下来介绍的标签都是闭合标签哦，我们要操作的文字，就是放在闭合标签之内滴~~~

        那么加粗文字就是使用strong标签或者b标签
        格式为：<strong>strong加粗字体</strong> 或者 <b>b加粗字体</b>

        倾斜：em 标签 和 i 标签
        <em>em 标签倾斜字体</em> 或者 <i>i 标签倾斜字体</i>

        删除线：del 标签 和 s 标签
        <del>del 标签删除线字体</del> 或者 <s>s 标签删除线字体</s>

        下划线：ins 标签 和 
        <ins>ins 标签下划线字体</ins> 或者 <u>u 标签下划线字体</u>

        ------------------------------------------------------------------------------------------------------------
        <h2>图片标签: img</h2>
        接下来就是来到我们的重头戏了，也就是图片标签，一个页面怎么能没有图片呢？？？
        那么我们要怎么在页面中显示图片呢？？？其实就是通过img标签，然后我们要格外注意，图片标签是单标签哦！！！
        这个是很重要的，所以也就是说，我们需要把要显示的图片放在单标签内哦！！！
        那么图片标签的格式也就是<img src="">这是最简版本的，我们需要在src后面的""里面放上我们要显示的图片的URL
        那么聪明的你很快就意识到了，其实就是链接，或者是绝对路径、相对路径啥的，这个是很好理解的，尤其是在我们之前那么多的学习中~~
        那么一般来说，一个图片标签只有一个src属性是不够的，还需要有其他的属性
        
        那么首当其冲的就是alt属性：这个属性是用来当浏览器找不到我们src中所指明的图片时，就是使用alt内的内容
        然后就是title属性：这个属性是用来当我们把鼠标放在图片上的时候，会显示出title内的内容
        接着是width/height属性: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
        最后是border属性: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
        所以，一个完整的图片标签是<img src="" alt="" title="" width="" height="" border="">
        每个属性之间要使用空格隔开~~~
        注意:
        1. 属性可以有多个, 不能写到标签之前
        2. 属性之间用空格分割, 可以是多个空格, 也可以是换行.
        3. 属性之间不分先后顺序
        4. 属性使用 "键值对" 的格式来表示.

        ------------------------------------------------------------------------------------------------------------
        <h2>超链接标签: a</h2>
        OK，接下来就又是一个重头戏标签，超链接标签！！！
        我们平时在使用网页的时候，当我们点击页面的某些文字或者图片啥的，我们发现网页就会跳转到另一个网页上
        那么其实这就是使用超链接标签的哦~~~
        需要严格注意：超链接标签是闭合标签，而那些点击的文字or图片，就是放在标签之间的哦~~
        格式为：<a href="">提示文字</a>
        那么href是什么呢？其实href就是超链接的属性，href里面要存储的就是，当用户点击了提示文字之后要跳转到的链接
        eg：<a href="http://www.baidu.com">百度</a>就是当用户点击百度两个字之后，就会跳转到百度链接
        那么里面不止可以放网页链接，其实只要是URL就行，就和图片标签一样的哦，所以我们也是可以存放图片、绝对路径、其他的前端文件啥的~
        eg：<a href="2.html">点我跳转到 2.html</a>
        那么要是就想跳转到空链接，也就是跳转到本网页，那就是要填写#
        eg：<a href="#">空链接</a>
        然后还有一个比较重要的，就是不跳转到其他网页，而是跳转到本网页的某个位置
        而这其实就需要我们给那个位置的标签设置id值，然后href属性里面存储 #id值 这么一来点击，就会跳转到那个位置上啦~
        eg：
        <a href="#one">第一集</a>
        <a href="#two">第二集</a>
        <a href="#three">第三集</a>
        <p id="one">
        第一集剧情 <br>
        ...
        </p>
        <p id="two">
        第二集剧情 <br>
        ...
        </p>
        <p id="three">
        第三集剧情 <br>
        ...
        </p>
        href里面也可以放文件URL啥的，点击之后就能下载该文件~
        eg：<a href="test.zip">下载文件</a>
        禁止 a 标签跳转: <a href="javascript:void(0);"> 或者<a href="javascript:;"></a>
        还是比较简单的href属性

        而且我们还需要知道，<a></a>两个标签里面不止可以放文字，也可以放标签，比如放图片标签
        此时用户点击图片就会跳到href中存储的URL
        eg：<a href="http://www.sogou.com">
        <img src="rose.jpg" alt="">
        </a>

        那么a标签还有一个属性，是用于操作跳转页面是要直接本网页跳转过去，还是新开一个网页跳转过去的，相信大家这个也不陌生
        那么这个属性就是target属性
        target="_blank"：在新的浏览器标签页或窗口中打开链接。
        target="_self"：在当前浏览器标签页或窗口中打开链接（这是 a 标签的默认值，不写 target 属性时默认就是这个效果）。
        大家要注意哦~~~
        那么如果我们使用target属性的话，还可以加上rel属性
        rel 属性（常配合 target="_blank" 使用）
        <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">新窗口打开</a>
        说明：定义当前页面与目标页面的关系，noopener noreferrer 用于防止新打开的页面恶意篡改原页面
        （安全属性，推荐配合 target="_blank" 一起写）。

        而要下载链接的话，还可以带上downlad属性
        download 属性
        <a href="file.pdf" download="文件名.pdf">下载文件</a>
        说明：点击链接时，会直接下载 href 指向的文件（而不是在浏览器中打开），download 的值是下载后保存的文件名（可选）。

        一样的，也有title属性，和img标签的title属性一样哦

        到这里，我们就先休息休息~
        下一个文件再学习剩余的标签哦~

    </body>
</html>

结语：总结所学，展望未来

恭喜你！看到这里，你已经学习了 HTML 中最核心、最常用的一批标签：

  • 注释标签：给代码加笔记，方便自己和他人阅读。
  • 标题标签 h1-h6：构建网页的层级骨架，语义化地表示内容的重要性。
  • 段落标签 p：把文本分成段落，让文章更易读。
  • 换行标签 br：在段落内部强制换行，紧凑排版。
  • 格式化标签：strong/b（加粗）、em/i（倾斜）、del/s（删除线）、ins/u（下划线），突出重点，语义化表示内容的性质。
  • 图片标签 img：在网页中插入图片，让网页更生动。
  • 超链接标签 a：连接不同的网页和页面内部的不同位置，让互联网真正 "互联" 起来。

这些标签是 HTML 的基石，也是我们构建网页的 "基本武器"。掌握了这些标签，你已经可以写出一个结构完整、内容丰富的静态网页了。

但这只是 HTML 的一部分，在《HTML 常见标签深度解析（中）》中，我们将继续学习更多重要的 HTML 标签，比如：

  • 列表标签：有序列表、无序列表、定义列表，用来排版列表内容。
  • 表格标签：table、tr、td、th，用来展示表格数据。

敬请期待！

现在，你可以打开你的代码编辑器，把我们这篇文章中的示例都亲手敲一遍，实践是最好的学习方法。相信我，当你亲手敲出这些代码，看到它们在浏览器中显示出来的时候，你会对这些标签有更深刻的理解。

祝你学习愉快，我们下篇文章再见！

相关推荐
考研保研资料分享1 小时前
北大软微软件工程保研经验：哈工大面试追问与补录风险取舍
面试·职场和发展·软件工程
百度一下吧2 小时前
HTML5 新增标签与 Web Components 使用指南
前端·html·html5
王中阳Go2 小时前
做了 8 年前端，简历改漂亮后面一个挂一个：差的不是前端，是这 3 块底子
人工智能·后端·面试
寻林写彡2 小时前
从技术报告到面试入口：安全岗位简历如何用问题、关键技术与量化结果重写项目经历
面试·开源
志尊宝2 小时前
Vue3 零基础每日笔记（081）：富文本编辑器集成 wangEditor 5——封装
前端·javascript·vue.js·笔记·信息可视化·echarts
deli0072 小时前
纯向量检索漏掉的召回，BM25 加向量混合能补回来吗？5 组实测
前端
志尊宝2 小时前
Vue3 零基础每日笔记（080）：Vue3 + ECharts 数据可视化——封装可复用图表组件
前端·javascript·vue.js·笔记·信息可视化·echarts
阿狗童鞋2 小时前
前端工程化实战指南
前端
CappuccinoRose2 小时前
CSS 动效基础
前端·css·动画·animation·transition
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会05如何新建文件夹？ 电脑新建文件夹的4种方法06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地09Telegram APK 下载安装完整指南 — 2026年最新10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新