HTML常用文件成分,文本语义成分

By admin in 4858美高梅 on 2019年4月22日

HTML是超文本标志语言,它提供网页的具体内容,包蕴文件、表单、图像、表格、链接、多媒体、列表等。其汉语本是我们相遇的最多的呈现内容。正确的使用文本标签,会使页面具有语义化,也利于SEO。

HTML是超文本标识语言,它提供网页的具体内容,包罗文件、表单、图像、表格、链接、多媒体、列表等。其中文本是大家相遇的最多的体现内容。正确的施用文本标签,会使页面具有语义化,也惠及SEO。

HTML常用文件成分,

本文首发于民用微信公众号(xinjie-just)。

HTML是超文本标志语言,它提供网页的具体内容,蕴含文件、表单、图像、表格、链接、多媒体、列表等。其粤语本是大家相遇的最多的体现内容。精确的采纳文本标签,会使页面具备语义化,也有利于SEO。

文件标签首要包罗:abbr, address, strong, b, em, i, bdi, bdo, blockquote,
cite, code, del, ins, s, dfn, kbd, mark, small, meter, pre, progress, q,
sub, sup, time, span, var.

网页中并不一连利用 div 和 span
就够了。准确使用这么些文件标签,使得我们的页面纵然未有 css
的气象下,也能完美的突显。另一方面,使用这些标签是为着写出旁人能看得懂的代码,而不光是机器能看得懂,那也是自己从读书编制程序以来一贯在尽力的趋向。

  1. abbr

    abbr 解释缩写词,鼠标悬停在其上时显示title属性值
    WHO

4858美高梅 1

 

  1. address

    address 定义与 html 页面和页面一部分有关的作者、相关人士或组织的联系信息,通常位于页面底部或相关部分内 (用 address 标记公司网站 “联系我们” 中的办公地点,则是错误的用法),字体以斜体显示
    Written by Jon Doe.

    Visit us at:
    Example.com
    Box 564, Disneyland
    USA

4858美高梅 2

 

  1. strong

    strong 强调内容的重要性(重要程度),字体以粗体显示
    stop and get out

4858美高梅 3

 

  1. b

    b 表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性,也不代表其他的语态和语气,用于文章的关键词、评论中的产品名、文章导语、基于文本的交互式软件中的指示操作的文字

    他在感情上的愚钝就想门窗紧闭的屋子

4858美高梅 4

HTML常用文件成分,文本语义成分。 

  1. em

    em 表示内容的着重点(唯一性),字体以斜体显示
    I just love you

4858美高梅 5

 

  1. i

    i 表示一块不同于其他文字的文字,具有不同的语态或语气,或其他不同于常规之处,用于如技术名称、技术术语、外语中的惯用语、翻译的散文、西方文字中的船舶名称等
    HTML,重构,wow,解忧杂货店,泰坦尼克号

4858美高梅 6

 

  1. bdi

    bdi 允许设置一段文本,使其脱离其父元素的文本方向设置。目前只有 Firefox 和 Chrome 浏览器支持

4858美高梅 7

 

  1. bdo

    bdo 定义文本的方向,ltr(从左到右为默认方向)
    This text will go left-to-right.
    This text will go right-to-left.

4858美高梅 8

 

  1. blockquote

    blockquote 表示单独存在的引述(可长可短)

    For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

4858美高梅 9

 

  1. cite

    cite 指明对某内容源的引用或参考。如:戏剧、脚本、图片的标题、歌曲、电影、照片、雕塑的名称、演唱会、音乐会、规范、报纸、法律文件(不能作为对人名的引用),字体以斜体显示

    你我都当过警务处长,自己人太懂礼貌,虚伪!这句话出自电影《寒战II》

4858美高梅 10

 

  1. code

    code 定义计算机代码文本
    This is a piece of computer code: alert("这里有再次成为好人的路,Here is the way to be a good person again.")

4858美高梅 11

 

  1. del

    del 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    My favorite color is blue red!

4858美高梅 12

 

  1. ins

    ins 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    My favorite color is not blue, is red!

4858美高梅 13

 

  1. s

    s 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    You think I love you!

    As a matter of fact, I love her!

