前端三剑客 HTML+CSS+JavaScript ⑤ HTML文本标签

news2024/11/16 10:33:29

别困在过去，祝你有勇气开始，下一行

—— 24.4.24

一、文本标签

1.特点

 1.用于包裹：词汇、短语等

 2.通常写在排版标签里面（h1~h6、p、div）

 3.排版标签更宏观（大段的文字），文本标签更微观（词汇，词语）

 4.文本标签通常都是行内元素

2.常用：

 ① em 要着重阅读的内容（斜体化） 双标签

 ② strong 十分重要的内容（语气比em强） 双标签

 ③ span 没有语义，用于包裹短语的通用容器双标签

 生活中的例子：div是大包装袋，span是小包装袋
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>HTML常用的文本标签</title>
</head>
<body>
 
 一切都会好的，我一直相信。
 一定
 
 
 没有语义，只是包裹短语的通用容器
 
 
</body>
</html>

二、不常用的文本标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML不常用的文本标签</title>
</head>
<body>
    <!-- cite斜体效果 作品标签（书籍、歌曲、电影、电视节目） 双标签-->
    <p>
        我曾经<cite>跨过山和大海</cite>
    </p>

    <!-- dfn斜体效果 特殊术语，或专属名词 双标签 -->
    <p>
        <dfn>一切都会好的，我一直相信</dfn>，是我一直的<dfn>期盼</dfn>
    </p>

    <!-- del与ins 数字的改变 删除的文本 与 插入的文本 双标签 -->
    <p>
        商品原价：<del>199</del>，限时秒杀：<ins>99</ins>
    </p>

    <!-- sub与sup 下标文字 与 上标文字 双标签 -->
    <p>
        水的化学方程式是H<sub>2</sub>O,11的4次方是11<sup>4</sup>
    </p>

    <!-- code 大小效果的改变 一段代码 双标签 -->
    <p>
        等过一段时间学习js，这段代码很有意思：<code>alert(1)</code>
    </p>

    <!-- samp 缩小文字 设备输出文字 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 -->
    <p>
        手机突然提示：<samp>支付宝到账100万元</samp>
    </p>

    <!-- kbd 键盘文本 文字效果稍微小一点，表示文本是通过键盘输入的，经常用在于计算机相关的手册中-->
    <p>
        保存的快捷键是：<kbd>ctrl+s</kbd>
    </p>

    <!-- abbr 缩写 最好配合title属性 可以给缩写进行解释 双标签-->
    <p>
        <abbr title="英雄联盟">LOL</abbr>这个游戏非常好玩 
    </p>

    <!-- bdo 更改文本方向，要配合dir属性，可选填ltr（默认值）、rtl从右向左 双标签 -->
    <P>
        你是年少的欢喜，这句话反过来念是：<bdo dir="rtl">你是年少的欢喜</bdo>
    </P>

    <!-- var 标记变量，效果小化，变量斜体，可以与code标签一起使用 双标签-->
    <p>
        等学习了js，我们就知道要这样定义了：<code>let <var>a</var> = 1</code>
    </p>


    <!-- small 附属细则，例如：包括版权、法律文本 —— 很少使用 双标签 -->
    <p>
        <small>下午四点三十请来开会</small>
    </p>

    <!-- b 摘要中的关键字、评论中的产品名称 效果加粗 —— 很少使用 双标签 -->
    <p>
        我也喜欢喝<b>百事可乐</b>
    </p>

    <!-- i 本意是：人物的思想活动、所说的话等等,效果斜体，现在多用于：呈现 字体图标（后面要讲的内容）双标签 -->
    <p>
        你说：<i>“不要再爱我了”</i>
    </p>

    <!-- u 与正常内容有反差文本，有下划线效果，例如：错的单词、不合适的描述等 —— 很少使用 双标签-->
    <p>
        张三把“你好”的英文单词写成了：<u>hella</u>,这是不对的
    </p>

    <!-- q 短引用——很少使用，自动添加一个双引号 双标签-->
    <p>
        屈原曾经说过：<q>路漫漫其修远兮，吾将上下而求索</q>
    </p>

    <!-- blockquote 长引用 ——很少使用，两个汉字的缩进并自动进行换行 双标签-->
    <p>
        《后来》的歌词是这样的：<blockquote>后来，我总算学会了如何去爱，可惜你早已远去消失在人海，后来，终于在眼泪中明白，有些人，一旦错过就不在</blockquote>
    </p>

    <!-- address 地址信息，换行，斜体文字效果 文本标签中blockquote和address是块标签 双标签-->
    <p>
        我家居住在<address>翻斗花园</address>
    </p>
</body>
</html>