首頁 >頭條 > 正文

php中文網線上班前端(HTML5/CSS3)測試題

原創2019-12-04 11:05:5101613
phpStudy Linux 面板(小皮面板)

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

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

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

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


1. HTML5部分

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

● <header>,<nav>,<main>,<article>, <aside>,<footer>,<section>

● <div class="header">,<div class="nav">,<div class="main">,...

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: 用于超文本或樣式,用在<link>和<a>標簽上

● src: 用在外部資源占位標簽上,如<img>,<iframe>,<script>,<video>...

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

● 置換元素的內容來自外部, 該元素僅是外部資源的占位符,如<img>,<video>,<audio>...

● 非置換元素內容來自當前文檔,必須使用雙標簽,如<p>, <h1> - <h6>, <ul>...

1.7 iframe標簽主要功能是什么, 有什么優缺點

● 優點: 當前頁面,直接加載其它頁面, 而不必發生跳轉

● 缺點: 框架中的內容不會被搜索引擎讀取, 且會增加過多的HTTP請求,影響頁面載入速度

1.8 <form>標簽中的name屬性與表單控件,如<input>中的name有何不同

● <form>中的name屬性, 與它的id是一樣的,用來唯一標識該標簽

● 表單控件中的name屬性, 是提供給服務器端應用程序讀到表單數據的變量名

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

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

● <input type="button">,<input type="submit">,<input type="rest",<button>

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

● type

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

● POST: 表單數據通過請求體發送

● GET: 表單數據通過URL地址欄發送


2. CSS3部分

2.1 外部樣式表,內部樣式表,行內樣式聲明各自的使用場景是什么

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

● 內部樣式表: 僅適用于當前HTML文檔

● 行內樣式表: 僅適用于當前HTML元素

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

● 僅允許用在 CSS 文檔中

● 必須位于 CSS 文檔的首行

2.3 什么是塊級元素, 行內元素, 行內塊元素, 并舉例

● 塊級元素: 默認垂直排列,如<div>,<table>,<ul>...

● 行內元素: 默認水平排列, 如<span>,<a>, <input>...

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年大前端面試題匯總(收藏)

php中文網最新課程二維碼
  • 相關標簽:前端
  • 本文原創發布php中文網,轉載請注明出處,感謝您的尊重!
  • 相關文章

    相關視頻


    網友評論

    文明上網理性發言,請遵守 新聞評論服務協議

    我要評論
  • 專題推薦

    推薦視頻教程
  • 《20天入門精通PHP》視頻教程《20天入門精通PHP》視頻教程
  • phpStudy V8 視頻教程phpStudy V8 視頻教程
  • PHP文件基礎操作PHP文件基礎操作
  • PHP開發免費公益直播課PHP開發免費公益直播課
  • 視頻教程分類
    118期四肖中特唯一