4858美高梅 14

 

  1. dfn

    dfn 短语标签,定义一个项目。对其做语义上的区分,用 dfn 包围要定义的术语,而不是包围定义

    There is a item, txhy APP

4858美高梅 15

 

  1. mark

    mark 用于提起读者对特定文本片段的注意,对文本添加黄色背景。可以在样式表中添加 mark{ background: yellow;} 让浏览器实现同样的效果

    Do not forget to buy milk today.

4858美高梅 16

 

  1. small(卓殊遍及,又易于用错或直接不应用)

    small 免责声明、注解、署名、版权信息、法律限制等(标记短语,不要标记过长文字),字体以小字号显示

    example: 京公网安备11000002000001号(百度备案号)

4858美高梅 17

 

  1. pre

    pre 定义预格式文本
            给重要的人写信,一定要自己亲笔手写。
            别人认真问的问题,一定要认真回答。
    

4858美高梅 18

 

  1. q

    q 用于短的引述

    WWF’s goal is to: Build a future where people live in harmony with nature.We hope they succeed.

4858美高梅 19

 

  1. sub

    sub 创建下标.下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的

    我们知道,H2O分解将生成H2和O2

4858美高梅 20

 

  1. sup

    sup 创建上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的

    时间就像海绵里的水,挤一挤总会有的[1]

4858美高梅 21

 

  1. time

    We open at every morning.

    I have a date on .

4858美高梅 22

 

  1. span

    span 同 div 同样,未有别的语义,只适合包围字词和短语。可对文书档案实行分离,然后增多适量的样式。

    just 受 cting 影响,生活变得有趣多了

4858美高梅 23

 

  1. var

    定义变量
    variable

4858美高梅 24

 

本文首发于个人微信公众号(xinjie-just)。
HTML是超文本标识语言,它提供网页的具体内容,包蕴文件、表单、图像、表格…

[索引页]
[源码下载] 

文件标签重要回顾:abbr, address, strong, b, em, i, bdi, bdo, blockquote,
cite, code, del, ins, s, dfn, kbd, mark, small, meter, pre, progress, q,
sub, sup, time, span, var.

文件标签首要不外乎:abbr, address, strong, b, em, i, bdi, bdo, blockquote,
cite, code, del, ins, s, dfn, kbd, mark, small, meter, pre, progress, q,
sub, sup, time, span, var.

千呼万唤 HTML 伍 (四) – 文本语义成分

网页中并不一连选用 div 和 span
就够了。精确使用那一个文件标签,使得大家的页面即使未有 css
的处境下,也能好好的来得。另1方面,使用这一个标签是为着写出旁人能看得懂的代码,而不仅仅是机器能看得懂,那也是本身从学习编制程序以来一贯在拼命的大势。

网页中并不连续利用 div 和 span
就够了。准确选取那几个文件标签,使得大家的页面就算未有 css
的景况下,也能正中下怀的展现。另壹方面,使用那一个标签是为着写出别人能看得懂的代码,而不光是机械能看得懂,这也是本人从读书编制程序以来一贯在奋力的势头。

作者:webabcd

  1. abbr

    abbr 解释缩写词,鼠标悬停在其上时显示title属性值
    WHO

  1. abbr

    abbr 解释缩写词,鼠标悬停在其上时显示title属性值
    WHO

介绍
HTML 伍: 文本语义元素

4858美高梅 25

4858美高梅 26

  • 文本语义成分 – a, em, strong, small, s, cite, q, abbr, time, code,
    var, dfn, samp, kbd, sub, sup, i, b, u, mark, ruby, rt,
    rp, bdi, bdo, span, br, wbr

 

 

示例
一、a – 用于定义超链接(a 是 anchor 的缩写)
element/text/a.html

  1. address

    address 定义与 html 页面和页面一部分有关的作者、相关人士或组织的联系信息,通常位于页面底部或相关部分内 (用 address 标记公司网站 “联系我们” 中的办公地点,则是错误的用法),字体以斜体显示
    Written by Jon Doe.

    Visit us at:
    Example.com
    Box 564, Disneyland
    USA
  1. address

    address 定义与 html 页面和页面一部分有关的作者、相关人士或组织的联系信息,通常位于页面底部或相关部分内 (用 address 标记公司网站 “联系我们” 中的办公地点,则是错误的用法),字体以斜体显示
    Written by Jon Doe.

    Visit us at:
    Example.com
    Box 564, Disneyland
    USA
<!doctype html>
<html>
<head>
    <title>a</title>
</head>
<body>

    <!--
        a - 用于定义超链接(a 是 anchor 的缩写)
          href - 链接的目标 url
          target - 链接的打开方式,_blank, _parent, _self, _top 等
          rel - 当前文档与目标文档之前的关系,其具体的属性值的说明详见文档
            alternate, author, bookmark, external, help, icon, license, next, nofollow, noreferrer, pingback, prefetch, prev, search, sidebar, stylesheet, tag
          hreflang - 目标文档的语言
          media - 目标文档的媒介类型,默认值是 all,其他属性值的说明详见文档
          type - 目标文档的 MIME 类型
    -->

    <a href="http://www.cnblogs.com/index.html" target="_blank" rel="Index" hreflang="zh-cn" media="all" type="text/html">千呼万唤 HTML 5</a>

    <br />

    <!--演示锚点的实现-->
    <a href="#webabcd">锚点的演示</a>
    <p style="height: 2000px">&nbsp;</p>
    i am webabcd
</body>
</html>

4858美高梅 27

4858美高梅 28

 

 

 

贰、em – 定义被着重提出的文书(一般浏览器会渲染斜体)(em 是 emphasis
的缩写)
element/text/em.html

  1. strong

    strong 强调内容的重要性(重要程度),字体以粗体显示
    stop and get out

  1. strong

    strong 强调内容的重要性(重要程度),字体以粗体显示
    stop and get out

<!doctype html>
<html>
<head>
    <title>em</title>
</head>
<body>
    <!--
        em - 定义被强调的文本(一般浏览器会渲染斜体)(em 是 emphasis 的缩写)
    -->
    <em>被强调的文本(一般浏览器会渲染斜体)</em>
</body>
</html>

4858美高梅 29

4858美高梅 30

 

 

 

三、strong – 定义首要的文本(一般浏览器会渲染为粗体)
element/text/strong.html

  1. b

    b 表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性,也不代表其他的语态和语气,用于文章的关键词、评论中的产品名、文章导语、基于文本的交互式软件中的指示操作的文字

    他在感情上的愚钝就想门窗紧闭的屋子

  1. b

    b 表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性,也不代表其他的语态和语气,用于文章的关键词、评论中的产品名、文章导语、基于文本的交互式软件中的指示操作的文字

    他在感情上的愚钝就想门窗紧闭的屋子

<!doctype html>
<html>
<head>
    <title>strong</title>
</head>
<body>
    <!--
        strong - 定义重要的文本(一般浏览器会渲染为粗体)
    -->
    <strong>重要的文本(一般浏览器会渲染为粗体)</strong>
</body>
</html>

4858美高梅 31

4858美高梅 32

 

 

 

4、small – 定义大号文本
element/text/small.html

  1. em

    em 表示内容的着重点(唯一性),字体以斜体显示
    I just love you

  1. em

    em 表示内容的着重点(唯一性),字体以斜体显示
    I just love you

<!doctype html>
<html>
<head>
    <title>small</title>
</head>
<body>
    <!--
        small - 定义小号文本
    -->
    <small>小号文本</small>
</body>
</html>

4858美高梅 33

4858美高梅 34

 

 

 

伍、s – 定义不再确切或不再相关的文件(s 是 strike 的缩写)
element/text/s.html

  1. i

    i 表示一块不同于其他文字的文字,具有不同的语态或语气,或其他不同于常规之处,用于如技术名称、技术术语、外语中的惯用语、翻译的散文、西方文字中的船舶名称等
    HTML,重构,wow,解忧杂货店,泰坦尼克号

  1. i

    i 表示一块不同于其他文字的文字,具有不同的语态或语气,或其他不同于常规之处,用于如技术名称、技术术语、外语中的惯用语、翻译的散文、西方文字中的船舶名称等
    HTML,重构,wow,解忧杂货店,泰坦尼克号

<!doctype html>
<html>
<head>
    <title>s</title>
</head>
<body>
    <p>windows 8 平板电脑</p>
    <p>
        <!--
            s - 定义不再精确或不再相关的文本(s 是 strike 的缩写)
        -->
        <s>原价:5000元</s>
    </p>
    <p>
        <strong>促销价:5元</strong>
    </p>
