HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1-4章 概述、創(chuàng)建網(wǎng)站項目- 常見的HTML標(biāo)簽與CSS樣式的搭配_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1-4章 概述、創(chuàng)建網(wǎng)站項目- 常見的HTML標(biāo)簽與CSS樣式的搭配_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1-4章 概述、創(chuàng)建網(wǎng)站項目- 常見的HTML標(biāo)簽與CSS樣式的搭配_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1-4章 概述、創(chuàng)建網(wǎng)站項目- 常見的HTML標(biāo)簽與CSS樣式的搭配_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計實戰(zhàn) 課件 第1-4章 概述、創(chuàng)建網(wǎng)站項目- 常見的HTML標(biāo)簽與CSS樣式的搭配_第5頁
已閱讀5頁，還剩167頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第1章

概述01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識點04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)能掌握基本的HTML、CSS、容器等概念，理解HTML與CSS的關(guān)系；初步了解HTML標(biāo)簽書寫的規(guī)范；通過練習(xí)認(rèn)識到適合的軟件工具可以克服對英文書寫代碼的陌生感，掌握Hbuilder軟件的快捷操作技巧；碰到不了解的知識點，能使用合適的關(guān)鍵字在百度等搜索引擎中進(jìn)行有效搜索，并能對搜索結(jié)果有一定的識別能力。第1章

概述1通過本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)第1章

概述2了解本章成語的出處，理解成語含義與知識點理解的結(jié)合。衣冠齊楚——學(xué)生著裝禮儀。工欲善其事，必先利其器——國產(chǎn)編程“利器”、民族自豪感。善假于物——大數(shù)據(jù)時代網(wǎng)絡(luò)提供了多形式的數(shù)據(jù)資料，培養(yǎng)知識的獲取、分辨、模仿能力。第1章

概述3知識點1.1HTML、CSS概念1.2網(wǎng)頁制作初學(xué)者上手工具選擇高效的代碼編輯器安裝調(diào)試用的瀏覽器。善于使用搜索引擎求解問題1.1HTML、CSS概念3知識點HTML的英文全稱是HyperTextMarkupLanguage，即超文本標(biāo)記語言，實質(zhì)上采用標(biāo)簽將文字、圖形、聲音等內(nèi)容標(biāo)記，再通過網(wǎng)頁瀏覽器顯示出即我們所見到的網(wǎng)頁內(nèi)容。注意，我們沒有這么表述“我們所見到的網(wǎng)頁效果”，這是因為同樣的圖文內(nèi)容，設(shè)計效果好看與否，關(guān)鍵在于“排版”，而這個“排版”就是取決于CSS

對元素外觀的定義。CSS的英文全稱是：CascadingStyleSheets，即層疊樣式表，是一種用來表現(xiàn)HTML文件樣式的語言。1.1HTML、CSS概念3知識點《醒世恒言》：“那太醫(yī)衣冠齊楚，氣宇軒昂，賀司戶迎至艙中，敘禮看坐?！币鹿邶R楚——形容衣帽穿戴得整齊，漂亮。也用來襯托人物的風(fēng)流或高雅。知識點：HTML搭配CSS記憶關(guān)鍵詞：衣冠楚楚關(guān)鍵詞解析：HTML標(biāo)簽搭建內(nèi)容（人），CSS展示外觀樣式（著裝）。對于搜索引擎收錄網(wǎng)頁的標(biāo)準(zhǔn)來說，它只關(guān)注內(nèi)容；對于瀏覽者而言，更希望見到CSS將內(nèi)容打扮出令人愉悅的視覺效果。

1.1HTML、CSS概念3知識點目前，HTML最新版本為5，故常稱謂為“HTML5”，或簡稱為“H5”，HTML5重點強調(diào)HTML標(biāo)簽盡可能成對標(biāo)簽出現(xiàn)，即“開始標(biāo)簽”和“結(jié)束標(biāo)簽”，開始/結(jié)束標(biāo)簽內(nèi)部的代碼塊就是它的子孫元素。簡單理解的話，H5強調(diào)的“對標(biāo)簽”可以形容成“龍頭鳳尾”。開始標(biāo)簽表現(xiàn)為<標(biāo)簽A>，結(jié)束標(biāo)簽對應(yīng)的</標(biāo)簽A>，如：<body>和</body>

<div>和</div><ul>和</ul>

注意許多標(biāo)簽在代碼中重復(fù)出現(xiàn)許多次，比如<div>標(biāo)簽在一個頁面中動輒出現(xiàn)上百次，我們要判定好哪個</div>標(biāo)簽與之配對，以免“亂點鴛鴦譜”。1.1HTML、CSS概念3知識點

由于HTML結(jié)構(gòu)采用標(biāo)簽包裹標(biāo)簽的結(jié)構(gòu)，像是一個個大盒子去裝若干個中盒子，中盒子里面有裝了多個小盒子，所以我們有時候稱HTML標(biāo)簽為“容器”、“盒子”，也有時候稱“元素”。1.1HTML、CSS概念3知識點提問：CSS為什么稱之為層疊樣式表，怎么理解“層疊”這個字眼？類比思維： 層疊，一層一層疊加作用在對象上。1.1HTML、CSS概念3知識點【案例1】打開資源包根目錄，在瀏覽器中運行“第1章-內(nèi)容與樣式分離的意義.html”，效果如圖1-2所示，頁面中包含了大量尺寸不一的圖片。1.1HTML、CSS概念3知識點“記事本”打開對應(yīng)的HTML文件，在所有<img>標(biāo)簽內(nèi)部“.jpg”的后面添加寬高屬性值，就可以為每張圖片統(tǒng)一尺寸，如圖所示。假如你作為一個職業(yè)人，部門主管要求把該頁面的圖片調(diào)整為統(tǒng)一的200px寬，150px高的尺寸。1.1HTML、CSS概念3知識點部門主管總是追求完美，幾分鐘后，覺得圖片尺寸應(yīng)該改為180px*120px更美觀。當(dāng)你覺得改尺寸不過是幾秒鐘的事情的時候，部門主管又要求你把奇數(shù)圖片的透明度調(diào)低點。1.1HTML、CSS概念3知識點如果采用內(nèi)容與表現(xiàn)分離的思路修改代碼呢？把剛才添加的寬高屬性都刪除，同時在<head>標(biāo)簽內(nèi)部添加<style>標(biāo)簽，敲入如圖所示代碼。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點1.2.1選擇高效的代碼編輯器記憶關(guān)鍵詞：工欲善其事必先利其器關(guān)鍵詞解析：初學(xué)者可以自行百度去了解主流的HTML代碼編輯軟件，選擇有代碼提示功能、安裝簡單、不含廣告、占用硬盤空間小，最關(guān)鍵一點的是“免費”。搜索的關(guān)鍵詞可以為“html編輯器代碼提示免費”?！墩撜Z·衛(wèi)靈公》：“子貢問為仁。子曰：‘工欲善其事，必先利其器。居是邦也，事其大夫之賢者，友其士之仁者。’”指工匠要想做好活兒，一定先要把工具整治得銳利精良。比喻要做好事情，必須先做好準(zhǔn)備，創(chuàng)造條件。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點HBuilder對于初學(xué)者而言，所考慮的優(yōu)點：多平臺支持：HBuilder支持多平臺開發(fā)，包括iOS、Android、Windows、macOS等。強大的語法提示：擁有自主IDE語法分析引擎，對前端語言提供準(zhǔn)確的代碼提示。輕巧：僅數(shù)十兆的綠色發(fā)行包(不含插件)。極速：不管是啟動速度、大文檔打開速度、編碼提示，都極速響應(yīng)。小程序支持：國外開發(fā)工具沒有對中國的小程序開發(fā)優(yōu)化，HBuilder可新建uni-app或小程序、快應(yīng)用等項目，為國人提供更高效工具。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點1.2.2安裝調(diào)試用的瀏覽器。除了自帶的IE瀏覽器外，也要安裝谷歌瀏覽器、火狐瀏覽器、360瀏覽器，最起碼要安裝谷歌瀏覽器。1.2網(wǎng)頁制作初學(xué)者上手工具3知識點1.2.3善于使用搜索引擎求解問題記憶關(guān)鍵詞：善假于物關(guān)鍵詞解析：學(xué)習(xí)搜索引擎的意義，就好比是給你裝上翅膀，讓你能瞬間飛越千山萬水，直達(dá)知識的彼岸。隨著人工智能技術(shù)的發(fā)展，知識搜索將更加智能化。它是你的老師，幫你揭開一個又一個謎團(tuán)；它是你的朋友，陪你穿梭于古今中外的智慧殿堂；它還是你的顧問，總能為你搭配出最潮、最前沿的學(xué)習(xí)資訊。荀子《勸學(xué)》：“君子生非異也，善假于物也?！鄙萍儆谖铩鉃榫拥馁Y質(zhì)與一般人沒有什么區(qū)別，君子之所以高于一般人，是因為他能善于利用外物。善于利用已有的條件，是君子成功的一個重要途徑。劉備善于用人1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)1.搜索引擎基本用法以百度搜索引擎用法為例。（1）輸入多個關(guān)鍵詞時,只要詞與詞之間用空格隔開,百度就會默認(rèn)檢索包含所有關(guān)鍵詞的網(wǎng)頁，如圖1-6所示。4本章練習(xí)（2）“減號”可以盡可能屏蔽掉不想看到的關(guān)鍵詞。1.2網(wǎng)頁制作初學(xué)者上手工具1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)2.百度高級用法詳解選擇百度搜索欄右上角“設(shè)置”菜單下的“高級搜索”。在“高級搜索”對話框參數(shù)中填入對應(yīng)限制條件。1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)3.善于挑選關(guān)鍵詞。某三年級小學(xué)生，想查一些關(guān)于時間的名人名言，他的查詢詞是“小學(xué)三年級關(guān)于時間的名人名言”。這個查詢詞很完整的體現(xiàn)了搜索者的搜索意圖，但效果并不好。絕大多數(shù)名人名言，并不規(guī)定是針對幾年級的，因此，“小學(xué)三年級”事實上和主題無關(guān)，會使得搜索引擎丟掉大量不含“小學(xué)三年級”，但非常有價值的信息；“關(guān)于”也是一個與名人名言本身沒有關(guān)系的詞，多一個這樣的詞，又會減少很多有價值信息；“時間的名人名言”，其中的“的”也不是一個必要的詞，會對搜索結(jié)果產(chǎn)生干擾；“名人名言”，名言通常就是名人留下來的，在名言前加上名人，是一種不必要的重復(fù)。因此，最好的查詢詞，應(yīng)該是“時間名言”。1.2網(wǎng)頁制作初學(xué)者上手工具4本章練習(xí)4.通過網(wǎng)址的識別，篩選出優(yōu)質(zhì)搜索結(jié)果。如果是用一些熱門的關(guān)鍵詞或者想要下載一些免費的資源的時候，通常搜索結(jié)果中，前三條基本上是廣告鏈接（想當(dāng)年的百度競價搜索排名引發(fā)諸多風(fēng)波），后三條也是廣告鏈接，對于學(xué)生黨而言可以快速跳過這幾行內(nèi)容。1.2網(wǎng)頁制作初學(xué)者上手工具1.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)1】：Hbuilder新建一個基本HTML項目，并將所需圖片放置在img文件夾。【練習(xí)2】在D盤創(chuàng)建一個website的文件夾，然后在Hbuilder中打開該目錄，陸續(xù)新建3個空白html文檔。擬定分別為網(wǎng)站的首頁、新聞欄目頁、企業(yè)介紹頁，將這些文檔分別保存為index.html、news.html、about_us.html（或者profile.html）。【練習(xí)3】Hbuilder快捷鍵操作實踐。1.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)4】完成下圖紅色區(qū)域效果對應(yīng)的HTML代碼?！揪毩?xí)5】一技工學(xué)校機(jī)電系近期開展校園防火知識宣傳，并號召同學(xué)積極參與活動策劃及PPT制作，某同學(xué)想要搜索與本次防火安全主題有關(guān)的數(shù)據(jù)，在百度搜索引擎，他應(yīng)該用什么關(guān)鍵字搭配才能提高數(shù)據(jù)獲取效率？1.3擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)1】搜索2023年中國百強企業(yè)名單，并以本人學(xué)號對應(yīng)的百強排名找到相關(guān)企業(yè)的官網(wǎng)，將官網(wǎng)首頁進(jìn)行局部的截圖（包含網(wǎng)址），保存為“姓名+企業(yè)名稱.jpg”文件?！揪毩?xí)2】打開“第1章擴(kuò)展練習(xí)\練習(xí)2”文件夾，仿照“基礎(chǔ)練習(xí)-練習(xí)4”的代碼，完成對應(yīng)學(xué)號圖片的大致頁面效果。本章結(jié)束用代碼行數(shù)來評估程序的開發(fā)進(jìn)度，就好比是拿重量來評估一個飛機(jī)的建造進(jìn)度。—比爾蓋茨謝謝觀看第2章

