電子課件單元3 元素分類與語(yǔ)義化標(biāo)簽

1、 內(nèi)容可修改電子課件單元3 元素分類與語(yǔ)義化標(biāo)簽標(biāo)簽、標(biāo)簽及模塊命名規(guī)范標(biāo)簽和標(biāo)簽在網(wǎng)頁(yè)制作過(guò)程過(guò)中，為了方便CSS樣式的控制，需要把網(wǎng)頁(yè)內(nèi)容劃分一些區(qū)域。標(biāo)簽和標(biāo)簽標(biāo)簽和標(biāo)簽沒(méi)有特定的含義，他們的作用就是用來(lái)劃分區(qū)域的，它們就相當(dāng)于一個(gè)容器，21 公共通知 軟考報(bào)名通知 四六級(jí)報(bào)名通知 寒假放假通知 新聞動(dòng)態(tài) 我院被評(píng)為科研先進(jìn)集體 我院開(kāi)展招生研討會(huì) 我院召開(kāi)課程思政啟動(dòng)會(huì) 第二段代碼標(biāo)簽和標(biāo)簽 公共通知 軟考報(bào)名通知 四六級(jí)報(bào)名通知 寒假放假通知 新聞動(dòng)態(tài) 我院被評(píng)為科研先進(jìn)集體 我院開(kāi)展招生研討會(huì) 我院召開(kāi)課程思政啟動(dòng)會(huì) 第一段代碼標(biāo)簽和標(biāo)簽divdivspanspanspanspan

2、spanspanspanspanspan標(biāo)簽一般用來(lái)劃分比較大的區(qū)域，其內(nèi)部可以放入任何其他的標(biāo)簽。標(biāo)簽可以用來(lái)劃分一個(gè)小的區(qū)域，其內(nèi)部一般只包含文本，不放其他標(biāo)簽。標(biāo)簽和標(biāo)簽標(biāo)簽一般用來(lái)劃分比較大的區(qū)域，其內(nèi)部可以放入任何其他的標(biāo)簽。標(biāo)簽可以用來(lái)劃分一個(gè)小的區(qū)域，其內(nèi)部一般只包含文本，不放其他標(biāo)簽。示例這是一段文本網(wǎng)頁(yè)模塊命名規(guī)范劃分網(wǎng)頁(yè)結(jié)構(gòu)時(shí), div或span一般配合class屬性或id屬性使用，以區(qū)分網(wǎng)頁(yè)不同的模塊，給模塊命名時(shí)應(yīng)該注意模塊的命名規(guī)范。“不規(guī)范”網(wǎng)頁(yè)模塊命名規(guī)范（1）避免使用中文字符命名（例如我們不能定義class=導(dǎo)航欄）。（2）不能以數(shù)字開(kāi)頭命名（例如不能定義cla

3、ss=1nav）。（3）不能使用空格（例如不能定義class=n av）。（4）我們盡量用最少的字母達(dá)到最容易理解的意義。通常網(wǎng)頁(yè)模塊的命名需要遵循以下幾個(gè)原則。網(wǎng)頁(yè)模塊命名規(guī)范相關(guān)模塊命名相關(guān)模塊命名頭header內(nèi)容content/container導(dǎo)航nav尾footer側(cè)欄sidebar欄目column左邊、右邊、中間left、right、center登錄條loginbar標(biāo)志logo廣告banner頁(yè)面主體main熱點(diǎn)hot新聞news下載download子導(dǎo)航subnav菜單menu子菜單submenu搜索search友情鏈接friendlink版權(quán)copyright滾動(dòng)scrol

4、l標(biāo)簽頁(yè)tab文章列表list提示信息msg小技巧tips欄目標(biāo)題title服務(wù)service注冊(cè)register常用命名規(guī)則良好的命名規(guī)范可以為團(tuán)隊(duì)合作開(kāi)發(fā)推波助瀾，無(wú)論在網(wǎng)站開(kāi)發(fā)還是網(wǎng)站維護(hù)上都起到了至關(guān)重要的作用。命名規(guī)范是一種約定，也是程序員之間良好溝通的橋梁。思政小貼士元素分類與HTML語(yǔ)義化元素分類HTML標(biāo)簽的開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼稱為HTML的元素。這是一個(gè)標(biāo)簽這里是內(nèi)容這是一個(gè)元素元素分類一個(gè)完整的HTML網(wǎng)頁(yè)是由眾多不同的HTML元素組成的。01塊元素02行內(nèi)元素元素分為元素分類什么是塊元素？常見(jiàn)的塊元素標(biāo)簽有、和等。塊元素在瀏覽器顯示狀態(tài)下會(huì)獨(dú)占一行，排斥其他元素與

