第1章網(wǎng)頁設(shè)計(jì)與Web前端基礎(chǔ)網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程CONTENT目錄Web基礎(chǔ)概述01Web系統(tǒng)解析02網(wǎng)頁類型與技術(shù)03Web標(biāo)準(zhǔn)語言04網(wǎng)站開發(fā)流程05思政與實(shí)踐結(jié)合0601Web基礎(chǔ)概述基本概念與起源02030104Web基本概念Web是全球信息系統(tǒng)，提供信息交流方式。Web體系結(jié)構(gòu)采用客戶/服務(wù)器模式，包括Web服務(wù)器、客戶端和通信協(xié)議。統(tǒng)一資源定位器（URL）用于指定要訪問的信息文件的通信協(xié)議類型、主機(jī)地址和文件路徑。網(wǎng)頁標(biāo)準(zhǔn)簡(jiǎn)介包括結(jié)構(gòu)標(biāo)準(zhǔn)語言（XML和HTML）、表現(xiàn)標(biāo)準(zhǔn)語言（CSS）和行為標(biāo)準(zhǔn)語言（DOM和ECMAScript）。體系結(jié)構(gòu)構(gòu)成Web體系結(jié)構(gòu)概述Web體系結(jié)構(gòu)采用客戶/服務(wù)器模式，信息資源以網(wǎng)頁形式存儲(chǔ)在Web服務(wù)器中。用戶通過客戶端程序（瀏覽器）向Web服務(wù)器發(fā)出請(qǐng)求，服務(wù)器根據(jù)請(qǐng)求內(nèi)容返回相應(yīng)頁面，客戶端解釋并展示給用戶。Web服務(wù)器介紹Web服務(wù)器提供文檔響應(yīng)的程序，處理靜態(tài)和動(dòng)態(tài)請(qǐng)求。搭建Web服務(wù)器需安裝網(wǎng)絡(luò)操作系統(tǒng)和Web服務(wù)器軟件，如Apache和IIS。客戶端功能Web客戶端即瀏覽器，用于瀏覽網(wǎng)頁、發(fā)送請(qǐng)求和解析顯示多媒體數(shù)據(jù)。支持HTML5等Web標(biāo)準(zhǔn)的瀏覽器能完美呈現(xiàn)網(wǎng)頁。通信協(xié)議HTTPHTTP是客戶端與Web服務(wù)器通信的基礎(chǔ)協(xié)議，定義了請(qǐng)求和響應(yīng)的格式及交互過程。重要發(fā)展組織重要發(fā)展組織在Web技術(shù)發(fā)展過程中，W3C、WHATWG和ECMA等組織起到了關(guān)鍵作用。W3C致力于Web技術(shù)和協(xié)議的標(biāo)準(zhǔn)化工作；WHATWG為HTML5標(biāo)準(zhǔn)的制定作出巨大貢獻(xiàn)；ECMA發(fā)布JavaScript腳本語言標(biāo)準(zhǔn)，推動(dòng)Web前端開發(fā)。這些組織共同推動(dòng)了Web技術(shù)的標(biāo)準(zhǔn)化和進(jìn)步。02Web系統(tǒng)解析服務(wù)器與客戶端01020304Web服務(wù)器概述Web服務(wù)器是安裝網(wǎng)絡(luò)操作系統(tǒng)的計(jì)算機(jī)，上面運(yùn)行著Web服務(wù)器軟件，用于存儲(chǔ)網(wǎng)站內(nèi)容。Apache和IIS是廣泛使用的Web服務(wù)器軟件?？蛻舳私榻B客戶端通常指瀏覽器，如Safari、Chrome等，它們負(fù)責(zé)向服務(wù)器發(fā)送請(qǐng)求并顯示網(wǎng)頁及多媒體數(shù)據(jù)。通信協(xié)議HTTPHTTP協(xié)議是客戶端與服務(wù)器之間通信的基礎(chǔ)，定義了請(qǐng)求和響應(yīng)的格式。統(tǒng)一資源定位器URLURL由通信協(xié)議、主機(jī)名和路徑組成，用于指定要訪問的資源位置。通信協(xié)議及URL0102通信協(xié)議概述通信協(xié)議是計(jì)算機(jī)網(wǎng)絡(luò)中用于規(guī)范數(shù)據(jù)傳輸?shù)囊唤M規(guī)則，確保數(shù)據(jù)在網(wǎng)絡(luò)中正確、高效地傳輸。常見的通信協(xié)議包括HTTP、FTP等，它們定義了客戶端與服務(wù)器之間的交互方式和數(shù)據(jù)格式。URL詳解統(tǒng)一資源定位符（URL）用于標(biāo)識(shí)互聯(lián)網(wǎng)上的信息資源，由通信協(xié)議、主機(jī)名和路徑組成。例如，“/index.html”中，“http”是通信協(xié)議，“”是主機(jī)名，“/index.html”是路徑。通過URL，用戶可訪問特定資源。MIME數(shù)據(jù)標(biāo)識(shí)02030104開放標(biāo)準(zhǔn)MIME數(shù)據(jù)標(biāo)識(shí)定義了不同類型數(shù)據(jù)的名稱，如文本、圖像等，確保信息交換的一致性。Web服務(wù)器與客戶端Web服務(wù)器提供信息，客戶端瀏覽器負(fù)責(zé)顯示，兩者通過HTTP協(xié)議通信，實(shí)現(xiàn)網(wǎng)頁內(nèi)容的傳輸和展示。網(wǎng)站、網(wǎng)頁與主頁網(wǎng)站是一組位于Web服務(wù)器上的網(wǎng)頁集合，主頁是進(jìn)入網(wǎng)站時(shí)看到的第一個(gè)頁面，具有默認(rèn)文件名如index.html。靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁內(nèi)容固定，更新需手動(dòng)修改代碼并重新上傳；動(dòng)態(tài)網(wǎng)頁可在線更新內(nèi)容，包括服務(wù)器端和客戶端動(dòng)態(tài)技術(shù)。03網(wǎng)頁類型與技術(shù)靜態(tài)動(dòng)態(tài)網(wǎng)頁02030104靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是直接或間接制作成HTML的網(wǎng)頁，內(nèi)容固定，修改需通過專用工具或代碼修改，后綴名一般為.html或.htm。動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁包括服務(wù)器端和客戶端動(dòng)態(tài)技術(shù)，前者如ASP、PHP、JSP，后者如JavaScript、VBScript。動(dòng)態(tài)網(wǎng)頁可根據(jù)用戶請(qǐng)求和選擇動(dòng)態(tài)改變和響應(yīng)。Web體系結(jié)構(gòu)Web采用客戶/服務(wù)器模式，信息資源以網(wǎng)頁形式存儲(chǔ)在服務(wù)器中，用戶通過瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回相應(yīng)頁面。網(wǎng)站開發(fā)流程網(wǎng)站開發(fā)包括擬定主題、規(guī)劃架構(gòu)與內(nèi)容、收集資料、設(shè)計(jì)布局、制作測(cè)試上傳以及推廣更新維護(hù)等步驟。前端開發(fā)演進(jìn)Web前端開發(fā)概述Web前端開發(fā)是創(chuàng)建網(wǎng)站或應(yīng)用用戶界面的過程，涉及HTML、CSS和JavaScript等技術(shù)。它負(fù)責(zé)頁面展示和用戶交互，與后端開發(fā)共同構(gòu)建完整的網(wǎng)站系統(tǒng)。Web前端的歷史演變從靜態(tài)網(wǎng)頁到動(dòng)態(tài)交互式網(wǎng)頁，Web前端經(jīng)歷了多次變革。早期靜態(tài)網(wǎng)頁只能供用戶瀏覽，而現(xiàn)代Web前端則強(qiáng)調(diào)用戶體驗(yàn)和交互性，支持復(fù)雜的動(dòng)畫、音頻和視頻內(nèi)容。常用瀏覽器及其兼容性問題主流瀏覽器如Chrome、Firefox、Safari、Opera和Edge在內(nèi)核和功能上存在差異，導(dǎo)致網(wǎng)頁在不同瀏覽器中的顯示效果可能不一致。開發(fā)者需通過測(cè)試和優(yōu)化代碼來解決兼容性問題。網(wǎng)頁標(biāo)準(zhǔn)簡(jiǎn)介網(wǎng)頁標(biāo)準(zhǔn)包括結(jié)構(gòu)標(biāo)準(zhǔn)語言（如HTML和XML）、表現(xiàn)標(biāo)準(zhǔn)語言（如CSS）和行為標(biāo)準(zhǔn)語言（如ECMAScript）。這些標(biāo)準(zhǔn)由W3C等組織制定，旨在確保網(wǎng)頁的跨平臺(tái)兼容性和互操作性。瀏覽器兼容性VS瀏覽器兼容性問題概述瀏覽器兼容性問題指的是不同瀏覽器或同一瀏覽器的不同版本在解析、渲染網(wǎng)頁時(shí)可能出現(xiàn)的差異，導(dǎo)致網(wǎng)頁顯示效果不一致或功能無法正常使用。這些問題主要由以下幾個(gè)因素引起：A、瀏覽器內(nèi)核差異；B、瀏覽器版本更新；C、網(wǎng)頁代碼不規(guī)范。解決瀏覽器兼容性問題的策略針對(duì)瀏覽器兼容性問題，可以采取以下策略進(jìn)行解決：A、使用主流瀏覽器并保持更新；B、使用兼容性視圖或模擬器；C、檢查并優(yōu)化網(wǎng)頁代碼；D、使用前端框架和庫；E、CSSHack。04Web標(biāo)準(zhǔn)語言網(wǎng)頁標(biāo)準(zhǔn)簡(jiǎn)介01020304結(jié)構(gòu)、表現(xiàn)、行為在網(wǎng)頁設(shè)計(jì)中，結(jié)構(gòu)、表現(xiàn)和行為是三個(gè)核心要素。結(jié)構(gòu)定義了網(wǎng)頁的骨架，通過HTML等語言實(shí)現(xiàn)；表現(xiàn)則關(guān)注視覺呈現(xiàn)，由CSS負(fù)責(zé)；行為涉及交互與動(dòng)態(tài)效果，JavaScript等腳本語言是關(guān)鍵。三者分離有助于提升開發(fā)效率和維護(hù)性。HTML基礎(chǔ)HTML是構(gòu)建網(wǎng)頁的基礎(chǔ)語言，用于定義網(wǎng)頁結(jié)構(gòu)和內(nèi)容。它采用標(biāo)簽系統(tǒng)來組織文本、圖片、鏈接等元素，并通過瀏覽器解析展示。HTML5作為最新版本，引入了新特性如語義化標(biāo)簽和多媒體支持，增強(qiáng)了網(wǎng)頁的功能和可訪問性。CSS樣式表CSS用于控制網(wǎng)頁的外觀和布局，通過選擇器和屬性來定義元素的樣式。它可以設(shè)置字體、顏色、背景、間距等，實(shí)現(xiàn)豐富的視覺效果。CSS3增加了動(dòng)畫、過渡等高級(jí)功能，使網(wǎng)頁更加生動(dòng)。同時(shí)，響應(yīng)式設(shè)計(jì)讓網(wǎng)頁能適應(yīng)不同設(shè)備屏幕。JavaScript行為JavaScript賦予網(wǎng)頁交互能力，通過事件處理、DOM操作實(shí)現(xiàn)動(dòng)態(tài)效果。它可以驗(yàn)證表單、控制動(dòng)畫、與服務(wù)器通信等?，F(xiàn)代Web應(yīng)用廣泛使用JavaScript框架（如React、Vue）來簡(jiǎn)化開發(fā)流程，提高開發(fā)效率。相關(guān)概念XML與HTMLXML是一種可擴(kuò)展標(biāo)記語言，最初設(shè)計(jì)用于彌補(bǔ)HTML的不足，滿足網(wǎng)絡(luò)信息發(fā)布的擴(kuò)展性需求。它允許用戶創(chuàng)建和使用自己的標(biāo)記，具有強(qiáng)大的靈活性和自描述性。而HTML（超文本標(biāo)記語言）是目前最流行的網(wǎng)頁制作語言，用于描述網(wǎng)頁文檔，最新的標(biāo)準(zhǔn)是HTML5，它在Web開發(fā)中扮演著重要角色。CSS與DOMCSS（層疊樣式表）是一種用于控制網(wǎng)頁樣式的技術(shù)，通過CSS可以實(shí)現(xiàn)網(wǎng)頁的布局、顏色、字體等樣式效果。目前較成熟的有CSS2和仍在開發(fā)中的CSS3。DOM（文檔對(duì)象模型）是一種獨(dú)立于瀏覽器、平臺(tái)和語言的接口，允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。ECMAScript與JavaScriptECMAScript是ECMA制定的瀏覽器腳本語言標(biāo)準(zhǔn)，常見的宿主環(huán)境包括瀏覽器和Flashplayer等。JavaScript是ECMAScript標(biāo)準(zhǔn)的實(shí)現(xiàn)和擴(kuò)展，在Web開發(fā)中廣泛應(yīng)用，為網(wǎng)頁提供了腳本功能和動(dòng)態(tài)網(wǎng)頁能力。W3C與WHATWGW3C（萬維網(wǎng)聯(lián)盟）是一個(gè)致力于開發(fā)與Web相關(guān)的技術(shù)和協(xié)議標(biāo)準(zhǔn)化的組織，對(duì)Web的發(fā)展產(chǎn)生了深遠(yuǎn)影響。WHATWG（Web超文本應(yīng)用技術(shù)工作組）是由瀏覽器生產(chǎn)廠商和一些相關(guān)團(tuán)體形成的松散協(xié)作組織，為HTML5標(biāo)準(zhǔn)的制定作出了巨大貢獻(xiàn)。05網(wǎng)站開發(fā)流程網(wǎng)站開發(fā)工作流程（1）擬定網(wǎng)站主題在構(gòu)建網(wǎng)站之前，明確網(wǎng)站的主題至關(guān)重要。這決定了網(wǎng)站的定位、內(nèi)容方向以及目標(biāo)受眾。一個(gè)清晰且具有吸引力的網(wǎng)站主題能夠?yàn)楹罄m(xù)的規(guī)劃和設(shè)計(jì)提供明確的指導(dǎo)。規(guī)劃網(wǎng)站架構(gòu)與內(nèi)容在確定網(wǎng)站主題后，需要對(duì)網(wǎng)站的架構(gòu)和內(nèi)容進(jìn)行詳細(xì)規(guī)劃。這包括確定網(wǎng)站的主要欄目、頁面布局以及各頁面之間的邏輯關(guān)系。同時(shí)，還需要根據(jù)網(wǎng)站主題和目標(biāo)受眾，策劃具體的網(wǎng)站內(nèi)容，如文字、圖片、視頻等素材。收集相關(guān)資料為了豐富網(wǎng)站內(nèi)容并提升用戶體驗(yàn)，需要收集與網(wǎng)站主題相關(guān)的各種資料。這些資料可以包括文字、圖片、音頻、視頻等多種形式，用于填充網(wǎng)站的各個(gè)板塊，使網(wǎng)站更加生動(dòng)、有趣且具有吸引力。頁面設(shè)計(jì)和布局規(guī)劃在收集完相關(guān)資料后，需要進(jìn)行頁面設(shè)計(jì)和布局規(guī)劃。這包括確定網(wǎng)站的設(shè)計(jì)風(fēng)格、色彩搭配、字體選擇等視覺元素，以及合理安排頁面中各個(gè)元素的布局和位置。通過精心設(shè)計(jì)的頁面布局，可以提升用戶的瀏覽體驗(yàn)并增強(qiáng)網(wǎng)站的視覺效果。網(wǎng)站開發(fā)工作流程（2）網(wǎng)頁制作、測(cè)試與上傳完成前期準(zhǔn)備工作后，即可進(jìn)入網(wǎng)頁制作階段。合理安排網(wǎng)站的目錄結(jié)構(gòu)，利用文件夾管理文檔，使用合理的文件名。選擇合適的工具軟件進(jìn)行編碼，如Dreamweaver或HBuilderX。在上傳到Web服務(wù)器之前，先在本地進(jìn)行測(cè)試，確保頁面在不同瀏覽器中正常顯示和使用，所有鏈接有效，下載速度快。網(wǎng)站的推廣與更新維護(hù)在確定網(wǎng)站主題后，需要對(duì)網(wǎng)站的架構(gòu)和內(nèi)容進(jìn)行詳細(xì)規(guī)劃。這包括確定網(wǎng)站的主要欄目、頁面布局以及各頁面之間的邏輯關(guān)系。同時(shí)，還需要根據(jù)網(wǎng)站主題和目標(biāo)受眾，策劃具體的網(wǎng)站內(nèi)容，如文字、圖片、視頻等素材。收集相關(guān)資料頁面設(shè)計(jì)和布局規(guī)劃06思政與實(shí)踐結(jié)合知識(shí)產(chǎn)權(quán)與法規(guī)遵守知識(shí)產(chǎn)權(quán)核心要點(diǎn)在網(wǎng)頁設(shè)計(jì)與開發(fā)中，需重視知識(shí)產(chǎn)權(quán)，遵守開源協(xié)議，不隨意盜用他人代碼、圖片等素材，確保項(xiàng)目合法合規(guī)，避免侵權(quán)風(fēng)險(xiǎn)。侵權(quán)案例警示曾有網(wǎng)站因盜用圖片被起訴，這警示我們要尊重知識(shí)產(chǎn)權(quán)。在項(xiàng)目中使用網(wǎng)絡(luò)素材時(shí)，要通過正規(guī)渠道獲取授權(quán)，維護(hù)創(chuàng)作的合法性。合法使用素材方法合法使用網(wǎng)絡(luò)素材可從正規(guī)素材庫選取，或遵循開源協(xié)議使用開源代碼。同時(shí)，對(duì)自行創(chuàng)作的素材也要標(biāo)注版權(quán)，保障自身權(quán)益。實(shí)踐任務(wù)與案例分析010203實(shí)踐任務(wù)規(guī)劃與設(shè)計(jì)規(guī)劃“正能量之星”個(gè)人網(wǎng)站，明確主題、欄目及結(jié)構(gòu)，收集素材，分組討論展示設(shè)計(jì)，開啟網(wǎng)頁設(shè)計(jì)與思政融合實(shí)踐。案例分析：侵權(quán)問題警示以某網(wǎng)站盜用圖片被起訴為例，剖析知識(shí)產(chǎn)權(quán)重要性，探討如何在項(xiàng)目中合法使用網(wǎng)絡(luò)素材，增強(qiáng)法律意識(shí)與職業(yè)操守。實(shí)踐操作與工具運(yùn)用借助HBuilderX等工具，結(jié)合瀏覽器開發(fā)者工具測(cè)試，用FTP上傳文件，在實(shí)踐中掌握開發(fā)流程，提升前端開發(fā)實(shí)操能力。課程總結(jié)與習(xí)題練習(xí)Part01Part03Part02課程核心內(nèi)容回顧回顧從Web基礎(chǔ)概念、核心技術(shù)到前端開發(fā)及網(wǎng)站流程，包括Web定義、URL組成、靜態(tài)動(dòng)態(tài)網(wǎng)頁區(qū)別、前端開發(fā)要點(diǎn)、開發(fā)步驟與工具等關(guān)鍵知識(shí)。重點(diǎn)知識(shí)強(qiáng)化練習(xí)通過填空題考查URL組成、HTTP協(xié)議作用等基礎(chǔ)，選擇題鞏固MIME類型、DOM定義等要點(diǎn)，以練促學(xué)，加深對(duì)Web相關(guān)知識(shí)的理解與記憶。課后實(shí)踐拓展任務(wù)布置申請(qǐng)免費(fèi)網(wǎng)頁空間并上傳測(cè)試頁面的實(shí)踐任務(wù)，將理論知識(shí)應(yīng)用于實(shí)際操作，提升動(dòng)手能力，同時(shí)為后續(xù)更深入的Web開發(fā)學(xué)習(xí)積累經(jīng)驗(yàn)。THANKS感謝觀看網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程第2章HTML常用標(biāo)簽CONTENT目錄HTML5概述01文檔基本結(jié)構(gòu)02文本相關(guān)標(biāo)簽03圖片超鏈接標(biāo)簽04音視頻標(biāo)簽講解05實(shí)踐與提升0601HTML5概述HTML發(fā)展歷程回顧010203HTML版本演進(jìn)HTML從1.0逐步發(fā)展到HTML5，各版本在功能和特性上不斷改進(jìn)，適應(yīng)了不同時(shí)期的網(wǎng)頁開發(fā)需求。文檔聲明差異HTML4與HTML5的文檔聲明有明顯區(qū)別，如簡(jiǎn)潔且通用，體現(xiàn)了HTML5的標(biāo)準(zhǔn)化進(jìn)步。核心標(biāo)簽結(jié)構(gòu)HTML5文檔包含html、head、body等核心標(biāo)簽，構(gòu)建了網(wǎng)頁的基本框架，保障了頁面的規(guī)范性和可讀性。HTML5技術(shù)革新意義010203HTML5核心優(yōu)勢(shì)HTML5相比舊版本，在網(wǎng)頁結(jié)構(gòu)、多媒體支持及語義化方面有顯著提升，簡(jiǎn)化了文檔聲明，增強(qiáng)了頁面表現(xiàn)力與可訪問性。技術(shù)革新驅(qū)動(dòng)HTML版本迭代體現(xiàn)需求驅(qū)動(dòng)發(fā)展，HTML5的推出滿足了現(xiàn)代網(wǎng)頁開發(fā)對(duì)多媒體、移動(dòng)設(shè)備兼容性及SEO優(yōu)化的需求。工匠精神培養(yǎng)通過掌握HTML5標(biāo)簽體系及規(guī)范編碼，培養(yǎng)獨(dú)立構(gòu)建網(wǎng)頁的能力，同時(shí)強(qiáng)調(diào)代碼規(guī)范與SEO友好，體現(xiàn)工匠精神。02文檔基本結(jié)構(gòu)網(wǎng)頁結(jié)構(gòu)搭建要點(diǎn)01020304HTML5核心結(jié)構(gòu)HTML5網(wǎng)頁由doctype聲明、html標(biāo)簽包裹head和body組成，構(gòu)成頁面基礎(chǔ)框架，確保瀏覽器正確解析。語義化標(biāo)簽應(yīng)用使用header、nav、article等語義標(biāo)簽劃分內(nèi)容區(qū)域，提升代碼可讀性與SEO優(yōu)化效果。文檔類型聲明HTML5采用簡(jiǎn)化聲明，替代HTML4復(fù)雜語法，統(tǒng)一瀏覽器渲染標(biāo)準(zhǔn)。頭部元數(shù)據(jù)配置head標(biāo)簽內(nèi)通過metacharset設(shè)置字符編碼，title定義頁面標(biāo)題，保障基礎(chǔ)顯示與兼容性。HTML5核心標(biāo)簽介紹01020304HTML5文檔結(jié)構(gòu)HTML5文檔由聲明，及html、head、body三大核心標(biāo)簽組成，構(gòu)建網(wǎng)頁基本框架。文本與段落標(biāo)簽<p>定義段落，<br>實(shí)現(xiàn)換行，<h#>定義標(biāo)題文字樣式圖片標(biāo)簽要素標(biāo)簽需src（路徑）、alt（替代文本）、width/height（尺寸）四要素，確保圖片完整展示。超鏈接類型支持絕對(duì)路徑（http://）和相對(duì)路徑（文件/目錄），href="#id"實(shí)現(xiàn)頁面內(nèi)書簽跳轉(zhuǎn)。03文本相關(guān)標(biāo)簽段落、換行、標(biāo)題標(biāo)簽用法段落標(biāo)簽HTML中<p>標(biāo)簽用于定義段落，文本在瀏覽器中會(huì)自動(dòng)換行，常與CSS配合實(shí)現(xiàn)對(duì)齊等樣式。換行標(biāo)簽<br>標(biāo)簽可實(shí)現(xiàn)文本強(qiáng)制換行，在需要特定位置換行時(shí)使用，如詩歌排版或短句分隔。標(biāo)題標(biāo)簽標(biāo)題文字標(biāo)簽的基本格式為<h#>標(biāo)題文字</h#>#用來指定標(biāo)題文字的大小，#取1～6的整數(shù)值，取1時(shí)文字最大，取6時(shí)文字最小。特殊文字樣式設(shè)置邏輯與物理樣式區(qū)分HTML中特殊文字樣式分邏輯和物理兩類，<strong>和<em>也被稱為邏輯樣式標(biāo)簽，而其它樣式標(biāo)簽則屬于物理樣式標(biāo)簽。標(biāo)簽對(duì)比與應(yīng)用除了外觀上<strong>默認(rèn)為加粗顯示，<em>默認(rèn)為斜體顯示以外，兩者在邏輯上表示強(qiáng)調(diào)時(shí)，<em>的強(qiáng)調(diào)程度<strong>比更大。04圖片超鏈接標(biāo)簽圖片標(biāo)簽四要素講解圖片標(biāo)簽四要素HTML圖片標(biāo)簽有src、alt、width、height四要素，src指定路徑，alt提供替代文本，width和height控制尺寸。超鏈接路徑及書簽超鏈接路徑及書簽介紹HTML中超鏈接的路徑類型，包括絕對(duì)路徑和相對(duì)路徑，以及書簽鏈接實(shí)現(xiàn)頁面內(nèi)跳轉(zhuǎn)的方法和案例。05音視頻標(biāo)簽講解使用HTML5<audio>標(biāo)簽播放音頻01音頻多格式兼容處理<audio>標(biāo)簽主要用于播放聲音文件或者音頻流的標(biāo)準(zhǔn)。它支持3種音頻格式，分別為Ogg、MP3和WAV。使用HTML5<vedio>標(biāo)簽播放視頻<vedio>標(biāo)簽主要是定義播放視頻文件或者視頻流的標(biāo)準(zhǔn)。它支持3種視頻格式，分別為Ogg、MPEG4和WebM02視頻多格式兼容處理06實(shí)踐與提升互動(dòng)提問案例練習(xí)02030104HTML5核心優(yōu)勢(shì)探討通過互動(dòng)提問，引導(dǎo)學(xué)生思考HTML5相較于舊版本在功能、兼容性及開發(fā)效率等方面的核心優(yōu)勢(shì)。文檔結(jié)構(gòu)補(bǔ)全練習(xí)開展代碼補(bǔ)全互動(dòng)練習(xí)，讓學(xué)生在實(shí)踐中掌握HTML5文檔的基本結(jié)構(gòu)，加深對(duì)四大核心標(biāo)簽的理解與應(yīng)用。特殊文字樣式辨析以互動(dòng)提問形式，探討邏輯樣式（如<strong>）與物理樣式（如<b>）的區(qū)別，引導(dǎo)學(xué)生正確選擇使用場(chǎng)景。圖片替代文本編寫組織互動(dòng)練習(xí)，要求學(xué)生為不可訪問的圖片編寫合適的替代文本，強(qiáng)調(diào)alt屬性在提升網(wǎng)頁可訪問性中的重要性。代碼規(guī)范SEO優(yōu)化01代碼規(guī)范與SEO優(yōu)化HTML5標(biāo)簽語義化，如用<em>替代<i>，利于搜索引擎理解頁面內(nèi)容，提升網(wǎng)站排名，體現(xiàn)代碼規(guī)范與SEO的緊密關(guān)聯(lián)。THANKS感謝觀看網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程第3章使用CSS3樣式表CONTENT目錄初識(shí)CSS樣式表01盒模型02列表標(biāo)簽及樣式03元素分類及轉(zhuǎn)換04CSS常用屬性05選擇器高級(jí)06CSS繼承與優(yōu)先07常用CSS3屬性0801初識(shí)CSS樣式表W3C制定層疊樣式表W3C與CSS的誕生W3C于1997年公布HTML4.0時(shí)，同步推出CSS1.0標(biāo)準(zhǔn)，正式確立層疊樣式表規(guī)范，開啟網(wǎng)頁結(jié)構(gòu)與表現(xiàn)分離的新紀(jì)元。CSS版本演進(jìn)歷程1998年發(fā)布CSS2.0完善基礎(chǔ)功能，2001年啟動(dòng)CSS3模塊化開發(fā)，2011年成為推薦標(biāo)準(zhǔn)，持續(xù)新增特性并向下兼容，奠定現(xiàn)代網(wǎng)頁設(shè)計(jì)基石。CSS核心設(shè)計(jì)理念通過選擇器定位HTML元素，屬性值對(duì)定義視覺表現(xiàn)，支持多樣式層疊規(guī)則，實(shí)現(xiàn)單一修改全局生效的高效樣式管理機(jī)制。結(jié)構(gòu)樣式分離原理12結(jié)構(gòu)與樣式分離概念CSS實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)與樣式分離，HTML定義結(jié)構(gòu)，CSS負(fù)責(zé)外觀表現(xiàn)，便于統(tǒng)一管理和修改樣式。結(jié)構(gòu)樣式分離優(yōu)勢(shì)結(jié)構(gòu)樣式分離使網(wǎng)頁維護(hù)更高效，更改樣式時(shí)無需改動(dòng)HTML結(jié)構(gòu)，提升開發(fā)效率與代碼可讀性。第一個(gè)CSS案例231CSS控制網(wǎng)頁外觀通過CSS設(shè)置文字顏色、背景顏色及段落首行縮進(jìn)，使用

