# 回顧
* HTML標籤： 格式排版
```
p 段落 雙
br 換行 單
hr 分隔線 單
h1~h6 標題 雙
pre 原樣格式化輸出 雙
div
```
* HTML標籤 ：文本
```
<em> 強調 傾斜 雙
<ruby></ruby> 加拼音
<rt></rt>
<strong> 加粗 強調 雙
<mark></mark> 標記 選中 雙
<sub></sub> 下標
<sup></sup> 上標
<ins></ins> 插入的內容
<del></del> 刪除的內容
```
* CSS： 在html中的使用
```
link 外部css 單 href type rel
<style> 雙
style屬性
```
* CSS選擇器以及優先級
```
#id
.className
tagName
組合 selector1 selectoer2
組合 selectoer1>selectoer2
羣組 selectoer1,selecoter2
and p.item .item.first-item p#nav <div class="item first-item">
*
```
```
id > class > tagName
```
* CSS屬性： 字體 文本 顏色
```
font:[bold|style] size family
font-family:
font-size:
font-weight bold
font-style italic
font-variant: small-caps
```
```
color
```
```
word-spacing
letter-spacing
text-align left/right/center
vertical-align: middle/top/bottom
line-height
word-wrap: break-word / overflow-wrap
white-space: pre / pre-wrap
text-decoration: underline / overline / line-through / none
text-indent
```
* CSS顏色和長度
```
# 顏色
colorName
rgb() rgb()
#十六進制
# 長度
px
em
百分比
```
## 1 CSS 屬性/尺寸/邊框/背景
#### 尺寸
* width max-width min-width
* height max-height min-height
#### 邊框
* border-style 邊框風格 solid / dotted / dashed / double / none
* border-width 邊框寬度
* border-color 邊框顏色
* border 複合屬性 `border: 1px solid #ccc`
#### 內邊距
* padding-left
* padding-top
* padding-right
* padding-bottom
* padding
```css
padding: 值; 上下左右
padding: 值1 值2； 上下 左右
padding: 值1 值2 值3; 上 左右 下
padding: 值2 值2 值3 值4； 上 右 下 左
```
#### 背景屬性
* background-color 背景顏色 `transparent`
* background-image 背景圖片 url()
* background-repeat 背景圖片平鋪 repeat no-repeat repeat-x repeat-y
* background-position 背景圖片位置
* background-attachment 背景圖片固定 scroll / fixed
* background 複合屬性
```
background: color image repeat postion attachment
```
#### CSS Sprite 精靈圖 雪碧圖
* 利用 background-position 設置背景圖片的位置
* 把不少小的圖片 集成到一張大圖上
* 好處： 減小網絡請求數量
### 2 超級連接
#### 2.1 a 元素
##### 屬性
* href
* target _blank / _self
* title
* download H5新增的
##### 特殊用法
* 跳轉網頁
* 發短信
* 打電話
* 發郵件
#### 2.2 路徑
* 相對路徑 ./ ../
* 絕對路徑 URL `http://www.biadu.com/index.html`
* 特殊的相對路徑 `/lesson/path/index.html`
#### 2.3 cursor css屬性
```
pointer / move / no-drop
```
#### 2.4 錨點
設置錨點
```
第一種方式
<a name="錨點名字"></a>
第二種方式
隨便一個元素
<tagname id="錨點的名字"></tagname>
```
跳轉到指定錨點
```#
<a href="#錨點名"></a>
```
#### 2.5 完整URL
```
http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1
```
```
協議protocol http
主機名hostname www.baidu.com / IP
路徑 path /path/demo/contents/
文件名filename index.php
查詢內容query ?a=100&b=300
錨點 #mao1
```
### 3圖 片
#### img元素
屬性
* src
* title
* alt
* usemap
#### 圖片映射
##### map元素
* name
* id
##### area元素
* shape rect circle poly
* coords
* target
* href
* title
# 做業
* 完成圖片映射 和 錨點的聯繫
* css sprites 練習
php
margin和padding是在html中的盒模型的基礎上出現的，margin是盒子的外邊距，即盒子與盒子之間的距離，而pdding是內邊距，是盒子的邊與盒子內部元素的距離。css
標準文檔流 瀏覽器默認的排版規則html
塌陷只有上下才會塌陷 左右不會塌陷 瀏覽器