溫馨提示×

溫馨提示×

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

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

Html 5 新語義標(biāo)簽

發(fā)布時間:2020-08-10 14:45:13 來源:網(wǎng)絡(luò) 閱讀:270 作者:Hello_Prudence 欄目:移動開發(fā)

HTML5  新標(biāo)簽

======================================================================

1.DOCTYPE

   <!DOCTYPE html>


2.<meta>---字符編碼方式

   <meta charset="utf-8">


3.<link>

   <link rel="stylesheet" href="file.css">


4.<script>

    <script src="file.js"></script>


=========================================================================


引入語義元素


頁面標(biāo)題---<header></header>

主導(dǎo)航區(qū)---<nav></nav>

側(cè)邊欄---<aside></aside>

主內(nèi)容區(qū)---<main></main>

頁腳---<footer></footer>


========================================================================


新增的標(biāo)簽

  

   1.區(qū)塊標(biāo)簽


artile ---- 定義文章,表示包含于一個文檔、頁面、應(yīng)用程序或網(wǎng)站中的一段獨立的內(nèi)容,                    它能夠獨立的被發(fā)布或重新使用。


<article>

   <h2>Internet Explorer 9</h2>

 <p>Windows InternetExplorer.....</p>

</article>


section --- 一個主題性的內(nèi)容分組,通常包含一個頭部(header),可能還會有一個尾                       (footer)。

     

屬性:cite : url; //假如section 摘自 web 的話


nav --- 定義導(dǎo)航鏈接的部分

 如果文檔中有“前后”按鈕,則應(yīng)該把它放到<nav>標(biāo)簽中。

                ***搜索引擎或屏幕閱讀器會根據(jù)nav標(biāo)簽確定網(wǎng)站的內(nèi)容,不是任何一組超鏈接都                      適合放在nav標(biāo)簽中。


aside --- 定義其所處內(nèi)容之外的內(nèi)容,非主要內(nèi)容,是主要內(nèi)容的補充,具有獨立性。

 可用作文章的側(cè)欄。


**常用位置:

  -頁面?zhèn)冗厵?/p>

      -廣告

  -友情鏈接

  -文章引語(內(nèi)容摘要)


header

footer 


   2.內(nèi)容分組標(biāo)簽


figure --- 規(guī)定獨立的流內(nèi)容(圖像、圖表、照片、代碼等等)

          figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān),但如果被刪除,則不應(yīng)對文檔流產(chǎn)生影響。


figcaption --- 定義 figure 元素的標(biāo)題。

                   figcaption 應(yīng)為 figure 元素的第一個或最后一個子元素


        <figure>

    <figcaption> caption </figcation>

                     <img src=" " /> <video />

</figure>


main --- 顯示頁面的主題內(nèi)容。

每個頁面只能包含一個main標(biāo)簽。

main標(biāo)簽中不包含網(wǎng)站標(biāo)題、logo、主導(dǎo)航、版權(quán)聲明等信息。


****************************區(qū)塊標(biāo)簽和內(nèi)容分組標(biāo)簽為塊標(biāo)簽


   3.文本級別標(biāo)簽


time --- 表示一個日期,或一個時間 (**可以被搜索引擎、屏幕閱讀器等方便的識別)

    屬性: datetime="2016-02-13"(固定格式)


                <header>

    <h4>*****</h4>

    <time datetime="2016-3-21">一天前</time>

</header>


            #### 如果定義了 datetime 屬性,則標(biāo)簽中間的文本沒有固定格式,人可以識別就好

                 如果沒有定義 datetime 屬性,則文本需要一個固定格式,以便被識別。


           常用的time格式:

                Html 5  新語義標(biāo)簽


        i  --- HTML4 中: 修飾文字樣式的,表示為 斜體

               HTML5 中: 表示強(qiáng)調(diào)不同的情緒或聲音,也可以表示技術(shù)術(shù)語、生物分類、來自另一                           種語言的成語或習(xí)語、一個想法等等。

           

<p><i>cat</i>是一種可愛的動物。 </p>

<p><i> Thank god.</i> 項目終于按時交付了。</p>

            

        b  --- HTML4 中: 修飾文字樣式的,表示為 粗體

                HTML5 中: 表示文檔中的關(guān)鍵字、商品名稱等


<p>

  該地出產(chǎn)的咖啡:

  <b>星巴克加長咖啡豆</b>,<b>濃縮烘焙</b>

</p>

  

        em --- emphasis  強(qiáng)調(diào);標(biāo)簽中的內(nèi)容是用來強(qiáng)調(diào)的重要內(nèi)容,顯示 斜體 文本

<p><em>cat</em>是一種可愛的動物。 </p>


strong --- 表示非常重要、嚴(yán)重性、或內(nèi)容的緊迫性。 顯示 粗體 。


********************文本級別標(biāo)簽是內(nèi)聯(lián)標(biāo)簽


向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI