格式化大比拼
本帖最后由 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>
效果：
第一行就打错了
访问bbs.fishc.com会自动跳转到fishc.com.cn _2_ 发表于 2020-1-24 17:23
第一行就打错了
访问bbs.fishc.com会自动跳转到fishc.com.cn
对，没注意{:10_277:}
页:
[1]