web进阶之六:文本标签及文本样式

文本标签

  • em标签用于表示一段内容中的着重点,语气上的强调。
  • strong标签用于表示一个内容的重要性。
    这两个标签可以单独使用,也可以一起使用。
  • small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。
    浏览器在显示small标签时会显示一个比父 元素小的字号。
  • i标签会使文字变成斜体。icon图标
  • b标签会使文字变成粗体。在目前一般都不会用。

这两个标签和em和strong类似,但是这两个标签没有语义。
所以根据html5标准,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使 用i和b标签。

  • 使用cite标签可以指明对某内容的引用或参 考。例如,戏剧、文章或图书的标题,歌 曲、电影、照片或雕塑的名称等。
  • blockquote和q表示标记引用的文本。
     1. blockquote用于长引用
     2. q用于短引用。
    在两个标签中还可以使用cite属性来表示引用的地址。
  • sup和sub用于定义上标和下标。
     上标主要用于表示类似于10的三次方中的3。
     下标则用于表示类似余H2O(水分子)中的2。
    上标页通常在网页中用来注释和引用。
  • ins表示插入的内容,显示时通常会加上下 划线。
     del表示删除的内容,显示时通常会加上删 除线。
  • 如果你的内容包含代码示例或文件名,就 可以使用code元素。
     pre元素表示的是预格式化文本,可以使用
     pre包住code来表示一段代码。默认会使用等宽的字体
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签和文本样式</title>
</head>
<body>
    <p>
         <!--em是语气强调,strong是强调整个内容-->
        <strong>警告:任何情况下不要接近僵尸。</strong>
        他们只是 <em>看起来</em> 很友好,实际上他们是为了吃你的胳膊!<br>
          <small>僵尸的秘密</small>
          <!--small标签,会比父类小一个字号-->
    </p>
        <p>
        <i>我是i标签中的内容</i><br>
        <b>我是b标签中的内容</b><br>
    </p>
        <p>
        <small>&copy;甚得朕心保留解释权利.</small><br>
    </p>
    <p>
        <!--<city>表示某内容的引用或参考-->
    <cite>《七龙珠》</cite>讲的是召唤神龙的故事。
    </p>
     <p>
        <!--短引用,浏览器会自动添加一个引号
            不过不一定所有的浏览器都添加
        -->
        孔子曾经说过:<q>学而时习之不亦说乎</q>
    </p>
    <p>
        <!--长引用,这样效果会独占一行-->
        孔子曰:<blockquote>天将降大任于斯人也</blockquote>
    </p>
        <p>
              <!--网页中一般在人名上面有个什么符号,一点击就会跳转一个链接。-->
        韩磊<sup><a href='https://baike.baidu.com/item/%E9%9F%A9%E7%A3%8A/32383?fr=aladdin'>[1]</a><sup>
    </p>
        <p>H<sub>2</sub>O</p>
        <p>
        <!--就像购物网站上看到的一样,原来的价格划了,出现一个惊爆价-->
        <del>17.75</del><br>
        15.54<br>
    </p>
    <!-- ins表示一个插入的内容,会自动添加下划线 -->
    <p>
        那个高楼真<ins>高啊</ins>!
    </p>
        <pre>
        <code>
if a>b:
    print("hello")
        </code>
    </pre>
</body>
</html>。

本文样式由于太多比较杂乱,我就全部放在一个代码块中了,看起来也方便,代码直接复制下来,一运行就能看到效果。


有任何问题请给我留言,或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容

  • 一、文本标签 <em>和<strong> em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重...
    咻咻咻滴赵大妞阅读 1,307评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,236评论 1 41
  • 一、元素选择器 作用:通过元素选择器可以选择页面中的所有指定元素语法:标签名{} 二、类选择器 作用:通过元素的c...
    风中丶凌乱阅读 306评论 0 1
  • 和 em标签用于表示一段内容中的着重点。 strong标签用于表示一个内容的重要性。这两个标签可以单独使用,也可以...
    2simple阅读 1,148评论 0 0
  • 文本标签 和 em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。这两个标签可以单独使用...
    幸而0407阅读 467评论 0 0