前端面試準備筆記之html和css(02)

01. HTML5新增的一些特性

• 語義化標籤

<header> 頭部標籤
<nav> 導航標籤
<footer> 尾部標籤
<section> 塊級標籤

• 多媒體標籤

<audio src=" 文件地址" controls=" controls"></audio>
<video>

• input 表單和表單屬性

type="email" 郵箱
type="url" 路徑
type="data" 日期
type="time" 時間
type="month" 月份
type="week" 周
type="tel" 手機號
type="search" 搜索框

// 表單屬性類
required 表示變淡內容不能爲空，必填
placeholder 表單的提示信息
autofocus 自動聚焦，頁面加載完焦點自動到指定表單
multiple 能夠提交多選文件

02. CSS3新增的一些屬性

邊框屬性

• border-color：設置邊框多種顏色
• border-image: 圖片邊框
• border-radius: 圓角邊框
• box-shadow: 陰影效果

背景屬性

• background-size: 指定背景圖片尺寸
• background-origin: 指定背景圖片從哪裏開始顯示
• background-clip: 指定背景圖片從什麼位置開始裁剪

顏色屬性

• HSL colors
• HSLA colors
• opacity
• RGBA colors

文字效果

• text-shadow 文本陰影
• word-wrap 自動換行
• text-overflow 規定當文本溢出包含元素時發生的事情。

用戶界面

• box-sizing 容許您以特定的方式定義匹配某個區域的特定元素。
• resize 屬性規定是否可由用戶調整元素的尺寸。
• outline 是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。

選擇器

• attribute selectors

基礎盒模型

• overflow-x
• overflow-y

動畫效果

• transform 變換效果，能夠將元素實現旋轉、縮放、平移
• animation 動畫效果，指定屬性的初始狀態和結束狀態

過分效果

• transition

03. input 標籤中的typ屬性有哪些

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

04. css選擇器中，優先級排序，由高向低。

• !important
• 行內樣式，在style屬性中寫樣式
• id 選擇器
• class 選擇器
• 標籤選擇器
• 僞類/屬性
• 通配符選擇器
• 瀏覽器自定義的屬性和繼承

05. css 優先級規則

• css 選擇規則的權值不一樣時，權值高的優先;
• css 選擇規則的權值相同時，後定義的優先;
• css屬性後面加 ！important時，無條件絕對優先;

通常劃分4個等級:

• 第一級，內聯式，如style=「」，權值爲1000;
• 第二級，表明ID選擇器，如#id="", 權值爲0100;
• 第三級，表明class|僞類|屬性 選擇器,如clas|:hover,:link,:target|[type],權值 0010.
• 第四級，表明標籤|僞元素 選擇器，p|::after,::before,::fist-inline,::selection, 權值0001.

權值計算公式：

• 權值=第一等級個數+第二等級個數+第三等級個數+第四等級個數
• 比較時，時從高往低逐級進行比較的。

06. 僞類和僞元素的區別

• 僞元素的操做對象時新生成的dom元素，而不是原來的dom結構裏就存在的;而僞類偏偏相反，僞類的操做對象時原來的dom結構裏就存在的元素。
• 僞類和僞元素的根本區別在於：操做的對象元素是否存在於原來的dom結構裏。

僞類表示已存在的某個元素處於某種狀態，可是經過dom樹又沒法表示這種狀態，就能夠經過僞類爲其添加樣式。例如a元素的，:hover,:active

僞元素主要是用來建立一些不存在原dom結構樹中的元素。例如::before,::after在一些元素先後添加文字樣式等。這些內容不會改變文檔的內容，不會出如今DOM中，僅僅是在CSS渲染層加入。