1.H5新增標(biāo)簽

<!-- 1.常見(jiàn)布局標(biāo)簽 --> <section></section> <article></article> <aside></aside> <header></header> <footer></footer> <hgroup></hgroup> <nav></nav> <figure></figure> <!-- 2.媒體標(biāo)簽 --> <audio src=""></audio> <video src=""></video> <!-- 3.input標(biāo)簽 --> <input type="email"> <input type="search"> <input type="url"> <input type="color"> <input type="number"> <input type="range"> <input type="date"> <input type="week"> <input type="month"> <input type="tel"> <!-- 4.form表單元素 --> <datalist><option value=""></option> </datalist><meter><!--進(jìn)度條 --> <progress>

2.新媒體標(biāo)簽

關(guān)于audio和video的通用屬性: src 資源路徑 controls 播放控件 loop 循環(huán)播放 muted 靜音播放不同的瀏覽器,對(duì)于"自動(dòng)播放autoplay"屬性 支持不同的策略 對(duì)于Chrome瀏覽器而言: 音頻不支持自動(dòng)播放 視頻開(kāi)啟 靜音muted 屬性,即可自動(dòng)播放<audio controls loop muted src="assets/小手拍拍.mp3"></audio> <!-- audio標(biāo)簽在網(wǎng)頁(yè)里是隱藏的 需要對(duì)其添加 播放控件controls才可以出現(xiàn) --><!-- 由于版權(quán)等原因，不同的瀏覽器可支持播放的格式是不一樣的 --> <!-- 所以 對(duì)于多瀏覽器支持方案,需要我們準(zhǔn)備各種格式的資源文件 --> <!-- 格式 --> <audio controls><source src="素材/小手拍拍.mp3"><source src="素材/小手拍拍.wav"><source src="素材/小手拍拍.ogg"></audio><video controls><source src="素材/movie.ogg"><source src="素材/movie.mp4"><source src="素材/movie.webm">您的瀏覽器不支持 </video>

3.新增表單元素

<!-- 新增input標(biāo)簽:自帶簡(jiǎn)單校驗(yàn)功能--> <!-- novalidate 關(guān)閉校驗(yàn)功能--> <form action=""><div><!-- 1.僅支持電子郵箱類(lèi)型 -->郵箱:<input type="email" name="email"></div><div><!-- 2.只支持網(wǎng)址格式 http:// 或者 https:// -->網(wǎng)址:<input type="url" name="url"></div><div><!-- 3.顏色拾取控件 -->顏色:<input type="color" name="color"></div><div><!-- 4.數(shù)字類(lèi)型 --><!-- step 定義 增加或者減少的步長(zhǎng) --><!-- min和max 定義所填數(shù)字的最大值和最小值 -->數(shù)字:<input type="number" min="0" max="20" name="number"></div><div><!-- 5.日期類(lèi)型 -->日期: <input type="date" name="date"></div><div><!-- 6.周類(lèi)型 -->周: <input type="week" name="week"></div><div><!-- 7.月份類(lèi)型 -->月份: <input type="month" name="month" tabindex="2"></div><div><!-- 8.輸入搜索關(guān)鍵詞的文本框 -->搜索: <input type="search" minlength="5" maxlength="10" name="search"></div><div><!-- 9.允許用戶(hù)選擇一個(gè)范圍內(nèi)的值 的滑塊 --><!-- min和max 指定滑塊選取值的范圍 --><!-- value 指定默認(rèn)的值 -->范圍: <input type="range" value="10" min="0" max="100" name="range"></div><div><!-- 10.電話(huà) -->電話(huà): <input type="tel" required tabindex="1"></div><div><input type="submit"></div> </form><!-- 新增屬性 --> <!-- multiple 支持輸入多個(gè)值:中間逗號(hào)隔開(kāi) --> <!-- required 必填項(xiàng) --> <!-- minlength和maxlength 指定最小和最大字符數(shù) --> <!-- autocomplete 是否保存用于之前輸入(默認(rèn)保存的)自動(dòng)填充功能on/off: https://www.w3school.com.cn/tiy/t.asp?f=eg_html5_input_autocomplete --> <!-- novalidate 關(guān)閉自帶校驗(yàn)功能,用于form標(biāo)簽 --> <!-- formaction 覆蓋表單的action屬性--> <!-- <input type="submit" formaction="xxx.action"> --> <!-- tabindex 控制input標(biāo)簽按tab鍵獲取焦點(diǎn)的順序 -->

4.外部字體引入

/* 引入外部字體 */@font-face{/*step1引入 字體文件的路徑 ttf是字體文件的格式 */src: url(assets/華康少女字體.ttf);/*step2 給引入的字體起名字(自定義字體) */font-family: 'bf';}

5.字體圖標(biāo)的應(yīng)用