<style>標(biāo)簽定義樣式，如color和background-color屬性。CSS基本語法結(jié)構(gòu)CSS樣式由選擇器、屬性和屬性值組成，如p{text-indent:2em;}，練習(xí)：編寫CSS規(guī)則設(shè)置段落字體大小為16px。CSS創(chuàng)建方法比較內(nèi)部樣式表使用<style>標(biāo)簽，在<head>…</head>中定義，鏈入外部樣式表通過<link>標(biāo)簽實(shí)現(xiàn)，導(dǎo)入外部樣式表使用@import規(guī)則，各有適用場(chǎng)景。多種選擇器的使用組合選擇器CSS3中“,”是組合選擇器，把相同屬性和值的選擇器組合起來書寫，這樣可以減少樣式重復(fù)定義后代選擇器CSS3中“”（空格）為后代選擇器，可以選擇作為某元素后代的元素，它允許根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。類選擇器CSS3中“.”是類選擇器，定義類選擇器時(shí)，在自定類的名稱前面加一個(gè)點(diǎn)號(hào)。類選擇器的引用很簡(jiǎn)單，只需在標(biāo)志后面設(shè)置class屬性值為類選擇器名即可。id選擇器CSS3中“#”是id選擇器，定義id選擇器時(shí)，在自定id的名稱前面加一個(gè)井號(hào)。id選擇器的引用和類選擇器類似，只要把class換成id即可。02盒模型盒模型的概念盒模型基礎(chǔ)概念CSS中所有元素均可視為盒模型，由外邊距、邊框、內(nèi)邊距和內(nèi)容組成，是布局的基礎(chǔ)。盒模型組成部分外邊距用于間隔盒子，邊框增強(qiáng)視覺效果，內(nèi)邊距控制內(nèi)容與邊框間距，內(nèi)容為核心區(qū)域。盒模型應(yīng)用示例通過CSS設(shè)置div的盒模型屬性，如寬度、高度、邊框等，實(shí)現(xiàn)特定布局效果，可借助開發(fā)者工具調(diào)試。背景屬性作用010203盒模型背景作用背景設(shè)置作用于邊框以內(nèi)區(qū)域，外邊距透明顯示父元素背景，合理利用可提升頁面美觀度與用戶體驗(yàn)。背景增強(qiáng)視覺效果通過設(shè)置背景顏色等屬性，能增強(qiáng)盒子視覺效果，讓頁面元素更具辨識(shí)度，優(yōu)化整體視覺感受。背景與布局關(guān)聯(lián)背景的呈現(xiàn)與盒模型其他部分相互配合，影響頁面布局，需綜合考慮以實(shí)現(xiàn)合理美觀的頁面設(shè)計(jì)。寬度和高度計(jì)算方法010203盒模型尺寸構(gòu)成盒子總寬度和高度由外邊距、邊框、內(nèi)邊距及內(nèi)容區(qū)域共同決定，需綜合計(jì)算各部分尺寸以確保布局準(zhǔn)確。寬度計(jì)算實(shí)例如設(shè)置margin10px、border1px、padding10px、width100px，盒子總寬度為100+2×10+2×1+2×10=142px。高度計(jì)算要點(diǎn)高度計(jì)算同寬度，需將內(nèi)容高度與上下內(nèi)邊距、邊框及外邊距相加，精準(zhǔn)把控實(shí)現(xiàn)合理頁面布局。瀏覽器開發(fā)者工具使用010203開發(fā)者工具功能瀏覽器開發(fā)者工具可查看盒模型參數(shù)，直觀了解盒子尺寸與布局，助于調(diào)試CSS布局問題。查看盒模型示例以Chrome為例，能查看div盒子模型各部分尺寸及布局效果，明確盒模型在實(shí)際頁面呈現(xiàn)。工具輔助學(xué)習(xí)開發(fā)者工具是學(xué)習(xí)CSS布局有力助手，可快速定位盒模型相關(guān)問題并解決，提升開發(fā)效率。樣式初始化瀏覽器默認(rèn)樣式差異不同瀏覽器對(duì)元素的默認(rèn)樣式不同，如自帶內(nèi)外邊距，影響布局兼容性?；A(chǔ)初始化方案使用通配符“*”統(tǒng)一重置所有元素內(nèi)外邊距為0，可解決兼容性問題?；A(chǔ)初始化缺點(diǎn)全局匹配所有元素重置樣式，會(huì)影響渲染性能，降低頁面加載速度。推薦初始化方案指定常用標(biāo)簽如body、p、h1、ul等，精準(zhǔn)控制樣式，平衡效率與兼容性。邊框?qū)傩赃吙驅(qū)傩远x邊框?qū)傩允荂SS中用于設(shè)置元素邊框的復(fù)合屬性，可同時(shí)定義寬度、樣式和顏色，簡(jiǎn)化邊框設(shè)置。復(fù)合寫法特點(diǎn)復(fù)合寫法將邊框?qū)挾取邮胶皖伾喜橐粋€(gè)聲明，順序可互換，簡(jiǎn)化代碼并提高開發(fā)效率。單獨(dú)寫法優(yōu)勢(shì)單獨(dú)寫法分別設(shè)置邊框的寬度、樣式和顏色，增強(qiáng)代碼可讀性，便于調(diào)試和維護(hù)復(fù)雜樣式。復(fù)合寫法123復(fù)合寫法概念邊框?qū)傩钥蓪挾?、樣式和顏色合并為一個(gè)聲明，順序可互換，簡(jiǎn)化代碼，提高開發(fā)效率。復(fù)合寫法案例如border:5pxdottedblue;設(shè)置邊框?qū)挾葹?px，樣式為點(diǎn)線，顏色為藍(lán)色，簡(jiǎn)潔高效。復(fù)合寫法優(yōu)勢(shì)復(fù)合寫法使代碼更簡(jiǎn)潔，減少冗余，但需注意屬性值的順序和語法，避免錯(cuò)誤。單獨(dú)寫法單獨(dú)寫法概念邊框?qū)傩钥蓡为?dú)設(shè)置寬度、樣式和顏色，增強(qiáng)代碼可讀性，便于調(diào)試維護(hù)，適合復(fù)雜樣式場(chǎng)景。單獨(dú)寫法案例如border-width:5px;border-style:dotted;border-color:blue;分別定義邊框各屬性，清晰明確。單獨(dú)寫法優(yōu)勢(shì)使代碼結(jié)構(gòu)更清晰，各屬性一目了然，在處理不同邊框需求時(shí)，能精準(zhǔn)定位和修改，提高開發(fā)效率。內(nèi)邊距屬性213內(nèi)邊距的定義內(nèi)邊距控制盒子中邊框與內(nèi)容的距離，影響元素顯示效果。設(shè)置padding可調(diào)整內(nèi)部空間，優(yōu)化布局。內(nèi)邊距的取值內(nèi)邊距可取長(zhǎng)度值或百分比值，長(zhǎng)度值精確控制間距，百分比值靈活適應(yīng)不同尺寸。內(nèi)邊距的定義方式可分別定義四個(gè)方向的內(nèi)邊距，實(shí)現(xiàn)復(fù)雜布局需求；也可匯總定義，簡(jiǎn)化代碼。外邊距屬性1·2·3·外邊距的定義外邊距控制盒子間距，定義邊框外區(qū)域，可調(diào)整元素間空間，優(yōu)化布局。外邊距的取值外邊距可取長(zhǎng)度值、百分比或auto，靈活控制間距，滿足不同布局需求。外邊距的定義方式可分別定義四方向外邊距，或匯總定義，簡(jiǎn)化代碼，實(shí)現(xiàn)復(fù)雜布局。外邊距特殊行為020301外邊距的auto值auto值使外邊距自動(dòng)分配，常用于水平居中。如margin:0auto;可讓寬度已知的塊元素水平居中，是布局常用技巧。外邊距合并特性垂直方向相鄰塊元素的外邊距會(huì)合并，取較大值。例如兩個(gè)相鄰塊元素外邊距分別為10px和20px，最終間距為20px。負(fù)外邊距應(yīng)用外邊距可取負(fù)值，能使元素重疊，實(shí)現(xiàn)特殊布局效果。如margin-top:-20px;可讓元素向上移動(dòng)20像素與其他元素重疊。外邊距合并垂直相鄰的兄弟元素當(dāng)兩個(gè)盒子相鄰時(shí)，在垂直方向上外邊距相遇時(shí)，它們將形成一個(gè)外邊距，即發(fā)生外邊距合并?？諌K元素空的塊級(jí)元素若border、padding等不存在，其上下外邊距會(huì)合并。塊級(jí)父與子元素塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素間，在特定條件下會(huì)發(fā)生外邊距合并。03列表標(biāo)簽及樣式無序列表創(chuàng)建與樣式設(shè)置1·2·3·無序列表創(chuàng)建基礎(chǔ)無序列表由<ul>和<li>標(biāo)簽構(gòu)建，用于展示無順序關(guān)系的內(nèi)容項(xiàng)，如商品分類或待辦事項(xiàng)。項(xiàng)目符號(hào)樣式設(shè)置通過list-style-type屬性定義項(xiàng)目符號(hào)樣式，支持圓點(diǎn)、方塊等預(yù)設(shè)類型，可增強(qiáng)列表視覺表現(xiàn)。列表交互實(shí)踐應(yīng)用在案例中創(chuàng)建商品分類列表，可通過修改CSS屬性嘗試不同符號(hào)類型，強(qiáng)化樣式設(shè)置技能。有序列表創(chuàng)建與樣式設(shè)置有序列表創(chuàng)建使用<ol>和<li>標(biāo)簽構(gòu)建有序列表，通過list-style-type屬性設(shè)置編號(hào)類型，如大寫羅馬數(shù)字。樣式設(shè)置方法可通過CSS屬性list-style-type調(diào)整編號(hào)樣式，支持阿拉伯?dāng)?shù)字、英文字母等多種類型，滿足不同展示需求。互動(dòng)實(shí)踐環(huán)節(jié)嘗試修改編號(hào)起始值及類型，觀察列表樣式變化，加深對(duì)有序列表樣式控制的理解與應(yīng)用能力。定義列表創(chuàng)建與樣式設(shè)置定義列表創(chuàng)建使用<dl>、<dt>和<dd>標(biāo)簽創(chuàng)建定義列表，<dt>定義項(xiàng)目，<dd>提供說明。定義列表樣式設(shè)置通過CSS設(shè)置定義列表的樣式，如字體、顏色等，提升頁面美觀度。定義列表應(yīng)用案例創(chuàng)建一個(gè)解釋HTML列表類型的定義列表，并為其添加合適的樣式。04元素分類及轉(zhuǎn)換塊元素特征及應(yīng)用132塊元素特征塊元素獨(dú)占一行，支持寬高屬性，通過display:block;設(shè)置。塊元素應(yīng)用使用<div>創(chuàng)建塊元素，可設(shè)置寬度和高度，控制頁面布局。轉(zhuǎn)換示例將塊元素轉(zhuǎn)換為行內(nèi)元素，需用display:inline;實(shí)現(xiàn)樣式調(diào)整。行內(nèi)元素特征及應(yīng)用行內(nèi)元素特征行內(nèi)元素在同一行顯示，不支持寬高屬性，通過display:inline;設(shè)置。行內(nèi)元素應(yīng)用使用<span>標(biāo)簽創(chuàng)建行內(nèi)元素，可設(shè)置字體顏色等樣式。元素類型轉(zhuǎn)換行內(nèi)元素與塊元素可相互轉(zhuǎn)換，調(diào)整布局和樣式表現(xiàn)。010302行內(nèi)塊元素特征及應(yīng)用行內(nèi)塊元素特征行內(nèi)塊元素在同一行顯示，支持寬高屬性，可通過display:inline-block;設(shè)置。行內(nèi)塊元素應(yīng)用使用<img>標(biāo)簽創(chuàng)建行內(nèi)塊元素，可設(shè)置寬度和高度，調(diào)整外邊距和內(nèi)邊距。行內(nèi)塊元素案例通過實(shí)際案例展示行內(nèi)塊元素的創(chuàng)建與樣式設(shè)置，如圖片的寬高調(diào)整。05CSS常用屬性背景屬性設(shè)置背景屬性設(shè)置通過background-color、background-image等屬性，可設(shè)置元素的背景顏色與圖片。利用background-repeat控制圖片平鋪方式，實(shí)現(xiàn)多樣化背景效果。背景圖片應(yīng)用使用background-image引入外部圖片資源，結(jié)合background-position調(diào)整圖片位置。設(shè)置background-size適配不同尺寸屏幕，增強(qiáng)視覺表現(xiàn)力。復(fù)合背景管理通過background簡(jiǎn)寫屬性統(tǒng)一設(shè)置多層背景，調(diào)整各層疊加順序。利用透明度設(shè)置實(shí)現(xiàn)漸變效果，打造立體化視覺層次。010203字體屬性設(shè)置1·2·3·字體屬性基礎(chǔ)字體屬性包括font-family、font-size等，用于設(shè)置文本的字體和大小，通過CSS實(shí)現(xiàn)網(wǎng)頁文字樣式的定制。字體樣式調(diào)整利用font-weight設(shè)置文本粗細(xì)，font-style實(shí)現(xiàn)斜體效果，靈活調(diào)整字體樣式，增強(qiáng)網(wǎng)頁文字表現(xiàn)力。字體繼承特性子元素可繼承父元素的字體屬性，如字體和顏色，便于統(tǒng)一網(wǎng)頁風(fēng)格，減少重復(fù)樣式定義的工作量。文本屬性設(shè)置010203文本屬性設(shè)置通過CSS設(shè)置文本對(duì)齊、縮進(jìn)和裝飾，如使用text-align控制對(duì)齊方式，text-indent實(shí)現(xiàn)首行縮進(jìn)，text-decoration添加下劃線或刪除線。文本屬性案例創(chuàng)建段落展示text-align實(shí)現(xiàn)居中對(duì)齊，text-indent設(shè)置首行縮進(jìn)兩字符，text-decoration為鏈接添加下劃線，提升文本可讀性。交互實(shí)踐修改CSS代碼改變文本對(duì)齊方式，調(diào)整縮進(jìn)值觀察效果，嘗試不同text-decoration樣式，實(shí)時(shí)預(yù)覽頁面變化，加深屬性理解。指針光標(biāo)010203指針光標(biāo)定義CSS中cursor屬性用于定義鼠標(biāo)指針形狀，增強(qiáng)用戶體驗(yàn)，如懸停鏈接時(shí)變手形。常用指針值default為默認(rèn)箭頭，pointer為手形，wait為等待狀態(tài)，適用于不同場(chǎng)景。高級(jí)用法可自定義光標(biāo)圖像，支持多值按優(yōu)先級(jí)顯示，還有調(diào)整大小方向的光標(biāo)。06選擇器高級(jí)子元素選擇器子元素選擇器定義子元素選擇器使用>符號(hào)，用于精準(zhǔn)選取某元素的直接子元素，實(shí)現(xiàn)樣式的精確控制。子元素選擇器案例通過h3>strong選擇器，將<h3>標(biāo)簽內(nèi)<strong>元素的文本顏色設(shè)為紅色，展示選擇器應(yīng)用。子元素選擇器互動(dòng)嘗試選擇不同元素的子元素并設(shè)置樣式，如改變<div>子元素<p>的背景色，實(shí)踐選擇器使用。相鄰元素選擇器132相鄰元素選擇器用于選擇緊鄰特定元素的兄弟元素，通過+符號(hào)實(shí)現(xiàn)。如div+p表示選緊鄰div后的第一個(gè)p元素。案例與互動(dòng)案例展示選擇div后第一個(gè)p元素并設(shè)背景色，互動(dòng)環(huán)節(jié)嘗試選其他相鄰元素設(shè)置樣式。選擇器作用可精準(zhǔn)控制頁面布局中相鄰元素的樣式，避免全局選擇影響，提升樣式定義準(zhǔn)確性。關(guān)聯(lián)元素選擇器010203關(guān)聯(lián)元素選擇器概念關(guān)聯(lián)元素選擇器用于選擇某元素后的所有同級(jí)兄弟元素，通過~符號(hào)實(shí)現(xiàn)，可快速為特定組元素設(shè)置相同樣式。關(guān)聯(lián)元素選擇器案例如選擇div后的所有p元素，設(shè)置背景顏色為黃色，能精準(zhǔn)定位并統(tǒng)一修改符合條件元素的樣式，提升效率。關(guān)聯(lián)元素選擇器互動(dòng)嘗試選擇其他關(guān)聯(lián)元素并設(shè)置樣式，如改變文字顏色等，加深對(duì)選擇器應(yīng)用的理解，靈活運(yùn)用于頁面布局。屬性選擇器010203屬性選擇器基礎(chǔ)基于HTML元素屬性及值進(jìn)行選擇，如[title]選有該屬性的元素，提供靈活多樣的選擇方式，精準(zhǔn)控制樣式。常見屬性選擇器類型包括基于屬性存在、值精確匹配、值包含、值前綴等選擇器，適用于不同場(chǎng)景，滿足多種樣式設(shè)置需求。屬性選擇器綜合應(yīng)用結(jié)合多種屬性選擇器，可應(yīng)對(duì)復(fù)雜樣式需求，精準(zhǔn)控制頁面元素樣式，實(shí)現(xiàn)多樣化設(shè)計(jì)效果。偽類選擇器偽類概述偽類基于元素特殊狀態(tài)選擇，以冒號(hào):開頭，用于控制鏈接不同狀態(tài)樣式，增強(qiáng)交互體驗(yàn)。錨偽類a:link、a:visited、a:hover、a:active分別對(duì)應(yīng)鏈接未訪問、已訪問、懸停和激活狀態(tài)，可設(shè)不同樣式。通用偽類:active、:hover通用偽類適用于所有元素，:focus適用于擁有鍵盤輸入焦點(diǎn)的元素，為元素激活、懸浮或焦點(diǎn)狀態(tài)提供樣式控制。偽元素選擇器Part01Part03Part02首字母和首行偽元素通過p::first-letter和p::first-line實(shí)現(xiàn)首字母放大、首行變紅等效果，僅對(duì)塊級(jí)元素生效。::before和

