鱼C论坛

 找回密码
 立即注册
查看: 2431|回复: 2

[学习笔记] 格式化大比拼

[复制链接]
发表于 2020-1-20 15:42:50 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 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>

效果:

1.png

2. em 和 i 元素

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

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

效果:

1.png

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>

效果:

1.png

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>

效果:

1.png

5. s 元素

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

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

效果:

1.png

6. u 元素

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

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

1.png

7. mark 元素

mark 元素用于标记文本。

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

效果:

1.png

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>

效果:

1.png

9. small 元素

small 元素用于将字体变小。

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

效果:

1.png

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-1-24 17:23:20 From FishC Mobile | 显示全部楼层
第一行就打错了
访问bbs.fishc.com会自动跳转到fishc.com.cn
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-1-24 22:40:12 | 显示全部楼层
_2_ 发表于 2020-1-24 17:23
第一行就打错了
访问bbs.fishc.com会自动跳转到fishc.com.cn

对,没注意
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 10:18

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表