# 回顾
* 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 练习
margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而pdding是内边距，是盒子的边与盒子内部元素的距离。
标准文档流 浏览器默认的排版规则
塌陷只有上下才会塌陷 左右不会塌陷