php中文網路上班前端（HTML5/CSS3）測試題

---

前端測驗題(HTML5/CSS3)參考答案

#● 每題5分,共20題, 總分100

## ● 選做題, 做錯不扣分, 做到10分

快動手看看自己能考多少吧！

---

1. HTML5部分

1.1 HTML5常用的結構標籤有哪些,它取代了之前哪些標籤

● 

,

,

,

,

,

,

# 

,

# ,

> class="header">,

,

,...

1.2 HTML文件採用UTF-8編碼集的優點是什麼

● utf-8: 使用3個位元組表示一個符號, 基本上可以覆蓋世界上所有語言● 與傳統的gb2312,gbk相比, 可識別的字元集更多, 也是業界推薦

1.3 標籤中最常用的四大屬性是什麼

● id, class, title, style● 這四個屬性,幾乎每個html標籤都會有, 需要特別注意

1.4 標籤中的title與alt屬性的區別是什麼

● title: 是標籤的描述, 當滑鼠移入時,稍等會出現這個描述訊息● alt: 用在可置換元素上, 當外部資源無法正確載入時, 這個訊息會顯示在該佔位符上

1.5 標籤中的href 與src屬性有什麼區別

● 二者都是對外部資源的參考

● href: 用於超文本或樣式,用在和標籤上● src: 用在外部資源佔位標籤上,如,

1.6 什麼是置換元素和非置換元素,每種類型至少舉出二個案例

● 置換元素的內容來自外部, 此元素僅是外在資源的佔位符,如,

,

-

,

...

1.7 iframe標籤主要功能是什麼, 有什麼優缺點

● 優點: 目前頁面,直接載入其它頁面, 而不必發生跳轉● 缺點: 框架中的內容不會被搜尋引擎讀取, 且會增加過多的HTTP請求,影響頁面載入速度

1.8

標籤中的name屬性與表單控制項,如中的name有何不同

● 

中的name屬性, 與它的id是一樣的,用來唯一標識該標籤● 表單控制項中的name屬性, 是提供給伺服器端應用程式讀到表單資料的變數名稱

1.9 表單中的按鈕有幾種, 常用的標籤有哪幾個

● 按鈕有三種: 普通按鈕, 提交按鈕, 重設按鈕● ,,

1.10 無序列表與有序列表是否可以互相替代, 使用的屬性是什麼

● type

1.11 表單數據的提交方式有幾種, 分析使用場景(選做)

---

● POST: 表單資料透過請求體發送

● GET: 表單資料透過URL位址列傳送

2. CSS3部分

2.1 外部樣式表,內部樣式表,行內樣式宣告各自的使用場景是什麼

● 外部樣式表: 適合所有引用該CSS的HTML文檔

● 內部樣式表: 僅適用於目前HTML文檔● 行內樣式表: 僅適用於目前HTML元素

2.1 @import指令有什麼用處, 應該用在哪裡, 有哪些限制

##● 僅允許用在CSS 文件中

● 必須位於CSS 文件的首行

2.3 什麼是區塊級元素, 行內元素, 行內區塊元素, 並舉例

#● 區塊級元素: 默認垂直排列,如

,,

...

● 行內元素: 預設水平排列, 如,, ...

2.4 簡單選擇器有幾種, 寫出基本語法形式

#● 元素: body {...}
● ID: #active {...}
● 類別: .red {...}
● 屬性: [title]
● 群組: h1,h2 ,h3 {...}

● 通配: div * {...}

#2.5 結構(上下文)選擇器有幾種, 並舉例說明

● 後代: main div {...}
● 子元素: section > span {...}
● 同級相鄰: div p { ...}

● 同級所有: div ~ p {...}

###2.6 :nth-child(n)和:nth-of-type(n) ######

● :nth-child(n): 只與位置關聯

● :nth-of-type(n): 與位置和類型均關聯

2.7 : nth-child(n)和:nth-of-type(n)中的參數n的使用規則

#● 用在字面量中, 從1開始, 如: :nth-child( 3)

● 用在表達式中, 從0開始, 如: :nth-child(2n 1)

● 允許負值

2.8 彈性盒子(FlexBox)解決CSS中的佈局中的什麼問題,最適合用在哪裡

● 解決了傳統佈局中的元素垂直對齊, 以及響應式佈局的問題

#● 主要用於跨裝置的頁面佈局,特別適合響應式,如行動端

2.9 彈性元素flex屬性的常用值,與對應的值組合有哪些,並一一說明

● initial,auto, content, 數值

● 預設值: flex: 0 1 auto

● flex: flex-grow flex-shrink flex-basis

● 各種組合,如flex: 1 1 auto; 等價於: flex: auto,...

2.10 vh/vw單位,與auto, 100%有什麼區別

● vh/vw: 視窗大小佔比, 與裝置相關

● auto: 為預設值, 通常與裝置無關

● 100% : 自知識父容器大小

2.11 (選做)為什麼align-content只能用在多行彈性容器中

● 單行容器中, 交叉軸上可使用align-items屬性設定

更多面試題，請參考：《2019年大前端面試題彙整（收藏）》