HTML5 語義元素(二)文字內容
上一篇介紹的是關於頁面結構方面的語義元素,本篇介紹文字內容方面,包含:<bdi>、<details>、<summary>、<mark>、<output> 、<ruby>、<rt>、<rp>、<time>、<wbr>等語義元素。
目錄
1. 介紹
1.1 說明
1.2 分類
2. IE支援的
1. 介紹
1.1 說明
文字內容方面的語義元素,通常用於描述特殊的內容片段。可使用這些語義元素標註出重要資訊,如:名稱、評價、注意事項、日期等。
包含的元素有:<bdi>、<details>、<summary>、<mark>、<output> 、<ruby>、<rt>、<rp>、<time>、<wbr>等。
<bdi> :標註一段脫離父元素的文字方向的內容,採用系統預設的文字方向。
<details> :用於描述文件細節的部分。
<summary> :標註 <details> 元素的標題。
<mark> :標註突顯的文字。
<output> :標註一個將來會被填充內容的區域。
<ruby> :標註註釋(中文註音或字元)。
<rt> :在 <ruby > 元素中使用,定義字元(中文註音或字元)的解釋或發音。
<rp> :在 <ruby > 元素中使用,定義不支援 ruby 元素的瀏覽器所顯示的內容。
<time> :標註日期或時間。
<wbr> :標註一個單詞在後續空間無法全部容下時進行換行。
1.2 分類
IE瀏覽器各版本對這些元素支援情況各不相同,這裡分為IE支援的和不支援的來介紹:
IE支援的:<mark>、<output>、<
IE不支援的:<bdi>、<details>、<summary>、<wbr>。
2. IE支援的
IE瀏覽器支援的元素,在Chrome瀏覽器也得到了支援。
包含:<mark>、<output>、<ruby>、<rt>、<rp>、<time>。
2.1 <mark>:標註突顯的文字
瀏覽器最低版本:IE 9、Chrome 26
使用場景:重要的內容。
示例:
<p>中國的首都是<mark>北京</mark></p>
2.2 <output> :標註一個將來會被填充內容的區域
瀏覽器最低版本:IE 9、Chrome 33
使用場景:顯示計算結果、JavaScript返回值等的一個區域。
屬性:
for :關聯的元素ID。若有多個,以空格分隔。
form :關聯的表單ID。若在一個form表單裡,可不用賦值此屬性。
示例:
<form id="form" oninput="result.value=userName.value"> <input type="text" name="userName"/> <output name="result"></output> </form>
2.3 <ruby>、<rt>、<rp> :標註註釋(中文註音或字元)
<ruby> :標註註釋(中文註音或字元)。<詳細資料>
<rt> :在 <ruby > 元素中使用,定義字元(中文註音或字元)的解釋或發音。<詳細資料>
<rp> :在 <ruby > 元素中使用,定義不支援 ruby 元素的瀏覽器所顯示的內容。<詳細資料>
瀏覽器最低版本:IE 5、Chrome 5
使用場景:中文拼音、日文假名。
示例:
<h5>中文拼音</h5> <p> <ruby>中<rt>zhong</rt>國<rt>guo</rt></ruby> </p> <h5>日文假名</h5> <p> <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> </p>
2.4 <time>:標註日期或時間
瀏覽器最低版本:IE 9、Chrome 33
使用場景:新聞、部落格的發表日期。
示例:
建立日期:<time datetime="2016-04-15T12:30" >2016/04/15 12:30</time>
屬性:
datetime {datetime} :設定此元素的日期和時間。<time>元素顯示日期時間的格式有可能多樣,同樣的一個時間,有些顯示的文字為X分鐘前、有些為英文月份,但實際的日期時間只需儲存此屬性裡。
示例:
<p>建立日期:<time datetime="2016-04-15 12:30" >2016/04/15 12:30</time></p> <p>建立日期:<time datetime="2016-04-15 12:30" >30分鐘前</time></p> <p>建立日期:<time datetime="2016-04-15 12:30" >April 15</time></p>
3. IE不支援的
IE瀏覽器不支援的元素,在Chrome瀏覽器也得到了支援。
包含:<bdi>、<details>、<summary>、<wbr>。
3.1 <bdi>:標註一段脫離父元素文字方向的內容,採用系統的預設文字方向
瀏覽器最低版本:IE 不支援、Chrome 16
使用場景:阿拉伯語、波斯語等從右往左讀的文字。
<p>div顯示文字方向:rtl</p> <div dir="rtl"> <p>中國首都是北京!</p> <p><bdi>中國首都是北京!</bdi></p> </div>
3.2 <summary>、<details> :標註可展開、閉合的內容塊
<details>:用於描述文件細節的部分。<詳細資料>
<summary>:表示包含 <details> 元素的標題。<詳細資料>
瀏覽器最低版本:IE 不支援、Chrome 12
使用場景:商品詳情、文件細節。
示例:
<summary> 2016-04-18天氣情況 <details> <p>晴轉多雲</p> <p>13~25°</p> </details> </summary>
3.3 <wbr>:標註一個單詞在後續空間無法全部容下時進行換行
瀏覽器最低版本:IE 不支援、Chrome 1
使用場景:比較長的英文單詞。
示例:
<h5>不含有wbr元素:</h5> <p>Netscape在最初將其指令碼語言命名為LiveScript,後來Netscape在與Sun合作之後將其改名為JavaScript。</p> <h5>含有wbr元素:</h5> <p>Netscape在最初將其指令碼語言命名為LiveScript,後來Netscape在與Sun合作之後將其改名為Java<wbr>Script。</p>
相關推薦
HTML5 語義元素(二)文字內容
上一篇介紹的是關於頁面結構方面的語義元素,本篇介紹文字內容方面,包含:<bdi>、<details>、<summary>、<mark>、<output> 、<ruby>、<rt>、<rp>、<time&g
jquery內容過濾選擇器:內容過濾選擇器它是根據元素內部文字內容進行選中。
1.1. 內容過濾選擇器 內容過濾選擇器它是根據元素內部文字內容進行選中。 :Contains(text):匹配包含給定文字的元素 :Empty:匹配所有不包含子元素或者文字的空元素 :Has(se
css處理元素中文字內容過長的情況
應用:在專案中經常遇到列表展示時文字內容過長而無法正常顯示的情況。 display:block;
HTML5 語義元素(一)頁面結構
本篇主要介紹HTML5增加的語義元素中關於頁面結構方面的,包含: <article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<main>、<nav>、&
HTML5的文檔結構和新的語義元素
his 發布 浮動 style 自己 htm5 ctype -1 標準模式 學習前端的東西似乎沒有什麽捷徑,就是直接上手擼就完了 本文目標:(熟知) 1、創建基本HTML5文檔結構 2、使用新的語義元素來布局頁面 下面直接上代碼: <!DOCTYPE html>
HTML5語義化元素
eight 放置 footer viewport order 上下文 人員 頁眉 cti 語義化元素:有意義的元素。 對語義化的理解: 正確的標簽做正確的事情; HTML5語義化元素讓頁面內容結構化清晰; 便於開發人員閱讀,理解,維護; 搜索引擎爬蟲可以依賴語義化元素來確
移動端html5頁面長按實現高亮全選文字內容的相容解決方案
最近需要給html5的WebAPP在頁面上實現一個複製功能:使用者點選長按文字會全選文字並彈出系統“複製”選單,使用者可以點選“複製”進行復制操作,然後貼上到AppStore搜尋對應的應用。之所以不是採用連結形式直接跳轉到AppStore對應應用是為了通過使用者的主動輸入關鍵詞搜尋給推廣的企業App
Java實現二維碼新增文字內容
import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.Shape; import java.awt.
jquery 如何獲取標籤本身的文字內容,不包含子元素
<li><a href="http://gz.ihk.cn/esf/houselist/?lp=保利花園" ><strong id="aaaa">保利花園<b>海珠 工業大道中</b></strong></a&
Ubuntu基礎命令(二)--檢視文字內容
cat 檔名 顯示文字檔案內容,可支援多個檔名作為引數 cat -n 檔名 用以顯示行號 more 檔名 一頁一頁的顯示文字內容 空格 向下翻動一頁 enter 向下翻動一行 Q 退出 head -n 行數 檔名 用於顯示文字開頭定義的行數內容,允許多檔案同時顯示
二維碼框架Zxing實現文字內容二維碼
一 、引入Zxing依賴 <dependency> <groupId>com.google.zxing</groupId> <
HTML5學習 (二 用JavaScript在canvas裡新增內容)
1、在canvas裡新增內容,效果如底圖。 <script text="text/javascript">var c = document.getElementById("myCanva
C#操作Word總結(二)——設定文件格式並新增文字內容、超連結、新增圖片
設定文件格式並新增內容 #region 設定文件格式並新增文字內容、超連結 /// <summary> /// 設定文件格式並新增內容 /// </summary> /// <param name="filePath">檔名&
點選掃一掃二維碼返回文字內容
<uses-permission android:name="android.permission.INTERNET"></uses-permission> <
js獲得元素文字內容
<script type="text/javascript">window.onload = function(){ //抓取元素var box = document.getElementById("box") //新增點選事件box.onclick = fun
電力項目七--js控制文字內容過長的顯示
style property stat center -- value bsp blog station 當文本框中文字內容過長時,需要調整顯示的樣式 如上圖所示的樣式 對應的代碼為: <div id="showInfomation" style="visibi
HTML5之元素與標簽結構
頁面 lib clas 技術 產生 .com 相關 blog sid HTML5語法 新增及刪除標簽 新增及廢除屬性 全局屬性 1 HTML5語法 2 新增及刪除標簽 <section> 標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳
HTML5-語義化標簽
數字 ace 版權 頁面 have ont 必須 menu ... article -- 解釋 article標簽裝載顯示一個獨立的文章內容。例如一篇完整的論壇帖子,一則網站新聞,一篇博客文章等等,一個用戶評論等等 artilce可以嵌套,則內層的artilce對外層的ar
父元素給定背景,子元素添加內容時背景改變了,怎嘛解決?
end clas round 問題 add bsp -- class mar <div class="mui-scroll agree-main"> //用agree-main加了背景色 <div class="mui-content" sty
html5-塊元素和內聯元素
html 自動 .so 塊元素 nbsp 自動換行 char 元素 換行 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title