1.<i></i>斜体标签 <em></em>标签
2.<b></b><strong></strong>标签：加粗
<base target="_blank">：整体链接在新网页中打开
<base>写到<head>之间
<pre>预格式化文本，按照我们预先写好的文字格式来显示页面，保留空格和换行
html表格合并单元格：
1.先确定合并位置
2.接下来进行合并
3.删除多余单元格
<thead>:表头
<tbody>:表体
<thead>内部必须拥有<tr>标签
无序列表<ul>
<li></li>
</ul>
<dl>自定义列表
<dt>表头
<dd>列表当中的内容
<input type="textarea">
unicode字体：
font-weight:700:加粗
400：正常大小
综合性写法：
font:italic 700 20px "微软雅黑"
rgb简写:当三原色第二位出现重复时，可以简写#ff0000->#f00
text-align:是让盒子中的内容调节，而不是盒子居中。
text-indent:首行缩进 em
text-decoration:文本的装饰
none_>取消下划线
后代选择器：作用范围为后代所有元素
子元素选择器：作用范围为子元素
交集选择器：p.red
并集选择器：p,red
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
顺序：lvha
块标签与行内标签
块标签：<div></div>
行内标签：<span></span>
- 块级元素的特点
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
- 注意：
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
行内元素
```
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
```
- 行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）**行内元素只能容纳文本或则其他行内元素。**
<img src="media/w.jpg" /> 注意：
- 链接里面不能再放链接。
- 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
## 2.4 行内块元素（inline-block）
- 例：
```
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
```
## 2.5 三种模式总结区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| ---------- | ---------------------- | ---------------------- | ---------------- | ------------------------ |
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 | |
display:切换行内样式
## 3.2 单行文本垂直居中
行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。
> **文字的行高等于盒子的高度。**
这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。
行高 = 上距离 + 内容高度 + 下距离
<img src="media/1.png" width="700" />
上距离和下距离总是相等的，因此文字看上去是垂直居中的。
**行高和高度的三种关系**
- 如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
# 4. CSS 背景(background)
目标
- 理解
- 背景的作用
- css背景图片和插入图片的区别
- 应用
- 通过css背景属性，给页面元素添加背景样式
- 能设置不同的背景图片位置
## 4.1 背景颜色(color)
- 语法：
```
background-color:颜色值; 默认的值是 transparent 透明的
```
## 4.2 背景图片(image)
- 语法：
```css
background-image : none | url (url)
```
| 参数 | 作用 |
| ---- | :----------------------------: |
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
```css
background-image : url(images/demo.png);
```
- 小技巧： 我们提倡 背景图片后面的地址，url不要加引号。
## 4.3 背景平铺（repeat）
- 语法：
```css
background-repeat : repeat | no-repeat | repeat-x | repeat-y
```
| 参数 | 作用 |
| --------- | :----------------------------------: |
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
background-position:坐标轴是与第一象限坐标轴完全相反
| 参数 | 值 |
| -------- | :----------------------------------------------------------: |
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
- 注意：
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
**实际工作用的最多的，就是背景图片居中对齐了。**
-------------------------------------------------------------------------------------------
巨幅背景的设计样式：
body{
background-image: url(img/sm.jpg);
background-repeat: no-repeat;
background-position: center top;
}
## 4.5 背景附着
- 背景附着就是解释背景是滚动的还是固定的
- 语法：
```】
background-attachment : scroll | fixed
```
| 参数 | 作用 |
| ------ | :----------------------: |
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
## 4.6 背景简写
- background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
- background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
- 语法：
```css
background: transparent url(image.jpg) repeat-y scroll center top ;
```
## 4.8 背景总结
| 属性 | 作用 | 值 |
| --------------------- | :--------------- | :----------------------------------------------------------- |
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
# 5. CSS 三大特性
目标：
* 理解
* 能说出css样式冲突采取的原则
* 能说出那些常见的样式会有继承
* 应用
* 能写出CSS优先级的算法
* 能会计算常见选择器的叠加值
## 5.1 CSS层叠性
<img src="media/20%E5%B1%82%E5%8F%A0%E6%80%A7.png">
- 概念：
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
- 原则：
- 样式冲突，遵循的原则是**就近原则。** 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
```
CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
```
<img src="media/hai.gif" width="600" height="400" />
## 5.2 CSS继承性
<img src="media/21%E7%BB%A7%E6%89%BF%E6%80%A7.png">
- 概念：
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
- **注意**：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
- 子元素可以继承父元素的样式（**text-，font-，line-这些元素开头的可以继承，以及color属性**）
```
CSS继承性口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。
```
<img src="media/shu.gif" />
## 5.3 CSS优先级（重点）
<img src="media/22%E4%BC%98%E5%85%88%E7%BA%A7.png">
- 概念：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
* 选择器相同，则执行层叠性
* 选择器不同，就会出现优先级的问题。
#### 1). 权重计算公式
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
| 标签选择器 | 计算权重公式 |
| ---------------------- | ------------ |
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
- 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
- div {
color: pink!important;
}
#### 2). 权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
<img src="media/w.jpg" /> 注意：
1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
#### 3). 继承的权重是0
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.
# 6. CSS注释
**CSS注释规则：**
```
/* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。
```
例如：
```css
p {
/* 所有的字体是14像素大小*/
font-size: 14px;
}
```
# 7. 今日总结
<img src="media/day2.png"