HTML5 新增文本標簽


一、mark 標記文本

  <mark> 標簽定義帶有記號的文本,表示頁面中需要突出顯示或高亮顯示的信息。

  通常在引用原文的時候使用 mark 元素,目的是引起當前用戶的注意。

  語法格式:

<p>床前明月<mark>光</mark></p>

  

二、progress 進度信息

  <progress> 標簽來標識任務的進度。這個進度可以 是不確定的,表示進度正在進行,不清楚還有多少進度沒有完成,也可以用 0 到 某個最大數字(如100)之間的數字來表示進度完成情況。

  語法:

<progress value="50" max="100"></progress>

  有以下兩個新增屬性:

  1、max:定義任務一共需要多少工作。可以不指定

  2、value:定義以及完成多少任務。

  Tips:value 的值必須大於0,小於或等於 max 的值,max的值必須大於0。

三、meter 刻度信息

  <meter> 標簽定義已知范圍或分數值內的標量,進度。例如:磁盤用量,查詢結果的相關性等。

  語法:

<meter value="" min="" low="" high="" max="" optimum=""></meter>

  常用屬性如下:

屬性名 說明
value   在元素中特別標示出來的實際值,默認為0,可以指定一個浮點小數值
min 設置規定范圍時,允許使用的最小值,默認為0,設定的值不能小於0
max 設置規定范圍時,允許使用的最大值。如果設定時,該屬性值小於min屬性的值,那么把min屬性值視為最大值,默認為1
low 設置范圍的下限值,必須小於或等於 hight 屬性的值。同樣,如果low 屬性值小於 min屬性的值,那么 把 min 屬性的值視為 low 屬性的值
high 設置范圍的上限值,如果該屬性值大於 max 的值,那么把max屬性的值視為 hight 屬性的值;如果該屬性值小於 low 的值,那么把low 屬性的值視為 hight 屬性的值
optimum                  設置最佳值,必須在 min 屬性和 max 屬性值之間,可以大於 hight 屬性值
form 設置 meter 元素所屬的一個或多個表單

 

四、time 時間信息

  <time> 標簽定義公歷的時間(24小時制)或日期,時間和時區偏移是可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼。

  語法:

<time datetime="2011-01-12">我的生日</time>

  time 標簽包含2個屬性:

  datetime:定義日期和時間,否則由元素的內容給定日期和時間。

  pubdate:定義 time 標簽中的日期和實際是文檔或 <article> 標簽的發布日期,為一個可選的布爾值屬性。

   案例:

<time datetime="2011-01-12T20:00Z">我的生日</time>
<time datetime="2011-01-12T20:00+09:00">我的生日</time>

    datetime 屬性中日期與時間之間要用 “T” 文字分隔,“T” 表示時間。

  時間加上 Z 文字表示給機器編碼時使用 UTC 標准時間,第二行加上了時差,表示向機器編碼另一地區時間,如果是編碼本地時間,則不需要添加時差。

五、 address 聯系文本

  <address> 標簽定義文檔或文章的作者、擁有者的練習信息。其包含文本通常顯示為斜體。

  語法:

<address>
  <p></p>
  <a href="" title=""></a>
</address>

    如果<address> 標簽位於<body> 標簽內,表示文檔聯系信息。

  如果<address> 標簽位於<article> 標簽內,表示文章的聯系信息。

  <address> 還可以用來描述電子郵箱或真實地址,也可用來描述與文章相關的聯系人的所有聯系信息。

六、bdi 隔離文本

  <bdi> 標簽允許設置一段文本,使其脫離其父元素的文本方向設置。

  語法:

<ul>
    <li>用戶 <bdi>admin</bdi>:70分</li>
</ul>

  Tips:目前,只有 Firefox 和 Chrome 瀏覽器支持此標簽。

七、wbr 換行斷點

  <wbr> 標簽定義在文本中的何處適合添加換行符。如果單詞太長,或者擔心瀏覽器會在錯誤的位置換行,那么可以使用此標簽來添加單詞換行點,避免瀏覽器隨意換行。

  語法:

<p>本站舊地址:<wbr>http://www.old_site.com/</wbr>,新地址為:<wbr>http://www.new_site.com/</wbr></p>

八、ruby 文本注釋

  <ruby> 標簽可以定義 ruby 注釋,即中文注音或字符。<ruby> 需要與 <rt> 標簽或 <rp> 標簽一同使用,<rt> 標簽和 <rp> 標簽必須位於 <ruby> 標簽內。

  案例:

<ruby>
	少<rt>shao</rt> 小 <rt>xiao</rt> 離 <rt>li</rt> 家 <rt>jia</rt> 老 <rt>lao</rt> 大 <rt>da</rt> 回 <rt>hui</rt> 
</ruby>

  <rt> 標簽定義字符(中文注音或字符)的解釋或發音。

  <rp> 標簽定義當瀏覽器不支持 ruby 元素的顯示內容。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM