html-Menu

目標

佈局知識學習/靜態頁面實現/在框架裏靈活運用

覺悟

打好基礎，這須要大量的練習

 

01前端開發流程

---

前端開發流程、軟件與編輯器、瀏覽器
前端開發語言（html）
標籤與代碼嵌套關係、樣式表的種類與區別
CSS常見樣式：width\height\border\複合樣式\rgb\16進制\background）
文字設置與排版：font\line-height\color\text-align
超連接、target、相對路徑與絕對路徑
盒模型及其注意事項

 

02H5標籤與CSS選擇器

---

 

僞類標籤的特性、
經常使用標籤：h1-h六、p、strong、em、span、ul、ol…，
HTML5新增標籤：header、nav、footer、section、article、aside、time、mark…、
特殊的img、
id選擇器、類選擇器、標籤選擇器、羣組選擇、包含選擇器、
通配符、選擇器優先級、css reset、塊和內嵌、inline-block、vertival-align


03浮動的深度剖析

---

 

浮動（float）概念、特性、浮動的屬性、浮動的表現、
文檔流的概念與現象、
清除浮動的原理、
清除浮動的方法：容器高度 \ 父級浮動 \ br清浮動 \ inline-block清浮動、after僞類清浮動方式、
BFC(塊級格式化上下文)及其做用、觸發BFC的條件、Haslayout

04定位進階

---

定位(position)的種類、相對定位（relative）概念、
相對定位的表現、絕對定位（absolute）概念、絕對定位的表現、
定位的層級特徵（z-index）、透明度、透明度濾鏡、opacity \ filter:alpha(opacity=0~100)、定位與透明度的實例、
固定定位（fixed）概念、固定定位的表現、固定定位引起的問題和注意事項、固定定位問題演示


05表格詳解

---

表格標籤大全：
table（表格父級標籤）、
thead（表格頭）、
tbody（表格主體）、
tr（表格行）、th（元素定義表頭）、td（元素定義表格單元）、
表格語義化及實例演示、
表格樣式重置：單元格間隙合併：border-collapse:collapse;、
重置單元格默認填充、單元格合併：colspan、rowspan、
表格綜合練習

06表單及相關屬性

---

表單（form）應用範圍、action、
input類型及屬性、
文本框、密碼、單選、複選、提交、重置、按鈕、圖片、上傳、隱藏、
label、select/option 下拉選框、
textarea文本域、
表單經常使用屬性、name、disabled與readonly的區別、checked/selected、label的for屬性、
表單的默認樣式重置、resize、outline、
表單綜合練習

07瀏覽器兼容性

---

CSS兼容性常見問題：margin兼容性問題、display:inline-block、最小高度問題、雙邊距、4px間隙、浮動元素寬度文字折行、父級元素的overflow:hidden與子元素relative、代碼調試、調試工具、手動調試、css hack、經常使用hack寫法、!important、html條件註釋語句：、PNG24 兼容性問題、IE6固定定位