html5頁面結(jié)構(gòu)的實(shí)現(xiàn)方法

本篇內(nèi)容主要講解“html5頁面結(jié)構(gòu)的實(shí)現(xiàn)方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html5頁面結(jié)構(gòu)的實(shí)現(xiàn)方法”吧!

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、江孜網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

語義元素介紹

HTML5標(biāo)準(zhǔn)增加很多新的語意元素，若按種類來區(qū)分，有頁面結(jié)構(gòu)上的、文本內(nèi)容上的、表單里的等等。

而這里主要介紹頁面結(jié)構(gòu)上的新元素。

何謂語意元素

簡(jiǎn)單來講，語義元素就是為元素(標(biāo)簽)賦予某種意義，元素的名稱就是元素要表達(dá)的意思。

如<header>表示頁眉、<footer>表示頁腳。

特點(diǎn)

①易于維護(hù)：使用語義元素將會(huì)有更清晰的頁面結(jié)構(gòu)信息，易于頁面的后續(xù)維護(hù)。不需要再查看代碼：找到div再找到具體的ClassName。

②無障礙性：有助于屏幕閱讀器和其他輔助工具的讀取。

③利于搜索引擎優(yōu)化：搜索機(jī)器人在檢查一些HTML5的語義元素后，可以收集其索引頁面的信息。

原先界面布局

在頁面的布局中，<div>是一個(gè)非常多見的元素，配上一定的樣式就可應(yīng)用于特定場(chǎng)景，如頁眉、側(cè)邊欄、導(dǎo)航欄等等。

為了方便維護(hù)，設(shè)計(jì)人員常給這些<div>賦值具有特殊名稱的ClassName(樣式類名)或ID。

例如一個(gè)表示頁眉的<div>元素，其ClassName或ID可以為page-header、header等。

示例：

 

頁面結(jié)構(gòu)語意元素

說明

頁面結(jié)構(gòu)的語意元素多用于頁面的整體布局，大多數(shù)為塊級(jí)元素，只是代替<div>使用，如：頁眉、頁腳等等。

而其自身沒有特別的樣式，還是需要搭配Css使用。

詳細(xì)介紹

<header>：定義網(wǎng)頁或文章的頭部區(qū)域?？砂琹ogo、導(dǎo)航、搜索條等內(nèi)容。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①當(dāng)用于標(biāo)注網(wǎng)頁的頁眉時(shí)，可包含logo、導(dǎo)航、搜索條等信息。

②當(dāng)用于標(biāo)注內(nèi)容的標(biāo)題時(shí)，只有當(dāng)標(biāo)題還附帶其他信息時(shí)才考慮用<header>，一般情況下用<h2>標(biāo)注標(biāo)題即可。

<main> ：定義網(wǎng)頁中的主體內(nèi)容。

瀏覽器最低版本：IE 不支持、Chrome 35

<footer>：定義網(wǎng)頁或文章的尾部區(qū)域?？砂鏅?quán)、備案等內(nèi)容。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①作為網(wǎng)頁的頁腳時(shí)，通常包含網(wǎng)站版權(quán)、法律限制及鏈接等內(nèi)容。

②作為文章的頁腳時(shí)，通常包含作者相關(guān)信息。

<nav>：標(biāo)注頁面導(dǎo)航鏈接。包含多個(gè)超鏈接的區(qū)域。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①一個(gè)頁面可包含多個(gè)<nav>元素，如頁面的導(dǎo)航和相關(guān)文章推薦等。

②<footer>區(qū)域里的聯(lián)系信息、認(rèn)證信息可不必包含在<nav>元素里。

<section>：通常標(biāo)注為網(wǎng)頁中的一個(gè)獨(dú)立區(qū)域。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①可作為網(wǎng)頁中的獨(dú)立區(qū)域，如文章中的一小節(jié)。

<article>：完整、獨(dú)立的內(nèi)容塊；里面可包含獨(dú)立的<header>、<footer>等結(jié)構(gòu)元素。如新聞、博客文章等獨(dú)立的內(nèi)容快(不包括評(píng)論或者作者簡(jiǎn)介)。

瀏覽器最低版本：IE 9、Chrome 5

<aside>：定義周圍主內(nèi)容之外的內(nèi)容塊。如：注解。

瀏覽器最低版本：IE 9、Chrome 5

<figure>：代表一段獨(dú)立的內(nèi)容, 經(jīng)常與<figcaption>(表示標(biāo)題)配合使用, 可用于文章中的圖片、插圖、表格、代碼段等等。

瀏覽器最低版本：IE 9、Chrome 8 <figcaption>：定義 <figure> 元素的標(biāo)題。

瀏覽器最低版本：IE 9、Chrome 8

示例圖

舊版瀏覽器支持

IE8以上

瀏覽器對(duì)不認(rèn)識(shí)的元素會(huì)當(dāng)做內(nèi)聯(lián)元素展示。而頁面相關(guān)的語義元素都是塊級(jí)元素，所以只需設(shè)置不支持這些元素的瀏覽器將它們顯示為塊級(jí)元素即可。

在樣式中加入以下代碼：

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
    display: block;
}

IE8及IE8以下

IE8及IE8以下的瀏覽器不支持對(duì)無法識(shí)別的元素應(yīng)用樣式。

所以要通過JS創(chuàng)建這些語義元素，并附加基本的樣式。

以header為例

<script>
    document.createElement('header');
</script>

應(yīng)用外部文件

這些繁瑣創(chuàng)建已經(jīng)有雷鋒寫好了，只需在舊版的IE上加載就行。

<!&ndash;[if lt IE9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]&ndash;>

到此，相信大家對(duì)“html5頁面結(jié)構(gòu)的實(shí)現(xiàn)方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前名稱：html5頁面結(jié)構(gòu)的實(shí)現(xiàn)方法
本文網(wǎng)址：http://bm7419.com/article26/jjehjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、定制開發(fā)、企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)