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