通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的主要語義標(biāo)簽及應(yīng)用實例(文件)
【正文】 頂部，但是其實也是可以把它放在頁面的左側(cè)、 右側(cè)甚至頁面的底部，因為所有的語義標(biāo)簽只是定義該標(biāo)簽本身在 Web 頁面中的角色，而不是在頁面中最終的物理擺放位置。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 6/22 頁 6 HTML 5 中的 footer語義標(biāo)簽元素的應(yīng)用示例 （ 1） footer標(biāo)簽的主要功能 它與 header標(biāo)簽元素類似，它定義頁面的某些部分的頁腳。 （ 3）在 HTML4 中實現(xiàn) footer標(biāo)簽相同效果的代碼示例 !DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns= head meta charset=gb2312 titleHTML5 之前的頁腳示例 /title style type=text/css body{ backgroundcolor:9ACDCD。 webkitboxpack:center。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 7/22 頁 7 liststyle:none。如下頁面中的標(biāo)簽示例： !DOCTYPE html head meta charset=utf8 titlefooter 元素示例 /title style type=text/css body{ backgroundcolor:9ACDCD。 webkitboxpack:center。 liststyle:none。 （ 2） nav標(biāo)簽應(yīng)用要點 它只應(yīng)該應(yīng)用于導(dǎo)航條超鏈接的定義中，而不應(yīng)該將此標(biāo)簽元素應(yīng)用于普通的超鏈接的定義中。 （ 2） article標(biāo)簽的應(yīng)用示例 html body article h5HTML5 項目 /h5 pHTML5 是用于修正現(xiàn)在 html 的下一個網(wǎng)頁規(guī)范 /p pHTML5 是萬維網(wǎng)結(jié)構(gòu)方面的標(biāo)準(zhǔn) /p /article /body /html article標(biāo)簽是可以嵌套 article標(biāo)簽的 HTML 5 中的 section語義標(biāo)簽元素應(yīng)用示例 （ 1） section標(biāo)簽的主要功能 此標(biāo)簽元素表示文檔或應(yīng)用程序的一部分，最終實現(xiàn)對內(nèi)容的分塊。應(yīng)用此標(biāo)簽的一個示例就是廣告塊或?qū)?nèi)容的注釋說明文字。 （ 2） address標(biāo)簽的應(yīng)用示例 footer div address a title=XXXX 博客 href=鏈接 XXXX 博客 /a /address div /footer （ 3） footer、 time與 address等標(biāo)簽相互結(jié)合使用的示例 !DOCTYPE html head meta charset=utf8 titlefooter、 time 與 address 結(jié)合使用 /title /head body footer div address a title=文章作者： XXXXX href= XXXXX/a /address 發(fā)表于 time datetime=202012242020 年 12 月 24 日 /time /div /footer /body /html 語義標(biāo)簽在頁面布局設(shè)計中的一般應(yīng)用順序 瀏覽器對頁面中的各個結(jié)構(gòu)化標(biāo)簽的解析順序 Web 頁面在打開后，首先顯示出由 header標(biāo)簽所標(biāo)識的標(biāo)題文字信息 —— 在該楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 15/22 頁 15 header標(biāo)簽內(nèi)可以使用 hgroup標(biāo)簽包含多個標(biāo)題的標(biāo)題文字信息；然后顯示出由 nav標(biāo)簽所定義的導(dǎo)航條；接著顯示由 article標(biāo)簽所定義的獨立的區(qū)塊信息 —— article標(biāo)簽自身將具有一個 header標(biāo)簽以及一個 section標(biāo)簽元素，該 section標(biāo)簽元素也可以具有自己的 header標(biāo)簽；最后顯示由 footer標(biāo)簽定義的頁腳文字信息。 （ 2）而在由 nav標(biāo)簽元素定義的導(dǎo)航條則是一個由無序列表并包含有三個列表項目，而每個列表項目都是一個指向站點上虛擬頁面的超鏈接所構(gòu)成。 * { fontfamily: Lucida Sans, Arial, Helvetica, sansserif。 margin: 0px。 fontstyle: italic。 clear: right。 } nav ul li { display: inline。 } nav ul li a { color: EFD3D3。 } nav ul li a:hover { color: fff。 textshadow: 2px 2px 5px 333。 } footer p { textalign: center。 } 將上面的 CSS 樣式定義保存為 文件，并與 HTML 頁面放在相同的文件目錄中。All rights reserved，版權(quán)所有 /p /footer /body /html 該頁面在 IE10 瀏覽器中的預(yù)覽的效果 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 21/22 頁 21 該頁面在 Google 瀏覽器中的預(yù)覽的效果 在不支 持 CSS3 的瀏覽器中的預(yù)覽的效果 由于在 CSS 中的“ article header h1”規(guī)則中使用了 CSS3 的 textshadow 屬性，如果訪問者的 Web 瀏覽器不支持這些新屬性，它們就會被忽略，將
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1