zoukankan      html  css  js  c++  java
  • [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>
    
  • 相关阅读:
    学习篇之函数就是对象
    @Controller和@RestController的区别
    maven 阿里云 国内镜像 中央仓库
    IntelliJ IDEA使用教程
    解决“无法从套接字读取更多数据”
    at java.util.Arrays.copyOfRange(Arrays.java:3209)导致的java.lang.OutOfMemoryError: Java heap space 错误的解决办法
    maven中引入ojdbc包
    Oralce增加表空间
    Web服务框架发展与REST服务开发
    Oralce解锁表
  • 原文地址:https://www.cnblogs.com/juetan/p/13027074.html
Copyright © 2011-2022 走看看