html階段易錯(cuò)點(diǎn)

1.下面的說法正確的是B

A? 一個(gè)transform可以聲明多個(gè)功能函數(shù),不過之間需要逗號隔開

B? 一個(gè)transform可以聲明多個(gè)功能函數(shù),不過之間需要空格隔開

C? 一個(gè)transform不可以聲明多個(gè)功能函數(shù)

D? 一個(gè)元素可以添加多個(gè)transform屬性

2.以下不屬于H5標(biāo)簽的是（B）

A? aside

B? thead

C? article

D? section

增加標(biāo)簽：

1绊寻、結(jié)構(gòu)標(biāo)簽

（1）section：獨(dú)立內(nèi)容區(qū)塊哼丈，可以用h1~h6組成大綱，表示文檔結(jié)構(gòu)刁憋，也可以有章節(jié)、頁眉初坠、頁腳或頁眉的其他部分涵防；

（2）article：特殊獨(dú)立區(qū)塊星澳，表示這篇頁眉中的核心內(nèi)容吁讨；

（3）aside：標(biāo)簽內(nèi)容之外與標(biāo)簽內(nèi)容相關(guān)的輔助信息帖族；

（4）header：某個(gè)區(qū)塊的頭部信息/標(biāo)題；

（5）hgroup：頭部信息/標(biāo)題的補(bǔ)充內(nèi)容挡爵；

（6）footer：底部信息；

（7）nav：導(dǎo)航條部分信息

（8）figure：獨(dú)立的單元甚垦，例如某個(gè)有圖片與內(nèi)容的新聞塊茶鹃。

2、表單標(biāo)簽

（1）email：必須輸入郵件艰亮；

（2）url：必須輸入url地址闭翩；

（3）number：必須輸入數(shù)值；

（4）range：必須輸入一定范圍內(nèi)的數(shù)值迄埃；

（5）Date Pickers：日期選擇器疗韵；

a.date：選取日、月侄非、年

b.month：選取月蕉汪、年

c.week：選取周和年

d.time：選取時(shí)間（小時(shí)和分鐘）

e.datetime：選取時(shí)間、日逞怨、月者疤、年（UTC時(shí)間）

f.datetime-local：選取時(shí)間、日叠赦、月驹马、年（本地時(shí)間）

（6）search：搜索常規(guī)的文本域；

（7）color：顏色

3除秀、媒體標(biāo)簽

（1）video：視頻

（2）audio：音頻

（3）embed：嵌入內(nèi)容（包括各種媒體）糯累，Midi、Wav册踩、AU泳姐、MP3、Flash棍好、AIFF等仗岸。

4、其他功能標(biāo)簽

（1）mark：標(biāo)注（像熒光筆做筆記）

（2）progress：進(jìn)度條借笙；

（3）time：數(shù)據(jù)標(biāo)簽扒怖，給搜索引擎使用；發(fā)布日期9：00更新日期4:00

（4）ruby和rt：對某一個(gè)字進(jìn)行注釋业稼；注釋內(nèi)容瀏覽器不支持時(shí)如何顯示

（5）wbr：軟換行盗痒，頁面寬度到需要換行時(shí)換行；

（6）canvas：使用JS代碼做內(nèi)容進(jìn)行圖像繪制；

（7）command：按鈕俯邓；

（8）deteils ：展開菜單骡楼；

（9）dateilst：文本域下拉提示；

（10）keygen:加密稽鞭；

新增的屬性：

對于js進(jìn)行添加的屬性鸟整。

如果沒有以上兩個(gè)屬性的話，執(zhí)行順序?yàn)橄燃虞d（下載）第一個(gè)src朦蕴，然后在執(zhí)行其onload篮条，然后在向下依次同步執(zhí)行defer屬性在h5之前就已經(jīng)有了，輸入延遲加載（推遲執(zhí)行）吩抓，它會先加載（下載）src中文件內(nèi)容涉茧，然后等頁面全部加載完成后，再加載onload中js.async屬性屬于異步加載疹娶，它會在加載src后伴栓，立即執(zhí)行onload,同時(shí)還會繼續(xù)加載頁面以上執(zhí)行順序，alert顯示會先顯示b然后再顯示a