創(chuàng)建網(wǎng)站項目01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識點04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)掌握Hbuilder軟件創(chuàng)建項目，并能將素材及HTML文件正確放置在相應(yīng)的文件夾中；深刻理解HTML文件、圖像文件命名規(guī)范化的背景；能逐漸記住網(wǎng)頁常見的英文單詞，課堂上敢于用“拆分法”去拼讀陌生的英文單詞；理解不同類型的圖像在網(wǎng)頁中對應(yīng)的使用場景；養(yǎng)成規(guī)范書寫代碼的習(xí)慣，包括縮進(jìn)式書寫、注釋、標(biāo)簽語義化。第2章

創(chuàng)建網(wǎng)站項目1通過本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)2通過訪問華為企業(yè)，側(cè)面了解華為發(fā)展歷程，培養(yǎng)民族自豪感。了解本章成語的出處，理解成語含義與知識點理解的結(jié)合：“蹈矩循規(guī)”，借此聯(lián)想法律制度、校紀(jì)校規(guī)的重要性。“削足適履”，強調(diào)每個人有各自的學(xué)習(xí)技巧，不考慮自身特點而生搬硬套的話，容易陷入窘境。“各有千秋”，每個人都有自身的優(yōu)點，盡量揚長避短。“言人人殊”，看待事情人人都有各自想法觀點，重要事情未經(jīng)驗證前不輕信別人的說法，不信謠，不傳謠。第2章

創(chuàng)建網(wǎng)站項目課程思政目標(biāo)2“長幼有序”，弘揚中國傳統(tǒng)道德價值觀的核心理念。“事必躬親”，在接觸一門新知識、新技能、新工作的時候，必須要親自完整地去體驗每個環(huán)節(jié)，有調(diào)查才有發(fā)言權(quán)?！邦櫭剂x”，強調(diào)編程中要培養(yǎng)認(rèn)真專注態(tài)度，切勿圖一時方便，給對象亂起名字。第2章

創(chuàng)建網(wǎng)站項目3知識點2.1站點相關(guān)命名規(guī)范2.2圖像文件規(guī)范化圖像格式3.3書寫HTML代碼的習(xí)慣保持正確的縮進(jìn)圖像尺寸圖像命名充分的注釋標(biāo)簽盡可能語義化第2章

創(chuàng)建網(wǎng)站項目2.1站點相關(guān)命名規(guī)范3知識點大部分網(wǎng)頁服務(wù)器只支持英文網(wǎng)頁路徑，網(wǎng)頁路徑區(qū)分大小寫，最好統(tǒng)一使用小寫英文，因此html文件、圖像名、文件夾名都需要用合理的英文命名。文件名可使用a～z、A～Z、0～9、減號（-）和下劃線（_）等字符；禁止使用特殊字符，如：@、#、$、%、&、*。文件名長度以簡單短小為原則。建議盡量使用一些簡單易懂的縮寫，如集團(tuán)介紹（groupprofile），可以將這個網(wǎng)頁命名為group_pro.htm。2.1站點相關(guān)命名規(guī)范3知識點常見英文單詞如表2-1所示。出現(xiàn)頻率中文英文中文英文高↓低公司簡介Profile或Company產(chǎn)品銷售Sales返回首頁Homepage行業(yè)新聞TradeNews企業(yè)文化Culture聯(lián)系我們ContactUs版權(quán)所有CopyRight友情鏈接HotLink產(chǎn)品Product組織機(jī)構(gòu)Organization網(wǎng)站地圖SiteMap客戶服務(wù)CustomerService常見問題FAQ地址ADD電話TEL傳真FAX注冊Login合作加盟JoinIn二維碼QRcode價格Price產(chǎn)品描述Description尺寸Size品牌Brand型號Model信息Information論壇Forum產(chǎn)品定購Order下載中心Download行業(yè)Industry意見反饋Feedback會員登陸MemberEntrance公司榮譽Glories工程案例EngineeringProjects社區(qū)Community技術(shù)力量Technology

