HTML | 文本标签
常用文本标签
-
用于包裹：词汇、短语等。
-
通常写在排版标签里面。
-
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
-
文本标签通常都是行内元素。
| 标签名 | 标签语义 | 单 / 双 标签 |
|---|---|---|
| em | 要着重阅读的内容 | 双 |
| strong | 十分重要的内容（语气比em要强） | 双 |
| span | 没有语义，用于包裹短语的通用容器 | 双 |
生活中的例子：
div是大包装袋，span是小包装袋。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML_常用的文本标签</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<p>
预防电信诈骗，请安装：<em>国家反诈中心app</em>。
</p>
<p>
当我们出门的时候，一定要<strong>关好门窗</strong>！
</p>
<p>
前端三个框架为：<span>Angular、React、Vue</span>。
</p>
</body>
</html>
不常用文本标签
| 标签名 | 标签语义 | 单 / 双 标签 |
|---|---|---|
cite |
作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑） | 双 |
dfn |
特殊术语 ，或专属名词 | 双 |
del与ins |
删除的文本 【与】 插入的文本 | 双 |
sub与sup |
下标文字 【与】 上标文字 | 双 |
code |
一段代码 | 双 |
samp |
从正常的上下文中，将某些内容提取出来，例如：标识设备输出 | 双 |
kbd |
键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中 | 双 |
abbr |
缩写，最好配合上title 属性 |
双 |
bdo |
更改文本方向，要配合dir属性，可选值:ltr （默认值）、rtl |
双 |
var |
标记变量，可以与code 标签一起使用 |
双 |
small |
附属细则，例如：包括版权、法律文本。—— 很少使用 | 双 |
b |
摘要中的关键字、评论中的产品名称。—— 很少使用 | 双 |
i |
本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标（后面要讲的内容）。 | 双 |
u |
与正常内容有反差文本，例如：错的单词、不合适的描述等。——很少使用 | 双 |
q |
短引用 —— 很少使用 | 双 |
blockquote |
长引用 —— 很少使用 | 双 |
address |
地址信息 | 双 |
备注：
- 这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
blockquote与address是块级元素，其他的文本标签，都是行内元素。- 有些语义感不强的标签，我们很少使用，例如：
small、b、u、q、blockquote- HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
h1~h6、p、div、em、strong、span
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML_不常用的文本标签</title>
</head>
<body>
<p>
这首<cite>《光辉岁月》</cite>，非常的好听！
</p>
<p>
<dfn>耗子尾汁</dfn>，是一个网络流行语，意思同<dfn>好自为之</dfn>。
</p>
<p>
商品原价：<del>199</del>，限时秒杀：<ins>99</ins>
</p>
<p>
水的化学方程式是：H<sub>2</sub>O，8的三次方是这么写的：8<sup>3</sup>
</p>
<p>
等过一段我们学习了JS，你就会发现这段代码很有意思：<code>alert(1)</code>
</p>
<p>
手机突然提示，<samp>支付宝到账100万元！</samp>
</p>
<p>
保存的快捷键是：<kbd>ctrl + s</kbd>
</p>
<p>
<abbr title="英雄联盟">LOL</abbr>这个游戏非常好玩
</p>
<p>
你是年少的欢喜，这句话反过来念就是：<bdo dir="rtl">你是年少的欢喜</bdo>
</p>
<p>
等过一段我们学习了JS，我们就知道要这样定义变量了：<code>let <var>a</var> = 1</code>
</p>
<p>
<small>本网站所有资料、图表仅供参考，涉及投资项目所造成的盈亏与本网站无关。</small>
</p>
<p>
我也买过<b>罗技GPW二代</b>这个鼠标，确实很好用！
</p>
<p>
猪头声嘶力竭的喊着：<i>“燕子，没有你我怎么活啊！”</i>
</p>
<p>
张三把“你好”的英文写成了：<u>heelo</u>，这是不对的！
</p>
<p>
屈原曾经说过：<q>路漫漫其修远兮，吾将上下而求索</q>
</p>
<p>
有一首歌，歌词是这样的：
<blockquote>后来，我总算学会了如何去爱；可惜你早已远去消失在人海；后来终于在眼泪中明白，有些人一旦错过就不在；</blockquote>
</p>
<p>
我们的学校地址是：<address>北京宏福科技园</address>
</p>
</body>
</html>