::after偽元素使用::before/::after配合content屬性添加前后綴，結(jié)合display:block轉(zhuǎn)換塊級(jí)元素，可創(chuàng)意應(yīng)用于圖標(biāo)裝飾。偽元素綜合應(yīng)用挑戰(zhàn)按鈕懸浮提示框?qū)崿F(xiàn)，對(duì)比偽元素與額外HTML標(biāo)簽優(yōu)劣，討論技術(shù)選型策略。07CSS繼承與優(yōu)先CSS樣式繼承020301CSS樣式繼承概念子元素可繼承父元素的部分樣式，如字體、文本顏色等，實(shí)現(xiàn)樣式的快速統(tǒng)一與復(fù)用。繼承案例演示設(shè)置的字體樣式，其子元素自動(dòng)繼承，直觀展現(xiàn)CSS樣式繼承的效果?？衫^承屬性除字體外，文本顏色等也是可繼承屬性，合理運(yùn)用能提升網(wǎng)頁樣式的一致性。選擇器優(yōu)先級(jí)1·2·3·選擇器優(yōu)先級(jí)順序選擇器優(yōu)先級(jí)遵循id>class>tag>*規(guī)則，可通過!important提升特定樣式優(yōu)先級(jí)。多元素組合選擇器的優(yōu)先級(jí)首要的原則是控制對(duì)象的精準(zhǔn)度。當(dāng)控制的精準(zhǔn)度相同時(shí)，id個(gè)數(shù)越多的優(yōu)先級(jí)越高。class個(gè)數(shù)越多的優(yōu)先級(jí)越高。tagName（標(biāo)簽名）個(gè)數(shù)越多的優(yōu)先級(jí)越高。后定義的樣式覆蓋前面定義的樣式。優(yōu)先級(jí)實(shí)戰(zhàn)應(yīng)用在控制對(duì)象的精度相同的情況下，#wrap