3知識點知識點：文件命名規(guī)范記憶關(guān)鍵詞：蹈矩循規(guī)關(guān)鍵詞解析：文件命名有規(guī)則，便于管理、查找。我們經(jīng)常要使用一大組的<li>標(biāo)簽收納大量的圖片，我們的圖片文件是按數(shù)字遞增規(guī)律來命名的，那就不需要不斷地去查看圖片信息，如：<li><imgsrc=”img/news-00034.jpg”></li>我們可以在hbuilder內(nèi)快速的復(fù)制這一行若干遍，然后把“34”對應(yīng)換成35、36、37……正如我們所在的社會，無規(guī)矩不成方圓，懂規(guī)矩才能如魚得水?！度洝じ裉臁罚骸胺e善存仁，蹈矩循規(guī)太古民?！钡妇匮?guī)——指遵守規(guī)矩，不敢違反。2.1站點相關(guān)命名規(guī)范3知識點【案例1】某個企業(yè)要建立公司網(wǎng)站，擬定網(wǎng)站主要欄目包括最新資訊、企業(yè)介紹、產(chǎn)品目錄、企業(yè)文化、商務(wù)聯(lián)系。請用英文命名對應(yīng)的文件夾，并將結(jié)果截圖下來。2.1站點相關(guān)命名規(guī)范【解決策略】優(yōu)先采用英文單詞表述，可以百度對應(yīng)英文單詞。3知識點【案例2】上述公司隨著業(yè)務(wù)蓬勃發(fā)展，預(yù)計未來5年，產(chǎn)品將形成化妝，服飾，生活用品三大類目，服飾類下包括兒童、青少年、成年、老年人系列。嘗試規(guī)劃“產(chǎn)品”目錄下的文件夾結(jié)構(gòu)和網(wǎng)頁文件命名規(guī)則。2.1站點相關(guān)命名規(guī)范【解決策略】子文件夾命名規(guī)則：兒童、青少年、成年、老年人對應(yīng)的盡可能熟悉且短小的英文可采用Child,teen,adult,elder。思路1:比如青少年對應(yīng)teen文件夾下的文件命名規(guī)則，采用teen+年份+月份+日+序號，如果考慮一天能制作了上百個文件，則可以寫為teen20240507001~teen20240507999。

思路2：如果覺得一大串?dāng)?shù)字不好觀察，管理，也可以寫出teen2024-05-07_001。2.2圖像文件規(guī)范化3知識點2.2.1圖像格式網(wǎng)頁中圖片的格式有g(shù)if、png、jpg、svg、webp等，但我們只需了解最常見的三種即可。jpg壓縮比高，適合人像類色彩豐富的圖片。gif通常用于少量色彩的小圖標(biāo)、圖片，支持透明但邊緣的效果通常有殘留的雜色痕跡，還支持小動畫。png適合色彩豐富與否圖片，支持透明，對圖像邊緣幾乎沒有如gif的弊端。2.2圖像文件規(guī)范化3知識點知識點：圖片格式類型記憶關(guān)鍵詞：各有千秋關(guān)鍵詞解析：不同格式的圖像，適用場合不同，各種瀏覽器及版本支持程度不同。圖標(biāo)類圖片考慮到透明底色原因，一般采用png格式，有部分網(wǎng)站采用svg技術(shù)繪制圖標(biāo)，可以認(rèn)為svg圖片是一段純粹的代碼，可以借助一些svg繪圖工具來生成代碼。漢·李陵《與蘇武三首》：“嘉會難再遇，三載為千秋。”各有千秋——意思是各有各的存在的價值。比喻在同一層次內(nèi)各人有各人的長處，各人有各人的特色。2.2圖像文件規(guī)范化3知識點【案例3】在Photoshop中打開“輸出透明底色.psd”文件。將圖標(biāo)輸出為透明底色，分別用gif、png格式進(jìn)行保存。然后將這兩個圖片插入到黑色背景色的網(wǎng)頁中，并預(yù)覽效果觀察區(qū)別之處。2.2圖像文件規(guī)范化3知識點2.2.2圖像尺寸在設(shè)計網(wǎng)頁時，應(yīng)考慮不同的屏幕分辨率，以確保在不同設(shè)備上都能獲得良好的視覺體驗，一般來說，建議使用1366x768分辨率作為基準(zhǔn)，并考慮更高的分辨率。因此，圖片尺寸要考慮不同的分辨率下保證大小適中，避免過小導(dǎo)致模糊或過大占用過多空間。一般來說，建議使用100KB-500KB大小的圖片。從圖片的寬高數(shù)值來看，不同的應(yīng)用場景的圖片尺寸要求各不一致，標(biāo)志、海報、標(biāo)題圖片、圖標(biāo)的尺寸，通常沒有固定的規(guī)定，但個別網(wǎng)站的管理后臺、移動端開發(fā)任務(wù)等對圖片的尺寸有特定要求。2.2圖像文件規(guī)范化3知識點知識點：圖像尺寸應(yīng)該按100%比例輸出以免失真記憶關(guān)鍵詞：削足適履關(guān)鍵詞解析：在photoshop中處理成效果圖的實際大小尺寸，不建議通過css控制大小而造成寬高比失真、模糊等。尤其是圖標(biāo)圖片，若原意在網(wǎng)頁中圖標(biāo)的線條寬度為2像素粗細(xì)，但設(shè)計時將圖標(biāo)尺寸擴(kuò)大來處理，在網(wǎng)頁中強行把尺寸壓縮，相當(dāng)于把“腳”塞到“童時的鞋”，那線條的寬度很大幾率就不再是2像素粗細(xì)，偏離了設(shè)計師的意圖。西漢·劉安《淮南子·說林訓(xùn)》：“夫所以養(yǎng)而害所養(yǎng)，譬猶削足而適履，殺頭而便冠?！毕髯氵m履——指把腳削去一塊來湊合鞋的大??；比喻不合理地遷就湊合或不顧具體條件，生搬硬套。2.2圖像文件規(guī)范化3知識點2.2.3圖像命名圖像文件的名稱分為頭尾兩部分，用下劃線或中橫線隔開，頭部分表示此圖片的大類性質(zhì)，如類別為廣告的采用banner、標(biāo)志采用logo、菜單采用menu、按鈕采用btn、照片采用pic、標(biāo)題圖片采用title。尾部分表示圖片的關(guān)聯(lián)內(nèi)容，也可以是圖片的當(dāng)前某種狀態(tài)，如被按下press,關(guān)閉用off，獲得焦點用focus。范例：banner-sohu.jpgmenu_job.giftitle_news.gifpic_people.jpgbtn-press.pngmenu_focus.gif2.2圖像文件規(guī)范化3知識點知識點：圖像文件命名規(guī)矩記憶關(guān)鍵詞：言人人殊關(guān)鍵詞解析：圖像文件規(guī)范的命名有助于個人在眾多的圖像文件中快速定位所需文件，提高工作效率。規(guī)范的命名方式不僅能讓文件整理顯得更加有序，還能體現(xiàn)個人或團(tuán)隊的專業(yè)素養(yǎng)，這對于提升個人職業(yè)形象、增強客戶信任度等方面都有積極作用。網(wǎng)頁設(shè)計者在遵循一定的命名規(guī)則的基礎(chǔ)上，也有自己所定義的命名規(guī)則，只要命名能讓工作提高效率，我們就可以認(rèn)為這規(guī)矩是合理的。但作為團(tuán)隊項目，言人人殊，必須要制定一套大家都遵循的規(guī)則。西漢·司馬遷《史記·曹相國世家》：“參盡召長老諸生，問所以安集百姓，如齊故諸儒以百數(shù)，言人人殊。參未知所定。”言人人殊——指每個人的說法都不相同，各有各的看法。2.3書寫HTML代碼的習(xí)慣3知識點在HTML和CSS代碼的編寫中，推薦代碼使用小寫，這是CSS的官方推薦做法，也符合大多數(shù)編碼規(guī)范和命名約定。2.3.1保持正確的縮進(jìn)3知識點2.3.1保持正確的縮進(jìn)何為縮進(jìn)，類似我們寫作文時，每段前面總是空兩個格子一樣。對于編寫HTML代碼來說，可以這么理解“每給一個元素添加子元素的時候，子元素代碼就應(yīng)該往右移動一些位置”。2.3.1保持正確的縮進(jìn)3知識點雖然HTML代碼有無縮進(jìn)并不會產(chǎn)生錯誤，但對于任何新老手來說，良好的代碼縮進(jìn)可以讓編寫、調(diào)試階段快速無誤進(jìn)行。在Hbuilder軟件中，按一次<tab>鍵代表往后縮進(jìn)一個單位，按<Shift>+<tab>鍵或者是<Backspace>回退鍵可以往前回退一個單位。千萬別拼命按空格鍵來產(chǎn)生縮進(jìn)，費時且縮進(jìn)不均勻。2.3.1保持正確的縮進(jìn)3知識點知識點：縮進(jìn)式書寫代碼記憶關(guān)鍵詞：長幼有序關(guān)鍵詞解析：元素（容器）從代碼分辨包含關(guān)系，如同看家族族譜。父元素有若干子元素，父元素如首領(lǐng)站在隊伍前面，所有子元素是平級關(guān)系，站在首領(lǐng)后方，依次類推形成層次遞進(jìn)的關(guān)系?！盾髯印ぞ悠罚骸肮噬匈t使能，則主尊下安；貴賤有等，則令行而不流；親疏有分，則施行而不悖；長幼有序，則事業(yè)捷成而有所休。”長幼有序——指年長的和年少的、是有順序的。2.3.1保持正確的縮進(jìn)3知識點【案例4】把學(xué)生寫的錯亂的HTML代碼，修正為正確整齊縮進(jìn)的代碼結(jié)構(gòu)?！窘鉀Q策略】在Hbuilder中，從<body>標(biāo)簽開始，逐級檢查相關(guān)標(biāo)簽是否成對出現(xiàn)。2.3.2充分的注釋3知識點注釋，實際就是“工作記錄”、“看書筆記”，注釋對程序的運行毫無影響。編程中使用注釋的主要作用是增強代碼的可讀性、便于維護(hù)和調(diào)試、以及幫助團(tuán)隊成員理解代碼邏輯。在這些作用中，增強代碼可讀性尤為重要。編寫清晰、易懂的注釋可以讓其他開發(fā)者（包括未來的自己）快速理解代碼的目的和邏輯，這對于維護(hù)大型項目和團(tuán)隊協(xié)作尤其關(guān)鍵。HTML注釋語句格式為<!--注釋內(nèi)容-->。2.3.2充分的注釋3知識點CSS對應(yīng)的注釋語句格式為//注釋文字或者/*注釋文字*/。2.3.2充分的注釋3知識點知識點：編程時注釋的重要性記憶關(guān)鍵詞：事必躬親關(guān)鍵詞解析：代碼注釋，必須由代碼編寫者親自標(biāo)注，帶個好頭！一個稱職的碼農(nóng)，應(yīng)該在代碼適當(dāng)位置標(biāo)注上清晰、有效的提示信息，便于日后維護(hù)及團(tuán)隊協(xié)作需要。成百上千行的代碼并不是設(shè)計者當(dāng)天就能完成，與其幾天后忘卻重新審視代碼意思，不如先做好注釋，更不能指望別人理解你代碼時幫你寫注釋。《詩·小雅·節(jié)南山》：“弗躬弗親，庶民弗信?！笔卤毓H——意思是不論什么事一定要親自去做，親自過問。2.3.3標(biāo)簽盡可能語義化3知識點2.3.3標(biāo)簽盡可能語義化HTML語義化是指使用合適的標(biāo)簽來展示內(nèi)容的結(jié)構(gòu)和意義，而不是僅僅為了樣式表現(xiàn)。有利于搜索引擎優(yōu)化（SEO），因為搜索引擎可以根據(jù)標(biāo)簽來確定上下文和權(quán)重。方便開發(fā)者閱讀和理解。方便維護(hù)，更改代碼時容易定位。方便設(shè)備（如屏幕閱讀器、盲人閱讀器等）解析。方便團(tuán)隊合作，因為語義化使得項目更加標(biāo)準(zhǔn)化和規(guī)范化。3知識點知識點：標(biāo)簽語義化記憶關(guān)鍵詞：顧名思義關(guān)鍵詞解析：一個好名字，讓人讀懂其父母的殷殷期待；一個語義化的標(biāo)簽，讓機(jī)器與人都能讀懂網(wǎng)頁的內(nèi)容深意。它不僅僅是代碼的堆砌，而是賦予每個元素以靈魂，讓搜索引擎輕松捕捉頁面主旨，優(yōu)化排名；讓視障人士通過屏幕閱讀器感知世界；更讓開發(fā)者維護(hù)代碼如行云流水，結(jié)構(gòu)清晰。比如：文章詳情頁的標(biāo)簽選擇，參考標(biāo)簽有h1~h6標(biāo)題、p段落、section版塊/區(qū)塊、artist文章、em強調(diào)（斜體外觀）、strong強調(diào)（粗體）、time時間，西晉·陳壽《三國志·魏書·王昶傳》：“欲使汝曹立身行己，遵儒者之教,履道家之言,故以玄默沖虛為名,欲使汝曹顧名思義,不敢違越也。”顧名思義——指看到名稱就想到它的含義。2.3.3標(biāo)簽盡可能語義化3知識點2.3.3標(biāo)簽盡可能語義化標(biāo)簽語義化2.4基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)1】打開資源包“第2章-代碼修正練習(xí)”文件夾下的“修改縮進(jìn)1”、“修改縮進(jìn)2”、“修改縮進(jìn)3”這三個文件夾，如圖2-13所示，修改文件夾中的若干個書寫不標(biāo)準(zhǔn)的HTML代碼。2.4基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)2】挑選幾個公司或新聞門戶網(wǎng)站，仔細(xì)觀察不同區(qū)域的圖片的名稱。門戶網(wǎng)站圖片的名稱比較長，看上去不限于包含年月日等信息，也還有部分公司內(nèi)部的文件編碼格式，是比較正常的，企業(yè)網(wǎng)站圖片多，采用英文命名方式過于復(fù)雜也不好歸類，還容易產(chǎn)生歧義。聯(lián)想一下我們身份證號碼，也不能采用拼音來表示。2.4基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)3】用“開發(fā)者工具”觀察幾個企業(yè)（不宜選門戶網(wǎng)站）的主頁、一級頁面或詳情頁，用箭頭選擇工具觀察網(wǎng)頁的結(jié)構(gòu)。在Hbuilder新建一個空白HTML文件，將網(wǎng)頁框架大體結(jié)構(gòu)表述出來。2.5擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)1】搜索2023中國百強企業(yè)，按個人學(xué)號對應(yīng)的百強排名企業(yè)，進(jìn)入對應(yīng)官網(wǎng)。進(jìn)行以下操作：（1）打開“新聞”欄目下的任一新聞頁面，記錄下瀏覽器中的網(wǎng)址，如中國石化的某一新聞頁面網(wǎng)址/group/xwzx/gsyw/20240906/news_20240906_298248661874.shtml（2）根據(jù)網(wǎng)址分析出網(wǎng)站的目錄結(jié)構(gòu)，擬定根目錄為site文件夾，在本地計算機(jī)中建構(gòu)對應(yīng)的目錄結(jié)構(gòu)。2.5擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)2】在上一題基礎(chǔ)上，現(xiàn)需要對網(wǎng)頁改版，根據(jù)企業(yè)網(wǎng)站頁面（最好是首頁、欄目頁）出現(xiàn)的小圖標(biāo)，思考公司文化、產(chǎn)品特點或者圖標(biāo)風(fēng)格，完成以下要求：（1） 百度搜索可用于替換的圖標(biāo)。（2） 如果搜索出的圖片是圖標(biāo)集合，請截取所需的圖標(biāo)，并自行命名圖片名稱。（3） 最好搜索出透明底的png格式圖片。2.5擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)3】打開“第2章擴(kuò)展練習(xí)\練習(xí)3”下的“news-20240922.html”文件，采用標(biāo)簽語義化的思維，為<body>容器內(nèi)的元素添加適當(dāng)?shù)臉?biāo)簽，標(biāo)簽對應(yīng)的語義已在文檔進(jìn)行注釋，如圖2-25所示。最后查看頁面運行的效果。2.5擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)3】打開“第2章擴(kuò)展練習(xí)\練習(xí)3”下的“中國石化集團(tuán)公司網(wǎng)站.htm”文件，仿照“基礎(chǔ)練習(xí)-練習(xí)4”，用“開發(fā)者工具”觀察“中國石化”首頁，在新建的index.html中編寫對應(yīng)的容器結(jié)構(gòu)。本章結(jié)束除數(shù)學(xué)外，對本土語言的異常的精通會是一個計算機(jī)程序員的最寶貴的財富?！狤dsgerDijkstra謝謝觀看第3章

