鱼C论坛

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

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

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

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

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

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

HTML 格式化大比拼


1. strong 和 b 元素

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

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p><strong>粗体文本</strong></p>
  6.         <p><b>粗体文本</b></p>
  7.     </body>
  8. </html>
复制代码


效果:

1.png

2. em 和 i 元素

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

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p><em>斜体文本</strong></p>
  6.         <p><i>斜体文本</i></p>
  7.     </body>
  8. </html>
复制代码


效果:

1.png

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

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <style>
  5.             .bold {
  6.                 font-weight: bolder;
  7.             }
  8.             .italic {
  9.                 font-style: italic;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <p class="bold">粗体文本</p>
  15.         <p class="italic">斜体文本</p>
  16.     </body>
  17. </html>
复制代码


效果:

1.png

4. del 和 ins 元素

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

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p>
  6.             鱼 C 论坛的域名从 <del>bbs.fishc.com</del> 变成了
  7.             <ins>fishc.com.cn</ins>
  8.         </p>
  9.     </body>
  10. </html>
复制代码


效果:

1.png

5. s 元素

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

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p><s>不正确</s> 正确</p>
  6.     </body>
  7. </html>
复制代码


效果:

1.png

6. u 元素

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

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p><u>不正确</u> 正确</p>
  6.     </body>
  7. </html>
复制代码


1.png

7. mark 元素

mark 元素用于标记文本。

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p><mark>被标记的文本</mark></p>
  6.     </body>
  7. </html>
复制代码


效果:

1.png

8. sup 和 sub 元素

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

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p>4 = 2<sup>2</sup></p>
  6.         <p>10 = 1010<sub>2</sub></p>
  7.     </body>
  8. </html>
复制代码


效果:

1.png

9. small 元素

small 元素用于将字体变小。

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head></head>
  4.     <body>
  5.         <p>正常字体</p>
  6.         <p><small>小字号字体</small></p>
  7.     </body>
  8. </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-4-18 10:13

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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