1、網頁得三大組成：HTML(標籤、皮影的小人) \CSS(佈局，皮影的裝束) \JS(動作，皮影的操縱者)
2、HTML目錄樹
3、HTML-標籤
成對<>組成，不區分大小寫，自閉合標籤無需成對如<br/><hr/><input/><img />；可以嵌套id 不能重複，屬性只能出現在開始標籤或自閉和標籤中。屬性小寫，屬性值要用雙引號或單引號包裹；如屬性值和屬性名醫藥，直接寫屬性名即可；
3.1 <!DOCTYPE html> 標籤 通知瀏覽器渲染的標準
3.2 head標籤：
name標籤：<meta name="keywords" content = "linux 培訓">
描述標籤：<meta name="description"content="linux zhuanye peixun">
http-equiv
<meta http-equiv="Refresh" content="2;URL=http://www.sohu.com">
<meta charset="utf8"> 全寫<metahttp-equiv="content-Type"content="text/html;charset=UTF8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
html 必須加上縮進
3.3 body標籤：基本標籤
3.3.1 基本標籤：
<hn>:共六個最大的是h1最小得是h6
<p> ：段落標籤，包裹內容被換行。塊標籤。上下內容直接有一會空白
<br> 換行
<b><strong> 加粗
<strike> 文字中間加一橫線
<em>斜體
<sup> <sub> 上下標
<hr> 橫線
<div><span> 配合css使用，在div使用css做任何修飾，撐起一個盒子
3.3.2、標籤可分爲兩大類：塊級標籤和內聯標籤。
塊級標籤：<p><h1><table><ol><ul><form><div>
內聯標籤：<a><input><img><sub><sup><textarea><span>
塊級標籤特點：
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素
內聯標籤特點：
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。
若想渲染就加在標籤裏面
3.3.4圖片標籤：
<a> 超鏈接標籤：起到跳轉和錨的作用
id 和# 是一一對應，class和. 是一一對應
3.3.5列表標籤
<ul>無序列表
<ol>有序列表
<li> 列表中得每一項
<dl>定義列表
<dt> 列表標題<dd>列表項
3.3.6表格標籤: <table>:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）
<th>: table header <tbody>(不常用): 爲表格進行分區.
對錶格的裝飾建議使用css來做，不建議使用表格自身屬性來做
colspan：橫向合併單元格
3.3.7form 表單標籤：
表單擁有想服務器傳輸數據：
表單能夠包含input元素：文本字段、複選框、單選框、提交按鈕等等
還能包括textarea（簡介）、select（後臺提交數據）、fieldset 和lable元素
form屬性： action 指定參數提交的鏈接，通常指向服務器端的一個程序
向服務器傳遞參數的方式：post 和 get，默認是get方式
get：提交的鍵值對放在地址欄得url後面；安全性較差；對提交內容得長度有限制
post：提交的鍵值對不在地址欄；安全性較高；對提交內容的長度理論上沒有限制
增刪改用post 查get，注意傳和取的方式要保持一致
當表單需要上傳文件的時候一定要設置屬性：enctype="multipart/form-data"
3.3.8input類型
text：文本
password：密碼
3.3.9 塊標籤可以內嵌內聯標籤
3.3.10 name和id的區別：
name是和服務器通信時使用的名稱；id屬性是瀏覽器端使用得名稱，注意是爲了方便客戶端編程而在css和javascript中使用
對於不同的輸入類型，value 屬性的用法也不同：
value: 表單提交項的值.
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
checked: radio 和 checkbox 默認被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.
3.3.11 select ：下拉框
3.3.12 數據的提交是以form爲單位的，若不在form裏面則不提交。
4、CSS
CSS是Cascading Style Sheets的簡稱，中文稱爲層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。
工作原理：找到需要操作的標籤=》對定位標籤進行渲染=》
4.1 CSS 導入的四種方式
4.1.1 行內式:行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
4.1.2 嵌入式：嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：
<head>
<style type="text/css">
...此處寫CSS樣式
</style>
</head>
4.1.3 導入式:將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
4.1.4 鏈接式:也是將一個.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
注意：導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點。
5、選擇器：
5.1 基本選擇器：
通過標籤名稱來渲染
* 所有元素都渲染
#+id：通過元素id來渲染
class：通過類來渲染
備註：
id 和class的區別，id是唯一得，class是可以重複得。id 以 #開頭 ，class以.來開頭
<p class="tt rr"> aaa</p> 表示aaa通過tt 和rr來渲染，當有重複的時候以最後一個來渲染。下面覆蓋上面，右面覆蓋左面
5.2 組合選擇器
並列元素選擇器：e,f
後代元素選擇器：e f
子代元素選擇器：e>f
毗鄰元素選擇器：e+f 匹配所有緊隨E元素之後的同級元素F
注意：p 標籤不能嵌套 塊標籤
5.3 屬性選擇器
e[attr]
e[attr="jj"]
e[attr~="jj"] 包含jj就渲染
e[attr|="jj"] 以jj-開頭得就渲染
e[attr^="jj"] 以jj開頭就渲染
e[attr$="jj"] 以jj結尾就渲染
e[attr*="jj"] 包含jj就渲染
5.4 每個段落前後加文字
p:before{
content:"開始：";
color:red;
}
p:after{
content:"結束";
color:blue;
}
5.5 僞類選擇器： 專用於控制鏈接的顯示效果，僞類選擇器：
a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。
a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。
a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。
a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。
僞類選擇器 : 僞類指的是標籤的不同狀態:
a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標籤:僞類名稱{ css代碼; }
<style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } </style>
6、CSS常用屬性
6.1 顏色屬性：
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
6.2 字體屬性：
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">老男孩</h1>
6.3 背景屬性：
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)
簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意：如果講背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因爲body爲空，無法撐起背景圖片，另外，如果此時要設置一個
width＝100px，你也看不出效果，除非你設置出html。
6.4邊框屬性
border-style: solid;
border-color: chartreuse;
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;
6.5 列表屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; list-style: circle;
list-style: upper-alpha;
list-style: disc; }
6.7dispaly屬性（可將內聯標籤變成塊級標籤，也可將塊級標籤變成內聯標籤）
◾none
◾block
◾inline
7、CSS的簡寫
可簡寫爲：
8、CSS 盒子模型
盒子上下關係：
兄弟標籤，最大爲主。
父級若沒有邊界則向上找，這種現象叫邊界坍塌
9、float：脫離文檔流，
clear 清楚float對象，直至最後一個非float對象
10、position
static：按文本流方式走，默認
fixed ：脫離文檔流，浮動在最上面，類似滾動條
relative:添加後就能進行定位了，沒有脫離文檔流
absolute：脫離文檔流，依據html定位
11、HTML佈局
11.1 整體佈局
先創建html=》創建3個div=》
css 用的最多是class選擇器
從左向右的都用float
順序：上 右 下 左
width:980px;
margin:0 auto;
11.2 內聯標籤：
inline #內聯，無法使用高度寬度
block:：
inline-block # 內聯，可以設置設定高度寬度
11.3、內容高度：
line-height:
<div style="height:50px;background-color:red;line-height:50x;">asdfasdf</div>
11.5、background-position: 摳圖
backgroud:url(//misc.360buyimg.com)
background-position:0 0 no-repeat;
0 -91 ：表示向下移動
11.6、z-index:
設置z-index的值後，誰的值大渲染誰
指定層級，大的上面 小的下面
12、知識點補充
12.1 通常情況下css 要按層次寫 以防止渲染互擾。公共插件的CSS樣式無需包含
12.2 float 後，
撐起區域來的方法：.clearfix:after{content:'111';dispaly:block;clear:both;visibility:hidden;height:0;}
引用的方法： <div class=' c clearfix'> </div>
12.3 hover的應用：(1)可以在後面加內容(2)overfloat+hover
12.4 position:
fixed:永遠固定在整個屏幕的某一位置
relative:
absolute: 若父標籤沒有relative 那麼與fixed相同
12.6 箭頭：
12.7 圖標：
圖片
css
自己畫（使用插件：fontawsom）
13、目錄結構
-app
-s1.html
-s2.html
-css
- commons.css
-script
-commons.js
-plugin
-xxx
-bxslider
-bootstrap
-...
14、小知識：
14.1 a標籤包含圖片：在ie中img邊框就顯示出來了
14.2 important，加上後樣式優先渲染
15、後臺管理佈局：
16、邊緣提示框 ：relative 配合absolute來完成