盒子模型01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識點04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)理解盒子模型的特點，知曉盒子模型的種類；能記住常見的容器的英文命名；深刻理解標(biāo)準(zhǔn)盒模型的構(gòu)成，掌握寬高、內(nèi)外邊距、邊框?qū)傩缘拇a格式；掌握通過數(shù)值計算，能正確設(shè)置稍微復(fù)雜點的嵌套結(jié)構(gòu)的容器各項屬性；了解容器溢出、容器坍塌等現(xiàn)象的原因；能根據(jù)頁面效果合理地定義、繪制出頁面的容器結(jié)構(gòu)圖；養(yǎng)成給目標(biāo)容器設(shè)置邊框或背景色輔以觀察的良好習(xí)慣。第3章

盒子模型1通過本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)2對盒子各屬性的精確計算，提升一絲不茍的學(xué)習(xí)態(tài)度、精益求精的工作態(tài)度。通過布局案例，了解“感動中國”的眾多人物，樹立正確的時代價值觀，遠(yuǎn)離畸形的追星文化。世界最大單口徑射電望遠(yuǎn)鏡——“天眼”，了解中國天眼的技術(shù)含量。北京奧運會吉祥物“福娃”，回憶起開幕式各種天馬行空、精彩紛呈的節(jié)目，為中國吶喊，中國人智慧的驕傲。了解本章成語的出處，理解成語含義與知識點理解的結(jié)合：“層見疊出”，一個看似復(fù)雜的事情，我們也可以拆解為一個個簡單的小項目，理解透徹后再組合起來，強調(diào)培養(yǎng)學(xué)生由繁入簡，由簡返繁的能力。第3章

盒子模型3知識點3.1盒子模型特點3.2標(biāo)準(zhǔn)盒模型width屬性、height屬性安裝調(diào)試用的瀏覽器margin外邊距屬性padding內(nèi)邊距屬性border邊框?qū)傩詁ackground背景屬性第3章

