写这期笔记之前我先把上一期挖的坑填上。HTML 标签体系看着不多但真要上手写页面最先打交道、也最容易写出“外行感”的就是文本标签和图片标签。文本标签决定了你的内容层次清不清晰、阅读顺不顺畅图片标签决定了一个页面是丰富还是空洞、在不同设备上是精致还是崩溃。这期内容不打算做成标签字典我更想用实际写页面的思路把这两类标签拆开揉碎讲清楚包括它们背后的设计逻辑、容易踩的坑以及面试里经常被问到的细节。不管你是刚接触前端开发的新手还是写了一阵子但从来没系统梳理过 HTML 基础的朋友这篇笔记应该都能帮上忙。1. 为什么文本标签和图片标签值得单独写一期1.1 页面内容九成以上是文本和图片你可以随便打开一个网站看不管是新闻门户、电商详情页、还是个人博客页面上实际承载信息的东西就是两类文字和图片。按钮文字、导航菜单、正文段落属于文本商品图、用户头像、Banner 图属于图片。哪怕是视频网站它的标题、简介、评论也全是文本标签堆出来的封面图也是图片标签渲染出来的。所以文本标签和图片标签是 HTML 里最简单、最基础、但使用频率最高的存在。很多新手容易犯一个毛病觉得“标签嘛记住了就行”于是快速过一遍就去学 CSS、JavaScript结果到了真正写页面的时候要么该用h1的地方用了div要么图片忘了写alt要么图片怎么调都和文字对不齐。这些问题看着小但在实际项目中都会一一暴露出来而且越到后面越难改。1.2 学标签的正确姿势是理解语义而不是死记硬背HTML 的英文全称是 HyperText Markup Language重点是 Markup也就是“标记”。它的核心思想不是告诉你“这段文字要长什么样”而是告诉你“这段内容是什么”。至于长什么样那是 CSS 的事。举个例子h1并不是“让文字变大变粗的标签”而是“页面一级标题”的语义标记。浏览器默认给它加了较大的字号和粗体样式只是浏览器的默认行为。你完全可以在 CSS 里把h1的字体大小设成 12px但它的语义依然是“一级标题”——对搜索引擎、对屏幕阅读器来说它代表的是整个页面内容里最重要的那个标题。理解了这个逻辑你再看文本标签和图片标签视角就会完全不一样不是背每一个标签的默认样式而是想清楚“这个内容在页面上扮演什么角色”然后选对正确的语义标签。这也是我这期笔记想反复强调的一条主线。2. 文本标签不只是“加粗”和“斜体”这么简单2.1 标题标签 h1 ~ h6先定骨架再填肉标题标签是所有文本标签里权重最高的因为它直接决定了一个页面的信息层级。一个典型的文章页面结构应该是这样的!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title前端开发笔记第 06 期/title /head body h1HTML 常用标签完全指南/h1 h2文本标签详解/h2 h3标题标签的使用规范/h3 h3段落与换行/h3 h2图片标签详解/h2 h3图片格式如何选/h3 /body /html这个结构里h1是整篇文章的核心主题一个页面原则上只应该有一个h1用于告诉搜索引擎这个页面到底在讲什么。h2是每个大章节的标题h3是章节下面的小节标题依次往下推到h6。我在实际项目里最常看到的问题有两种一种是标题层级跳着用比如没有h2直接上h3另一种是把标题标签当成“放大字号”的工具来用觉得字大就用h1字小就用h4。这两种用法都不对。标题标签的正确用法是严格按照内容层级来选层级乱了搜索引擎和辅助工具理解页面结构就会出问题。如果你只是想让某段文字变大请用 CSS 的font-size别用标题标签。2.2 段落与换行p、br、hr 各司其职段落标签p是文本内容的基本容器。一个p标签代表一个段落浏览器会在段落前后自动加上一定的间距。新手最容易踩的坑是用br标签来实现段落之间的换行写出来的代码长这样p这是第一行文字brbr这看起来是第二段/p很坦白地讲这样写不是一个好习惯。br是“强制换行”标签它的本意是在同一段落内进行换行比如一首诗的每一行、或者一个地址的每一行。段落之间的分隔应该用多个p标签来完成段落间距交给 CSS 的margin去控制。如果连用多个br来撑开间距后期调整行距、段距的时候会让你怀疑人生。hr是水平分割线标签语义上表示“主题的切换”。以前很多网页用hr来画一条横线现在更推荐的做法是给元素加 CSS 边框或者用伪元素实现装饰性的线条hr只保留它“内容分界”的语义就够了。如果你要做一个“分隔线”的视觉效果完全可以用一个div加上边框来实现。2.3 文本格式化标签strong、em、b、i 的语义差异文本格式化标签是本期笔记的重点之一因为很多开发者在实际工作里混着用。先看简单版本strong表示内容非常重要默认呈现为加粗b仅仅表示“视觉上加粗”没有额外语义em表示内容需要强调默认呈现为斜体i仅仅表示“视觉上斜体”比如专业术语、外来语、船舶名称等从这个对比里你能看出HTML5 的设计哲学是“语义优先”。同样的加粗效果strong和b的区别在于前者向浏览器、搜索引擎、屏幕阅读器传递了“这段内容很重要”的信息而后者只是在说“这个字要粗一点”。我自己的使用习惯是在正常文章排版里90% 的情况下用strong和em因为内容要么本身重要、要么需要强调语气。b和i也不是完全不能用只是它们更适用于“没有语义目的、纯视觉需求”的场景。比如一个小图标字体库里的字体图标它通常使用i标签来承载因为在这里确实不需要任何语义。另外还几个使用频率相对低的文本标签我建议你也了解一下del原价 99 元/del !-- 删除线表示内容已删除 -- ins现价 59 元/ins !-- 下划线表示内容已插入 -- small本活动最终解释权归平台所有/small !-- 小号字体表示免责声明、版权信息等 --del在电商页面里用得尤其多“划线价”的效果经常就直接用一个del实现不需要额外加 CSS 装饰。small的语义是“附属细则”像页脚的版权声明、法律条款里的补充说明用small比用span加样式更贴切。2.4 引文与代码blockquote、q、code、pre 的正确打开方式如果你写博客、写技术文档下面这几个标签迟早会用到。blockquote是块级引用标签用于引用一段较长的文字。默认样式是缩进一段距离视觉效果比较明显。它的语义是“这段内容引自外部”并不是用来做“文本框”或者“提示框”的。如果你只是想让一段文字有背景色、有边框看起来像提示那应该用div加上 CSS 样式而不是套一个blockquote。我从工作里见过不少用blockquote做“重点提示框”的例子严格从语义角度来说不太规范但这个用法在视觉上确实挺常见如果你的项目里没有严格的语义要求可以自行权衡。q是行内引用标签用于引用一句较短的话浏览器默认会在内容两边加上引号。实际开发里使用的频率不算高因为引号样式在不同浏览器里表现有差异。p孟子说q鱼与熊掌不可兼得。/q/p再来看代码展示场景。code是行内代码标签用于表示这是一段代码。如果代码有多行就要用pre标签来保留空格和换行p在控制台执行 codenpm install/code 安装依赖。/p pre code function greet(name) { return Hello, name; } /code /prepre是 preformatted 的缩写意思是“预格式化文本”浏览器会原样保留里面的空格、换行和缩进。这对展示代码尤其重要因为 HTML 本身会把连续空格折叠成一个如果没有pre你精心调整的缩进就全没了。很多前端开发者常用pre配合代码高亮库来渲染代码块这就是背后的原理。2.5 超链接标签 a文本标签里隐藏的“社交达人”虽然超链接标签a不在严格意义的“文本格式化”范畴但我在这一期笔记里还是想提一下因为a最经典的形态就是“一段带链接的文字”。a hrefhttps://example.com这是一个超链接/a a hrefmailto:helloexample.com给我发邮件/a a hreftel:10086拨打电话/a a href./about.html target_blank关于我们新窗口打开/ahref属性是链接的目标地址它可以是绝对 URL、相对路径、锚点、邮件地址、电话号码等等。target_blank表示在新标签页打开不过要注意在实际项目里如果用了target_blank建议给这个a标签加上relnoopener noreferrer原因是安全层面的一些考虑不加的话新打开的页面里可以通过window.opener反向操控原来的页面加上noopener可以阻止这种行为对性能和安全性都有好处。这种细节在面试里也经常被问到“你知道target_blank有什么安全隐患吗”答案的核心就是window.opener风险然后你补一句“所以要加relnoopener noreferrer”面试官基本就能确认你是真写过项目的而不是只背了标签列表。3. 图片标签img 不只是 src 加上 alt 就完事了3.1 img 的基本属性src、alt、width、height图片标签img是一个自闭合标签它不需要结束标签。最基本的写法是img srcimages/poster.jpg alt前端开发学习路线图src是图片地址可以是相对路径比如images/poster.jpg也可以是从 CDN 来的完整 URL比如https://cdn.example.com/poster.jpg。不管是哪种浏览器都会在解析到img标签时去下载这张图片。alt是替代文本它在图片加载失败或者用户使用屏幕阅读器时显示。别小看这个属性它的作用体现在三个层面用户体验层面图片挂了用户至少能看到一段说明文字知道这个位置原本是什么SEO 层面搜索引擎的爬虫读不懂图片内容只能靠alt文本理解图片主题无障碍层面视觉障碍用户依赖屏幕阅读器朗读alt文本所以alt能写得具体就不要写得笼统我自己见过最哭笑不得的alt写法是alt图片或者alt123.jpg这种写法跟没写差别不大。alt应该是“这张图片想传达什么信息”。如果图片只是一个装饰元素不传达任何信息那alt属性可以留空写作alt这样屏幕阅读器会直接跳过它而不是朗读出一个没意义的文件名。width和height属性用来设置图片的宽高单位是像素。建议在 HTML 里给img写上原始的宽高属性这是我在实际项目中比较看重的一个实践。这么做有什么好处呢浏览器在图片还没下载完成时就能根据width和height预留出对应空间避免图片加载完以后页面内容突然跳动也就是常说的 CLSCumulative Layout Shift问题。对用户体验来说这一点影响很大。当然最终图片在页面上的实际尺寸通常还是用 CSS 来控制HTML 属性只是提供一个默认的占位尺寸。3.2 图片格式怎么选jpg、png、webp、svg、gif前端开发中选错图片格式最直接的影响就是页面变慢。不同图片格式有完全不同的适用场景我梳理了一个简单对照表格式适用场景特点JPEG/JPG照片、复杂渐变图体积小不支持透明背景有损压缩PNG图标、截图、需要透明的图支持透明无损压缩体积相对大WebP网页通用图片体积比 JPG 小 25%~35%支持透明和动图兼容性已经很好SVG图标、Logo、简单插画矢量格式无限缩放不模糊文件小可以用 CSS 控制颜色GIF简单动图支持动画但颜色少体积大复杂动画建议用视频代替实际开发里的选图策略我个人更倾向这样的原则能用 SVG 绝不用 PNG图标类图片优先 SVG照片类图片优先 WebP同时给不支持 WebP 的旧浏览器准备 JPEG 兜底GIF 只在需要极简单动画时才使用复杂动效直接用 CSS 动画或者视频更合适。图片体积是页面性能的重要指标同样一张照片JPG 可能只有几十 KB但 PNG 可能膨胀到几百 KB。如果列表页里有上百张商品图格式选错页面加载速度会肉眼可见地变慢。3.3 响应式图片srcset 和 sizes 到底怎么用移动端开发里有一个经典痛点同一张图片在手机上看和在大屏显示器上看需要的分辨率完全不一样。如果你只提供一张 1920px 宽的图片手机端下载这张大图既浪费流量又拖慢速度如果只提供一张 400px 的小图大屏上又会模糊。srcset和sizes属性就是解决这个问题的。看一个典型示例img srcsetimages/poster-400w.jpg 400w, images/poster-800w.jpg 800w, images/poster-1200w.jpg 1200w sizes(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px srcimages/poster-800w.jpg alt前端开发学习路线图简单解释一下srcset里提供了三张不同宽度的图片后面的400w表示这张图片的宽度是 400 像素。sizes告诉浏览器在当前视口宽度小于 600px 时图片展示宽度是 400px视口宽度小于 1200px 时展示宽度是 800px其他情况展示宽度是 1200px。浏览器拿到这些信息后会综合设备的屏幕密度比如 Retina 屏的 DPR 是 2 或 3来自动选择最合适的图片。这套机制就是 H5 响应式布局里图片适配的核心方案之一。如果不加srcset浏览器只能加载src里那张固定的图不会智能适配。对于新手来说srcset和sizes刚接触时会觉得绕先记住核心目的让浏览器根据屏幕条件自己选最合适的图片。等你真正做移动端项目时这个属性是绕不开的。3.4 图片懒加载、加载失败兜底与占位图还有一个经常被忽略的实际场景是图片加载失败时怎么办。默认情况下图片加载失败会显示一个破裂的图标非常影响观感。我用过的处理方案有两种第一种是用onerror事件兜底把失败的图片替换成占位图img srcimages/product.jpg alt商品图 onerrorthis.onerrornull; this.srcimages/placeholder.jpg;注意this.onerrornull这行很关键它的作用是防止兜底图也加载失败时陷入死循环。如果去掉这行占位图加载失败会再次触发onerror又去加载占位图无限循环。这个细节我在代码评审时经常提起是一个很典型的“小坑”。第二种是给图片加loadinglazy属性让浏览器实现原生懒加载img srcimages/huge.jpg alt长图 loadinglazyloadinglazy的意思是这张图片在进入视口附近时才开始加载而不是页面一打开就全部加载。对于首屏以下的图片这个属性可以显著减少初始加载时间。浏览器原生支持已经很好了不需要引入第三方库。不过要注意首屏关键位置的图片不要加lazy否则会影响 LCPLargest Contentful Paint性能指标。图片懒加载在实际项目中的地位非常核心尤其是移动端 H5 页面图片数量多、体积大不用懒加载页面加载速度和流量消耗都会有明显压力。4. 行内元素与块级元素理解标签布局属性的基础4.1 文本标签大多数是行内元素HTML 标签按照显示方式可以分成两大类块级元素block-level和行内元素inline。块级元素独占一行典型的如h1、p、div行内元素不会换行多个行内元素会排在同一行典型的如a、strong、em、span、code等。这个特性直接影响了页面布局的写法。比如p这是一段文字里面有一个 strong很重要的词/strong后面还有 a href#一个链接/a它们都在同一行。/pstrong和a是行内元素所以它们会和前后的文字排在同一行。如果你是做后台管理系统这类项目会经常遇到需要把两个按钮放在同一行的情况最直接的方式就是把按钮放在同一个容器里因为按钮默认就是行内块级元素。行内元素和块级元素还有一个重要区别行内元素设置width和height是无效的它的尺寸由内容撑开而行内元素设置margin和padding时垂直方向的设置有时候表现会让人意外。这也是前端面试里的高频基础题。实际项目里最常用的解决方案是通过 CSS 的display属性改变元素的显示类型。比如给a标签设置display: block它就能像块级元素一样占满整行、设置宽高了。4.2 图片标签是特殊的存在img标签很有意思它的display默认值是inline但它属于可替换元素replaced element所以它的表现和普通行内元素不一样它可以设置宽高而且宽高设置会生效。这就导致了一个非常经典的页面问题——图片底部会出现几像素的空白间隙。这个空隙的罪魁祸首就是图片作为行内元素其底边会和文本基线baseline对齐而基线下方还要预留出字母下降部分比如 g、y 这些字母的小尾巴的空间。解决方式很简单给img设置display: block或者vertical-align: middle/bottom。这个问题在小项目里看着不明显但在像素眼的设计师面前不过关就是不过关。我见过不少新手写的图片下方总有一条说不清的空白怎么调都调不掉根源就在这。4.3 嵌套规则块级元素能不能套行内元素HTML 对标签的嵌套是有要求的虽然浏览器对错误嵌套很宽容不会直接报错但不符合规范的嵌套会导致解析方式变得不可预测也会让代码维护变得困难。一个核心规则是行内元素尽量不要嵌套块级元素但块级元素可以包含行内元素。典型错误示例是!-- 不推荐a 标签里嵌套了一个 div -- a href# div点击跳转/div /aHTML5 规范放宽了a标签的嵌套限制允许a里包含块级元素但如果项目里没有特殊需求我仍然建议保持“块级元素里放行内元素”的简单结构这样代码可读性更好也不容易触发浏览器解析的怪异行为。还有一个非常经典的规则p标签内部不能嵌套块级元素。比如这样写就是非法的!-- 非法的嵌套 -- p 这是一个段落 div这是另一个块/div /p因为p是块级元素它的内容模型是“短语内容”只能包含行内元素。一旦遇到嵌套的块级元素浏览器会自动闭合p导致你预期的结构被劈成两半布局就乱了。5. 常见问题与前端面试自测这些细节我全踩过5.1 图片底部的空白间隙怎么去掉这是新手阶段最频繁遇到的问题之一处理方式在上文已经提到了再总结一次完整的排查思路先看img的 CSS 里有没有设置display: block没有就加上如果是行内展示场景给img设置vertical-align: middle或bottom检查父容器的line-height和font-size有时候把父容器的line-height设为 0 也能解决但这个方法比较暴力可能影响其他文字内容5.2 alt 文本到底怎么才算合格合格的alt文本应该能回答一个问题“如果这张图加载不出来用户读到的文字能不能理解这个位置原本想表达什么”比如一张苹果手机的商品图altiPhone 15 Pro 蓝色钛金属版是合格的alt手机显得太笼统alt图片1完全不合格。如果图片在上下文中只是装饰比如一个纯背景纹理那就写alt告诉辅助设备这里是装饰性内容。5.3 高频面试题清单附带简要思路前端开发面试里HTML 标签相关的题目看似基础但恰恰是筛掉八成新手的关卡。我梳理了几个高频题你可以拿来自测Q1strong和b、em和i的区别是什么核心答法前者有语义后者纯视觉效果。strong表示内容重要性em表示语气强调b只是加粗i只是斜体。Q2src和href有什么区别src表示资源被嵌入到当前文档中比如img、script、iframehref表示当前文档和外部资源之间的一种链接关系比如a和link。浏览器解析到src时会去下载并执行该资源解析到href只是建立关联不会阻塞当前文档的解析。Q3title属性和alt属性有什么区别alt是图片的替代文本图片加载失败或屏幕阅读器会用到title是鼠标悬停时显示的提示文本它是“额外补充说明”。实际使用中alt比title更重要title在移动端基本没有存在感因为移动端没有鼠标悬停操作。Q4srcset和sizes是做什么的实现响应式图片适配的srcset提供候选图片列表sizes声明不同视口下的展示宽度浏览器根据这两个信息加上设备屏幕密度选择下载哪张图。Q5如何提升页面里大量图片的加载性能从格式选型WebP、懒加载loadinglazy或 Intersection Observer、CDN 分发对图片做压缩和质量调节、srcset响应式适配这几个方面作答基本就是一个稳妥的框架。5.4 代码书写规范与团队协作细节HTML 标签不像 JavaScript 那样有严格的语法报错机制导致很多项目里 HTML 代码质量完全靠自觉。我在代码评审里常检查的几个点是img是否都写了altalt是否是有意义的描述标题层级有没有跳级页面是否只有一个h1是否滥用div和span代替语义标签是否在不该用br的地方用了br来撑间距是否给所有target_blank的链接加了relnoopener noreferrer这些细节看着琐碎但往往就是普通开发者和靠谱开发者的分水岭。代码首先是写给人看的其次才是给机器执行。规范的语义结构让别人接手你代码时不用靠猜就能理解页面结构。6. 把知识点串起来一个含文本与图片的实战小页面6.1 实战目标与代码实现纸上谈兵够多了我们直接写一个简单的“书籍推荐卡片”页面把本期涉及的文本标签和图片标签综合用一遍。这个卡片在项目里很常见比如电商商品卡、资讯推荐卡结构都是类似的。!DOCTYPE html html langzh-cn head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title书籍推荐卡片/title style body { font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; background-color: #f5f6fa; margin: 0; padding: 40px 16px; } .card { max-width: 360px; margin: 0 auto; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; } .card img { display: block; width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 16px; } .card-body h2 { font-size: 20px; margin: 0 0 8px; } .card-body p { font-size: 14px; line-height: 1.6; color: #555; margin: 0 0 12px; } .card-body .price { color: #e4393c; font-size: 18px; font-weight: 600; } .card-body .origin-price { color: #aaa; font-size: 13px; text-decoration: line-through; margin-left: 8px; } .card-body a { display: inline-block; margin-top: 12px; padding: 8px 16px; background-color: #4a90d9; color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; } /style /head body div classcard img srchttps://example.com/book-cover.jpg alt《前端开发实战》书籍封面 width360 height200 loadinglazy div classcard-body h2《前端开发实战》/h2 p这本书从 strongHTML 基础/strong 讲到 em工程化实践/em适合 b初中级开发者/b 系统学习。/p p span classprice¥ 79.00/span del classorigin-price¥ 99.00/del /p a hrefhttps://example.com/detail target_blank relnoopener noreferrer查看详情/a /div /div /body /html这个页面里面用到了h2、p、strong、em、b、del、span、a、img这些标签。每个标签都在做它该做的事h2表示卡片的标题strong强调核心知识点em表示术语性强调del表示划线原价img展示了图书封面并带了合格的alt文案和loadinglazy。实际项目中你打开浏览器开发者工具的 Elements 面板随便选一个电商网站的商品卡或者一个技术博客的卡片模块看到的 DOM 结构大体都是这个套路。结构清晰了后面用 CSS 做样式、用 JavaScript 绑交互都会顺手很多。6.2 一个小技巧利用浏览器开发者工具观察标签默认样式学习 HTML 标签时我强烈建议你养成一个习惯在浏览器里右键→检查看 Elements 面板。选中一个h1、p、img标签你会在右侧 Styles 面板里看到浏览器默认给它加的 CSS 样式。比如h1默认有较大的字号和上下边距p默认有上下边距strong默认font-weight: bold。这能给你一个直观认识HTML 标签的“长相”并不是天生的而是浏览器默认样式给的。理解了这一点你对“结构归结构、样式归样式”的理念会有更深刻的体会。6.3 后面可以怎么继续学文本标签和图片标签是 HTML 内容层的两大支柱但只靠它们还不够。接下来的学习路线建议是把列表标签ul、ol、dl、表格标签table、表单标签form、input、button逐一过一遍然后立刻转到 CSS 基础学习盒模型、flex 布局和 grid 布局。等你用 HTML CSS 能独立写出一个好看的个人主页时再回来读一遍这篇笔记你会发现很多当时没注意的细节现在都有了新的理解。HTML 从来不是“背下来就行”的科目它是靠一遍遍写页面、一遍遍踩坑喂出来的手感。我这期笔记里提到的每一个问题基本都来自真实项目的教训。希望这些内容能帮你少走几步弯路也欢迎你在自己的项目里动手试一遍踩过坑才算真正学会。