</body>
</html>

4858美高梅 35

4858美高梅 36

 

 

 

陆、cite – 用于定义引用内容(书籍或杂志等)的标题
element/text/cite.html

  1. bdi

    bdi 允许设置一段文本,使其脱离其父元素的文本方向设置。目前只有 Firefox 和 Chrome 浏览器支持

  1. bdi

    bdi 允许设置一段文本,使其脱离其父元素的文本方向设置。目前只有 Firefox 和 Chrome 浏览器支持

<!doctype html>
<html>
<head>
    <title>cite</title>
</head>
<body>
    <p>
        <!--
            cite - 用于定义引用内容(书籍或杂志等)的标题
        -->
        我最喜欢看高尔基的<cite>海燕</cite>,不过忘了讲的是什么了
    </p>

    <!--
        区别:
        cite 标签用于定义引用内容的标题;blockquote 标签用来定义较长的引用;q 标签用来定义较短的内容
    -->
</body>
</html>

4858美高梅 37

4858美高梅 38

 

 

 

七、q – 用于定义1段引述的内容(短内容)(q 是 quote 的缩写)
element/text/q.html

  1. bdo

    bdo 定义文本的方向,ltr(从左到右为默认方向)
    This text will go left-to-right.
    This text will go right-to-left.

  1. bdo

    bdo 定义文本的方向,ltr(从左到右为默认方向)
    This text will go left-to-right.
    This text will go right-to-left.

<!doctype html>
<html>
<head>
    <title>q</title>
</head>
<body>
    <!--
        q - 用于定义一段引用的内容(短内容)(q 是 quote 的缩写)
          cite - 引用的内容的来源 url
    -->
    <q cite="http://webabcd.cnblogs.com/">从 http://webabcd.cnblogs.com 里引用的一段短内容</q>

    <!--
        区别:
        cite 标签用于定义引用内容的标题;blockquote 标签用来定义较长的引用;q 标签用来定义较短的内容
    -->
</body>
</html>

4858美高梅 39

4858美高梅 40

 

 

 

八、abbr – 定义一个缩写文本,提出在 abbr 的 title
属性中描述缩写的齐全(abbr 是 abbreviation 的缩写)
element/text/abbr.html

  1. blockquote

    blockquote 表示单独存在的引述(可长可短)

    For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

  1. blockquote

    blockquote 表示单独存在的引述(可长可短)

    For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<!doctype html>
<html>
<head>
    <title>abbr</title>
</head>
<body>
    <!--
        abbr - 定义一个缩写文本,建议在 abbr 的 title 属性中描述缩写的全称(abbr 是 abbreviation 的缩写)
    -->
    <abbr title="World Trade Organization">WTO</abbr>
</body>
</html>

4858美高梅 41

4858美高梅 42

 

 

 

九、dfn – 用于定义多个术语(dfn 是 defining instance 的缩写)
element/text/dfn.html

  1. cite

    cite 指明对某内容源的引用或参考。如:戏剧、脚本、图片的标题、歌曲、电影、照片、雕塑的名称、演唱会、音乐会、规范、报纸、法律文件(不能作为对人名的引用),字体以斜体显示

    你我都当过警务处长,自己人太懂礼貌,虚伪!这句话出自电影《寒战II》

  1. cite

    cite 指明对某内容源的引用或参考。如:戏剧、脚本、图片的标题、歌曲、电影、照片、雕塑的名称、演唱会、音乐会、规范、报纸、法律文件(不能作为对人名的引用),字体以斜体显示

    你我都当过警务处长,自己人太懂礼貌,虚伪!这句话出自电影《寒战II》

<!doctype html>
<html>
<head>
    <title>dfn</title>
</head>
<body>
    <!--
        dfn - 用于定义一个术语(dfn 是 defining instance 的缩写)
    -->
    <dfn>
        <abbr title="World Trade Organization">WTO</abbr>
    </dfn>
</body>
</html>

4858美高梅 43

4858美高梅 44

 

 

 