盒子模型3.3盒子模型的相關(guān)屬性3.1盒子模型特點3知識點頁面中的每一個標(biāo)簽，都可看做是一個“盒子”，通過盒子的視角更方便的進(jìn)行布局，瀏覽器在渲染（顯示）網(wǎng)頁時，會將網(wǎng)頁中的元素看做是一個個的矩形區(qū)域，我們也形象的稱之為盒子。CSS中規(guī)定每個盒子分別由：內(nèi)容區(qū)域（content）、內(nèi)邊距區(qū)域（padding）、邊框區(qū)域（border）、外邊距區(qū)域（margin）構(gòu)成，這就是盒子模型。盒子模型分為兩種：第一種是W3C標(biāo)準(zhǔn)的盒子模型，第二種IE瀏覽器下的IE盒子模型。在ie8版本已上的瀏覽器的瀏覽器默認(rèn)是標(biāo)準(zhǔn)盒模型，所以目前我們不需要為十幾年前的電腦考慮它的IE瀏覽器版本，畢竟IT行業(yè)中的摩爾定律反映出硬件更新?lián)Q代速度極快。而IE盒子模型的計算方式就不在本書中論述，怕各位學(xué)起來混淆。3.1盒子模型特點3知識點給盒子（容器）定義id或者class選擇器，而這些選擇器的名稱雖然是自定義的，但不能使用毫無意義的abc，或者a1、a2、a3等名字。以下是常用的容器（盒子）名字，如表3-1所示。3.1盒子模型特點容器內(nèi)容id或class名稱容器內(nèi)容id或class名稱整個頁面或很大的容器container主內(nèi)容區(qū)Content、main主導(dǎo)航mainnav子導(dǎo)航subnav頁頭header頁腳footer頂導(dǎo)航topnav邊導(dǎo)航（側(cè)邊欄）sidebar公司標(biāo)志logo海報區(qū)banner菜單menu子菜單submenu標(biāo)題title圖標(biāo)icon面包屑導(dǎo)航（當(dāng)前所處位置提示）breadcrumb搜索search登陸login

3知識點標(biāo)準(zhǔn)盒模型如圖3-1所示，width指的是內(nèi)容區(qū)域content的寬度；height指的是內(nèi)容區(qū)域content的高度。3.2標(biāo)準(zhǔn)盒模型W3C標(biāo)準(zhǔn)盒模型下盒子的大小=width（content）+border+padding+margin3.1標(biāo)準(zhǔn)盒模型3知識點3.2標(biāo)準(zhǔn)盒模型知識點：標(biāo)準(zhǔn)盒模型記憶關(guān)鍵詞：層見疊出關(guān)鍵詞解析：層見疊出理解為容器計算寬高數(shù)值時要考慮接連不斷的父子嵌套關(guān)系。當(dāng)網(wǎng)頁總體寬高比喻成一個集裝箱，里面有包含大量木箱子，木箱子又裝著若干個中箱子…………從單個箱子容器來說，內(nèi)容區(qū)以外有三層（內(nèi)邊距、邊框、外邊距）。裝物品的紙盒可以認(rèn)為是容器的邊框，那內(nèi)邊距就是紙盒與物品之間的防撞的填充物，外邊距就是防紙盒被擠壓的木箱子。在精確計算網(wǎng)頁中每個元素的寬高時，我們要先固定總體的寬高值，如同集裝箱尺寸在國際標(biāo)準(zhǔn)中是固定的，一層一層往內(nèi)部計算各種中小箱子的尺寸，而非從內(nèi)部最小的箱子開始計算。明·沈德?！度f歷野獲編補遺·場題犯諱》：“蓋上是時方修祈年永命故事，臣下爭進(jìn)諛詞以求媚，故至誠無息一章，層出疊見，初不計及御名上一字也?！睂右姱B出——意思是指接連不斷出現(xiàn)，比喻事物很多。3知識點width和height：這兩個屬性定義了盒子的內(nèi)容區(qū)域的寬度和高度。在W3C盒子模型（標(biāo)準(zhǔn)盒模型）中，width和height指的是內(nèi)容區(qū)域的寬度和高度。padding：內(nèi)邊距，定義了內(nèi)容和邊框之間的空間。border：邊框，定義了盒子邊框的樣式、寬度和顏色。margin：外邊距，定義了盒子與其他元素之間的空間。此外，盒子模型還有一些擴(kuò)展屬性，如背景屬性、顏色透明度、圓角、圖片邊框、陰影和漸變等，這些屬性為網(wǎng)頁布局提供了更多的視覺效果。3.3盒子模型的相關(guān)屬性3.3盒子模型的相關(guān)屬性3知識點3.3盒子模型的相關(guān)屬性3.3.1width屬性、height屬性width讀音——英[w?dθ]height讀音——英[ha?t]width、height屬性用于定義元素的寬度、高度，通常使用像素px、百分比%等形式來指定高度的數(shù)值，其他形式不做深入了解，只需要知道這些單位的應(yīng)用場景、所起作用即可。像素值（px）：像素值是固定的，不論屏幕分辨率如何變化，它的寬度都是不變的。例如：width:300px;百分比（%）：百分比寬度是相對于父元素的寬度的。例如：width:50%;em單位：這是一個相對單位，通常相對于當(dāng)前元素的字體大小。例如：width:2em;3知識點3.3盒子模型的相關(guān)屬性rem單位：這個單位相對于根元素（html）的字體大小。例如：width:2rem;vw/vh單位：這些單位分別代表視口寬度/高度的一百分之一。例如：width:50vw;auto：當(dāng)設(shè)置為auto時，瀏覽器將自動決定元素的寬度。例如：width:auto;fit-content：這個值會根據(jù)內(nèi)容的多少自動調(diào)整元素的寬度，但是最大不會超過它的父元素的寬度。例如：width:fit-content;min-content和max-content：這兩個值會根據(jù)內(nèi)容的最小尺寸或最大尺寸自動調(diào)整元素的寬度。例如：width:min-content;或width:max-content;3知識點3.3盒子模型的相關(guān)屬性【案例1】完成如圖3-2所示的“推薦信息”版塊的HTML代碼。3知識點3.3盒子模型的相關(guān)屬性【案例2】子元素寬度大于父容器寬度時的處理手法。思路一：結(jié)合overflow設(shè)置超過區(qū)域隱藏，處理圖片與容器大小相差無幾的情況。思路二：強行修改寬高，優(yōu)點是能保留圖片所有內(nèi)容，缺點是可能出現(xiàn)圖片比例偏差過大。思路三：將圖片設(shè)置為背景圖，背景圖片X、Y偏移一定比例的方式，優(yōu)點是不影響原圖比例，缺點是舍棄了圖片四周內(nèi)容。3知識點3.3盒子模型的相關(guān)屬性【案例3】文字超過容器寬度時，后續(xù)文字改成省略號，把過長文字用省略號替代，既起到提示有后續(xù)文字的作用，也不會讓文字被切割的支離破碎。3知識點3.3盒子模型的相關(guān)屬性【案例4】容器異常塌陷容器塌陷，可以理解為元素位置偏離我們預(yù)期，毫無道理的竄到前面元素的位置。產(chǎn)生塌陷的原因主要來自于前面有元素出現(xiàn)浮動屬性，而父容器未設(shè)置高度導(dǎo)致。時刻提醒各位，在標(biāo)準(zhǔn)流布局下容器不設(shè)置height屬性，可以由子元素?fù)伍_高度，但如果子元素使用了浮動或定位方式后，就會出現(xiàn)該父容器高度值被認(rèn)為是0px的情況，也就產(chǎn)生了高度塌陷問題。3知識點3.3盒子模型的相關(guān)屬性3.3.2margin外邊距屬性margin讀音——英[?mɑ?d??n]margin屬性是CSS中用于設(shè)置元素周圍空間的關(guān)鍵屬性，它允許開發(fā)者控制元素的上、右、下、左四個方向的外邊距，從而影響元素與其周圍元素的間距。簡單理解成：只要不屬于該容器內(nèi)部的元素都算“外部”元素，margin用途就是拉開與其他元素的距離，可謂有點“拒人于千里之外”的意味。margin屬性允許使用負(fù)值，但建議非特殊場合，不要使用負(fù)值寫法。3知識點3.3盒子模型的相關(guān)屬性相關(guān)屬性詳見表-2所示。屬性描述margin簡寫屬性。在一個聲明中設(shè)置所有外邊距屬性。margin-top設(shè)置元素的上外邊距。margin-right設(shè)置元素的右外邊距。margin-bottom設(shè)置元素的下外邊距。margin-left設(shè)置元素的左外邊距。margin簡寫：分別寫“上右下左”的外邊距數(shù)值（時針0到12點順時針旋轉(zhuǎn)來記憶），如圖3-35所示。3知識點3.3盒子模型的相關(guān)屬性以下是一些示例：margin:10px20px30px40px;/*上邊有10px的邊距，右邊有20px的邊距，下邊有30px的邊距，左邊有40px的邊距。*/margin:10px;/*四個邊都有10px的邊距*/margin:10px20px;/*上/下邊有10px的邊距，左/右邊有20px的邊距*/margin:10px20px30px;/*上邊有10px的邊距，左/右邊有20px的邊距，下邊有30px的邊距*/3知識點3.3盒子模型的相關(guān)屬性【案例5】完成如圖3-38所示的淺灰色容器水平居中效果，同時設(shè)置各圖片之間的間距，不要求整體圖片集的左右間距對稱。3知識點3.3盒子模型的相關(guān)屬性3.3.3padding內(nèi)邊距屬性padding讀音——英[?p?d??]CSS的padding屬性用于定義元素內(nèi)部的空間，即元素內(nèi)容和元素邊框之間的空白區(qū)域。它允許你設(shè)置元素的上、下、左、右四個方向的內(nèi)邊距。padding屬性不允許使用負(fù)值，相關(guān)屬性詳見表3-3所示。屬性描述padding簡寫屬性。在一個聲明中設(shè)置所有內(nèi)邊距屬性。padding-top設(shè)置內(nèi)容（子元素）與該元素頂部（上邊框）的距離。padding-right設(shè)置內(nèi)容（子元素）與該元素右邊（右邊框）的距離。padding-bottom設(shè)置內(nèi)容（子元素）與該元素底部（下邊框）的距離。padding-left設(shè)置內(nèi)容（子元素）與該元素左邊（左邊框）的距離。3知識點3.3盒子模型的相關(guān)屬性【案例6】設(shè)置圖片與邊框之間的間距，如圖3-41所示。3知識點3.3盒子模型的相關(guān)屬性3.3.4border邊框?qū)傩詁order讀音——英[?b??d?(r)]border簡寫屬性在一個聲明設(shè)置所有的邊框?qū)傩?，可以按順序設(shè)置如下屬性：border-width、border-style（必需）、border-color。相關(guān)屬性詳見表3-4所示。屬性值描述borderborder邊框?qū)傩缘暮唽慴order-width指定邊框的寬度border-style指定邊框的樣式，其中：dotted點線、dashed虛線、solid實線、double定義兩個邊框。border-color指定邊框的顏色，CSS顏色表達(dá)的方式有：顏色名稱，如red,blue,green等。十六進(jìn)制顏色代碼：如#FF0000表示紅色，#0000FF表示藍(lán)色。RGB值：如rgb(255,0,0)表示紅色，rgb(0,0,255)表示藍(lán)色。RGBA值：類似于RGB，但增加了alpha透明度值，如rgba(255,0,0,0.5)半透明紅色。border-radius設(shè)置四個角的圓角半徑（圓角度）。3知識點3.3盒子模型的相關(guān)屬性3.3.5background背景屬性background讀音——英[?b?kɡra?nd]background屬性是一個簡寫屬性，用于設(shè)置一個或多個背景相關(guān)的子屬性。最常用的的語法如下：background:<background-color><background-image><background-repeat><background-position><background-size>;其中：background-color為背景顏色。background-image為背景圖像。background-position為背景圖像的位置。background-repeat 規(guī)定如何重復(fù)背景圖像。background-size為背景圖片的尺寸。3知識點3.3盒子模型的相關(guān)屬性【案例7】完成精靈圖效果。所謂的精靈圖(sprite)，就是通過將多個小的圖標(biāo)集合到一張圖片上，然后通過CSS背景定位來顯示需要的圖標(biāo)。這樣做可以減少HTTP請求的次數(shù)，從而加快頁面加載速度。核心的技法就是將容器設(shè)置padding-left，這空出的區(qū)域?qū)ｉT用于顯示背景圖。接下來我們使用如圖3-46所示的sprite.png圖像文件，完成三個容器顯示圖標(biāo)的效果。sprite.png文件版面效果3.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)1】以某公司頁面的產(chǎn)品或新聞列表區(qū)為例，如圖3-50所示，使用Photoshop或畫筆工具繪制它的容器包含關(guān)系。3.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)2】以某公司首頁的頁腳區(qū)域為例，如圖3-52所示，使用Photoshop或畫筆工具繪制它的容器包含關(guān)系。3.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)3】下圖所示為之前練習(xí)的頁面，如圖3-53所示，通過計算容器的width、padding、margin等屬性數(shù)值，使得左右的灰色邊框與圖片間的間距相等。3.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)4】完成如圖3-57所示的九宮格布局。【解決策略】思路一：將這一張大圖切成9個小圖來布局。思路二：將大圖作為整個大容器的背景圖，然后利用9個空白內(nèi)容的子容器的邊框來構(gòu)建中間網(wǎng)格。思考：比較兩種做法的優(yōu)缺點。3.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)5】瀑布流布局瀑布流是一種寬度相同，高度不同的卡片布局方式。如圖3-70所示，傳統(tǒng)布局中寬度相同、高度不同的卡片排列在一起時，會出現(xiàn)大量空白。這樣既浪費了空間、又不美觀。3.3基礎(chǔ)練習(xí)4本章練習(xí)【練習(xí)6】使用border-radius屬性生成圓形、膠囊形、門型等形狀的容器外觀，從下面五個福娃中挑4個福娃來添加圖片造型，福娃原始圖片如圖3-82所示。3.3擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)1】主要使用ul標(biāo)簽、float屬性、border-radius屬性完成如圖3-85所示的布局效果。3.3擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)2】將如圖3-86所示的產(chǎn)品圖進(jìn)行切片輸出，利用float屬性完成所示效果。3.3擴(kuò)展練習(xí)4本章練習(xí)【練習(xí)3】使用ul標(biāo)簽完成如圖3-87所示的布局，使用CSS樣式生成列表的藍(lán)色三角形圖標(biāo)。本章結(jié)束一個好的程序員應(yīng)該是那種過單行線都要往兩邊看的人。—DougLinder謝謝觀看第4章常見的HTML標(biāo)簽與CSS樣式的搭配01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識點04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)深刻理解塊級、內(nèi)聯(lián)、內(nèi)聯(lián)-塊級元素的特征；進(jìn)一步熟練編寫常見HTML標(biāo)簽以及對應(yīng)的CSS樣式屬性，包括屬性的簡寫格式；理解常見若干種類型的選擇器的使用場景；理解選擇器的優(yōu)先順序；能用多種思維去考慮實現(xiàn)頁面效果布局；養(yǎng)成使用選擇器的組合去申明目標(biāo)樣式的習(xí)慣，并在<style>標(biāo)簽內(nèi)部形成整齊的選擇器名稱排列；進(jìn)一步培養(yǎng)編寫代碼時在重點位置書寫注釋的習(xí)慣。第4章