<!-- 什么是字體圖標(biāo): --> <!-- 利用外部工具將 圖片做成 字體文件 --> <!-- 從而 使用圖片就像 使用文字 --> <!-- 可以通過(guò)font-size color修改 圖片的大小和顏色 --><!-- 使用步驟: --> <!-- step1引入font文件夾里的iconfont.css --> <!-- step2挑選需要的圖標(biāo)并獲取類(lèi)名 應(yīng)用于頁(yè)面 --> <!-- 使用 i em span 都可以 但是 必須攜帶iconfont 類(lèi)名 --> <!-- icon-xxx 是選取的圖標(biāo)類(lèi)名 --> <span class="iconfont icon-browse"></span> <!-- step2挑選需要的圖標(biāo)并獲取類(lèi)名 應(yīng)用于頁(yè)面 --> <i class="iconfont icon-add"></i>

6.私有化前綴

當(dāng)border-radius 沒(méi)有正式成為標(biāo)準(zhǔn)屬性之前;使用時(shí) 需要針對(duì)不同的瀏覽器 添加對(duì)應(yīng)的私有化前綴,以便瀏覽器能夠識(shí)別 chrome safria :-webkit- ie :-ms- 火狐:-moz- 歐朋:-o-需要添加前綴的屬性 不清楚 , 添加前綴 很繁瑣 ,可以借助 vscode 的"插件"(css-auto-prefix) 來(lái) 自動(dòng)添加私有化前綴 css-auto-prefix(應(yīng)用在 .css文件中 才有效)

7.CSS新增選擇器

子代選擇器 > 匹配的是父元素的直接子元素 兄弟選擇器 + 匹配 下一個(gè)符合條件的兄弟元素~ 匹配 下面所有符合條件的兄弟元素 屬性選擇器 [ ] 通過(guò) 屬性 選中元素= 屬性等于""^= 屬性以""開(kāi)頭$= 屬性以""結(jié)尾*= 屬性中含有""

8.鏈接偽類(lèi)

鏈接偽類(lèi):為超鏈接元素的四種狀態(tài)設(shè)置不同的樣式 (不常用) 1.未被訪(fǎng)問(wèn)時(shí)的狀態(tài) :link 2.鼠標(biāo)移入時(shí)的狀態(tài) :hover 3.點(diǎn)擊瞬間的狀態(tài) :active 4.訪(fǎng)問(wèn)過(guò)后的狀態(tài) :visited <style>a:link{color: green;}/* 把 visited 寫(xiě)在 hover 的前邊 ,這樣才可以保證 hover 一直有效 */a:visited{color: #333;}a:hover{color: orange;}a:active{ color: red;}</style>

9.表單偽類(lèi)

:focus 輸入框獲得焦點(diǎn)時(shí) :checked 單選框或者多選框被選中時(shí)

10.目標(biāo)偽類(lèi)

a 標(biāo)簽 除了 可以用于 跳轉(zhuǎn) 網(wǎng)址 之外 還可以(通過(guò)id)跳轉(zhuǎn) 頁(yè)面內(nèi)的元素此時(shí) 鏈接后邊 會(huì)有一個(gè) #id名,此時(shí)這個(gè)元素就叫做當(dāng)前網(wǎng)頁(yè)的錨點(diǎn)匹配當(dāng)前頁(yè)面的錨點(diǎn)元素

11.結(jié)構(gòu)偽類(lèi)

[]:nth-child(n) 匹配的是[]的父元素的第n個(gè)孩子 ()內(nèi)的最終數(shù)值不能為0 []:nth-child(n) 支持簡(jiǎn)單的表達(dá)式 2n 2n+1/2n-1 3n 4n 注意: 匹配時(shí)要同時(shí)符合 第n個(gè)元素&[]內(nèi)的內(nèi)容

12.偽元素

偽元素: 借助css樣式為一些雙標(biāo)簽(大部分) 在其內(nèi)部的前后添加兩個(gè)偽元素 ::before ::after 偽元素是行內(nèi)元素 設(shè)置寬高無(wú)效 偽元素的使用場(chǎng)景: 1.偽元素用于模擬 文字前面的 圖標(biāo)盒子 2.利用偽元素制作導(dǎo)航跟隨線(xiàn) 3.用于清除 浮動(dòng)影響(使用解決方法的方式3 主要是用偽元素模擬浮動(dòng)元素后面的塊元素).box::after{display: block;content: '';clear: both;}使用偽元素時(shí)的注意事項(xiàng): 1.content屬性必須有 可以為空 2.偽元素 是 行內(nèi)元素: 設(shè)置樣式時(shí)轉(zhuǎn)換標(biāo)簽表現(xiàn)形式 3.偽元素時(shí)作為 父元素的 子元素 插入使用的 4. ::before指的是所在父元素的第一個(gè)子元素;; ::after指的是所在父元素的最后一個(gè)子元素

13.文本偽元素

E::first-letter文本的第一個(gè)字母或字 E::first-line 文本第一行 E::selection 被選中的文本

總結(jié)

以上是生活随笔為你收集整理的阶段01-html和css基础(总结04)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。