十、time – 定义日期、时间文本
element/text/time.html

  1. code

    code 定义计算机代码文本
    This is a piece of computer code: alert("这里有再次成为好人的路,Here is the way to be a good person again.")

  1. code

    code 定义计算机代码文本
    This is a piece of computer code: alert("这里有再次成为好人的路,Here is the way to be a good person again.")

<!doctype html>
<html>
<head>
    <title>time</title>
</head>
<body>

    <!--
        time - 定义日期、时间文本
          datetime - 定义元素的日期时间,如果不设置此属性则必须在 time 元素的内容中设置日期时间
          pubdate - bool 类型,标识 time 是否是发布日期。在 article 中则代表当前 article 的发布日期,否则代表整个 html 的发布日期
          valueAsDate - 只读属性,将 time 中的日期时间转换为 Date 对象,目前无浏览器支持
    -->

    <!--
        datetime 格式:YYYY-MM-DDThh:mm:ssTZD,示例:2008-02-16T13:50Z, 2008-02-16T13:50+08:00
          T - 代表时间,其前半部分为日期,后半部分为时间
          TZD - Z 或 +hh:mm 或 -hh:mm 用于标识时区,其中 Z 代表 0 时区
    -->

    <p>
        我的生日和 <time datetime="1980-02-14">情人节</time> 是同一天
    </p>
    <p>
        我每天 <time>9:00</time> 上班
    </p>

    <article>
        <p>我是 article 的内容</p>
        <footer>
            本 article 的发布日期是 <time datetime="2011-09-14" pubdate>昨天</time>
         </footer>
    </article>

    <p>
        <!--datetime 值中的“T”代表时间(“T”前面是日期,后面是时间)-->
        本 html 的发布日期是 <time datetime="2011-09-15T12:46:46" pubdate>今天</time>
    </p>

    <script type="text/javascript">
        // 目前无浏览器支持 valueAsDate
        alert(document.getElementsByTagName("time")[0].valueAsDate);
    </script>
</body>
</html>

4858美高梅 45

4858美高梅 46

 

 

 

1壹、code – 定义Computer代码片段(假若要求保留空格、换行等足以在 code
外面包一层 pre)
element/text/code.html

  1. del

    del 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    My favorite color is blue red!

  1. del

    del 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    My favorite color is blue red!

<!doctype html>
<html>
<head>
    <title>code</title>
</head>
<body>
    <!--
        code - 定义计算机代码片段(如果需要保留空格、换行等可以在 code 外面包一层 pre)
    -->
    <code>
        var x = 1;
    </code>
</body>
</html>

4858美高梅 47

4858美高梅 48

 

 

 

1二、var – 定义Computer代码中的变量,pre code var 能够组成使用
element/text/var.html

  1. ins

    ins 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    My favorite color is not blue, is red!

  1. ins

    ins 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    My favorite color is not blue, is red!

<!doctype html>
<html>
<head>
    <title>var</title>
</head>
<body>
    <figure>
        <pre>
            <code>
if (b)
    write("true");
            </code>
        </pre>
        <p>
            <!--
                var - 定义计算机代码中的变量,pre code var 可以结合使用
            -->
            如果变量 <var>b</var> 是 true,则写入“true”
        </p>
    </figure>
</body>
</html>

4858美高梅 49

4858美高梅 50

 

 

 

壹叁、samp – 由程序输出的以身作则文本(samp 是 sample 的缩写)
element/text/samp.html

  1. s

    s 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    You think I love you!

    As a matter of fact, I love her!

  1. s

    s 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

    You think I love you!

    As a matter of fact, I love her!

<!doctype html>
<html>
<head>
    <title>samp</title>
</head>
<body>
    <!--
        samp - 由程序输出的示例文本(samp 是 sample 的缩写)
    -->
    <p>
        执行代码后,程序会输出 <samp>我是由程序输出的信息</samp>
    </p>
</body>
</html>

4858美高梅 51

4858美高梅 52

 

 

 

1④、kbd – 定义由键盘输入的文件(kbd 是 keyboard 的缩写)
element/text/kbd.html

  1. dfn

    dfn 短语标签,定义一个项目。对其做语义上的区分,用 dfn 包围要定义的术语,而不是包围定义

    There is a item, txhy APP

  1. dfn

    dfn 短语标签,定义一个项目。对其做语义上的区分,用 dfn 包围要定义的术语,而不是包围定义

    There is a item, txhy APP

