一、HTML部分
「1. 图像标签img」
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />
「2. 链接标签(重点)」
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self" 默认窗口弹出方式
target="_blank" 新窗口弹出
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。 |
「3.锚点定位」：通过创建锚点链接，用户能够快速定位到目标内容。
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
<a href="#two">
「4.特殊字符」
「5. 创建表格」
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
table、tr、td，他们是创建表格的基本标签，缺一不可
- table用于定义一个表格标签。
- tr标签 用于定义表格中的行，必须嵌套在 table标签中。
- td 用于定义表格中的单元格，必须嵌套在标签中。
- 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。
- 表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签替代相应的单元格标签即可。
- 表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。
「6. 表格属性」
三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0
「7. 合并单元格」
合并的顺序我们按照 先上后下 先左后右 的顺序 ,合并完之后需要删除多余的单元格。
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
「8. 无序列表 ul」
- <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li>与</li>之间相当于一个容器，可以容纳所有元素。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
「9. 有序列表 ol」
- <ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
- 常用的type属性值分别为是1，a，A，i，I
- <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
- <ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。
<ol type="A">
<li>列表项1</li>
<li>列表二</li>
<li>列表三</li>
</ol>
「10. 自定义列表 dl」
- 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
「11. input 控件」
<input type="属性值" value="你好">
- input 输入的意思
- <input / >标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
- 除了type属性还有别的属性
常用属性：
name属性
- name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
-
- name属性后面的值，是我们自己定义的。
- radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
- name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。
input 属性小结
| 属性 | 说明 | 作用 |
|---|---|---|
| type | 表单类型 | 用来指定不同的控件类型 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单。 |
| checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
「12. label标签」
- label 标签为 input 元素定义标注（标签）。
- label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢
- 第一种用法就是用label标签直接包含input表单， 适合单个表单选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
第一种
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
第二种
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
「13. textarea控件(文本域)」
- 通过textarea控件可以轻松地创建多行文本输入框.
- cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
「14. select下拉列表」
- 如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
- 我们实际开发会用的比较少
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
二、CSS部分
「1. 基础选择器总结」
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
「2. 复合选择器总结」
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
「3. font总结」
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px 像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
| font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
「4. CSS外观属性总结」
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
「4. 标签显示三种模式总结」
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
「5. 背景总结」
| 属性 | 作用 | 值 |
|---|---|---|
| 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个值 |
「6. CSS三大特性」
层叠性：就近原则
继承性：子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性
优先级：
-权重计算公式：
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 最重要的 | ∞ 无穷大 |
「7. 盒子模型」
1. 盒子边框(border)
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
collapse单词是合并的意思,border-collapse: collapse;表示相邻边框合并在一起。
2. 内边距(padding)
padding属性用于设置内边距。是指边框与内容之间的距离。
padding简写
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右内边距; |
| 2个值 | padding: 上下内边距 左右内边距 ； |
| 3个值 | padding：上内边距 左右内边距 下内边距； |
| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
当我们给盒子指定padding值之后， 发生了2件事情：
- 内容和边框 有了距离，添加了内边距。
- 盒子会变大
解决措施： 通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。
padding不影响盒子大小情况：👉如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
3. 外边距（margin）
margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离
块级盒子水平居中
- 盒子必须指定宽度（width）
- 然后就给左右的外边距都设置为auto
实际工作中常用这种方式进行网页布局，示例代码如下：
.header { width: 960px; margin: 0 auto;}
常见的写法，以下下三种都可以👇👇。
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
4.外边距合并
使用margin定义块元素的**「垂直外边距」**时，可能会出现外边距的合并。
(1). 相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
- 「取两个值中的较大者」 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
「解决方案：尽量给只给一个盒子添加margin值」。
(2). 嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
「解决方案：」
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow: hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。
盒子模型布局稳定性
优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）
width > padding > margin
原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
「8. 圆角边框」
border-radius:length;
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
- 其中每一个值可以为 数值或百分比的形式。
- 技巧：让一个正方形 变成圆圈
border-radius: 50%;
如果要在四个角上一一指定，可以使用以下规则👇👇：
border-radius: 左上角 右上角 右下角 左下角;
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值：四个圆角值相同
「9. 盒子阴影(box-shadow」
盒子阴影不占空间，不会影响其他盒子的排布
box-shadow: offset-x offset-y [blur [spread]] [color] [inset]
| 值 | 描述 |
|---|---|
| offset-x | 阴影的水平偏移量。正数向右偏移，负数向左偏移。 |
| offset-y | 阴影的垂直偏移量。正数向下偏移，负数向上偏移。 |
| blur | 可选。阴影模糊距离，不能取负数。 |
| spread | 可选。阴影大小 |
| color | 可选。阴影的颜色 |
| inset | 可选。表示添加内阴影，默认为外阴影 |
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
「10. 浮动float」
「1. CSS布局的三种机制」
网页布局的核心——就是用CSS来摆放盒子。
CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
A. 普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列；
-
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
-
- 常用元素：span、a、i、em等
B. 浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动float
C. 定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
「2. 什么是浮动」 元素的浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制,不占位置，脱标
- 移动到指定位置。
作用
- 让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。
- 可以实现盒子的左右对齐等等。
- 浮动最早是用来控制图片，实现文字环绕图片效果。
- float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。
语法
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议: 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
浮动(float)小结
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子**「是浮起来」**的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子**「是不占位置的」，它原来的位置「漏给了标准流的盒子」**。 |
| 特 | 「特别注意」：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
「10. 清除浮动float」
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
总结：
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
- 准确地说，并不是清除浮动，而是清除浮动后造成的影响
清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动的方法
选择器 { clear: 属性值; } clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
实际工作中,几乎只用clear: both
2).父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
- 优点： 代码简洁
- 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3).使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7 专有 */
.clearfix {
*zoom: 1;
}
- 优点：符合闭合浮动思想 结构语义化正确
- 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
4).使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
清除浮动总结
什么时候用清除浮动呢？
-
父级没高度
-
子盒子浮动了
-
影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
「11. 定位(position)」
「1. 定位详解」
将盒子 「定」 在某一个 「位」 置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。
定位是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的**「边偏移」**：（方位名词）
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top | top: 80px | 「顶端」偏移量，定义元素相对于其父元素「上边线的距离」。 |
bottom | bottom: 80px | 「底部」偏移量，定义元素相对于其父元素「下边线的距离」。 |
left | left: 80px | 「左侧」偏移量，定义元素相对于其父元素「左边线的距离」。 |
right | right: 80px | 「右侧」偏移量，定义元素相对于其父元素「右边线的距离」 |
「2. 定位模式(position)」在 CSS 中，通过 position 属性定义元素的「定位模式」，语法如下：
选择器 { position: 属性值; }
| 值 | 语义 |
|---|---|
static | **「静态」**定位 |
relative | **「相对」**定位 |
absolute | **「绝对」**定位 |
fixed | **「固定」**定位 |
「3. 静态定位(static)」
- 静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。
- 静态定位 按照标准流特性摆放位置。它没有边偏移。
- 静态定位在布局时几乎不用
「4. 相对定位(relative)」
- 相对定位是元素相对于它原来在标准流中的位置来说的。
- 相对于自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
「5. 绝对定位(absolute)」
绝对定位是元素以带有定位的父级元素来移动位置
- 完全脱表--完全不占位置；
- 父元素没有定位，则以浏览器为准定位(Document文档)。
父元素有定位
定位口诀--子绝父相
「6. 固定定位(fixed)」
固定定位是绝对定位的一种特殊形式;
- 完全脱标--完全不占位置；
- 只认浏览器的可视窗口--浏览器可视窗口+边偏移属性来设置元素的位置
- 跟父元素没有任何关系；单独使用；不随滚动条滚动
「12. 定位(position)的扩展」
绝对定位的盒子居中
绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法： z-index的特性如下:
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
- 如果属性值相同，则按照书写顺序，后来居上；
- 数字后面不能加单位
- z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
定位改变display属性
前面提过， display 是 显示模式， 可以通过以下方式改变显示模式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了**「浮动」、「固定定位」和「绝对定位」**，不用转换，就可以给这个盒子直接设置宽度和高度等。
定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
注意：
边偏移需要和定位模式联合使用，单独使用无效；top和bottom不要同时使用；left和right不要同时使用。