常見的HTML標(biāo)簽與CSS樣式的搭配1通過本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)2以個人形式完成對應(yīng)學(xué)號的繪制容器關(guān)系圖練習(xí)，培養(yǎng)獨立學(xué)習(xí)能力，解決大部分人學(xué)習(xí)中的依賴行為。個人簡歷表格布局練習(xí)，培養(yǎng)學(xué)生動手完成實習(xí)期前夕必做項目的能力。“校園霸凌問卷”練習(xí)，了解校園霸凌的特點、處理方式等，加強學(xué)生正確的應(yīng)對意識。了解本章成語的出處，理解成語含義與知識點理解的結(jié)合：“文武兼?zhèn)洹?、“橫行天下”，對于個人而言，勤修內(nèi)外功，方能在行業(yè)、領(lǐng)域中闖出一方天地；第4章

常見的HTML標(biāo)簽與CSS樣式的搭配2“無孔不入”，強調(diào)規(guī)則制度有滯后性，切勿鉆漏洞獲取不當(dāng)利益?！巴瑲膺B枝”、“株連蔓引”，在集體生活，應(yīng)當(dāng)團(tuán)結(jié)友愛，親如兄弟，切勿做損傷集體利益的事情，避免一損俱損的情況?！皩掖稳?，有同學(xué)經(jīng)常屢屢遲到，卻無改進(jìn)的意愿和措施，吃一塹卻不長一智?！叭宋⒀暂p”、“一呼百諾”，有力量的人，周圍的人都愿意聽從他的建議，并不因為他的職位高低，這股力量來自堅定、勇氣、自信……第4章

常見的HTML標(biāo)簽與CSS樣式的搭配3知識點4.1塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊級元素的特征4.2常見CSS屬性表標(biāo)簽選擇器ID選擇器類選擇器通配符選擇器（通用選擇器）后代選擇器標(biāo)簽選擇器、ID選擇器、類選擇器的優(yōu)先權(quán)級別4.3常見的選擇器類型第4章

常見的HTML標(biāo)簽與CSS樣式的搭配3知識點4.4結(jié)構(gòu)類標(biāo)簽4.5文本類標(biāo)簽第4章

常見的HTML標(biāo)簽與CSS樣式的搭配header標(biāo)簽section標(biāo)簽nav標(biāo)簽article標(biāo)簽footer標(biāo)簽p標(biāo)簽span標(biāo)簽和i標(biāo)簽h1~h6標(biāo)簽br標(biāo)簽sub、sup標(biāo)簽em、strong標(biāo)簽4.6a標(biāo)簽4.7圖像、視音頻類標(biāo)簽img標(biāo)簽video標(biāo)簽audio標(biāo)簽3知識點4.8列表類標(biāo)簽4.9表格標(biāo)簽第4章

