网页中有些文字需要特殊效果加粗、斜体、删除线、下标、上标等。 文本格式化标签大多属于行内元素写在段落p、标题h2内部用来修饰一小段文字不会独占一行。区分两个概念物理标签只改变文字外观b、i、s只有视觉效果没有语义。语义标签不仅改变样式还告诉浏览器这段文字有特殊含义strong、em推荐优先使用语义标签。全部常用格式化标签总览标签作用类型b文字加粗仅视觉效果物理标签strong文字强调加粗代表重要内容推荐优先使用语义标签i斜体仅视觉效果物理标签em斜体强调表示需要着重阅读的文字推荐优先使用语义标签s/del删除线文字中间划横线del有语义u下划线文字物理标签sup上标比如数学平方 10²行内sub下标比如化学 H₂O行内mark高亮标记文字背景黄色语义标签small小号文字常用于版权、备注信息语义标签全部都是双标签不会自动换行可以嵌套在 p、h 标签里面。1、加粗b和strongb只做视觉加粗没有语义含义单纯把文字变粗。strong表示内容非常重要浏览器默认显示加粗。搜索引擎、读屏软件会识别这里内容权重更高。 ✅开发优先使用 strong。示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 title文本格式化演示/title /head body p普通文字bb标签加粗文字/b继续普通文字。/p p普通文字strongstrong强调重要文字/strong继续普通文字。/p /body /html解释 页面上看两者显示效果几乎一模一样。 语义区别b只是样子粗strong代表这段内容很关键有实际含义。例子场景警告提示文字用strongpstrong警告请勿触摸高温设备/strong/p2、斜体i和emi仅视觉斜体无语义。ememphasis着重表示需要着重朗读、强调默认斜体。✅优先用 em。p这是普通文字ii标签斜体文字/i。/p p这是普通文字emem着重强调文字/em。/p场景举例文章里面的外来词、需要着重读的句子用emp读书的时候要em仔细理解文章含义/em。/p小总结想要表达重要、警告→ 用strong想要表达着重、重读→ 用em只是单纯想变粗 / 变斜没有特殊含义才用bi3、删除线del和s文字中间画一条横线表示内容被删除、作废。del有语义表示已经删除的内容推荐。s单纯视觉删除线旧标签。p商品原价del199元/del现在特价99元。/p p旧版本内容s明天早上8点集合/s/p解释页面中原价 199 上面会有删除横线代表价格已经失效。4、下划线u文字底部增加一条下划线。⚠️网页中链接a默认就是下划线不要大量用 u容易和链接混淆。p注意u这个地方需要填写真实姓名/u/p5、上标supsup superscript文字向上抬高常用于数学平方、次方、版权。 例X²10³p数学公式Xsup2/sup Ysup3/sup/p p版权符号 ©sup®/sup/p渲染效果数学公式X² Y³6、下标subsub subscript文字向下降低常用于化学分子式 H₂O。p水的分子式Hsub2/subO/p p二氧化碳COsub2/sub/p渲染效果水的分子式H₂O7、高亮标记mark给文字加上黄色背景高亮类似荧光笔标记重点。p学习HTMLmark标签一定要成对闭合/mark不要忘记结束标签。/pmark 表示内容是标记突出显示的内容。8、小号文字small文字字号比普通正文更小适合写备注、版权声明、小字提示。p活动最终解释权归本店所有 small本活动仅限周末使用/small/p标签嵌套重点格式化标签是行内元素可以放在 p、h 标签内部也可以互相嵌套。嵌套规则先打开的标签后关闭后打开的标签先关闭禁止交叉。✅正确嵌套示例加粗里面嵌套斜体p普通文字 strongem既加粗又斜体的文字/em/strong 普通文字/p解析打开 strong → 打开 em先关闭 em → 再关闭 strong❌错误交叉写法禁止使用p普通文字 strongem文字/strong/em/p完整综合示例复制直接运行!DOCTYPE html html langzh-CN head meta charsetUTF-8 title文本格式化综合案例/title /head body h2HTML文本格式化演示/h2 p普通文字bb粗体/bstrongstrong重要加粗/strong/p p普通文字ii斜体/iemem着重斜体/em/p p商品价格原价 del200元/del现价 strong128元/strong/p p数学公式Asup2/sup Bsup2/sup Csup2/sup/p p化学Hsub2/subO 是水的分子式/p p学习提示mark写标签一定要成对闭合/mark/p p温馨提示 small本内容仅供新手练习使用/small/p !--嵌套加粗斜体高亮一起使用-- p考试重点strongemmark标签嵌套不能交叉/mark/em/strong/p /body /html新手常见误区❌分不清b和strong一律用 b有重要、警告含义优先使用strong而不是单纯b。b只做纯视觉效果。❌格式化标签外面套 p搞反顺序strong p一段文字/p /strong❌错误strong是行内标签里面不要放块级 p 标签。 ✅正确p 在外格式化标签写 p 里面pstrong一段文字/strong/p❌标签交叉嵌套 记住口诀后开先关先开后关不要交叉。❌大量滥用u下划线用户会误以为是链接。❌把格式化标签写在/p结束标签外面脱离段落。本篇核心知识点总结文本格式化标签属于行内元素放在p、标题内部只修饰局部文字不会独占一行。分为物理标签只改变外观b i s u和语义标签带含义推荐优先用strong em del mark small。strong代表重要em代表着重阅读。sup上标sub下标多用于数学、化学。标签可以互相嵌套严禁交叉嵌套。行内格式化标签内部不能放段落p、标题h2这类块级元素。小练习写一段文字包含普通文字、strong 重要警告、del 删除价格、H₂O 下标公式、mark 高亮重点。下节预告下一篇教程HTML链接。