温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么使用HTML5的文本语义元素

发布时间:2021-11-18 13:27:32 来源:亿速云 阅读:147 作者:iii 栏目:web开发

本篇内容主要讲解“怎么使用HTML5的文本语义元素”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用HTML5的文本语义元素”吧!

文本语义元素 - 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

示例

1、a - 用于定义超链接(a 是 anchor 的缩写)element/text/a.html

<!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>     <span id="webabcd">i am webabcd</span> </body> </html>

2、em - 定义被强调的文本(一般浏览器会渲染斜体)(em 是 emphasis 的缩写)element/text/em.html

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

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

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

4、small - 定义小号文本element/text/small.html

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

5、s - 定义不再精确或不再相关的文本(s 是 strike 的缩写)element/text/s.html

<!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>

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

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

7、q - 用于定义一段引用的内容(短内容)(q 是 quote 的缩写)element/text/q.html

<!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>

8、abbr - 定义一个缩写文本,建议在 abbr 的 title 属性中描述缩写的全称(abbr 是 abbreviation 的缩写)element/text/abbr.html

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

9、dfn - 用于定义一个术语(dfn 是 defining instance 的缩写)element/text/dfn.html

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

10、time - 定义日期、时间文本element/text/time.html

<!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>

11、code - 定义计算机代码片段(如果需要保留空格、换行等可以在 code 外面包一层 pre)element/text/code.html

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

12、var - 定义计算机代码中的变量,pre code var 可以结合使用element/text/var.html

<!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>

13、samp - 由程序输出的示例文本(samp 是 sample 的缩写)element/text/samp.html

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

14、kbd - 定义由键盘输入的文本(kbd 是 keyboard 的缩写)element/text/kbd.html

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

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

<!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>

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

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

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

<!doctype html> <html> <head>     <title>b</title> </head> <body>     <!--          b - 定义粗体文本(b 是 bold 的缩写)      -->     <b>我是粗体文本</b> </body> </html>

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

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

19、mark - 定义一个标记文本,用于醒目显示element/text/mark.html

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

20、ruby - 定义东亚文字,rt - 在 ruby 内用于为 ruby 所定义的文字注音或解释,rp - 在 ruby 内用于当浏览器不支持 ruby 时显示指定的内element/text/ruby_rt_rp.html

<!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>

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

<!doctype html> <html> <head>     <title>bdi</title> </head> <body>     <!--          bdi - 从周围独立出一段文本,用于双向文本格式(bdi 是 bi-directional isolate 的缩写)      -->          <!--bdi 的解释是纯翻译,不知道具体干嘛用,目前也没浏览器支持-->     <bdi /> </body> </html>

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

<!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>

23、span - 没有任何语义element/text/span.html

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

24、br - 定义一个换行符(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>

25、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>

到此,相信大家对“怎么使用HTML5的文本语义元素”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI