zltzlt 发表于 2020-1-20 15:42:50

格式化大比拼

本帖最后由 zltzlt 于 2020-1-24 18:07 编辑

HTML 格式化大比拼

1. strong 和 b 元素

strong 和 b 元素会使文本变粗,但 strong 有强调的语义,而 b 没有。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p><strong>粗体文本</strong></p>
      <p><b>粗体文本</b></p>
    </body>
</html>

效果:



2. em 和 i 元素

em 和 i 元素会使文本以斜体的形式呈现,但 em 有强调的语义,而 i 没有。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p><em>斜体文本</strong></p>
      <p><i>斜体文本</i></p>
    </body>
</html>

效果:



3. 使用 css 代替 b 和 i 元素

例如:

<!DOCTYPE html>
<html>
    <head>
      <style>
            .bold {
                font-weight: bolder;
            }
            .italic {
                font-style: italic;
            }
      </style>
    </head>
    <body>
      <p class="bold">粗体文本</p>
      <p class="italic">斜体文本</p>
    </body>
</html>

效果:



4. del 和 ins 元素

del 元素用于实现删除线的效果,ins 元素用于实现下划线的效果。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p>
            鱼 C 论坛的域名从 <del>bbs.fishc.com</del> 变成了
            <ins>fishc.com.cn</ins>
      </p>
    </body>
</html>

效果:



5. s 元素

s 元素和 del 元素显示的样式相同,但两者的语义不同。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p><s>不正确</s> 正确</p>
    </body>
</html>

效果:



6. u 元素

u 元素和 ins 元素显示的样式相同,但两者的语义不同。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p><u>不正确</u> 正确</p>
    </body>
</html>



7. mark 元素

mark 元素用于标记文本。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p><mark>被标记的文本</mark></p>
    </body>
</html>

效果:



8. sup 和 sub 元素

sup 和 sub 元素用于定义上标和下标。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p>4 = 2<sup>2</sup></p>
      <p>10 = 1010<sub>2</sub></p>
    </body>
</html>

效果:



9. small 元素

small 元素用于将字体变小。

例如:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
      <p>正常字体</p>
      <p><small>小字号字体</small></p>
    </body>
</html>

效果:

_2_ 发表于 2020-1-24 17:23:20

第一行就打错了
访问bbs.fishc.com会自动跳转到fishc.com.cn

zltzlt 发表于 2020-1-24 22:40:12

_2_ 发表于 2020-1-24 17:23
第一行就打错了
访问bbs.fishc.com会自动跳转到fishc.com.cn

对,没注意{:10_277:}
页: [1]
查看完整版本: 格式化大比拼