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年大前端面試題彙整（收藏） 》