文本特殊样式

有些文本需要增加特殊效果，比如加粗、倾斜、上标、下标等。

1 加粗

粗体显示，起到强调和加强效果。HTML中提供  和  两个标记实现加粗效果。

<p><b>FoxDevelop</b></p>
<p><strong>www.foxdevelop.com</strong></p>Code language: HTML, XML (xml)

：纯视觉加粗，无语义
：语义上表示重要内容，浏览器默认同样渲染为加粗

2 倾斜

字体倾斜显示，把要倾斜的字体放在  或  标记里面。

<p><i>>www.foxdevelop.com</i></p>
<p><em>一个网站</em></p>Code language: HTML, XML (xml)

：纯视觉倾斜，无语义
：语义上表示强调，浏览器默认同样渲染为倾斜

3 上标和下标

平方根、化学公式等场景需要用到上标和下标。

a<sup>2</sup>
H<sub>2</sub>OCode language: HTML, XML (xml)

：上标，文字缩小并抬高
：下标，文字缩小并降低

4 删除线效果

<del>地址是www.foxdevelop.com www</del>Code language: HTML, XML (xml)

<del>：表示被删除的文本，浏览器默认渲染为中间划线

本节完整代码

<!DOCTYPE html>
<html>
    <head>
        <title>标题栏</title>
    </head>
    <body>
       <p><b>我们是 欢迎大家</b>大家可以访问下面的地址</p>
       <p><strong>我的域名是www.foxdevelop.com</strong></p>

       <p><i>www.bamn.cn</i></p>
       <p><em>一个网站</em></p>

       <p>
           <del>
              www.foxdevelop.com  www
           </del>
       </p>

       <p>
          a<sup>2</sup>
          H<sub>2</sub>O
       </p>
    </body>
</html>Code language: HTML, XML (xml)

补充说明

 和  是纯样式标签，HTML5 中仍保留但建议仅在无语义需求时使用；有语义强调需求时优先用  和 
<del> 表示删除内容，与之对应的 <ins> 表示插入内容（默认带下划线）
上标下标常用于数学公式（x2 + y2 = z2）和化学式（H2SO4）
现代开发中，样式控制推荐用 CSS 实现（如 font-weight: bold、font-style: italic），但上述标签在语义化场景中仍有其价值

需要我继续整理下一节内容吗？

Previous: 特殊文字符号-转义字符

Next: 文字排版

文本特殊样式

1 加粗

2 倾斜

3 上标和下标

4 删除线效果

本节完整代码

补充说明

发表回复 取消回复

发表回复取消回复