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

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

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

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

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

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

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

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