ul

li

.list{}

和.wrap

ul

li

#list{}優(yōu)先級(jí)一樣。樣式優(yōu)先級(jí)123HTML與CSS的優(yōu)先級(jí)當(dāng)HTML與CSS樣式有沖突時(shí)，瀏覽器按CSS樣式中定義的屬性來顯示。就近原則在不考慮選擇器優(yōu)先級(jí)的情況下，瀏覽器一般按照與該元素關(guān)系遠(yuǎn)近來顯示，這可以簡(jiǎn)單地稱之為就近原則。樣式定義優(yōu)先級(jí)內(nèi)聯(lián)樣式表>內(nèi)部樣式表>外部樣式表，可借!important調(diào)整。08常用CSS3屬性@font-face

規(guī)則@font-face規(guī)則概述CSS3的@font-face規(guī)則允許開發(fā)者自定義字體，突破用戶設(shè)備預(yù)裝字體限制，使網(wǎng)頁設(shè)計(jì)更靈活，增強(qiáng)個(gè)性化。@font-face規(guī)則語法@font-face規(guī)則需指定字體名稱和文件路徑，如{font-family:'MyFont';src:url('myfont.eot’);}支持多種格式。@font-face使用步驟使用@font-face需獲取字體文件、編寫規(guī)則、應(yīng)用字體，通過font-family在CSS選擇器中使用，實(shí)現(xiàn)自定義字體效果。圓角屬性設(shè)置010203圓角屬性基礎(chǔ)CSS3引入border-radius屬性，實(shí)現(xiàn)元素圓角效果。通過設(shè)置像素值，可控制四角弧度，簡(jiǎn)化傳統(tǒng)圖片圓角處理方式。多值半徑設(shè)置border-radius支持1-4個(gè)參數(shù)設(shè)置，分別對(duì)應(yīng)左上角、右上、右下、左下圓角半徑。未指定值自動(dòng)鏡像對(duì)稱，靈活控制各角形態(tài)。實(shí)踐應(yīng)用技巧結(jié)合盒模型調(diào)整圓角元素尺寸，注意與邊框、內(nèi)邊距的視覺協(xié)調(diào)。移動(dòng)端需測(cè)試不同屏幕適配效果，避免過度圓角影響辨識(shí)度。方框陰影屬性設(shè)置方框陰影屬性概述方框陰影屬性用于為元素添加陰影效果，通過box-shadow屬性實(shí)現(xiàn)。設(shè)置外陰影效果使用box-shadow屬性的水平偏移、垂直偏移和模糊半徑參數(shù)，可為元素添加外陰影效果。設(shè)置內(nèi)陰影效果調(diào)整box-shadow屬性的參數(shù)，可為元素添加內(nèi)陰影效果，增強(qiáng)視覺層次感。溢出屬性123溢出屬性定義overflow規(guī)定內(nèi)容溢出元素框時(shí)的顯示方式，有visible、hidden、scroll、auto、inherit五種取值。溢出屬性取值visible默認(rèn)完整顯示；hidden隱藏超出部分；scroll始終顯滾動(dòng)條；auto按需顯滾動(dòng)條；inherit繼承父級(jí)。溢出高級(jí)用法overflow-x和overflow-y可分別控制水平與垂直方向的溢出效果，實(shí)現(xiàn)精細(xì)布局控制?？梢娦詫傩?23可見性屬性定義visibility規(guī)定元素可見性，元素仍占空間，與display不同，不影響布局?？梢娦匀≈嫡f明visible默認(rèn)可見，hidden隱藏但占位，collapse用于表格，inherit繼承父設(shè)置?？梢娕c顯示區(qū)別visibility:hidden保留空間，display:none完全刪除，依需求選控制方式。THANKS感謝觀看網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程第4章使用HTML+CSS布局網(wǎng)頁CONTENT目錄CSS布局概述01元素浮動(dòng)02元素定位03圖片特點(diǎn)及布局04表單及布局05表格及布局06內(nèi)聯(lián)框架07CSS進(jìn)階應(yīng)用08PC端網(wǎng)頁布局綜合案例實(shí)戰(zhàn)0901CSS布局概述CSS布局相關(guān)概念CSS布局核心概念CSS布局利用樣式表實(shí)現(xiàn)網(wǎng)頁內(nèi)容定位，基于盒模型，通過設(shè)置屬性合理放置元素，如將網(wǎng)頁內(nèi)容比作剪報(bào)進(jìn)行裁剪粘貼。盒模型與元素類型盒模型是CSS布局核心，元素分塊、行內(nèi)及行內(nèi)塊元素，不同類型顯示特性各異，影響布局效果。三種定位機(jī)制概述CSS有普通流、浮動(dòng)和絕對(duì)定位三種定位機(jī)制，適用于不同場(chǎng)景，可對(duì)網(wǎng)頁分層，浮動(dòng)和絕對(duì)定位元素脫離普通流。01020302元素浮動(dòng)浮動(dòng)屬性float010203浮動(dòng)屬性概述浮動(dòng)屬性可改變?cè)仫@示方式，使塊元素同行顯示，行內(nèi)元素轉(zhuǎn)塊元素，有none、left、right三種取值。浮動(dòng)常規(guī)用法常用于多列布局和文繞圖效果，如兩div左浮動(dòng)實(shí)現(xiàn)兩列，圖片左浮動(dòng)實(shí)現(xiàn)文字環(huán)繞，浮動(dòng)元素脫離普通流。浮動(dòng)特殊情況可能引發(fā)不能同行顯示、元素重疊、父元素高度塌陷等問題，可通過設(shè)固定高度或clear屬性解決，需合理使用浮動(dòng)及清除屬性。與inline-block的比較132浮動(dòng)與行內(nèi)塊比較浮動(dòng)和行內(nèi)塊都能實(shí)現(xiàn)同行排列，支持屬性控制。但浮動(dòng)脫離普通流，行內(nèi)塊占原位置空間，布局影響不同。行內(nèi)塊元素空隙問題行內(nèi)塊元素間有空格或換行會(huì)產(chǎn)生空隙，需調(diào)整代碼或樣式解決，避免布局不整齊。清除屬性的作用與應(yīng)用清除屬性可解決浮動(dòng)元素對(duì)后續(xù)元素的影響，包括重疊和父元素高度塌陷問題，有多種實(shí)現(xiàn)方法。清除屬性010203清除屬性取值清除屬性clear有none、left、right、both四種取值，分別對(duì)應(yīng)不清除、清除左、右、兩側(cè)浮動(dòng)影響，可精準(zhǔn)控制布局。解決重疊問題使用clear屬性能解決浮動(dòng)元素致后續(xù)元素重疊問題，如前元左浮，后元設(shè)clear:both;可正常顯示，避免布局錯(cuò)亂。處理高度塌陷浮動(dòng)使父元高塌陷，可為父元設(shè)置固定高度，加設(shè)空div子元素并設(shè)置clear:both;或用::after偽元素，確保布局穩(wěn)定，撐開父元高度。03元素定位定位屬性position定位屬性概述CSS定位屬性position實(shí)現(xiàn)元素定位，需結(jié)合top、left等邊偏移和z-index屬性，有static、absolute、relative、fixed四種取值。相對(duì)、絕對(duì)和固定定位相對(duì)定位保留原位置空間，適用于微調(diào)；絕對(duì)定位脫離普通流，精確控制位置，用于復(fù)雜布局場(chǎng)景。固定定位可使元素固定顯示于瀏覽器窗口上的某個(gè)位置。定位應(yīng)用案例設(shè)置元素position為absolute，通過top、left、z-index等屬性精確控制位置，實(shí)現(xiàn)網(wǎng)頁元素的精準(zhǔn)布局。z-index123z-index取值范圍z-index屬性控制元素重疊順序，取值范圍包括正數(shù)、負(fù)數(shù)，默認(rèn)值為0，需配合非static定位屬性使用。層疊順序原則z-index值越大元素越靠上層顯示，值越小則越靠下層，通過調(diào)整數(shù)值可改變?cè)馗采w關(guān)系。定位屬性前提使用z-index必須配合position定位屬性，僅對(duì)非static定位元素（如relative/absolute）有效。元素居中010203未定位元素居中未定位元素通過margin:auto實(shí)現(xiàn)水平居中，適用于塊級(jí)元素，無需定位屬性配合。絕對(duì)定位居中技巧絕對(duì)定位元素利用負(fù)外邊距實(shí)現(xiàn)居中，左偏移50%頁面寬，外邊距為負(fù)的元素寬度一半。相對(duì)定位居中方法相對(duì)定位元素可結(jié)合外邊距自動(dòng)或負(fù)外邊距法實(shí)現(xiàn)居中，需根據(jù)場(chǎng)景選擇合適方式。04圖片特點(diǎn)及布局圖片布局特點(diǎn)020301圖片布局核心概念圖片可通過position或float屬性精確定位，也可利用自身的行內(nèi)塊特性布局，需考慮行內(nèi)框與行框概念，結(jié)合text-align和vertical-align控制對(duì)齊。水平垂直對(duì)齊方式text-align控制塊框內(nèi)行內(nèi)框及文字水平對(duì)齊，取值左、中、右；vertical-align控制行內(nèi)框在行框內(nèi)垂直對(duì)齊，如基線、居中、頂部、底部等。圖片布局實(shí)踐應(yīng)用設(shè)置圖片float為left實(shí)現(xiàn)文繞圖，position為absolute精確定位，通過調(diào)整屬性滿足不同頁面布局需求，實(shí)現(xiàn)多樣化展示效果。05表單及布局表單基本結(jié)構(gòu)表單基本結(jié)構(gòu)表單由<form>標(biāo)簽定義，包含文本框、按鈕等元素。通過<input>標(biāo)簽創(chuàng)建輸入框，type屬性決定類型，如text、password等。表單元素表單元素包括文本框、密碼框、單選框、復(fù)選框和按鈕等。使用標(biāo)簽的type屬性區(qū)分不同元素類型，滿足多種交互需求。表單偽類應(yīng)用CSS偽類如:focus、:disabled用于選擇表單元素狀態(tài)，實(shí)現(xiàn)樣式定制。例如設(shè)置輸入框獲得焦點(diǎn)時(shí)的樣式或禁用按鈕的外觀。010203action屬性詳解123action屬性定義action指定處理表單數(shù)據(jù)的服務(wù)器程序，決定數(shù)據(jù)提交的目標(biāo)地址。action示例解析示例中action="fcheck.asp"或action="mailto:name@"，展示不同提交方式。method屬性說明表單數(shù)據(jù)提交方式method屬性規(guī)定表單數(shù)據(jù)發(fā)送方式，get將數(shù)據(jù)附加在URL后傳輸，適合少量數(shù)據(jù)；post封裝數(shù)據(jù)發(fā)送，安全性高，適用于敏感信息。get與post對(duì)比get方式數(shù)據(jù)暴露在URL中，安全性較差，但實(shí)現(xiàn)簡(jiǎn)單；post方式數(shù)據(jù)在請(qǐng)求體中，更安全，常用于登錄等重要數(shù)據(jù)傳輸場(chǎng)景。屬性設(shè)置要點(diǎn)設(shè)置method屬性時(shí)，需根據(jù)數(shù)據(jù)特性和安全需求選擇get或post，同時(shí)配合action屬性指定數(shù)據(jù)處理程序地址，確保表單正常提交。name屬性用途name屬性用途name屬性用于表單元素命名，便于識(shí)別與數(shù)據(jù)提交，確保信息準(zhǔn)確對(duì)應(yīng)。<input>標(biāo)簽用法<input>標(biāo)簽定義<input>是表單常用元素，用于輸入數(shù)據(jù)，有多種類型，如文本框、密碼框等。<input>常用屬性包含type、value、name等屬性，可設(shè)置輸入?yún)^(qū)類型、值、名稱等。<input>的type屬性type屬性決定輸入?yún)^(qū)類型，有文本、密碼、單選等多種常見類型。<textarea>標(biāo)簽特點(diǎn)多行文本輸入用于輸入多行文本內(nèi)容，通過rows和cols屬性設(shè)置行列數(shù)，提供用戶填寫較長(zhǎng)信息的空間?；緦傩耘渲冒琻ame命名、rows行數(shù)、cols列數(shù)等屬性，可定義文本域的標(biāo)識(shí)和尺寸，便于表單數(shù)據(jù)處理。與輸入框差異區(qū)別于單行<input>，<textarea>支持多行輸入，常用于留言、評(píng)論等需要大量文字的場(chǎng)景。<select>標(biāo)簽功能<select>標(biāo)簽定義<select>標(biāo)簽用于創(chuàng)建列表框或下拉列表框，提供用戶選擇的選項(xiàng)。<select>標(biāo)簽用法通過<option>標(biāo)簽定義選項(xiàng)，可設(shè)置multiple和size屬性控制多選及可見數(shù)目。<select>標(biāo)簽屬性name屬性命名，<option>的selected設(shè)默認(rèn)值，value指定發(fā)送給服務(wù)器的值。010203<label>標(biāo)簽123<label>標(biāo)簽綁定原理<label>的for屬性通過id與表單元素關(guān)聯(lián)，實(shí)現(xiàn)點(diǎn)擊文本聚焦對(duì)應(yīng)輸入框，提升表單操作便捷性。綁定機(jī)制示例解析如<labelfor="nan">男</label>綁定<inputid="nan">，點(diǎn)擊"男"自動(dòng)選中單選按鈕，直觀展示交互效果。提升交互體驗(yàn)作用for屬性實(shí)現(xiàn)標(biāo)簽與元素聯(lián)動(dòng)，減少用戶操作步驟，優(yōu)化表單填寫流程，增強(qiáng)用戶體驗(yàn)。<fieldset>標(biāo)簽010203表單元素分組功能<fieldset>標(biāo)簽用于對(duì)表單元素分組，使頁面結(jié)構(gòu)清晰，避免用戶輸入時(shí)眼花繚亂，提升表單可讀性。legend標(biāo)簽配合使用<legend>為<fieldset>分組設(shè)置標(biāo)題，增強(qiáng)表單可讀性，優(yōu)化整體布局，便于用戶理解和操作。示例代碼與效果展示

<fieldset><legend>健康信息</legend>...</fieldset>的示例代碼，呈現(xiàn)健康信息分組效果，直觀展示表單元素分組布局。表單相關(guān)偽類功能010203表單美化重要性表單是網(wǎng)頁交互核心，美觀實(shí)用可提升用戶體驗(yàn)，美化能增視覺效果且減少輸入錯(cuò)誤。CSS偽類作用CSS偽類是選擇特定狀態(tài)元素的選擇器，用于表單可增強(qiáng)交互性，簡(jiǎn)化代碼且性能高。常用偽類應(yīng)用如:focus、:disabled等偽類，各有定義、格式與實(shí)際應(yīng)用，可優(yōu)化表單交互與布局。表單相關(guān)偽類優(yōu)勢(shì)簡(jiǎn)化代碼與性能優(yōu)勢(shì)CSS偽類簡(jiǎn)化表單樣式定義，減少JavaScript依賴。瀏覽器原生支持，提升渲染性能，確保流暢交互體驗(yàn)。增強(qiáng)交互與用戶體驗(yàn)偽類為表單元素提供即時(shí)視覺反饋，如焦點(diǎn)高亮、禁用狀態(tài)提示，直觀引導(dǎo)用戶操作，降低誤操作率?？鐬g覽器兼容性保障主流瀏覽器均支持標(biāo)準(zhǔn)表單偽類，確保樣式在不同平臺(tái)一致呈現(xiàn)，避免因兼容性問題導(dǎo)致的顯示差異。:focus選擇器:focus選擇器定義:focus用于選取獲焦點(diǎn)元素，用戶點(diǎn)擊或Tab鍵切換時(shí)觸發(fā)，常用于表單輸入框等元素。:focus使用格式selector:focus{property:value;}，如input:focus{border:2pxsolidblue;}為輸入框添藍(lán)邊。:focus實(shí)際應(yīng)用表單中輸入框獲焦點(diǎn)時(shí)，可改邊框或背景色提示用戶，提升關(guān)注度，減少誤操作。:disabled選擇器:disabled選擇器定義:disabled選擇器用于選取被禁用的表單元素，禁用后用戶無法操作該元素，常用于控制表單交互流程。:disabled使用格式通過selector:disabled設(shè)置樣式，例如input:disabled可改變禁用輸入框背景色，直觀提示用戶狀態(tài)。:disabled實(shí)際應(yīng)用在注冊(cè)表單中，未填完必填項(xiàng)時(shí)禁用提交按鈕，配合灰色背景樣式，明確告知用戶當(dāng)前不可操作狀態(tài)。:enabled選擇器Part01Part03Part02:enabled選擇器定義:enabled選擇器用于選取未被禁用的表單元素，與:disabled相對(duì)，能選擇可正常使用的元素。:enabled使用格式使用格式為selector:enabled{property:value;...}，可設(shè)置可使用元素的樣式。:enabled實(shí)際應(yīng)用在表單中，可通過改變可使用元素樣式，如鼠標(biāo)指針形狀，提示用戶元素可操作。:checked選擇器010203:checked選擇器定義:checked用于選取被選中元素，如單選按鈕和復(fù)選框，表示用戶已選擇這些選項(xiàng)。:checked使用格式selector:checked{property:value;}，例如為選中項(xiàng)設(shè)置背景色或邊框樣式。:checked實(shí)際應(yīng)用在表單中，通過改變選中元素的樣式，如背景顏色，突出顯示用戶選擇。:required選擇器030201:required選擇器定義:required選擇器用于選取必填元素，在提交表單時(shí)用戶必須填寫這些字段，確保數(shù)據(jù)完整性。:required使用格式通過selector:required{property:value;}設(shè)置樣式，如為必填輸入框添加紅色邊框，明確提示用戶。:required實(shí)際應(yīng)用在表單中，改變必填字段樣式，如邊框顏色，告知用戶哪些字段必填，減少提交錯(cuò)誤，提高填寫質(zhì)量。:optional選擇器213:optional選擇器定義:optional選擇器用于選取未設(shè)required屬性的元素，表示用戶可選擇性填寫的字段。:optional使用格式selector:optional{property:value;}，如input:optional{border:2pxsolid#ccc;}，為非必填輸入框添加灰色邊框。:optional實(shí)際應(yīng)用表單中通過改變非必填字段樣式，如邊框顏色，區(qū)分必填和非必填字段，提升表單易用性。:read-only選擇器Part01Part03Part02:read-only選擇器定義:read-only選擇器用于選取設(shè)置了read-only屬性的元素，表示用戶只能查看，不能修改的字段。:read-only使用格式selector:read-only{property:value;...}，例如：input:read-only{background-color:#eee;}，將只讀輸入框背景設(shè)置為淺灰色。:read-only實(shí)際應(yīng)用在表單中，某些字段可能需要顯示但不允許用戶修改，如用戶信息的查看頁面，通過改變只讀字段的樣式，可以明確地告知用戶該字段不可編輯。06表格及布局表格標(biāo)簽010302<table>定義表格<table>標(biāo)簽用于創(chuàng)建表格，是表格的容器。表格結(jié)構(gòu)組成表格包含表頭、行和單元格。表頭由<th>定義，內(nèi)容加粗居中；行由<tr>定義，單元格由<td>定義，可包含文本、圖片等元素。表格標(biāo)題設(shè)置<caption>標(biāo)簽為表格添加標(biāo)題，位于表格上方，內(nèi)容居中顯示，增強(qiáng)表格的語義化，每個(gè)表格只能有一個(gè)標(biāo)題。合并左右列231合并左右列方法使用`colspan`屬性可合并表格左右列，取值為合并列數(shù)，如`<tdcolspan="2">`合并兩列，代碼示例展示其用法。`colspan`屬性作用`colspan`屬性用于控制表格單元格合并左右列，能改變表格結(jié)構(gòu)，使內(nèi)容呈現(xiàn)更符合需求，提升表格布局靈活性。合并列代碼要點(diǎn)合并左右列時(shí)，保留最左`<td>`標(biāo)簽，其他列標(biāo)簽可省略，通過示例代碼可清晰了解合并左右列的具體實(shí)現(xiàn)方式。合并上下行020301合并上下行方法使用`rowspan`屬性可合并表格上下行，取值為合并行數(shù)，如`<tdrowspan="3">`表示合并三行。合并行代碼示例合并行時(shí)保留最上邊`<td>`標(biāo)簽，其他行對(duì)應(yīng)`<td>`標(biāo)簽無需保留，示例展示操作方法。合并行注意事項(xiàng)合并上下行要確保數(shù)據(jù)邏輯正確，避免因合并導(dǎo)致表格結(jié)構(gòu)混亂或數(shù)據(jù)丟失。選擇器類型選擇010203標(biāo)簽選擇器應(yīng)用標(biāo)簽選擇器控制所有表格相關(guān)標(biāo)簽樣式，如`table{...}`設(shè)置全局表格樣式，統(tǒng)一管理。類選擇器使用類選擇器針對(duì)特定表格標(biāo)簽，如`.my-table{...}`，靈活調(diào)整局部樣式，滿足多樣需求。ID選擇器和后代選擇器ID選擇器用于唯一表格標(biāo)簽，如`#unique-table{...}`，精確控制單個(gè)元素樣式，避免沖突。如果需要將以上定義的表格樣式僅作用于指定的范圍內(nèi)，可以用后代選擇器實(shí)現(xiàn)。`border-collapse`屬性`border-collapse`屬性控制表格邊框折疊或分離，默認(rèn)值為separate，設(shè)為collapse可折疊雙線條邊框?yàn)閱尉€條。邊框折疊效果使用`border-collapse:collapse;`可使表格邊框折疊，避免雙線條，使表格更簡(jiǎn)潔。應(yīng)用場(chǎng)景在需要簡(jiǎn)潔表格樣式時(shí)，使用`border-collapse`屬性可有效減少邊框冗余，提升視覺效果。`border-spacing`屬性132`border-spacing`屬性定義`border-spacing`用于設(shè)置表格單元格間距，適用于邊框分離模式，可設(shè)一個(gè)或兩個(gè)值控制水平和垂直間距。屬性應(yīng)用場(chǎng)景該屬性常用于調(diào)整復(fù)雜表格布局，通過增大間距提升可讀性，避免內(nèi)容擁擠影響視覺效果。與邊框折疊對(duì)比相比`border-collapse`的單線邊框效果，`border-spacing`保留雙線結(jié)構(gòu)，適合需要強(qiáng)調(diào)單元格分隔的場(chǎng)景。`caption-side`屬性`caption-side`屬性定義`caption-side`屬性用于設(shè)置表格標(biāo)題的位置，默認(rèn)顯示在表格上方，可調(diào)整為下方以優(yōu)化布局。屬性取值說明`caption-side`屬性取值包括`top`和`bottom`，分別控制標(biāo)題在表格的頂部或底部顯示。語義化與樣式影響通過`caption-side`調(diào)整標(biāo)題位置，增強(qiáng)表格語義化，同時(shí)需配合CSS統(tǒng)一標(biāo)題樣式。隔行變色020301隔行變色作用隔行變色提升表格可讀性，數(shù)據(jù)量大時(shí)效果顯著，通過奇偶行不同背景色區(qū)分，便于視覺瀏覽與數(shù)據(jù)查看。隔行變色代碼用類選擇器為奇數(shù)行和偶數(shù)行定義樣式，如`.odd-row`和`.even-row`，在CSS中設(shè)置不同背景色，實(shí)現(xiàn)隔行變色效果。示例代碼展示示例代碼中，先為表格行添加對(duì)應(yīng)類名，再在CSS里為類名定義背景顏色，如奇數(shù)行設(shè)淺灰，偶數(shù)行設(shè)綠色，展示隔行變色。表格的特征010203表格默認(rèn)無邊框表格默認(rèn)無邊框，需通過CSS設(shè)置邊框樣式，以實(shí)現(xiàn)表格的視覺分隔和美化。單元格寬度分配表格設(shè)置寬度時(shí)，未指定單元格寬度則默認(rèn)平分，確保布局均勻。行高與列寬特性表格行高取最高單元格高度，列寬取最寬單元格寬度，保持對(duì)齊。單元格內(nèi)容對(duì)齊132單元格內(nèi)容對(duì)齊`th`內(nèi)容默認(rèn)加粗且居中，`td`內(nèi)容上下居中、左對(duì)齊。通過CSS可調(diào)整對(duì)齊方式，提升表格美觀度與可讀性。默認(rèn)對(duì)齊規(guī)則表格未設(shè)置樣式時(shí)，表頭與數(shù)據(jù)單元格按標(biāo)準(zhǔn)對(duì)齊顯示，確?；拘畔⑶逦尸F(xiàn)，為后續(xù)樣式調(diào)整提供基礎(chǔ)。對(duì)齊方式調(diào)整利用CSS的text-align和vertical-align屬性，可自定義單元格內(nèi)容水平與垂直對(duì)齊方式，滿足不同排版需求。07內(nèi)聯(lián)框架內(nèi)聯(lián)框架基本用法123內(nèi)聯(lián)框架定義內(nèi)聯(lián)框架即<iframe>標(biāo)簽，用于在網(wǎng)頁中嵌入其他網(wǎng)頁內(nèi)容，通過src屬性指定源URL，可設(shè)置寬高控制顯示范圍?；緦傩越馕龊诵膶傩园ǎ簊rc（嵌入地址）width/height（尺寸設(shè)定）支持name命名，用于超鏈接target定位跳轉(zhuǎn)位置?；A(chǔ)布局實(shí)踐通過<iframe>可實(shí)現(xiàn)內(nèi)容區(qū)域分離，如導(dǎo)航欄與主體內(nèi)容分區(qū)展示，配合target屬性實(shí)現(xiàn)框架間內(nèi)容加載聯(lián)動(dòng)。08CSS進(jìn)階應(yīng)用網(wǎng)頁logo及圖標(biāo)應(yīng)用網(wǎng)頁logo定義與設(shè)置網(wǎng)頁logo是網(wǎng)站重要標(biāo)識(shí)，通過<link>標(biāo)簽設(shè)置網(wǎng)站圖標(biāo)，rel屬性為shortcuticon，Type屬性為image/x-icon，href指定圖標(biāo)路徑。logo在瀏覽器顯示設(shè)置favicon.ico圖標(biāo)后，會(huì)在瀏覽器標(biāo)簽頁顯示，增強(qiáng)網(wǎng)站辨識(shí)度與專業(yè)性。圖標(biāo)的靈活應(yīng)用圖標(biāo)除圖片文件外，還可用字體圖標(biāo)，如阿里巴巴iconfont矢量圖標(biāo)庫，下載引入CSS后，用<i>或<span>標(biāo)簽插入。CSS代碼復(fù)用提出背景隨著頁面增多，CSS代碼量飆升，導(dǎo)致網(wǎng)頁加載變慢，影響網(wǎng)站的維護(hù)效率。基本概念CSS代碼復(fù)用，簡(jiǎn)單理解就是相同的代碼不重復(fù)編寫，一個(gè)代碼可以多次使用。優(yōu)點(diǎn)CSS代碼的復(fù)用可以使得CSS代碼易于管理和維護(hù)，同時(shí)又能減小CSS文件的大小，加快網(wǎng)頁的顯示速度。外部樣式表文件外部樣式表優(yōu)勢(shì)提升代碼復(fù)用性，多個(gè)頁面共用樣式，便于集中管理與維護(hù)，減少冗余代碼。便于更新維護(hù)修改一次外部樣式表，所有引用頁面自動(dòng)更新，降低維護(hù)成本，提高更新效率。提升性能緩存瀏覽器可緩存外部樣式表，減少重復(fù)加載，加快頁面響應(yīng)速度，優(yōu)化用戶體驗(yàn)。CSS類選擇器與HTML標(biāo)簽的class屬性010203簡(jiǎn)化樣式定義多個(gè)標(biāo)簽需相同樣式時(shí)，通過類選擇器和class屬性復(fù)用樣式，避免重復(fù)編寫，提升代碼簡(jiǎn)潔性。增強(qiáng)樣式靈活性同一標(biāo)簽可應(yīng)用多個(gè)類選擇器，組合出復(fù)雜樣式，靈活調(diào)整外觀，滿足多樣化設(shè)計(jì)需求。提高代碼可讀性使用語義化的類名，使代碼更易讀，便于團(tuán)隊(duì)協(xié)作與后續(xù)維護(hù)，提升開發(fā)效率。CSSreset重置樣式統(tǒng)一瀏覽器默認(rèn)樣式不同瀏覽器對(duì)HTML標(biāo)簽?zāi)J(rèn)樣式各異，CSS重置樣式可消除差異，確保頁面元素外觀一致，提升跨瀏覽器兼容性。提高跨瀏覽器兼容性通過CSS重置樣式，網(wǎng)站在不同瀏覽器中表現(xiàn)一致，避免因默認(rèn)樣式差異導(dǎo)致的布局錯(cuò)亂，增強(qiáng)用戶體驗(yàn)。簡(jiǎn)化樣式開發(fā)流程CSS重置樣式后，避免瀏覽器默認(rèn)樣式干擾，提高開發(fā)效率與樣式可控性。CSS樣式重用010203提高樣式組合性將常用CSS規(guī)則定義為獨(dú)立樣式，通過組合滿足復(fù)雜需求，避免重復(fù)定義相同規(guī)則，減少代碼量，提升開發(fā)效率。降低樣式冗余通過樣式重用，避免在多個(gè)樣式中重復(fù)定義相同規(guī)則，如`text-align`、`float`等，減少代碼量，優(yōu)化維護(hù)成本。提升開發(fā)效率開發(fā)者可快速通過組合已定義樣式實(shí)現(xiàn)新效果，無需重復(fù)編寫，顯著提升開發(fā)效率和代碼復(fù)用率。模塊化010203模塊化提升復(fù)用率將功能相同或相似的頁面部分定義為模塊，如通用按鈕、選項(xiàng)卡等，在不同頁面復(fù)用，減少重復(fù)開發(fā)，提高代碼復(fù)用率。支持多人協(xié)作開發(fā)模塊化使團(tuán)隊(duì)成員可獨(dú)立開發(fā)不同模塊，降低耦合，提高協(xié)作效率，避免相互干擾，加快項(xiàng)目開發(fā)進(jìn)程。優(yōu)化維護(hù)成本模塊獨(dú)立，修改一處，所有引用模塊自動(dòng)更新，減少重復(fù)維護(hù)工作，降低網(wǎng)站維護(hù)成本，提高維護(hù)效率。避免模塊過度拆分010203避免模塊過度拆分模塊功能過簡(jiǎn)致數(shù)量過多，增加維護(hù)難度，需平衡數(shù)量與簡(jiǎn)單度，如按鈕模塊不宜再細(xì)分。合理劃分模塊原則針對(duì)頁面元素與框架結(jié)構(gòu)模塊化，如通用按鈕、頭部，避免包含相同部分，提高復(fù)用率。模塊化開發(fā)優(yōu)勢(shì)提高開發(fā)效率，便于維護(hù)與擴(kuò)展，如圖書館網(wǎng)頁模塊化，新功能添加只需操作對(duì)應(yīng)模塊。09PC端網(wǎng)頁布局綜合案例實(shí)戰(zhàn)華為商城首頁P(yáng)C端布局華為商城首頁布局運(yùn)用HTML+CSS技術(shù)，構(gòu)建導(dǎo)航欄、輪播圖等模塊，實(shí)現(xiàn)復(fù)雜商業(yè)網(wǎng)站首頁的模塊化布局。頁面結(jié)構(gòu)設(shè)計(jì)通過CSS定位與浮動(dòng)機(jī)制，精準(zhǔn)控制各元素位置，確保頁面結(jié)構(gòu)清晰且功能分區(qū)明確。樣式復(fù)用優(yōu)化采用外部樣式表及類選擇器，減少代碼冗余，提升維護(hù)效率，保障多頁面風(fēng)格統(tǒng)一?！罢l的來電——防范電信詐騙”思政案例PC端布局思政案例布局需求“誰的來電——防范電信詐騙”思政案例需清晰展示防范知識(shí)，結(jié)合導(dǎo)航欄、輪播圖等元素，提升用戶體驗(yàn)與交互性。網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)要點(diǎn)采用模塊化布局，劃分標(biāo)題、導(dǎo)航欄及輪播圖，確保信息層次分明，便于用戶快速獲取防范詐騙的核心內(nèi)容。交互功能實(shí)現(xiàn)方式導(dǎo)航欄與輪播圖需具備動(dòng)態(tài)交互，通過CSS樣式優(yōu)化視覺效果，為后續(xù)交互功能作好鋪墊，增強(qiáng)用戶參與感，助力思政教育目標(biāo)達(dá)成。THANKS感謝觀看第5章HTML5+CSS3移動(dòng)網(wǎng)站布局網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程CONTENT目錄HTML5新增標(biāo)簽與特性01CSS3新增偽類與偽元素02CSS3變形、過渡及動(dòng)畫03CSS3新增屬性04CSS3彈性盒模型05響應(yīng)式布局和自適應(yīng)布局0601HTML5新增標(biāo)簽與特性HTML5概述HTML5核心特性HTML5是萬維網(wǎng)核心語言的第五次大修改，新增語義特性、本地存儲(chǔ)及設(shè)備兼容等特性，為移動(dòng)設(shè)備Web開發(fā)提供良好支持。結(jié)構(gòu)性標(biāo)簽應(yīng)用HTML5引入

<header>、<nav>、<section>等結(jié)構(gòu)性標(biāo)簽，優(yōu)化文檔結(jié)構(gòu)，提升內(nèi)容可讀性與搜索引擎友好度。語義化標(biāo)簽解析通過

<hgroup>、<figure>、<time>等語義化標(biāo)簽，HTML5實(shí)現(xiàn)內(nèi)容分組與媒體關(guān)聯(lián)，增強(qiáng)文檔語義表達(dá)與機(jī)器解析能力。結(jié)構(gòu)性標(biāo)簽020301HTML5結(jié)構(gòu)性標(biāo)簽定義HTML5結(jié)構(gòu)性標(biāo)簽是增強(qiáng)語義的`div`塊，用于按邏輯分割頁面，使文檔結(jié)構(gòu)更清晰，便于閱讀和維護(hù)。主要結(jié)構(gòu)性標(biāo)簽介紹主要標(biāo)簽包括`<header>`、`<nav>`、`<section>`、`<article>`、`<aside>`和`<footer>`，有助于搜索引擎理解頁面內(nèi)容。與`div`標(biāo)簽的區(qū)別結(jié)構(gòu)性標(biāo)簽語義化更強(qiáng)，能準(zhǔn)確描述頁面結(jié)構(gòu)，而`div`標(biāo)簽則無特定語義，適用于樣式和行為定義。常見的結(jié)構(gòu)性標(biāo)簽各標(biāo)簽定義用途（1）`<header>`定義頁眉，`<nav>`用于導(dǎo)航，`<section>`劃分版塊。各標(biāo)簽定義用途（2）`<article>`展示獨(dú)立內(nèi)容，`<aside>`呈現(xiàn)附屬信息，`<footer>`包含頁腳信息。語義化標(biāo)簽語義化標(biāo)簽核心價(jià)值增強(qiáng)代碼可讀性與可維護(hù)性，提升SEO效果及無障礙訪問能力，明確內(nèi)容結(jié)構(gòu)獨(dú)立于樣式。語義化標(biāo)簽分類解析涵蓋分組標(biāo)題、獨(dú)立內(nèi)容、時(shí)間標(biāo)記等標(biāo)簽，各司其職優(yōu)化網(wǎng)頁語義結(jié)構(gòu)與交互體驗(yàn)。語義化應(yīng)用原則依內(nèi)容語義選標(biāo)簽，注意兼容性與易混淆點(diǎn)，結(jié)合ARIA提升無障礙訪問，遵循最佳實(shí)踐。010203<hgroup>功能與示例020301組合標(biāo)題功能使用hgroup標(biāo)簽可組合主副標(biāo)題，如h1與h2搭配，增強(qiáng)文檔結(jié)構(gòu)層次，利于搜索引擎理解頁面主題。標(biāo)題示例展示示例中通過hgroup包裹歡迎語及副標(biāo)題，清晰呈現(xiàn)內(nèi)容層級(jí)，此標(biāo)簽有助于組織頁面頭部信息，提升可讀性。語義化優(yōu)勢(shì)hgroup明確標(biāo)題關(guān)系，符合語義化標(biāo)準(zhǔn)，使代碼結(jié)構(gòu)更清晰，對(duì)SEO及無障礙訪問有積極意義，獨(dú)立于樣式存在。<figure>與<figcaption>功能1獨(dú)立內(nèi)容組合功能<figure>用于包裹圖片、代碼等獨(dú)立內(nèi)容，<figcaption>為其添加標(biāo)題說明，增強(qiáng)語義化與可讀性。2標(biāo)簽使用示例通過<figure>嵌套<figcaption>展示美圖集錦，清晰標(biāo)注內(nèi)容主題，提升頁面信息結(jié)構(gòu)化程度。3應(yīng)用場(chǎng)景解析適用于圖文混排、多媒體資源展示等場(chǎng)景，替代容器，明確內(nèi)容與標(biāo)題的關(guān)聯(lián)性。<time>功能與示例010203時(shí)間標(biāo)記標(biāo)簽功能用于機(jī)器可讀的日期/時(shí)間，關(guān)鍵屬性有datetime指定標(biāo)準(zhǔn)格式，pubdate標(biāo)記發(fā)布日期。示例展示如在段落中用<timedatetime="2024-10-01">國(guó)慶節(jié)</time>表示特定時(shí)間，增強(qiáng)語義。時(shí)間標(biāo)記注意事項(xiàng)使用時(shí)需注意正確設(shè)置屬性值，確保時(shí)間信息準(zhǔn)確且符合規(guī)范要求。<datalist>功能與示例010302輸入選項(xiàng)列表功能為文本輸入框提供預(yù)定義選項(xiàng)，提升用戶輸入效率與體驗(yàn)。通過下拉建議形式展示，方便用戶快速選擇或輸入自定義內(nèi)容。綁定方式與示例將input元素的list屬性與datalist中的id屬性關(guān)聯(lián)，實(shí)現(xiàn)選項(xiàng)提示功能。示例中展示如何為輸入框添加預(yù)定義選項(xiàng)，如HTML、CSS等，提升交互性。顯示效果與用途輸入時(shí)自動(dòng)顯示預(yù)定義選項(xiàng)，簡(jiǎn)化用戶操作流程。適用于需要固定選項(xiàng)的輸入場(chǎng)景，如表單填寫、搜索過濾等，提升用戶體驗(yàn)。<details>與<summary>功能1·2·3·功能與屬性<details>與<summary>組合創(chuàng)建可交互組件，<summary>定義可點(diǎn)擊區(qū)域，<details>包裹隱藏內(nèi)容。交互效果默認(rèn)折疊顯示，點(diǎn)擊展開內(nèi)容，支持open屬性控制初始狀態(tài)。應(yīng)用場(chǎng)景適用于長(zhǎng)文本、表單說明等需要用戶手動(dòng)觸發(fā)查看的內(nèi)容展示場(chǎng)景。<dialog>功能與示例010203標(biāo)簽功能定義對(duì)話框或確認(rèn)框，用于交互提示。需添加open屬性才能顯示，常配合JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果。<dialog>示例展示如<dia