其他分享
首页 > 其他分享> > [03]HTML基础之行内标签

[03]HTML基础之行内标签

作者：互联网

1.<ruby>标签

显示东亚字符的发音(如中文，日文等)，与<rp>，<rt>标签搭配。

//<ruby>为单个发音字符的容器，<rp>为不支持<ruby>标签时显示的内容，
//<rt>为字符的发音
<ruby>
    中 <rp>(</rp> <rt>zhong</rt> <rp>)</rp>
    文 <rp>(</rp> <rt>wen</rt> <rp>)</rp>
</ruby>

2.<em>标签

表示局部内容的强调，表现为斜体字，与<i>标签效果相同。

//强调小猫，强调的是哪种动物可爱
<em>小猫<em>是可爱的动物
//强调事实，强调“小猫是可爱的动物”这一事实
小猫<em>是<em>可爱的动物

尽管，标签与标签效果一致，但两者是有区别的。前者表示italic(斜体)，后者表示emphasis(强调)。从语义化的角度来说，不建议使用标签。

3. <strong>标签

表示全局内容的强调，表现为粗体字，与<b>标签效果相同。

//`第一章`只是引用，“历史起源”才是文章的主题
第一章 <strong>历史起源</strong>
//有时候，也用来暗示用户优先查看内容
第一章 历史起源 <strong>第二章 文明起源<strong> 第三章 科技起源

虽然，<b>标签与<strong>标签效果一致，但两者是有却别的。前者表示bold(粗体)，后者表示stronger emphasis(更强烈的强调)。从语义化的角度来说，不建议使用<b>标签。

4. <ins>标签

表示插入内容，表现为下划线，与<u>标签效果相同。

//表示插入内容
滚滚长江东逝水，浪花<ins>淘尽</ins>英雄

尽管，<ins>标签与<u>标签效果一致，但两者是有区别的。前者表示underline(下划线)，后者表示insert(插入)。从语义化的角度来说，不建议使用<i>标签。

5. <del>标签

表示删除内容，表现为中划线，与<s>标签效果相同。

//表示删除内容
青山<del>仍旧</del>依旧在，几度夕阳红

尽管，<del>标签与<s>标签效果一致，但两者是有区别的。前者表示underline(下划线)，后者表示delete(删除)。从语义化的角度来说，不建议使用<u>标签。

6. <bdo>标签

表示文字方向，如同把文字镜像后再显示；与<bdi>相对，虽也表示文字方向，但如同把内容分块再镜像显示。

//正常文字显示
<p>123 456 789<p>
//bdo从右往左
<bdo dir="rtl">123 456 789</bdo>
//bdi从右往左
<bdi dir="rtl">123 456 789</bdi>

7.<sup>标签

表示上标文本；与标签相对，后者表示下标文本。

//上标文本
2020<sup>2</sup> - 2019<sup>2</sup> = 4076362
//下标文本
Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn

8. <small>标签

表示旁注信息，如免责声明、注意事项、法律限制或版权声明等。

//表示某些辅助性的信息
康师傅酸菜牛肉面，酸爽好回味！ <small>图片仅供参考，请以实物为准</small>

9. <mark>标签

表示文本的标记，表现为黄色背景，突出强调的文本。

//突出显示某部分文本
绝弹博客，记录<mark>前端</mark>学习的个人博客

10. <hr>标签(单标签)

表示分隔符(独占一行)，表现为一条横线；而<br>标签(单标签)表示换行符，<wbr>标签(单标签)表示另一种换行符。

//如果第一行诗句末尾不加<br>标签，文本不会换行
题临安邸
<hr>
山外青山楼外楼，西湖歌舞几时休？ <br>
暖风熏得游人醉，直把杭州作汴州。

//<wbr>标签适用于英文文本，当某个英文单词过长时，用来决定在哪处地方换行
this is verrrrrrrry <wbr> looooooooooooooong <wbr> text

11. <abbr>标签

表示词句的缩写，表现为圆点下划线，鼠标悬浮时显示完整的名称；<dfn>标签表示特殊术语或短语，表现为略微倾斜的文本。

//使用title属性表示完整的名称
<abbr title="HyperText Markup Language">HTML</abbr>是一门标记语言。
//不太作为口语出现的内容或有特定内涵的词语
<dfn title="深圳市腾讯科技有限公司">腾讯</dfn>是一家互联网公司。

12. <blockquote>标签

表示较长的引用，表现为左右两侧缩进的文本；<q>标签表示较短的引用，用cite属性表明引用来源(URL形式)；<cite>标签表示作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

//cite属性标注引用的来源(URL形式)
<blockquote cite="http://theoldmanandthesea.com">人生来就不是为了被打败的,人能
够被毁灭,但是不能够被打败。man is not made for defeat, a man can be destoryed 
but not defeated.--老人与海</blockquote>

//cite属性标注引用的来源(URL形式)
人生不过匆匆数十载，<q cite="http://litletime.com">一寸光阴一寸金<q>，珍惜当下，
不负青春不负年华。

//表示作品标题
<cite>中国神话史<cite>是袁珂先生的著作。

13. <code>标签

表示代码；<samp>标签表示计算机样本；<kbd>标签表示键盘输入；<var>标签表示变量，表现为斜体；<tt>标签表示打印文本；

//代码
<code>console.log('hello,world')</code>

//计算机样本
字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

//键盘输入
按<kbd>ESC</kbd>键即可退出游戏。

//变量
let <var>countity</var> = <var>num</var> + 1;

//打印文本
<tt>打印文本</tt>

14. <time>标签

表示时间，datetime属性表示时间，pubdate属性表示文档或<article>元素的发布时间。

//表示节日或特殊事件的日期都可以
<time datetime="2019-12-25">今年圣诞节</time>公司发了福利。

//表示文章的发布事件，使用pubdate属性(布尔属性)
标题：HTML的通用行内标签有哪些？ <time datetime="2019-12-22" pubdate>发布时间：
2019-12-22</time>

标签：表示,03,行内,标签,强调,HTML,内容,文本,属性
来源： https://www.cnblogs.com/juetan/p/13027074.html