<!doctype html>
<html>
<head>
    <title>kbd</title>
</head>
<body>
    <!--
        kbd - 定义由键盘输入的文本(kbd 是 keyboard 的缩写)
    -->
    <p>
        关机请按 
        <kbd>
            <kbd>alt</kbd>
            +
            <kbd>F4</kbd>
        </kbd>
    </p>
</body>
</html>

4858美高梅 53

4858美高梅 54

 

 

 

一伍、sub – 定义下标文本(sub 是 subscript 的缩写),sup –
定义上标文本(sup 是 superscript 的缩写)
element/text/sub_sup.html

  1. mark

    mark 用于提起读者对特定文本片段的注意,对文本添加黄色背景。可以在样式表中添加 mark{ background: yellow;} 让浏览器实现同样的效果

    Do not forget to buy milk today.

  1. mark

    mark 用于提起读者对特定文本片段的注意,对文本添加黄色背景。可以在样式表中添加 mark{ background: yellow;} 让浏览器实现同样的效果

    Do not forget to buy milk today.

<!doctype html>
<html>
<head>
    <title>sub sup</title>
</head>
<body>

    <!--
        sub - 定义下标文本(sub 是 subscript 的缩写)
        sup - 定义上标文本(sup 是 superscript 的缩写)
    -->

    <p>告诉你,我是 <sub>下标</sub></p>
    <p>告诉你,我是 <sup>上标</sup></p>
</body>
</html>

4858美高梅 55

4858美高梅 56

 

 

 

1六、i – 定义斜体文本(i 是 italic 的缩写)
element/text/i.html

  1. small(分外普遍,又轻松用错或直接不选择)

    small 免责声明、注解、署名、版权信息、法律限制等(标记短语,不要标记过长文字),字体以小字号显示

    example: 京公网安备11000002000001号(百度备案号)

  1. small(分外遍布,又便于用错或直接不利用)

    small 免责声明、注解、署名、版权信息、法律限制等(标记短语,不要标记过长文字),字体以小字号显示

    example: 京公网安备11000002000001号(百度备案号)

<!doctype html>
<html>
<head>
    <title>i</title>
</head>
<body>
    <!--
        i - 定义斜体文本(i 是 italic 的缩写)
    -->
    <i>我是斜体文本</i>
</body>
</html>

4858美高梅 57

4858美高梅 58

 

 

 

一7、b – 定义粗体文本(b 是 bold 的缩写)
element/text/b.html

  1. pre

    pre 定义预格式文本
            给重要的人写信,一定要自己亲笔手写。
            别人认真问的问题,一定要认真回答。
    
  1. pre

    pre 定义预格式文本
            给重要的人写信,一定要自己亲笔手写。
            别人认真问的问题,一定要认真回答。
    
<!doctype html>
<html>
<head>
    <title>b</title>
</head>
<body>
    <!--
        b - 定义粗体文本(b 是 bold 的缩写)
    -->
    <b>我是粗体文本</b>
</body>
</html>

4858美高梅 59

4858美高梅 60

 

 

 

1捌、u – 定义下划线文本(u 是 underline 的缩写)
element/text/u.html

  1. q

    q 用于短的引述

    WWF’s goal is to: Build a future where people live in harmony with nature.We hope they succeed.

  1. q

    q 用于短的引述

    WWF’s goal is to: Build a future where people live in harmony with nature.We hope they succeed.

<!doctype html>
<html>
<head>
    <title>u</title>
</head>
<body>
    <!--
        u - 定义下划线文本(u 是 underline 的缩写)
    -->
    <u>我是下划线文本</u>
</body>
</html>

4858美高梅 61

4858美高梅 62

 

 

 

19、mark – 定义四个标识文本,用于醒目显示
element/text/mark.html

  1. sub

    sub 创建下标.下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的

    我们知道,H2O分解将生成H2和O2

  1. sub

    sub 创建下标.下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的

    我们知道,H2O分解将生成H2和O2

<!doctype html>
<html>
<head>
    <title>mark</title>
</head>
<body>
    <p>
        <!--
            mark - 定义一个标记文本,用于醒目显示
        -->
        我觉得咖啡的味道像 <mark>感冒冲剂</mark> 
    </p>
