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

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

                                             —— 24.4.24

    一、文本标签

    1.特点

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

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

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

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

    2.常用：

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

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

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

            生活中的例子：div是大包装袋，span是小包装袋

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML常用的文本标签title>
    6. head>
    7. <body>
    8.     <p>
    9.         一切都会好的，<em>我一直相信em>。
    10.         <strong>一定strong>
    11.     p>
    12.     <p>
    13.         <span>没有语义，只是包裹短语的通用容器span>
    14.     p>
    15.     
    16. body>
    17. html>

    二、不常用的文本标签

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>HTML不常用的文本标签title>
    6. head>
    7. <body>
    8.     
    9.     <p>
    10.         我曾经<cite>跨过山和大海cite>
    11.     p>
    12.  
    13.     
    14.     <p>
    15.         <dfn>一切都会好的，我一直相信dfn>，是我一直的<dfn>期盼dfn>
    16.     p>
    17.  
    18.     
    19.     <p>
    20.         商品原价：<del>199del>，限时秒杀：<ins>99ins>
    21.     p>
    22.  
    23.     
    24.     <p>
    25.         水的化学方程式是H<sub>2sub>O,11的4次方是11<sup>4sup>
    26.     p>
    27.  
    28.     
    29.     <p>
    30.         等过一段时间学习js，这段代码很有意思：<code>alert(1)code>
    31.     p>
    32.  
    33.     
    34.     <p>
    35.         手机突然提示：<samp>支付宝到账100万元samp>
    36.     p>
    37.  
    38.     
    39.     <p>
    40.         保存的快捷键是：<kbd>ctrl+skbd>
    41.     p>
    42.  
    43.     
    44.     <p>
    45.         <abbr title="英雄联盟">LOLabbr>这个游戏非常好玩 
    46.     p>
    47.  
    48.     
    49.     <P>
    50.         你是年少的欢喜，这句话反过来念是：<bdo dir="rtl">你是年少的欢喜bdo>
    51.     P>
    52.  
    53.     
    54.     <p>
    55.         等学习了js，我们就知道要这样定义了：<code>let <var>avar> = 1code>
    56.     p>
    57.  
    58.  
    59.     
    60.     <p>
    61.         <small>下午四点三十请来开会small>
    62.     p>
    63.  
    64.     
    65.     <p>
    66.         我也喜欢喝<b>百事可乐b>
    67.     p>
    68.  
    69.     
    70.     <p>
    71.         你说：<i>“不要再爱我了”i>
    72.     p>
    73.  
    74.     
    75.     <p>
    76.         张三把“你好”的英文单词写成了：<u>hellau>,这是不对的
    77.     p>
    78.  
    79.     
    80.     <p>
    81.         屈原曾经说过：<q>路漫漫其修远兮，吾将上下而求索q>
    82.     p>
    83.  
    84.     
    85.     <p>
    86.         《后来》的歌词是这样的：<blockquote>后来，我总算学会了如何去爱，可惜你早已远去消失在人海，后来，终于在眼泪中明白，有些人，一旦错过就不在blockquote>
    87.     p>
    88.  
    89.     
    90.     <p>
    91.         我家居住在<address>翻斗花园address>
    92.     p>
    93. body>
    94. html>

    总结

            1.这些不常用的文本标签，编码时不必过于纠结(酌情而定，不用也行)

            2.blockquote和address是块级元素，其他的文本标签，都是行内元素

            3.有些语义感不强的标签，很少使用，例如：

                    small、b、u、q、blockquote

            4.HTML标签太多了，记住那些：重要的、语义感强的标签即可；截止目前，有：

                    h1~h6、p、div、em、strong、span

  • 相关阅读:
    sql语句中查重复数据
    Cholesterol-PEG-Amine 两亲性脂质衍生物胆固醇-聚乙二醇-氨基 CLS-PEG-NH2
    【LeetCode热题100】打开第5天：最长回文子串
    栈和队列的概念及实现
    ZooKeeper(一)——基础知识
    编译过程 & 学习 CMake 文档的前置知识
    Express+MongoDB服务端开发教程
    数据结构与算法训练：第十二弹
    【牛客-剑指offer-数据结构篇】JZ23 链表中环的入口结点 两种实现 Java实现
    CesiumJS【Basic】- #006 浏览器控制台查看位置角度
  • 原文地址：https://blog.csdn.net/m0_73983707/article/details/138159564