網(wǎng)頁中標(biāo)簽中加入小圖標(biāo)的樣式代碼

有序列表ol:新增start（列表起始值）雨饺，reversed（是否倒置）menu菜單type屬性（3個(gè)菜單類型）內(nèi)嵌css樣式：在標(biāo)簽內(nèi)部來定義一個(gè)樣式區(qū)塊（scoped）,只對樣式標(biāo)簽內(nèi)部才有效內(nèi)嵌框架：iframe元素钳垮，新增了seamless無邊距無邊框，srcdoc定義了內(nèi)嵌框架的內(nèi)容

<iframe>新增屬性：

manifest屬性：

定義頁面需要用到的離線應(yīng)用文件沛膳，一般放在<html>標(biāo)簽里

charset屬性：

meta屬性之一,定義頁面的字符集

sizes屬性：

base屬性:

<base href="http://localhost/" target="_blank">表示當(dāng)在新窗口打開一個(gè)頁面時(shí)锹安，會將href中的內(nèi)容作為前綴添加到地址前

defer屬性：

script標(biāo)簽屬性短荐，表示腳本加載完畢后，只有當(dāng)頁面也加載完畢才執(zhí)行（推遲執(zhí)行）

async屬性：

script標(biāo)簽屬性叹哭，腳本加載完畢后馬上執(zhí)行（運(yùn)行過程中瀏覽器會解析下面的內(nèi)容）忍宋，即使頁面還沒有加載完畢（異步執(zhí)行）

media屬性：

<a>元素屬性：表示對何種設(shè)備進(jìn)行優(yōu)化

hreflang屬性：

<a>的屬性，表示超鏈接指向的網(wǎng)址使用的語言

ref屬性：

<a>的屬性,定義超鏈接是否是外部鏈接

reversed屬性:

<ol>的屬性风罩，定義序號是否倒敘

start屬性：

<ol>的屬性糠排，定義序號的起始值

scoped屬性：

內(nèi)嵌CSS樣式的屬性，定義該樣式只局限于擁有該內(nèi)嵌樣式的元素超升，適用于單頁開發(fā)

HTML5全局屬性：對任意標(biāo)簽都可以使用的入宦，以下6個(gè)

data-yourvalue 、hidden室琢、Spenllecheck乾闰、tabindex、contenteditable盈滴、desginMode涯肩；

全局屬性：

1.可直接在標(biāo)簽里插入的：data-自定義屬性名字；

hidden（直接放上去就是隱藏）；

spellcheck="true"（語法糾錯(cuò)）病苗；

tabindex="1"（Tab跳轉(zhuǎn)順序）疗垛；

contenteditable="true"(可編輯狀態(tài)，單擊內(nèi)容硫朦，可修改)贷腕；

2.在JavaScript里插入的window.document.designMode = 'on'（JavaScript的全局屬性，整個(gè)頁面的文本都可以編輯了）咬展；

<nav>?

? ? ? ? <li>1</li>?

? ? ? ? <li>2</li>?

? ? ? ? <h3>1</h3>?

? ? ? ? <li>3</li>?

? ? ? ? <h3>2</h3>?

? ? ? ? <li>4</li>?

? ? ? ? <h3>3</h3>?

</nav>

其中nav h3:nth-child(2)選擇的是（D）

A? 內(nèi)容為2的li

B? 內(nèi)容為2的h3

C? 內(nèi)容為3的h2

D? 都選不到

4.實(shí)現(xiàn)動畫正反交替播放的語句是（B）

A? transiton:run 3s linear 0s infinite ;

B? animation:run 3s linear 0s infinite alternate;

C? animation:run 3s linear 0s infinite

D? transition:run 3s linear 0s infinite;

5.關(guān)于按鈕的高度說法正確的是（A）

A? 按鈕的高度包含了border和padding

