目录
小工具（屏幕标尺、拾色器等）：FastStone Capture/snipaste
小工具（屏幕标尺、拾色器等）：FastStone Capture/snipaste
一、HTML
（1）HTML，全称Hyper Text Markup Language，超文本标记语言
（2）web标准的构成：结构、表现、行为
结构：对网页元素进行整理和分类，主要指HTML
表现：设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为：网页模型的定义以及交互的编写，主要指Javascript
（3）<!DOCTYPE>文档类型声明，告诉浏览器使用哪种版本的HTML来显示网页，位于文档中第一行，不是一个HTML标签
（4）文本格式化标签
| <strong></strong>或<b></b> | 加粗 |
| <em></em>或<i></i> | 倾斜 |
| <del></del>或<s></s> | 删除线 |
| <ins></ins>或<u></u> | 下划线 |
（5）<div>一行只能放一个；<span>一行可以放多个
（6）<img>标签alt属性是图像显示不出来时用文字替换；title属性是鼠标放到图像上显示的文字
（7）链接分类：外部链接、内部链接、空链接<a href="#">、下载链接(href地址是一个文件)、网页元素链接、锚点链接(点击链接可以快速定位到页面某个位置)
锚点链接：在链接的href属性中设置属性值为#名字，然后在目标标签里添加属性id = 名字
（8）表单通常由表单域、表单控件（表单元素）、提示信息3部分组成
（9）label标签：绑定一个表单元素，当点击label标签内的文本时自动将焦点转到对应表单元素上
<label for="sex"> <input type="radio" name="sex" id="sex">
二、CSS基础选择器
（1）标签选择器
（2）类选择器
（3）id选择器：只能调用一次
（4）通配符选择器，使用*，修改页面中所有元素（标签）
三、CSS符合选择器
（1）后代选择器（包含选择器）：可以选择父元素所有子元素。语法：外层元素 内层元素 {样式}
（2）子选择器：选择某元素最近一级子元素（不包含后代）。语法：外层元素 > 内层元素 {样式}
（3）并集选择器：选择多组标签定义相同样式。语法：元素1，元素2 {样式}
（4）伪类选择器：添加特殊效果或选择特定元素，用：表示
链接伪类选择器：a:link #所有未被访问的链接
a:visited #所有已被访问的链接
a:hover #鼠标指针位于其上的链接
a:active #活动链接（鼠标按下未弹起的链接）
注：链接伪类选择器按照LVHA的顺序声明确保生效
:foucs伪类选择器：选取获得焦点的表单元素，如input:focus
四、文本、字体属性
（1）装饰文本：text-decoration none去掉装饰线，underline下划线，overline上划线，line-through删除线
（2）文本缩进：text-indent，只缩进第一行，单位em为当前像素的一个文字大小
（3）行间距包括三部分：上间距、文本高度、下间距
（4）字体复合属性：font:font-style font-weight font-size/line-height font-family（顺序固定！）
五、CSS引入方式
内部样式表、行内样式表、外部样式表（<link rel = "stylesheet" href = "CSS文件路径">）
六、Emmet语法
（1）快速生成HTML结构：
生成标签：标签名→tab
多个相同标签使用：*数量→tab
父子级关系标签：用>，如ul>li→tab
兄弟标签：用+，如div+p→tab
生成带类名或id名：.demo或#demo→tab
生成的div类名有顺序：用自增符号$*数量→tab
在生成标签内部写内容：div{}→tab
（2）快速生成CSS语法：采取简写形式，如w200→tab生成width:200px
七、CSS元素显示模式
（1）块元素：独占一行，宽高、内外边距都可以控制，宽度默认是父级宽度的100%，里面可以放行内或块级元素（文字类元素内不能使用块级元素）
（2）行内元素：一行可以显示多个，宽高直接设置无效，默认宽度是本身内容的宽度，只能容纳文本或其他行内元素（<a>特殊，里面可以放块元素）
（3）行内块元素：同时具有块元素和行内元素的特点。和相邻行内元素（行内块）在一行上，但他们之间会有空隙，一行可以显示多个；默认宽度是其本身内容的宽度；宽高、行高、内外边距都可控，如<img/>、<input/>、<td>
（4）显示模式转换：display:block #转换为块元素 display:inline #转换为行内元素
display:inline-block #转换为行内块元素
八、CSS背景
（1）背景图片位置：
两个参数都是方位名词时，前后顺序无关；只指定一个方位名词时，另一个值默认居中对齐
参数是精确坐标时，第一个一定是x坐标，第二个是y坐标；只指定一个时为x坐标，另一个垂直居中
（2）背景图像固定（背景附着）：background-attachment scroll滚动（默认）；fixed固定
（3）背景复合写法：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置（顺序不固定）
（4）背景色半透明：background:rgba(0,0,0,0.3)，最后一个参数为透明度，取值范围为0-1
九、CSS三大特性
（1）层叠性：相同选择器设置相同样式，一个样式会覆盖（层叠）另一个冲突的样式，遵循就近原则
（2）继承性：子标签会继承父标签的某些样式，如文本颜色和字号等
注：行高可以不带单位，如font:12px/1.5，子元素如果没有设置行高则会继承父元素行高，此时子元素行高为当前子元素文字大小的1.5倍
（3）优先级：选择器权重
| 继承或* | 0，0，0，0 |
| 元素选择器，伪元素选择器 | 0，0，0，1 |
| 类选择器，（结构）伪类选择器，属性选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style=" " | 1，0，0，0 |
| ！important重要的 | 无穷大 |
注：复合选择器权重会叠加，但永远不会进位
十、盒子模型
（1）盒子模型的组成：边框、外边距、内边距、实际内容
（2）边框：由边框宽度（粗细）、边框样式、边框颜色组成
语法：border:border-width border-style border-color（没有顺序）
（3）表格细线边框：合并相邻边框。语法：border-collapse:collapse
（4）内边距简写：
| padding:5px; | 上下左右都有5px |
| padding:5px 10px; | 上下5px，左右10px |
| padding:5px 10px 20px; | 上5px，左右10px，下20px |
| padding:5px 10px 20px 30px; | 上5px，右10px，下20px，左30px |
注：如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小
（5）外边距简写方式与内边距相同
（6）外边距应用：块级盒子水平居中：盒子必须指定宽度，盒子左右外边距都设置为auto
行内或行内块元素水平居中可以给其父元素添加text-align:center即可
（7）嵌套块元素垂直外边距塌陷：对于两个嵌套关系的块元素，父元素和子元素都有上外边距时，父元素会塌陷较大的外边距值
解决方案：为父元素定义上边框、为父元素定义上内边距、为父元素添加overflow:hidden
（8）清除网页元素默认内外边距：padding:0; margin:0
十一、阴影
（1）盒子阴影：box-shadow: h-shadow v-shadow blur spread color inset
注： 加粗属性为必须属性，分别代表水平阴影与垂直阴影位置，允许负值；其余为可选属性，分别为模糊距离、阴影尺寸、阴影颜色及将外部阴影改为内部阴影
（2）文字阴影：text-shadow: h-shadow v-shadow blur color
十二、浮动
（1）传统网页布局三种方式：普通流（标准流）、浮动、定位
（2）语法：选择器{float：属性值}，属性值取值默认为none不浮动；left向左浮动；right向右浮动
（3）浮动特性1——脱离标准普通流控制移动到指定位置（脱标）：浮动的盒子不保留原来位置
（4）浮动特性2——如果多个盒子设置浮动，则会按照属性值一行内显示并且顶端对齐排列；浮动的盒子只影响盒子后面的标准流，不会影响前面的标准流
（5）浮动特性3——任何元素都可以浮动，添加浮动后都具有行内块元素相似特性
（6）浮动特性4——浮动的盒子不会有外边距合并的问题
（7）清除浮动：很多情况下，父级盒子不方便给高度，但子盒子浮动不占有位置，当父盒子高度为0时会影响下面的标准流盒子
语法：选择器{clear：属性值}，属性值为left不允许左侧有浮动元素；right不允许右侧有浮动元素；both清除左右两侧浮动影响
（8）清除浮动方法：
额外标签法（隔墙法）：在浮动元素末尾添加一个空标签，如<div style="clear:both></div>或<br/>等标签（要求这个元素必须是块级元素）
父级添加overflow属性：将其属性值设置为hidden、auto或scroll
父级添加after伪元素：
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ /*IE6、7专有*/
*zoom:1;
}父级添加双伪元素：
.clearfix:before,.clearfix:after{
content:""
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}十三、定位
（1）定位组成：定位=定位模式（指定元素在文档中的定位方式）+边偏移（决定元素最终位置）
（2）定位模式：通过position属性设置，值为static静态、relative相对、absolute绝对、fixed固定
（3）边偏移：有top、bottom、left和right四个属性
（4）相对定位：元素移动位置时，是相对于它原来的位置。原来在标准流中的位置继续占有，后面的盒子不会占有其原来位置（不会脱标，继续保留原来位置）
（5）绝对定位：元素移动位置时，是相对于其祖先。如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位（Document）；如果祖先元素有定位（相对、绝对、固定），则以最近一级有定位的祖先元素为参考移动；绝对定位不再占有原来的位置（脱标）
（6）子绝父相：当子元素是绝对定位时，父元素要用相对定位，因为父元素要占有位置
（7）固定定位：元素固定于浏览器可视区的位置，在浏览器页面滚动时元素位置不改变。以浏览器可视窗口为参照，不占有原来的位置
（8）粘性定位：position:sticky，以浏览器可视窗口为参照，占有原来的位置，必须添加边偏移四个属性之一才生效
（9）定位叠放次序：盒子重叠时通过z-index控制盒子的前后次序
（10）绝对定位盒子居中：不能再通过margin:auto居中，但可以通过以下方法：left：50%让盒子左侧移动到父元素水平中心位置；margin-left：-盒子宽度的一半px，让盒子向左移动自身宽度一半
（11）定位特性：
行内元素添加绝对或固定定位后可以直接设置宽高
块元素添加绝对或固定定位后如果不设宽高则默认大小是内容大小
绝对和固定定位的元素不会触发外边距合并问题
浮动元素只会压住下面标准流的盒子，但不会压住盒子里面的文字或图片；但绝对或固定定位会压住所有内容
十四、元素显示与隐藏
（1）display属性：值为none隐藏对象；值为block除了转换为块级元素外还可以显示元素。隐藏元素后不占有原来位置
（2）visibility属性：值为visible可见；值为hidden不可见。隐藏元素占有原来位置
（3）overflow属性：默认visible可见；值为hidden将盒子外多余部分隐藏；值为scroll时显示滚动条；值为auto内容溢出时显示滚动条
十五、精灵图
主要针对背景图片使用，将多个小图片整合成一张大图片。使用background-position移动背景图片位置获取想要的小图片
十六、字体图标
（1）下载：
icomoom字库http://icomoon.io
阿里iconfont字库http://www.iconfont.cn/
（2）引入：将下载包中的fonts文件夹放到页面根目录下→通过CSS引入（复制style.css最前面一段内容）→对应组件添加font-family: 'icomoon'属性→html标签内添加小图标
（3）追加：将下载包中的selection.json重新上传，选择新图标后重新下载并替换原文件
十七、CSS三角
设置一个盒子宽高均为0，设置边框为透明色，然后单独设置某一条边框有颜色显示出来即为三角形
十八、用户界面样式
（1）鼠标样式：设置cursor属性，值为default箭头；pointer小手；move移动；text文本；not-allowed禁止
（2）取消表单轮廓：添加outline：0或outline：none属性
（3）防止拖拽文本域：添加resize：none属性
十九、vertica-align
（1）设置图片或表单和文字垂直对齐，只针对于行内元素或行内块元素
（2）取值：默认baseline——元素置于父元素基线上
top——元素顶端与行中最高元素顶端对齐
middle——元素置于父元素中部
bottom——元素底端与行中最低元素底端对齐
（3）解决图片底部默认空白缝隙问题：给图片添加vertical-align：middle|top|bottom属性或者将图片转换为块级元素
二十、溢出文字省略号显示
（1）单行文本：
/*强制一行内显示文本*/
white-space:nowrap;（默认normal自动换行）
/*超出部分隐藏*/
overflow:hidden;
/*超出部分省略号代替*/
text-overflow:ellipsis;（2）多行文本：
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制一个块元素显示的文本行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子对象的子元素排列方式*/
-webkit-box-orient:vertical;
二十一、HTML5新特性
（1）新增语义化标签：<header>头部<nav>导航<article>内容<section>定义文档某个区域<aside>侧边栏<footer>尾部等等
（2）新增多媒体标签：<audio>音频<video>视频
（3）新增input类型
（4）新增表单属性：
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 内容不能为空，必填 |
| placeholder | 提示文本 | 提示信息，存在默认值时不显示 |
| autofocus | autofocus | 页面加载完自动聚焦到指定表单 |
| autocomplete | off/on | 用户输入时，浏览器基于之前输入的值，显示出填写选项 默认打开，需要放在表单内，同时加上name属性且成功提交 |
| multiple | multiple | 多选文件提交 |
二十二、CSS3新特性
（1）新增选择器——属性选择器：根据元素特定属性选择元素
| E[a] | 选择具有a属性的E元素 |
| E[a="val"] | 选择具有a属性且属性值等于val的E元素 |
| E[a^="val"] | 选择具有a属性且值以val开头的E元素 |
| E[a$="val"] | 选择具有a属性且值以val结尾的E元素 |
| E[a*="val"] | 选择具有a属性且值中含val的E元素 |
（2）新增选择器——结构伪类选择器：根据文档结构选择器，常用于根据父级选择器里面子元素
| E:first-child | 匹配父元素中第一个子元素E |
| E:last-child | 匹配父元素中最后一个子元素E |
| E:nth-child(n) | 匹配父元素中第n个子元素E，n从1开始，n也可以是关键字even偶数odd奇数 n还可以是公式（只能用字母n，从0开始）：n选择所有；2n偶数；2n+1奇数；n+5从第五个开始（包含第五个）到最后；-n+5前五个（包含第五个） |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
注：nth-child和nth-of-type区别
/*nth-child会把所有盒子都排列序号*/
/*执行时先看nth-child(1)后看div*/
section div:nth-child(1){
background-color:red;//没有盒子变色
}
/*nth-of-type会把指定元素盒子排列序号*/
/*执行时先看指定的元素div后看nth-of-type(1)是第几个孩子*/
section div:nth-of-type(1){
background-color:blue;//熊大变色
}<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>（3）新增选择器——伪元素选择器：利用CSS创建元素，简化HTML结构。创建元素属于行内元素，before和after必须有content属性
::before在元素内部的前面插入内容；::after在元素内部的后面插入内容
（4）盒子模型：通过box-sizing指定盒子模型
值为content-box：盒子大小为width+padding+border（默认）
值为border-box：盒子大小为width，padding和border不会撑大盒子（padding和border不超过width）
（5）图片模糊处理：filter属性将模糊或颜色偏移等图形效果应用于元素
语法：filter：函数()，如filter：blur(5px)模糊处理，数值越大越模糊
（6）计算盒子宽度：calc()函数在声明CSS属性值时进行一些计算
（7）过渡：transition：要过渡的属性 花费时间（单位s） 运动曲线 何时开始（单位s），多条属性用逗号分割，所有属性都变化用all，谁做过渡给谁加！
二十三、2D转换
（1）移动：translate，改变元素在页面中位置
语法：transform：translate(x,y)或分开写transform：translateX(n)；transform：translateY(n)
注：translate不会影响其他元素位置，百分比单位相对于自身元素，对行内标签没有效果
（2）旋转：transform：rotate(度数，单位deg)，度数正顺时针，负逆时针，默认中心点是元素中心点
（3）转换中心点：transform-origin：x y；默认元素中心点（50% 50%），也可以设置像素值或top、bottom、left、right、center等方位名词
（4）缩放：transform：scale(x,y)，只写一个参数时，第二个参数和第一个参数一样；可以设置转换中心点缩放，不影响其他盒子
（5）复合写法时顺序会影响转换效果，如先旋转会改变坐标轴方向，所以同时有位移和其他属性时要先写位移
二十四、动画
（1）定义动画
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}（2）元素使用动画
div{
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}（3）动画属性
| animation | 所有动画属性简写，除了animation-play-state |
| animation-name | 动画名称（必须） |
| animation-duration | 动画完成时间（必须） |
| animation-timing-function | 动画速度曲线，默认ease |
| animation-delay | 动画何时开始 |
| animation-iteration-count | 动画播放次数，默认1，可以是infinite |
| animation-direction | 动画是否在下一周期逆向播放，默认normal，alternate逆向播放 |
| animation-play-state | 动画是否正在运行，默认running，paused暂停 |
| animation-fill-mode | 动画结束后状态，forwards保持，默认backwards回到起始状态 |
（4）动画简写：animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始或结束状态。多个动画用逗号隔开
（5）速度曲线步长：steps()，指定时间函数中间隔数量（步长）
二十五、3D转换
（1）x轴往右是正，y轴往下是正，z轴往外是正
（2）移动：transform：translate3d(x,y,z)或分开写transform：translateX(n)；transform：translateY(n)；transform：translateZ(n)
（3）透视：perspective，单位是像素，写在被观察元素的父盒子上
（4）旋转：transform：rotate3d(x,y,z,deg)沿自定义轴旋转
transform：rotateX(deg)；transform：rotateY(deg)；transform：rotateZ(deg)沿X/Y/Z轴旋转
（5）呈现：transform-style，控制子元素是否开启三维立体环境，默认值为flat不开启，值为preserve-3d开启。代码写给父级，影响的是子盒子
二十六、浏览器私有前缀
-moz-：firefox私有属性；-ms-：ie私有属性；-webkit-：safari、chrome私有属性；-o-：opera私有属性
1822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