常見的HTML標(biāo)簽與CSS樣式的搭配ul標(biāo)簽ol標(biāo)簽dl標(biāo)簽4.10表單類標(biāo)簽form標(biāo)簽input標(biāo)簽textarea標(biāo)簽select標(biāo)簽4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級元素的特征3知識點4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級元素的特征1.塊元素block：block讀音——英[bl?k]每個塊級元素都從新的一行開始，并且其后的元素也另起一行。元素的高度、寬度、垂直和水平的內(nèi)外邊距都可設(shè)置。元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致）。常見的塊狀元素有<div>、<p>、<ul>、<table>、<form>等。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級元素的特征3知識點知識點：塊元素特征記憶關(guān)鍵詞：橫行天下關(guān)鍵詞解析：塊元素占用一橫行，即便設(shè)置了寬度，也依然不允許后面的元素排上來，霸道至極，可謂武將。《莊子·盜跖》：“盜跖從卒九千人，橫行天下，侵暴諸侯?！睓M行天下——形容遍行天下，不受阻礙。也形容東征西戰(zhàn)，到處稱強，沒有敵手。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級元素的特征3知識點2.內(nèi)聯(lián)元素（行內(nèi)元素）inline：inline讀音——英['in'lain]和其他內(nèi)聯(lián)元素都在同一行上。元素的高度、寬度、上/下內(nèi)邊距、上/下外邊距不可設(shè)置，但是可以設(shè)置左/右內(nèi)邊距、左/右外邊距。元素的寬度就是它包含的文字或圖片的寬度。常見的行內(nèi)元素有<a>、<span>、<br>、<i>、<em>、<strong>、<label>等。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級元素的特征3知識點知識點：內(nèi)聯(lián)元素特征記憶關(guān)鍵詞：無孔不入關(guān)鍵詞解析：實力弱小，在塊級元素強者之間求生存發(fā)展，竭盡所能靠近“上層社會”，前排哪里有空位擠哪里，可謂文將。清·李寶嘉《官場現(xiàn)形記》第三十五回：“況且上海辦捐的人，鉆頭覓縫，無孔不入?！睙o孔不入——意思是比喻有空子就鉆。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級元素的特征3知識點3.內(nèi)聯(lián)塊級元素（行內(nèi)塊元素）inline-block：和其他內(nèi)聯(lián)元素都在同一行上。元素的高度、寬度可設(shè)置。常見的內(nèi)聯(lián)塊級元素有<img>、<input/>、<button></button>、<td></td>等。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級元素的特征3知識點知識點：內(nèi)聯(lián)塊級元素特征記憶關(guān)鍵詞：文武兼?zhèn)潢P(guān)鍵詞解析：具備有內(nèi)聯(lián)元素不會霸占整行的特征，同時又可以像塊級元素一樣設(shè)置正常的內(nèi)外邊距。漢·荀悅《漢紀(jì)·宣帝紀(jì)》：“文武兼?zhèn)?，惟所施設(shè)?！蔽奈浼?zhèn)洹馑际峭瑫r具有文才和武才，文武雙全。4.2常見CSS屬性表3知識點4.2常見CSS屬性表如表4-1中的屬性在案例中經(jīng)常用到，一定要認(rèn)得常用的英文單詞，最起碼得要求也必須要記住每個單詞前幾個字母，敲代碼時根據(jù)Hbuilder的代碼提示功能找到眼熟的即可。屬性名稱翻譯屬性作用background背景所有background-*屬性的簡寫屬性。border邊框所有邊框?qū)傩缘暮唽憣傩?。border-radius邊框半徑設(shè)置邊框的圓角度。box-shadow盒子-陰影設(shè)置容器的陰影。clear清除清除浮動帶來的影響。color顏色設(shè)置文本的顏色。content內(nèi)容與:before和:after偽元素一起使用，來插入生成的內(nèi)容。cursor光標(biāo)規(guī)定當(dāng)指向元素時要顯示的鼠標(biāo)光標(biāo)。display顯示規(guī)定如何顯示某個HTML元素。filter濾鏡定義元素顯示的濾鏡效果float浮動設(shè)置容器進(jìn)行浮動。font-family文字-家族規(guī)定文本的字體系列font-size文字大小規(guī)定文本的字體大小。font-weight文字粗細(xì)規(guī)定字體的粗細(xì)。letter-spacing字符間距增加或減少文本中的字符間距。line-height行高設(shè)置行高，一行文本可以理解為文字上下均占用一些空白區(qū)域。list-style-type列表樣式規(guī)定列表項標(biāo)記的類型。opacity透明度設(shè)置元素的不透明等級。4.2常見CSS屬性表3知識點屬性名稱翻譯屬性作用overflow溢出規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。position位置規(guī)定用于元素的定位方法的類型（靜態(tài)、相對、絕對或固定）。text-align文字對齊規(guī)定文本的水平對齊方式。text-decoration文字裝飾規(guī)定文本裝飾。text-indent文字縮進(jìn)規(guī)定文本塊中的的首行縮進(jìn)。transform變換向元素應(yīng)用2D或3D轉(zhuǎn)換。transition-delay（動畫）過渡延遲規(guī)定合適開始過渡效果。transition-duration（動畫）過渡持續(xù)時間規(guī)定完成過渡效果所需的秒或毫秒數(shù)。transition-timing-function（動畫）過渡-時間函數(shù)規(guī)定過渡效果的速度曲線。vertical-align垂直對齊設(shè)置元素的垂直對齊方式。visibility能見度規(guī)定元素是否可見。word-spacing單詞間隔增加或減少文本中的單詞間距，僅對英文有效。z-indexZ軸的堆疊順序設(shè)置定位元素的堆疊順序，Z軸指的是眼睛視線垂直于電腦屏幕的軸線。4.3常見的選擇器類型3知識點4.3.1標(biāo)簽選擇器一個完整的HTML頁面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的默認(rèn)CSS樣式或者自定義樣式。只要是HTML的標(biāo)簽都能當(dāng)做標(biāo)簽選擇器，標(biāo)簽選擇器選中的是指定容器中的所有相應(yīng)標(biāo)簽（如果沒有設(shè)定指定容器，則默認(rèn)為body容器）。標(biāo)簽選擇器以"標(biāo)簽名"來定義，用法示例：h1{color:red;}ul{list-style-type:none;}4.3常見的選擇器類型3知識點知識點：標(biāo)簽選擇器的意義記憶關(guān)鍵詞：同氣連枝關(guān)鍵詞解析：“同氣”指的是具有相同標(biāo)簽的元素，它們因為相同的屬性（即標(biāo)簽名）而被歸類在一起；“連枝”則形象地表達(dá)了這些元素通過標(biāo)簽選擇器被連接在一起，共同接受對應(yīng)樣式的影響。南朝·梁·周興嗣《千字文》：“孔懷兄弟，同氣連枝。”同氣連枝——意思是比喻同胞的兄弟姐妹。4.3常見的選擇器類型3知識點【案例1】基于sec優(yōu)化排名，logo處采用h1標(biāo)簽，標(biāo)志圖片作為背景圖像。logo標(biāo)志是整個網(wǎng)站最重要的元素之一，如何能讓該頁面盡可能被搜索引擎收錄，識別出正確的站點信息。我們要思考幾個因素：在瀏覽網(wǎng)頁時，圖片有幾率刷不出來，尤其是大圖。圖片如果刷不出來的時候，怎么體現(xiàn)出這個位置放置了什么內(nèi)容？搜索引擎喜歡“標(biāo)題”語義，也就是喜歡收錄能概括整個頁面結(jié)構(gòu)的元素。4.3常見的選擇器類型3知識點4.3.2ID選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義，用法示例：#box-red{color:red;}#bg{color:green;}引用id一定要加#，id的命名只能由字符、數(shù)字、下劃線組成，且不能以數(shù)字開頭，更不應(yīng)該以html關(guān)鍵字為id名，如#p，#a，#img等。4.3常見的選擇器類型3知識點知識點：id選擇器的應(yīng)用場景記憶關(guān)鍵詞：寡二少雙、獨一無二關(guān)鍵詞解析：每個標(biāo)簽都可以設(shè)置唯一一個id，id就相當(dāng)于人/標(biāo)簽的身份證，因此在同一頁面內(nèi)id選擇器絕不能重復(fù)。《漢書·吾丘壽王傳》：“子在朕前之時，知略輻湊，以為天下少雙，海內(nèi)寡二?！惫讯匐p——意思很少有第二個，形容極其突出。4.3常見的選擇器類型3知識點【案例2】中華網(wǎng)

