【H5 前端开发笔记】第 06 期：HTML常用标签 (2) 文本标签、图片标签

【H5 前端开发笔记】第 06 期HTML常用标签 (2) —— 文本标签、图片标签2026 最新版 · 实战笔记 · 可直接复制使用本期我们重点学习网页中最常用、最基础的两大类标签文本标签和图片标签。这些标签是构建页面内容的“砖块”。一、文本标签Text Tags1. 标题标签Heading Tags—— h1 ~ h6h1一级标题最重要的标题一个页面建议只用一次/h1h2二级标题章节标题/h2h3三级标题小节标题/h3h4四级标题/h4h5五级标题/h5h6六级标题最不重要/h6规范建议标题要按层级顺序使用不要跳级例如不要直接用 h1 后跟 h3h1 通常用于页面主标题SEO 权重最高2. 段落标签pp这是一个普通的段落文本。段落之间会自动产生间距。/pp这是第二个段落。/p3. 强调与格式化文本标签语义化优先标签语义含义视觉效果推荐使用场景示例strong强烈重要、强调加粗关键词、警告、重点内容strong注意/strongem强调语气斜体需要突出语气的文字em一定要/emb单纯加粗无语义加粗只想加粗不想强调语义b粗体/bi斜体无语义斜体图标、专有名词、外文iItalic/iu下划线下划线较少使用易与链接混淆u下划线/udel删除线已删除删除线优惠价、错误信息del¥999/delins下划线插入下划线新增内容ins¥799/inssmall附属细则、小字字体变小版权、免责声明small© 2026/smallmark高亮标记黄色背景搜索结果高亮mark重要/markspan无语义内联容器无默认样式配合 CSS 样式span classprice99/span2026 推荐写法语义化优先p本商品strong限时特价/strong原价del¥1299/del现仅需ins¥799/ins。/p4. 其他常用文本标签br!-- 换行自闭合标签 --hr!-- 水平分割线自闭合标签 --!-- 预格式化文本保留空格和换行 --pre这段文字会 保留 所有空格 和换行格式。/pre!-- 引用 --blockquotep这是一段引用文字。/p/blockquote!-- 缩写 --abbrtitleHyperText Markup LanguageHTML/abbr二、图片标签img重点掌握1. 基本语法imgsrc图片路径alt图片描述2.img常用属性2026 推荐写全属性名含义说明是否推荐示例src图片路径必需必须srcimages/photo.jpgalt图片无法显示时的替代文字必需强烈推荐alt产品宣传图title鼠标悬停时显示的提示文字推荐title点击查看大图width图片宽度像素或百分比推荐width800height图片高度推荐height450loading懒加载性能优化强烈推荐loadinglazydecoding解码方式推荐decodingasyncsizes/srcset响应式图片进阶进阶后续课程讲解3. 完整推荐写法!-- 基础推荐写法 --imgsrcimages/product.jpgalt2026 新款小米15 手机title小米15 Prowidth800height600loadinglazy!-- 使用相对路径项目内部 --imgsrc./images/banner.jpgalt首页横幅4. 图片格式快速指南2026.jpg / .jpeg照片、色彩丰富图片.png需要透明背景、图标、LOGO.webp2026 年主流格式体积小、质量高.svg矢量图标可无限放大不失真三、本期综合示例可直接复制!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第06期 - 文本与图片标签/title/headbodyh1欢迎来到小米官网/h1h2最新产品/h2p小米15 系列搭载strong第三代骁龙8/strong性能再次突破。/pimgsrcimages/xiaomi15.jpgalt小米15 手机正面图title小米15width800height500loadinglazyhrp原价del¥5999/del限时特惠价仅需ins¥4999/ins数量有限mark速抢/mark/p/body/html四、本期练习建议全部完成写一个产品介绍页面包含 h1、h2、至少 3 个段落使用strong、em、del、ins、mark各一次插入 2 张图片一张本地相对路径一张网络绝对路径写好 alt 和 title添加一条水平分割线和一个引用块五、笔记总结重点记忆标题标签 h1~h6 要按层级使用h1 一个页面建议只用一次语义化优先用strong而不是b用em而不是iimg标签必须写src和alt属性图片建议加上width、height、loadinglazy提升性能相对路径是项目内部引用的主要方式第 07 期预告《HTML 常用标签 (3) —— 列表标签无序列表、有序列表、定义列表与表格标签》需要我立即补充以下任意内容请直接说本期完整可运行的「产品介绍页」示例代码带注释图片懒加载 srcset 响应式图片进阶写法第 01~06 期笔记合并版完整前端基础笔记本期练习的标准参考答案继续你的 H5 前端学习之旅第 06 期笔记到此结束文本和图片部分已经掌握得很扎实了✨