5、其在同一行顯示。塊元素的內(nèi)部可以容納其他塊元素和行內(nèi)元素。元素分類什么是行內(nèi)元素？行內(nèi)元素可以與其他行內(nèi)元素在同一行內(nèi)顯示。行內(nèi)元素的內(nèi)部可以容納其他的行內(nèi)元素，但是不可以容納塊元素。我們常見(jiàn)的行內(nèi)元素標(biāo)簽有、和。元素分類h2塊元素p塊元素strong 行內(nèi)元素em 行內(nèi)元素div示例這是一個(gè)標(biāo)題這是一段文本這是加粗強(qiáng)調(diào)的文本這也是斜體強(qiáng)調(diào)的文本元素分類塊元素特點(diǎn)：1.塊元素單獨(dú)占一整行或者多整行，通常用于進(jìn)行大布局（大結(jié)構(gòu)）的搭建。2.塊元素內(nèi)部可以容納其他塊元素和行內(nèi)元素。行內(nèi)元素特點(diǎn)：1.行內(nèi)元素可以與其他行內(nèi)元素位于同一行顯示。2.行內(nèi)元素內(nèi)部可以容納其他行內(nèi)元素，但不可以容納塊元素。

6、塊元素和行內(nèi)元素特點(diǎn)HTML語(yǔ)義化公共通知 1.軟考報(bào)名通知2.四六級(jí)報(bào)名通知3.寒假放假通知公共通知 1.軟考報(bào)名通知2.四六級(jí)報(bào)名通知3.寒假放假通知HTML語(yǔ)義化HTML5的精髓在于標(biāo)簽的語(yǔ)義，要使用恰當(dāng)?shù)臉?biāo)簽來(lái)表示網(wǎng)頁(yè)的內(nèi)容。語(yǔ)義化可以使我們的網(wǎng)頁(yè)更容易被搜索引擎收錄，更容易讓屏幕閱讀器讀出網(wǎng)頁(yè)內(nèi)容。因此，使用標(biāo)簽時(shí)一定不要忘記HTML的初衷。HTML5中常用語(yǔ)義化結(jié)構(gòu)標(biāo)簽引入 HTML5中常用語(yǔ)義化結(jié)構(gòu)標(biāo)簽標(biāo)簽說(shuō)明定義文檔的頭部區(qū)域定義頁(yè)面的導(dǎo)航鏈接部分區(qū)域規(guī)定文檔的主內(nèi)容定義文檔中的節(jié)定義文檔、頁(yè)面中獨(dú)立的內(nèi)容定義頁(yè)面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄），內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān)定義

7、 元素的標(biāo)題定義自包含內(nèi)容，比如圖示、圖表、照片、代碼清單等描述了文檔的底部區(qū)域標(biāo)簽header標(biāo)簽描述了文檔的頭部區(qū)域，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)一個(gè)內(nèi)容區(qū)塊的標(biāo)題、logo圖片、搜索表單等內(nèi)容。一個(gè)網(wǎng)頁(yè)可以擁有多個(gè)標(biāo)簽，但要注意標(biāo)簽不能被放在或者另一個(gè)標(biāo)簽內(nèi)部。標(biāo)簽nav標(biāo)簽定義導(dǎo)航鏈接的部分，一般用于網(wǎng)站導(dǎo)航布局。注意并不是文檔中所有導(dǎo)航鏈接都應(yīng)該放在標(biāo)簽中 ，通常只把一個(gè)文檔中的主要導(dǎo)航欄放在標(biāo)簽中，在文章頁(yè)面標(biāo)簽還可以用來(lái)給文字做一個(gè)目錄的超鏈接。標(biāo)簽main標(biāo)簽定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無(wú)二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站

8、logo和搜索框（除非搜索框作為文檔的主要功能）。在一個(gè)文檔中，不能出現(xiàn)一個(gè)以上的標(biāo)簽。標(biāo)簽不能是以下標(biāo)簽的后代：、或。標(biāo)簽section標(biāo)簽定義文檔中的節(jié)，其作用是對(duì)頁(yè)面上的內(nèi)容進(jìn)行分塊，用于組合一些主題相關(guān)的內(nèi)容。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。標(biāo)簽article標(biāo)簽定義內(nèi)容是獨(dú)立的、完整的相關(guān)內(nèi)容塊。標(biāo)簽中的內(nèi)容可獨(dú)立于頁(yè)面其他內(nèi)容使用。標(biāo)簽內(nèi)可以嵌套其他元素，它可以有自己的頭部、尾部和主體內(nèi)容。使用時(shí)要特別注意內(nèi)容的獨(dú)立性，一般對(duì)獨(dú)立完整的內(nèi)容才使用標(biāo)簽，如果不是獨(dú)立完整的內(nèi)容一般使用標(biāo)簽。標(biāo)簽aside標(biāo)簽表示頁(yè)面主區(qū)域內(nèi)容之外的內(nèi)容，通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。標(biāo)簽footerdiv標(biāo)簽用于定義一個(gè)區(qū)域或文檔的頁(yè)腳。頁(yè)腳通常包含文檔的作者、版權(quán)信息、聯(lián)系信息等等。劃分網(wǎng)頁(yè)結(jié)構(gòu)時(shí)，如果HTML5語(yǔ)義化結(jié)構(gòu)標(biāo)簽都不符合語(yǔ)義或者語(yǔ)義不明確的情況下，還是可以使用標(biāo)簽來(lái)定義。案例 實(shí)際開(kāi)發(fā)中，標(biāo)簽的使用并沒(méi)有嚴(yán)格的規(guī)定，一般遵循效果優(yōu)先原則，在能方便實(shí)現(xiàn)網(wǎng)頁(yè)效果的前提下，盡量使用有語(yǔ)義的標(biāo)簽。實(shí)踐任