1. 程式人生 > >前端知識點總結(HTML篇2)

前端知識點總結(HTML篇2)

html概念、全稱、含義
web標準構成----結構、表現、行為
html基本結構
doctype ---- 宣告文件型別
常用標籤
img的屬性 src alt title 含義
a的屬性 href target含義
表格屬性
border-collapse
table-layout:fixed
表單
button和submit區別

2.css基礎
css全稱 含義
css語法
樣式表建立的三種方式
兩種外部樣式引入的區別
樣式表的優先順序
選擇器
權重
浮動屬性的取值及清除浮動的方式及各自的優劣
註釋 html註釋和css註釋

3.css核心屬性
浮動
文字屬性
字型大小的表示方式及網頁預設字型大小 網頁單位
文字屬性簡寫
font: font-style font-weight font-size/line-height font-family
font:12px/24px "微軟雅黑";
背景屬性
背景圖和插入圖片的區別
背景屬性

4.盒模型
padding
margin
border
盒模型實際寬度的計算
padding和margin的使用場景
margin傳遞和重疊的問題
文字溢位的四個屬性

5.元素型別
基本元素型別及特點
置換元素

6.定位、錨點、透明
定位的四個屬性值及特點
輔助屬性 z-index和left/right/top/bottom
包含塊的概念
錨點概念及語法
透明及相容寫法

7.圖片整合技術
優勢
如何實現
滑動門

8.自適應寬高
最小高度及相容
visibility:hidden和display:none區別?
偽物件操作符(偽元素)
before和after
自適應視窗的實現

9.瀏覽器相容
瀏覽器核心及代表作
css bug
css hack
ie過濾器
filter過濾器
常見的bug及hack
img
向下三畫素 block或者vertical-align
左右間距 float
ie6雙邊距 display:inline
ie圖片邊框
預設高度(最小高度)font-size:0;或者overflow:hidden
表單元素距離頂部不一樣 float:left
按鈕高度不一致 a模擬 外面套一層div
ie6百分比出現小數點會四捨五入 給右邊的元素新增 clear:right
ie6input預設不上下居中 給line-height

10.表單高階
表單
fieldset
legend
label for屬性的使用
表格
合併單元格
table-layout:fixed
隔行變色
表格標題 caption
合併行、列

資料行分組 thead tbody tfoot
css統籌(全域性)
BFC概念、觸發BFC的條件、應用

11.H5基礎
html5新特性
語義化標籤
插入媒體 聲音和視訊
畫布 canvas
datalist
響應式佈局
h5新增表單元素
email
url
number
range
color
date
h5新增表單驗證
placeholder
autofocus
required
novalidate 取消驗證
自動驗證 min max step

12.css3
漸進式增強和優雅降級概念和區別
css3選擇器
屬性選擇器
偽類選擇器
結構性
nth
root
empty
目標
target
UI元素
enabled
disabled
checked
::selection
否定
not
動態
link/visited/hover/active/focus
層級選擇器
子選擇器 相鄰兄弟選擇器 同級通用選擇器
css3文字屬性
陰影
換行 word-wrap word-break
字型 @font-face
css3背景屬性
background-origin 背景原點(背景圖填充的相對位置)
background-clip 背景裁切
background-size
多背景屬性
圓角
陰影

13.彈性盒子
怪異盒子(IE6正常模式)
彈性盒子概念及屬性

14.響應式實現
概念和實現的核心:媒體查詢

15.移動端頁面佈局
rem/em 自適應的實現
淘寶適配和網易適配

16.css漸變、過渡和2d轉換
css3漸變
線性漸變
徑向漸變
重複漸變
css3過渡
transition 四個屬性值
2d轉換
trasform
translate
scale
skew
rotate
注意多個值同時使用時的問題
transform-origin
位移和旋轉同時使用的先後問題

17.3d轉換和動畫
3d轉換
transform
translate
rotate
scale
景深:perspective
透視:backface-visibility
定義3d: transform-style:preserve-3d、flat
旋轉中心:transform-origin
3d盒子

逐幀動畫 animation
旋轉相簿的實現
過渡動畫與逐幀動畫的區別

手風琴效果
字型圖示的實現

/修改placeholder顏色/
input::-webkit-input-placeholder {
color:red;
}
/多行超出省略/
.ee{
width: 120px;
height: 60px;
line-height: 20px;
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
box是i老版的怪異盒子,只能在移動端使用