溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么使用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"> </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的文本語義元素”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
