亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML 5新增的元素是哪些

發布時間:2021-10-12 16:13:49 來源:億速云 閱讀:103 作者:柒染 欄目:web開發

這期內容當中小編將會給大家帶來有關HTML 5新增的元素是哪些,文章內容豐富且以專業的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。

對于HTML的渲染,瀏覽器一直停留在1999年的水平。為此,HTML 5是一個實用主義方案,這樣不僅可以繼續處理這么多年來散落在世界各個角落的HTML,也可以讓瀏覽器廠商更容易添加新特性。這就叫degrade gracefully(優雅降級)。讓我們來看看HTML 5增加的一些新元素。

HTML 5結構元素

這真是大快人心。目前,我們定義結構只能通過一個“***”的div, 試圖通過設置它的特性id的值如header, footer, sidebar等來分別表達頭部,底部或者側欄等。有了它們,代碼編寫者不再需要為id的命名費盡心思,對于手機、閱讀器等設備更有語義的好處。HTML 5增加了新的結構元素來表達這些最常用的結構:

◆section: 這可以表達書本的一部分或一章,或者一章內的一節

◆header: 頁面主體上的頭部。并非head元素

◆footer: 頁面的底部(頁腳),可以是一封郵件簽名的所在

◆nav: 到其他頁面的鏈接集合

◆article: 諸如blog, 雜志,綱要等之中的一條獨立記錄。

舉個例子,一個blog的首頁,用HTML 5寫的話,可以是這樣(有省略):

<<!DOCTYPE HTML> <HTML>   <head>     <title>realazy</title>   </head> <body> <header>      <h2>Realazy</h2></header> <section>       <article>       <h3><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標題</a></h3>  <p>內容在此...(省略n字)</p>     </article>     <article>     <h3><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標題2</a></h3>     <p>內容2在此...(省略n字)</p>     </article>     ...     </section>   <footer> nav>     <ul>     <li><a href="http://realazy/blog" mce_href="http://realazy/blog">導航1</a></li>       <li><a href="http://realazy/blog" mce_href="http://realazy/blog">導航2</a></li>       ...     </ul>     </nav>   <p>&copy; 2007 realazy</p>     </footer>   </body> </HTML> 塊級block的語義元素

HTML還增加以下三個塊級元素:

◆aside

◆figure/code>

◆dialog

aside可以用以表達注記、貼士、側欄、摘要、插入的引用等諸如作為補充主體的內容。比如這樣表達blog的側欄:

<aside>   <h4>***文章</h4>   <ul>   <li><a href="http://realazy.org/blog/" mce_href="http://realazy.org/blog/">文章標題</a></li>     ...   </ul> </aside>

figure元素表示一個有說明的塊級圖片。比如:

<figure>   <legend>這是圖片的說明</legend>   <img alt="圖片可替換文本" src="/path/to/img.png" mce_src="/path/to/img.png" /> </figure>dialog元素用于表達人們之間的對話。在HTML 5中,dt用于表示說話者,而dd則用來表示說話者的內容。如:

<dialog>   <dt>佛</dt>   <dd>色即是空</dd>   <dt>悟空</dt>   <dd>

我現在需要點空……行內(inline)的語義元素,m元素用來標記一些不是那么需要著重強調的文本。現在尚有爭議,可能最終會改為mark.

time元素如其名,用來表達時間。它需要一個datetime的特性來標明機器能夠認識的時間,如:

<time datetime="2008-08-08T20:08:08">2008年8月8日晚上8時8分8秒</tiem>meter元素表達特定范圍內的數值。可用于薪水、百分比、分數等。比如:

很遺憾地告訴你,我只有<meter>150cm</meter>它還有6個特性來表達各方面的含義,比如:

<p>您的分數是:<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p>

還有一個progress,也是義如其名,用以表達進度:

目標完成度:<progress value="40" max="100">40%</progress>嵌入多媒體

新增video和audio元素。顧名思義,分別是用來插入視頻和聲音的。至于格式,交由瀏覽器實現,HTML再也不需要特別的代碼去播放特定的格式。就像img一樣,不管是png, jpg還是gif都可以顯示。值得注意的是,它們可以包含內容。比如,可以把歌詞放到某段歌曲中去:

<audio src="誰人伴你睡.mp3" mce_src="誰人伴你睡.mp3">   <p>淚枯干</p>   <p>難忍怎么委屈自已</p>   <p>曾經有一刻悲與喜</p>   ... </audio>

交互性

HTML 5同時也叫Web Applications 1.0, 因此也進一步發展交互能力。這些標簽就是為提高頁面的交互體驗而生:

details

datagrid

menu

command

details用來表示一段具體的內容,但是內容默認可能不顯示,通過某種手段(如點擊)與legend交互才顯示出來。這跟現在各種通過JavaScript隱藏一段內容,在點擊后才顯示出來的做法有些類似。比如:

一句話記錄生活中的點點滴滴, <details>   <legend>更多</legend>   <p>交流與分享,拉近你和朋友,支持 MSN/GTalk/QQ、短信、手機 WAP</p> </details>它可以有一個open的特性,用來顯示細節與否。

datagrid用來控制數據,可以由用戶或者腳本來更新。

menuHTML 2就存在了,不過HTML 4把它廢棄了。HTML 5廢物利用,并在期內加上command元素。

上述就是小編為大家分享的HTML 5新增的元素是哪些了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

阜宁县| 金昌市| 安阳县| 普格县| 澎湖县| 林周县| 靖安县| 禹城市| 壶关县| 织金县| 平顺县| 万宁市| 报价| 铜川市| 洛阳市| 文安县| 海盐县| 德令哈市| 连江县| 南部县| 温宿县| 塔河县| 中阳县| 浮梁县| 泰顺县| 利辛县| 鄱阳县| 霍州市| 达尔| 新宁县| 正阳县| 阿拉善右旗| 金寨县| 邯郸县| 永昌县| 志丹县| 宜黄县| 锦屏县| 东阳市| 衡阳县| 镇巴县|