B? 按鈕的height指的是內(nèi)容的高度

C? 按鈕的實(shí)際高度是所有的margin和padding及border之和

D? 按鈕的實(shí)際高度是margin+width

結(jié)論

button與text的顯示高度不同花履，由于處于的模式不同，button處于Quirks模式挚赊，text處于標(biāo)準(zhǔn)模式。

text屬性的顯示值= 原本高度+padding+border值

button屬性的顯示值= 原本高度（原本高度中包含了padding和border值）

5.怪異盒模型的總寬高不包括（D）

A? padding

B? border

C? content

D? margin

6.當(dāng)父元素空間不足,flex子元素不換行,也不縮小,可以使用以下哪種方式實(shí)現(xiàn)（A）

A? flex-shrink:0

B? flex-wrap:wrap

C? flex-grow:0

D? flex-basis:100%;

彈性盒屬性:

flex-direction屬性決定主軸的方向济瓢；

flex-wrap屬性定義荠割，如果一條軸線排不下，如何換行旺矾；

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式蔑鹦，默認(rèn)值為row nowrap；

justify-content屬性定義了項(xiàng)目在主軸上的對齊方式箕宙。

align-items屬性定義項(xiàng)目在交叉軸上如何對齊嚎朽。

align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線柬帕，該屬性不起作用哟忍。

項(xiàng)目（子元素）也有一些屬性：order，flex-grow陷寝，flex-shrink锅很，flex-basis，flex凤跑，align-self爆安。

order屬性定義項(xiàng)目的排列順序。數(shù)值越小仔引，排列越靠前扔仓，默認(rèn)為0。

flex-grow屬性定義項(xiàng)目的放大比例咖耘，默認(rèn)為0翘簇，即如果存在剩余空間，也不放大鲤看。

flex-shrink屬性定義了項(xiàng)目的縮小比例缘揪，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小找筝。

flex-basis屬性定義了在分配多余空間之前蹈垢，項(xiàng)目占據(jù)的主軸空間（main size）。

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫袖裕，默認(rèn)值為0 1 auto曹抬。后兩個(gè)屬性可選。

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式急鳄，可覆蓋align-items屬性谤民。默認(rèn)值為auto，表示繼承父元素的align-items屬性疾宏，如果沒有父元素张足，則等同于stretch。

7.以下對background-size屬性值描述正確的是(A,C)

A? background-size:cover; ?背景圖會超出容器,背景不會發(fā)生變形

B? background-size:contain; ?背景圖會超出容器,背景不會發(fā)生變形

C? background-size:100% 100%; ?背景圖會發(fā)生變形,背景圖不會超出容器

D? background-size:100%; ?背景圖不會超出容器,不會變形

效果如下：

如下所示：

8.關(guān)于怪異盒子的說法正確的是

A? 所有瀏覽器都默認(rèn)為怪異模式

B? 谷歌瀏覽器默認(rèn)是怪異模式

C? 文檔類型缺失在IE下會觸發(fā)怪異模式

D? 怪異模式下的寬度包含了border和padding

正確答案:?C,D

9.以下可以將圖片設(shè)置為圓形的有

A? border-radius:50%

B? border-radius:100%;

C? border-radius:0;

D? border-radius:none;

正確答案:?A,B

解析:border-radius 設(shè)置半徑? ? 50%? ?100%都能設(shè)置為正圓

10.以下可以實(shí)現(xiàn)讓整個(gè)當(dāng)前元素在頁面中不顯示的css聲明有哪些

A? opacity:0;

B? transform:scale(0);

C? overflow:hidden;

D? visibility:hidden;

正確答案:?A,B,D

解析:overflow是隱藏超出的內(nèi)容,visibility:hidden;是刪除html結(jié)構(gòu)坎藐，控制臺也找不到

11.定義子元素在3D空間中呈現(xiàn)的屬性

A? transform-style:preserve-3d;

B? transform-style:flat;

C? transform-style:flat-3d;

D? transform-origin:center;

正確答案:?A