前端測驗題(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: 用在外部資源佔位標籤上,如, ,<script>,<video>...</p> <p></p>1.6 什麼是置換元素和非置換元素,每種類型至少舉出二個案例<p></p> <p>● 置換元素的內容來自外部, 此元素僅是外在資源的佔位符,如<img>,<video>,<audio>...<strong></strong>● 非置換元素內容來自目前文件,必須使用雙標籤,如<p>, <h1> - <h6>, <ul>...</p> <p></p>1.7 iframe標籤主要功能是什麼, 有什麼優缺點<p></p> <p>● 優點: 目前頁面,直接載入其它頁面, 而不必發生跳轉<strong></strong>● 缺點: 框架中的內容不會被搜尋引擎讀取, 且會增加過多的HTTP請求,影響頁面載入速度</p> <p></p>1.8 <form>標籤中的name屬性與表單控制項,如<input>中的name有何不同<p></p> <p>● <form>中的name屬性, 與它的id是一樣的,用來唯一標識該標籤<strong></strong>● 表單控制項中的name屬性, 是提供給伺服器端應用程式讀到表單資料的變數名稱</p> <p></p>1.9 表單中的按鈕有幾種, 常用的標籤有哪幾個<p></p> <p>● 按鈕有三種: 普通按鈕, 提交按鈕, 重設按鈕<strong></strong>● <input type="button">,<input type="submit">,<input type="rest",<button> </p> <p></p>1.10 無序列表與有序列表是否可以互相替代, 使用的屬性是什麼<p><strong></strong>● type</p> <p></p>1.11 表單數據的提交方式有幾種, 分析使用場景(選做)<p></p> <hr>● POST: 表單資料透過請求體發送<p><strong>● GET: 表單資料透過URL位址列傳送</strong><br></p> <p>2. CSS3部分<strong></strong></p> <p></p>2.1 外部樣式表,內部樣式表,行內樣式宣告各自的使用場景是什麼<p> </p> <p>● 外部樣式表: 適合所有引用該CSS的HTML文檔</p> <p>● 內部樣式表: 僅適用於目前HTML文檔<strong></strong>● 行內樣式表: 僅適用於目前HTML元素</p> <p></p>2.1 @import指令有什麼用處, 應該用在哪裡, 有哪些限制<p></p>##● 僅允許用在CSS 文件中<p><strong>● 必須位於CSS 文件的首行</strong></p> <p>2.3 什麼是區塊級元素, 行內元素, 行內區塊元素, 並舉例</p> <p></p>#● 區塊級元素: 默認垂直排列,如<div>,<table>,<ul>...<p><strong>● 行內元素: 預設水平排列, 如<span>,<a>, <input> ...</strong></p> <p>2.4 簡單選擇器有幾種, 寫出基本語法形式</p> <p></p>#● 元素: body {...}<p></p>● ID: #active {...}<p></p>● 類別: .red {...}<p></p>● 屬性: [title]<p></p>● 群組: h1,h2 ,h3 {...}<p><strong>● 通配: div * {...}</strong></p> <p>#2.5 結構(上下文)選擇器有幾種, 並舉例說明</p> <p></p>● 後代: main div {...}<p></p>● 子元素: section > span {...}<p></p>● 同級相鄰: div p { ...}<p><strong>● 同級所有: div ~ p {...}</strong></p>###2.6 :nth-child(n)和:nth-of-type(n) ######<p>● :nth-child(n): 只與位置關聯</p> <p>● :nth-of-type(n): 與位置和類型均關聯</p> <p><strong>2.7 : nth-child(n)和:nth-of-type(n)中的參數n的使用規則</strong></p> <p>#● 用在字面量中, 從1開始, 如: :nth-child( 3)</p> <p>● 用在表達式中, 從0開始, 如: :nth-child(2n 1)</p> <p>● 允許負值</p> <p><strong>2.8 彈性盒子(FlexBox)解決CSS中的佈局中的什麼問題,最適合用在哪裡</strong></p> <p>● 解決了傳統佈局中的元素垂直對齊, 以及響應式佈局的問題</p> <p> #● 主要用於跨裝置的頁面佈局,特別適合響應式,如行動端</p> <p><strong>2.9 彈性元素flex屬性的常用值,與對應的值組合有哪些,並一一說明</strong></p> <p>● initial,auto, content, 數值 </p> <p>● 預設值: flex: 0 1 auto</p> <p>● flex: flex-grow flex-shrink flex-basis</p> <p>● 各種組合,如flex: 1 1 auto; 等價於: flex: auto,...</p> <p><strong>2.10 vh/vw單位,與auto, 100%有什麼區別</strong></p> <p>● vh/vw: 視窗大小佔比, 與裝置相關</p> <p>● auto: 為預設值, 通常與裝置無關</p> <p>● 100% : 自知識父容器大小</p> <p><strong>2.11 (選做)為什麼align-content只能用在多行彈性容器中</strong></p> <p>● 單行容器中, 交叉軸上可使用align-items屬性設定</p> <p>更多面試題，請參考：《<a href="https://www.php.cn/toutiao-415600.html" target="_blank">2019年大前端面試題彙整（收藏）</a>》</p>