</body>
</html>

4858美高梅 63

4858美高梅 64

 

 

 

20、ruby – 定义东南亚文字,rt – 在 ruby 内用于为 ruby
所定义的文字注音或表明,rp – 在 ruby 内用来当浏览器不协理 ruby
时展现内定的剧情
element/text/ruby_rt_rp.html

  1. sup

    sup 创建上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的

    时间就像海绵里的水,挤一挤总会有的[1]

  1. sup

    sup 创建上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的

    时间就像海绵里的水,挤一挤总会有的[1]

<!doctype html>
<html>
<head>
    <title>ruby rt rp</title>
</head>
<body>

    <!--
        ruby - 定义东亚文字
        rt - 在 ruby 内用于为 ruby 所定义的文字注音或解释
        rp - 在 ruby 内用于当浏览器不支持 ruby 时显示指定的内容(不支持的话就顺序显示文本,FireFox 不支持,可以看效果)
    -->

    <ruby>
        王睿轩
        <rp>(</rp>
        <rt>wangruixuan</rt>
        <rp>)</rp>
   </ruby>
</body>
</html>

4858美高梅 65

4858美高梅 66

 

 

 

贰一、bdi – 从四周独立出一段文本,用于双向文本格式(bdi 是 bi-directional
isolate 的缩写)
element/text/bdi .html

  1. time

    We open at every morning.

    I have a date on .

  1. time

    We open at every morning.

    I have a date on .

<!doctype html>
<html>
<head>
    <title>bdi</title>
</head>
<body>
    <!--
        bdi - 从周围独立出一段文本,用于双向文本格式(bdi 是 bi-directional isolate 的缩写)
    -->

    <!--bdi 的解释是纯翻译,不知道具体干嘛用,目前也没浏览器支持-->
    <bdi />
</body>
</html>

4858美高梅 67

4858美高梅 68

 

 

 

22、bdo – 定义文本排列的大势(bdo 是 bi-directional override 的缩写)
element/text/bdo.html

  1. span

    span 同 div 同样,未有别的语义,只适合包围字词和短语。可对文书档案实行分离,然后增多适量的样式。

    just 受 cting 影响,生活变得有趣多了

  1. span

    span 同 div 同样,未有别的语义,只适合包围字词和短语。可对文书档案举办分离,然后增加适量的样式。

    just 受 cting 影响,生活变得有趣多了

<!doctype html>
<html>
<head>
    <title>bdo</title>
</head>
<body>
    <!--
        bdo - 定义文本排列的方向(bdo 是 bi-directional override 的缩写)
          dir - 文本排列方向,可能的值有:auto|ltr|rtl(dir 是 direction 的缩写)
    -->
    <bdo dir="rtl">123</bdo>
</body>
</html>

4858美高梅 69

4858美高梅 70

 

 

 

23、span – 未有其他语义
element/text/span.html

  1. var

    定义变量4858美高梅
    variable

  1. var

    定义变量
    variable

<!doctype html>
<html>
<head>
    <title>span</title>
</head>
<body>
    <!--
        span - 没有任何语义
          div 与 span 的区别:div 是块级(block-level)元素,span 是内联(inline)元素
    -->

        我没有任何语义

</body>
</html>

4858美高梅 71

4858美高梅 72

 

 

 

二肆、br – 定义2个换行符(br 是 blank row 的缩写)
element/text/br.html

<!doctype html>
<html>
<head>
    <title>br</title>
</head>
<body>
    <!--
        br - 定义一个换行符(br 是 blank row 的缩写)
    -->
    a
    <br />
    b
    <br />
    c
</body>
</html>

 

二伍、wbr – 定义换行的空子(wbr 是 word break 的缩写)
element/text/wbr.html

<!doctype html>
<html>
<head>
    <title>wbr</title>
</head>
<body>
    <!--
        wbr - 定义换行的时机(wbr 是 word break 的缩写)。IE 10 预览版不支持
          处理字符型语言时,显示一段没有空格的字符串时,无论其多长都不会换行,此时如果有 wbr 标签,则字符串会在浏览器宽度不够时主动换行
    -->
    <p>
        webabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcd
    </p>
    <p>
        <wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr>
    </p>
</body>
</html>

 

OK
[源码下载]

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有