框架布局4.3常見的選擇器類型3知識點【案例3】使用手機(jī)打開某個APP，這里以如圖4-16所示的唯品會為例，用A4紙，直尺繪制容器包含結(jié)構(gòu)圖，并輔以箭頭和文字給各容器命名id，如圖4-17所示。4.3常見的選擇器類型3知識點4.3.3類選擇器類選擇器選擇若干個有特定class屬性的HTML元素。同一頁面內(nèi)class可以重復(fù)。在編寫樣式時盡量使用類選擇器，id選擇器的優(yōu)先級比類選擇器高，導(dǎo)致id選擇器在后期樣式的控制中會越來越難控制。如需選擇擁有特定class的元素，請寫一個句點（.）字符，后面跟類名，用法示例：.center{text-align:center;color:red;}HTML元素也可以引用多個類。每個元素都可以設(shè)置一個或多個class（空格分隔），比如，<p>元素將根據(jù)CSS代碼區(qū)的"center"和"large"樣式進(jìn)行設(shè)置，那可以寫成：<pclass="centerlarge">本文文字會受到兩個樣式影響</p>4.3常見的選擇器類型3知識點知識點：類選擇器有利于代碼復(fù)用記憶關(guān)鍵詞：屢次三番關(guān)鍵詞解析：實際項目中一個元素為了能被多個樣式應(yīng)用對應(yīng)效果，樣式復(fù)用可以提高效率。簡單地說，就是一個元素可以擁有多個類，一個類也可以應(yīng)用到多個元素上。正如我這么說，A君有動物類、靈長類、人類的特征，靈長類特征不僅僅只發(fā)生在A君身上，也會發(fā)生在每個人身上。如果不采用類，每次介紹新朋友就要介紹他擁有人類的諸多特征？！清·李寶嘉《官場現(xiàn)形記》第29回：“徐大軍機(jī)本來是最恨舒軍門的，屢次三番請上頭拿他正法?！睂掖稳馑际切稳莘磸?fù)多次。4.3常見的選擇器類型3知識點【案例4】打開之前的“中華網(wǎng)”布局練習(xí)中，完成頁頭部分。4.3常見的選擇器類型3知識點4.3.4通配符選擇器（通用選擇器）HTML通配符選擇器是一個通配符，用星號(*)表示，用于匹配任何HTML元素，它可用于設(shè)定全局樣式、初始化元素樣式并覆蓋繼承的樣式。用法格式：*{屬性:值；}在企業(yè)開發(fā)中一般不會使用通配符選擇器，理由是：由于通配符選擇器是設(shè)置頁面上所有的標(biāo)簽的屬性，解釋時會遍歷所有的標(biāo)簽，如果當(dāng)前界面上的標(biāo)簽比較多，那么性能就會比較差?？梢詤⒖家韵聦懛?，把常設(shè)定為某個值的標(biāo)簽采用并列聲明來寫。body,ul,ol,li,h1,h2,h3,form,th,td{margin:0;padding:0}4.3常見的選擇器類型3知識點知識點：通配符選擇器范圍記憶關(guān)鍵詞：一呼百諾、一呼百應(yīng)關(guān)鍵詞解析：通配符選擇器，就是給所有的元素附加指定的樣式。如果確實需要使用通配符，一般設(shè)置大部分元素都有的margin、padding、font-size、color這幾個公共屬性。漢·韓嬰《韓詩外傳》第五卷：“當(dāng)前快意，一呼再諾者，人隸也?！币缓舭僦Z——指一人召喚，百人響應(yīng)。形容響應(yīng)附和的人眾多。4.3常見的選擇器類型3知識點4.3.5后代選擇器后代選擇器，別稱包含選擇器，是一種多個用空格分隔的選擇器。用法格式：選擇器1選擇器2{屬性:值;}每個空格符可以解釋為“在...找到...”，比如選擇器為ula{……}，這個語法就會選擇從<ul>元素內(nèi)部的所有<a>元素，而不論<a>的嵌套層次多深。4.3常見的選擇器類型3知識點知識點：后代選擇器無視嵌套層次記憶關(guān)鍵詞：株連蔓引、株連九族關(guān)鍵詞解析：后代不僅僅是兒子，也包括孫子、重孫子，后代選擇器可以通過空格一直延續(xù)下去，但不需要把完整的族譜寫出來，比如可以聲明為“父親曾孫子”，而不需要申明為“父親我兒子孫子曾孫子”。至于家族恰好出現(xiàn)了2個同名的后代，我們應(yīng)該如何喊這其中一位？起碼也要在中間增加一個能確定結(jié)果的身份吧。《明史·奸臣傳·胡惟庸》：“帝發(fā)怒，肅清逆黨，詞所連及坐誅者三萬余人。及為《昭示奸黨錄》，布告天下，株連蔓引，迄數(shù)年未靖云?！敝赀B蔓引——指株連對象廣泛。4.3常見的選擇器類型3知識點4.3.6標(biāo)簽選擇器、ID選擇器、類選擇器的優(yōu)先權(quán)級別所謂樣式優(yōu)先權(quán)，理解為誰的優(yōu)先級最高，最終樣式就由誰決定。關(guān)于CSS的選擇器優(yōu)先級我在w3school文檔中并沒有看到對應(yīng)說明，業(yè)界普遍對不同選擇器給予不同的數(shù)值代表其權(quán)重高低，對于初學(xué)者來說，我們目前只需要知道以下規(guī)則：

id選擇器>類選擇器>標(biāo)簽選擇器>通用選擇器4.3常見的選擇器類型3知識點知識點：優(yōu)先級別與權(quán)重值記憶關(guān)鍵詞：人微言輕、仗勢欺人關(guān)鍵詞解析：當(dāng)申明選擇器時，想要樣式發(fā)揮出作用，就看選擇器的“背景”夠不夠雄厚。當(dāng)有不同選擇器指定了相同的屬性，我們一般采用給目標(biāo)選擇器增加id或類選擇器，增加它的權(quán)重值，一個不行再增加一個，父容器分不出勝負(fù)，再把爺輩容器搬出來，就是要依仗更大的“勢”。宋·蘇軾《上執(zhí)政乞度牒賑濟(jì)及因修廨宇書》：“某已三奏其事，至今未報，蓋人微言輕，理當(dāng)自爾?！比宋⒀暂p——指職位低，言論主張不被人重視。元·王實甫《西廂記》第五本第三折：“他學(xué)師友，君子務(wù)本；你倚父兄，仗勢欺人?！闭虅萜廴恕馑际且勒棠撤N權(quán)勢欺壓人。4.4結(jié)構(gòu)類標(biāo)簽3知識點4.4結(jié)構(gòu)類標(biāo)簽除了出現(xiàn)頻率最高的div標(biāo)簽外，我們簡單介紹一下HTML5新增的幾個標(biāo)簽。4.4.1header標(biāo)簽header讀音——英[?hed?(r)]<header>標(biāo)簽是HTML5新引入的標(biāo)簽，用來表示網(wǎng)頁或一段內(nèi)容的頭部區(qū)域。它可以包含網(wǎng)站標(biāo)題、搜索表單、導(dǎo)航鏈接等。通常搜索引擎收錄網(wǎng)站時，并不會把頁碼所有內(nèi)容保存下來，開始部分是重點關(guān)注內(nèi)容。<header>……</header>的寫法，類似于<divid=”header”>……<divid=”header”>寫法，不過從語義上來說，前者寫法更符合搜索引擎收錄的胃口。3知識點4.4.2nav標(biāo)簽nav讀音——[n?v]<nav>標(biāo)簽定義導(dǎo)航欄鏈接的部分，一般來說用于頁面中主要的導(dǎo)航鏈接組，如傳統(tǒng)的導(dǎo)航條，側(cè)邊導(dǎo)航欄，頁面導(dǎo)航欄等?！景咐?】完成如圖4-30所示的縱向排列的導(dǎo)航。4.4結(jié)構(gòu)類標(biāo)簽3知識點【案例7】完成如圖4-35所示橫向排列的導(dǎo)航?！窘鉀Q策略】

最大的容器設(shè)置淺灰背景色，布局采用“練習(xí)1”的結(jié)構(gòu)，不同之處就是將<li>標(biāo)簽進(jìn)行左浮動即可，同時增加一個光標(biāo)浮在欄目上方時該元素底色變色、黑色線框圖標(biāo)換成另外一個白色線框圖標(biāo)。4.4結(jié)構(gòu)類標(biāo)簽3知識點4.4.3article標(biāo)簽article讀音——英[?ɑ?t?kl]<article>標(biāo)簽用于標(biāo)記獨立、完整的內(nèi)容塊，這通常表現(xiàn)為一個文章或者文章的一部分、論壇帖子、雜志或報紙文章、博客條目、用戶評論等。該標(biāo)簽的使用在結(jié)構(gòu)化語義上非常有幫助。例如，在博客中，每個帖子可以被標(biāo)記為一個<article>元素，其中包括標(biāo)題、作者、發(fā)布日期和文章內(nèi)容。這種做法增強了頁面的語義，便于搜索引擎和輔助技術(shù)更好地理解內(nèi)容的結(jié)構(gòu)，并按照其獨立性和完整性對其進(jìn)行索引。用法示例：<article><header><h1>帖子標(biāo)題</h1><p>發(fā)布于1月1日</p></header><p>這里是文章的第一個段落。</p><footer><p>作者A</p></footer></article>4.4結(jié)構(gòu)類標(biāo)簽3知識點4.4.4section標(biāo)簽

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論