Web前端開發(fā)技術(shù)項(xiàng)目教程課件 1.1.3 知識(shí)點(diǎn)3：HTML5和CSS3新增功能

HTML5和CSS3新增功能信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備HTML5新增功能1CSS3新增功能2響應(yīng)式設(shè)計(jì)301HTML5新增功能前端技術(shù)開發(fā)HTML5新增功能前端技術(shù)開發(fā)01<header>表示頁面或頁面區(qū)域（如區(qū)段或部分）的介紹性內(nèi)容。<footer>表示頁面或頁面區(qū)域的底部（頁腳）。<article>表示頁面中的獨(dú)立內(nèi)容區(qū)域，如博客條目、新聞報(bào)道等。<section>表示頁面中的一個(gè)獨(dú)立區(qū)段，如章節(jié)、頁眉、頁腳或頁面中的其他部分。<nav>表示頁面中的導(dǎo)航鏈接部分。<aside>表示與頁面主要內(nèi)容相關(guān)，但又是獨(dú)立的內(nèi)容區(qū)域，如側(cè)邊欄。語義化標(biāo)簽HTML5新增功能前端技術(shù)開發(fā)01媒體支持增強(qiáng)<video>和<audio>標(biāo)簽允許開發(fā)人員將視頻和音頻嵌入到HTML文檔中，而無需依賴第三方插件。支持多種視頻和音頻格式如MP4、WebM、Ogg等，提供了更廣泛的兼容性。媒體API提供了JavaScriptAPI來控制媒體播放、暫停、音量等，增強(qiáng)了交互性。HTML5新增功能前端技術(shù)開發(fā)01010203使用GeolocationAPI獲取用戶位置提供高精度和低精度兩種定位模式可用于構(gòu)建基于位置的服務(wù)和應(yīng)用HTML5地理定位HTML5新增功能前端技術(shù)開發(fā)01HTML5畫布010203提供了通過JavaScript在網(wǎng)頁上繪制圖形的方法支持圖像、矩形、圓形、線條等基本圖形的繪制可用于實(shí)現(xiàn)動(dòng)態(tài)圖表、動(dòng)畫和游戲等交互功能HTML5新增功能前端技術(shù)開發(fā)01HTML5拖放功能010203拖放API支持元素間的拖放交互可自定義拖放行為及數(shù)據(jù)傳遞增強(qiáng)了Web應(yīng)用的交互性和用戶體驗(yàn)02CSS3新增功能前端技術(shù)開發(fā)CSS3新增功能前端技術(shù)開發(fā)02屬性選擇器CSS3引入了更多強(qiáng)大的屬性選擇器，允許開發(fā)者根據(jù)元素的屬性和屬性值來選擇元素，提供了更靈活和精確的樣式定位能力。偽類選擇器新增了諸如`:nth-child()`,`:nth-last-child()`,`:nth-of-type()`,`:nth-last-of-type()`,`:last-child`,`:only-child`,`:only-of-type`等偽類選擇器，為選擇特定順序或類型的子元素提供了便利。結(jié)構(gòu)化偽類選擇器如`:not()`,`:empty`,`:root`等，允許根據(jù)文檔結(jié)構(gòu)來選擇元素，增強(qiáng)了選擇器的表達(dá)能力。選擇器升級(jí)CSS3新增功能前端技術(shù)開發(fā)02視覺樣式效果提升漸變效果CSS3支持線性漸變和徑向漸變，允許開發(fā)者創(chuàng)建豐富的背景效果，提升了頁面的視覺吸引力。圓角與邊框圖片border-radius屬性允許創(chuàng)建圓角元素，而border-image屬性則支持使用圖片作為邊框，提供了更多樣化的邊框樣式。變形與動(dòng)畫CSS3引入了`transform`屬性，支持對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜等操作。同時(shí)，通過`transition`和`animation`屬性，可以創(chuàng)建平滑的過渡效果和復(fù)雜的動(dòng)畫效果。陰影與光照效果通過`box-shadow`和`text-shadow`屬性，可以為元素和文本添加陰影效果，增強(qiáng)了頁面的立體感和層次感。CSS3新增功能前端技術(shù)開發(fā)02布局方式創(chuàng)新網(wǎng)格布局（Grid）CSSGrid是一種二維布局系統(tǒng)，允許開發(fā)者將頁面劃分為行和列，并在其中放置元素。它提供了更高級(jí)和靈活的布局控制能力，適用于復(fù)雜的網(wǎng)頁設(shè)計(jì)和響應(yīng)式設(shè)計(jì)。多列布局通過`column-count`、`column-width`等屬性，CSS3支持將文本內(nèi)容劃分為多列顯示，提高了文本的可讀性和頁面的美觀性。彈性盒子布局（Flexbox）Flexbox是一種現(xiàn)代的布局方式，允許開發(fā)者以更直觀和靈活的方式對(duì)元素進(jìn)行排列和對(duì)齊。它提供了強(qiáng)大的對(duì)齊和分布選項(xiàng)，使得復(fù)雜的布局變得簡單而高效。03020103響應(yīng)式設(shè)計(jì)前端技術(shù)開發(fā)響應(yīng)式設(shè)計(jì)前端技術(shù)開發(fā)03媒體查詢使用CSS3的媒體查詢功能，根據(jù)設(shè)備特性（如視口寬度）調(diào)整布局和樣式，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。彈性布局采用Flexbox或Grid等CSS3布局技術(shù)，創(chuàng)建靈活且響應(yīng)式的網(wǎng)頁布局。流式布局通過設(shè)置元素的百分比寬度，使元素能夠隨著視口寬度的變化而自動(dòng)調(diào)整大小。適配不同設(shè)備確保網(wǎng)頁在不同設(shè)備上（如手機(jī)、平板、桌面電腦）都能良好地顯示和使用。小結(jié)前端技術(shù)開發(fā)05CSS3樣式增強(qiáng)CSS3引入了圓角、陰影、漸變、動(dòng)畫等視覺效果，使頁面更加美觀和動(dòng)態(tài)。HTML5功能增強(qiáng)HTML5引入了大量語