一、 HTML
1. 基础标签
a span div br hr
table ul>li ol>li dl>dt>dd form input textarea label select
命名规则：
2. 浏览器私有前缀
二、 CSS
1. 选择器
书写顺序（建议）
1. 选择器
标签选择器 就比如 div span a 等标签
class类选择器常用 class=“red” .red{…}
id选择器 基本用于唯一 id=“id” #id{…}
通配符选择器 *号 选择全部标签 基本用于html 去除内外边距
属性：
1.font
- font-size
- font-family
- font-weight 字体粗细 (normal bold 100~900 400=normal 700=bold)
- font-style 字体风格 ( normal/默认 italic/斜体)
- font：综合设置 选择器{font：font-style font-weight font-size/line-height font-family} 顺序要严格遵循 不需要的就不写
2.color颜色 line-height行高 text-align 水平对齐 text-indent 首行缩进（段落前用2em） text-decoration 文本修饰（添加下划线等 underline none a标签默认带下划线 就可以用这个取消）
2. 复合选择器
-
后代选择器
父子（包含选择器） .div a{…} 用空格隔开
子元素选择器 .class>h3{…} 用于亲儿子 因为类似父子选择器（包含关系） 可能会选择到孙子等
交集选择器 p.red{…} 既是p标签class又为red
-
并集选择器
p，span{…} 标签用逗号隔开 逗号理解为 和 的意思 通常用于集体声明
链接伪类选择器 伪类选择器比如 :link{…}
这几个状态的顺序不要乱 lvha
a:link 未访问的链接
a:visited 以访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接（按下鼠标未松开状态）
开发中，a基本设定为
a{ font-weight:700; font-size:16px; color:gary; } a:hover{ color:red; }快捷生成容器
3. 标签显示模式（一般分为块元素和行内元素）
**常见块级元素（block-level）：**h1~h6 p div ul ol li等，其中div是最典型的块元素
-
特点：
比较霸道，独自占一行
高度、宽度，内外边距都可以控制
宽度默认和父级一样宽 100%
是一个容器及盒子，里面可以放行内或者块级元素
-
注意：
只有 文字 才能组成段落，因此p里面不能放块级元素，特别是p不能放div
同理 还有h1~h6 以及 dt这些都是文字类块级标签，里面也不能放块级元素
常见行内元素（inline-level）: a strong b em i del s ins u span等 ，其中span是最典型的行内元素
-
特点：
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素
-
注意：
链接里面不能再放链接
特殊情况 a 里面可以放块级元素，但是给 a 转换一下成块级元素最安全
行内块元素（inline-block）: img input td 可以对它们设置宽高和对齐属性，也被称为行内块元素
- 特点：
- 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度、行高、内外边距都可以控制
标签显示模式转换
- 块转行内：display：inline；
- 行内转块：display：block；
- 块、行内元素转行内块：display：inline-block
行高=上距离+内容高度+下距离 利用行高等于盒子的高度，可以让文字垂直居中
4. CSS背景
背景颜色（color）
background-color：颜色值； 默认为transparent 透明的
背景图片（image）
background-image：none | url （url不要加引号）
eg： background-image：url（images/demo.png）
背景平铺（repeat）
background-repeat：repeat | no-repeat | repeat-x | repeat-y
背景位置（position）重点
background-position：length || length
background-position：position || position
-
注意：
-
必须先指定background-image属性
-
position 后面是x坐标和y坐标，可以使用方位名词或者精确单位。
-
如果只指定了一个方位名词，另一个值默认居中，为50%。
-
如果只指定一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中。
-
如果指定两个值，两个都是方位名字，则两个值前后顺序无关，比如left，top和top，left效果一样
-
如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标。
实际工作中，用的最多的就是背景图片居中对齐。
-
背景附着
背景附着就是解释背景是滚动的还是固定的。
background-attachment：scroll | fixed
背景简写
background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；
background：transparent url（image.jpg）repeat-y scroll center top ;
背景透明（CSS3）
前三位色值，最后一位透明度。
background：rgba（0,0,0,0.3）
5. CSS三大特性
-
CSS层叠性
原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突，不会层叠
-
CSS继承性
-
概念
子标签会继承父标签的某些样式，如文本和色号
想要设置一个可继承的属性，只需要将它应用于父元素即可
简单理解子承父业
-
注意
恰当的使用继承可以简化代码，降低CSS样式的复杂性，如果很多子元素，那只需要给他们的父元素进行绑定样式就好
子元素可以继承父元素的样式**（text-、font-、line-这些元素开头的可以继承，以及color属性）**
-
-
CSS优先级（重点）
概念：
定义CSS样式时，经常会出现两个或多个规则应用在同一个元素上，此时，
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题
-
权重计算公式
div{ background-color: aqua!important; } #red{ font-size: 300; } .black{ color: #000; } a:link{ color: aqua; }
- 权重叠加
**继承的权重是0**
```
<style>
//1.此时选中了p标签，所以计算权重，p标签为#aaa;
.demo p{
color:#aaa;
}
//2.此时未选中p标签，所以不计算权重，p标签为color: #ccc;
.demo {
color: #fff;
}
p{
color: #ccc;
}
</style>
<div class="demo">
<p>123</p>
</div>
```
2. 盒子模型（盒子模型、浮动、定位）重点
1. 盒子模型(Box Model)
1.1 基础知识
组成：元素的内容、边框、内边距、外边距
-
border（边框）
border：宽 风格（none/solid实线/dashed虚线/dotted点线） 颜色
border：1px solid red -
盒子边框写法总结表
在设置表格间距合并时，可以使用cellsapcing=“0”，但是会发生相邻的像素重叠，导致线变得比较粗深，表格的细线边框可以通过设置CSS属性
//collapse合并的意思 可以消除上述问题 table{ border-collapse：collapse；}
-
padding(内边距)
内边距会撑开原本的盒子，因此在撑开时，同时应该在盒子原本大小上进行减法
特殊情况，如果盒子没有宽度，则不会撑开盒子
padding：上 左右 下 padding： 上 右 下 左 -
margin（外边距）
margin：上 左右 下 margin：上 右 下 左 -
居中对齐
让块级盒子居中水平对齐，1.必须有宽度，2.左右外边距设置为auto。3.如果要让盒子里面的文字居中对齐可以设置 text-align：center；该属性同时也可以让行内元素和行内块居中对齐
-
背景图片和插入图片的区别
1.想要在盒子内移动图片的位置，那么就使用背景图片，可以设置background-position：0 0； 但是插入图片就只能利用margin或者padding 这样会改变盒模型的大小，不合适。
-
清除元素的默认内外边距（重要）
*{ padding:0; margin:0; }注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
-
外边距合并
-
相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）。
解决方法：尽量只给一个盒子添加margin值
-
嵌套块元素垂直外边距的合并（塌陷）
-
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
-
父元素的上外边距会与子元素的上外边距发生合并
-
合并后的外边距为两者中的较大者
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow：hidden。
- 还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。
-
-
-
去除列表默认样式
//li的默认样式去除li{ list-style:none; }//块元素去除默认内外边距*{ padding:0; margin:0;}//关于a标签//去除默认样式a {text-decoration:none;color: black;}a:hover{text-decoration:none; cursor:pointer}/*a标签鼠标经过mouseover时的样式*/a:link{text-decoration:none; cursor:pointer;} /*a标签未访问时的样式*/a:visited{text-decoration: overline ; cursor:pointer}/*a标签访问过之后样式*/a:active{text-decoration:overline;cursor:pointer}/*a标签鼠标按下mousedown时的样式*///其中，a:visited是与URL有关，而与单个的a标签无关//去除Button默认样式button{ border：none} -
CSS3（扩充）
-
圆角边框
//这个值，是根据正方形的半径设置的。比如正方形边长为200，标出中心点，那么半径即为100；设置border-radius：100;就行。但是有些数字不想计算，也可以直接设置50%。border-radius：length;//让正方形变圆形border-radius:50%;//如果是长方形，一般设置为盒子高度的一半，就不要设置百分比了 -
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
-
2. 浮动(float)
- CSS布局的三种机制，普通流在布局中的特点、为何用浮动、如何清除浮动
2.1 CSS布局的三种机制
2.1.1. 普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列；
- 常用元素：div、 hr、 p、 h1~h6、 ul、 ol、 dl、 form、 table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘，则会自动换行。
- 常用元素：span、 a、 l、 em等
2.1.2浮动
- 让盒子从普通流中浮起来（脱离标准流，漂浮在标准流盒子上方，三维结构的上方）
- 浮动的盒子，不占有原来的位置，俗称“脱标”
- float属性会改变display属性。浮动元素会生成一个块级框，而不论它本身是何种元素，生成的块级框和我们前面的行内块极其相似。
-
如何让多个盒子（div）水平排列成一行
- 可以使用行内块 inline-block ，但是这个有缺陷，会导致盒子之间有空白缝隙，并且不好处理该问题。同时，转换行内块，并不能做到盒子左右对齐
-
如何让两个盒子左右对齐
//浮动（float） 属性值：none left right选择器{ float：属性值;} -
清除浮动
原因：因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。
本质：清除浮动就是为了解决父级元素因为子级元素浮动引起内部高度为0的问题。
方法：清除浮动之后，父级就会根据子盒自动检测高度。父级有了高度，就不会影响下面的标准流。
1.//clear属性用于清除浮动 //属性值 left 不允许左侧有浮动元素(清除左侧浮动的影响) //属性值 right 不允许右侧有浮动元素(清除右侧浮动的影响) //属性值 both 同时清除左右两侧浮动的影响(实际工作中，多用both) 选择器{ clear:属性值;} //额外标签法(隔墙法)是W3C推荐的做法，是通过在浮动元素末尾添加一个空的标签<div style="clear:both"></div>,或者其他标签br等也可以 2.//父级添加overflow属性方法可以给父级添加：overflow 为 hidden | auto | scroll 都可以实现优点：代码简洁缺点：内容增多，容易导致内容被隐藏，无法显示需要溢出的元素 3.//使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，好处就是不用单独加标签了在父级元素加上clearfix类名就可以了这个:after写在css其实就是在dom结构树上，多添加一个不可见的标签。 方法： .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden;} .clearfix{ //IE6、7专有 *zoom:1;} 优点：符合闭合浮动思想 结构语义化正确 缺点：由于IE6/7不支持:after,使用zoom:1会触发hasLayout4.//使用双伪元素清除浮动 就是前后各加一个不可见的标签嘛 .clearfix:before,.clearfix:after{ conten:""; display:table;} .clearfix:after{ clear:both;}.clearfix{ *zoom:1;} -
总结
什么时候使用清除浮动？
基本满足下面三个标准，就需要使用了。
2.1.3定位
-
将盒子定在浏览器的某一个位置——CSS离不开定位，尤其是到使用 JS 特效时
-
理解
- 为何用定位
- 定位的4种分类
- 四种定位的特点
- 子绝父相
-
边偏移
通过偏移来移动位置
-
定位模式(position)
通过position属性定义元素的定位模式
选择器{ position:属性值;}
-
static(静态定位)
标准流的默认定位方式，无定位的意思。
-
relative(相对定位)——重要
- 相对定位是元素相对于它原来在标准流中的位置来说的。
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它
-
absolute(绝对定位)——重要
- 绝对定位是元素相对于他父级元素 来设置元素的位置
- 完全脱标——不再继续占有原来的位置
- 父元素没有定位，则以浏览器（document）为准定位（所以经常会使用子绝父相）
- 绝对定位是元素相对于他父级元素 来设置元素的位置
-
fixed(固定定位)——重要
- 固定定位是绝对定位的一种特殊形式
- 完全脱标——不占有位置
- 只认浏览器的可视窗口——浏览器可视窗口+边偏移属性来设置元素的位置
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位是绝对定位的一种特殊形式
-
定位（position）的扩展
-
绝对定位的盒子居中
因为绝对定位的盒子会完全脱标，所以使用margin：auto；无效
//left 设置边偏移 父盒子自身的一半//margin-left 设置 margin-left往左减去自己本身宽度的一半 所以为负值选择器{ left：50% margin-left：-100px}
-
堆叠顺序（z-index）
想要让哪个盒子最上 可以通过设置
//数值越大，层级越高选择器{ z-index：数值；}z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
-
定位改变display属性
- 可以用inline-block转换为行内块
- 可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似，默认转换的特性 转换为行内块。
所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
注意：
浮动元素、绝对定位（固定定位）元素的，都不会触发外边距合并的问题，也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题。
-
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: red;
}
li{
list-style: none;
}
.father{
position: relative;
height: 486px;
width: 671px;
margin: 10px auto;
background-color: pink;
}
.arr_l{
position: absolute;
height: 25px;
width: 25px;
background-color: yellow;
top: 50%;
left: 0px;
text-align: center;
line-height: 25px;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.arr_r{
position: absolute;
height: 25px;
width: 25px;
background-color: yellow;
top: 50%;
right: 0px;
text-align: center;
line-height: 25px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.cir{
position: absolute;
background-color: aqua;
width: 150px;
height: 30px;
bottom: 0px;
left: 50%;
margin-left: -75px;
border-radius: 15px;
}
.cir li{
float: left;
background-color: aliceblue;
height: 20px;
width: 20px;
margin: 5px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="father">
<a href="#" class="arr_l"><</a>
<a href="#" class="arr_r">></a>
<ul class="cir">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
定位小结
3. CSS高级技巧
1.元素的显示与隐藏
-
display 显示（重点）
// 隐藏对象 并且不再保留位置display：none// 转换对象，并且显示对象display：block -
visibility 可见性
// 对象可视visibility：visible；// 对象隐藏 ， 继续保留位置visibility：hidden； -
overflow 溢出 （重点）
// 属性值// visible(不剪切内容也不添加滚动条)// hidden(不显示超过对象尺寸的内容，超出部分隐藏掉)// scroll(不管超出内容否，总是显示滚动条)// auto(超出自动显示滚动条，不超出不显示滚动条) -
总结
2.CSS用户界面样式
-
鼠标样式 cursor
<ul> <li style="cursor:default">我是小白</li> <li style="cursor:pointer">我是小手</li> <li style="cursor:move">我是移动</li> <li style="cursor:text">我是文本</li> <li style="cursor:not-allowed">我是禁止</li></ul> -
轮廓线 outline
outline：outline-color || outline-style || outline-width//常用<input type="text" style="outline:0;"> -
防止拖拽文本域 resize
<textarea style="resize:none;"> </textarea>
3.vertical-align 垂直对齐
- 有宽度的块级元素居中对齐，使用margin：0 auto；
- 让文字居中对齐，是text-align：center；
vertical-align 垂直对齐，它只针对行内元素或者行内块元素。
vertical-align ： baseline | top |middle | bottom
主要用于图片搭配文字对齐，还可以用于去除图片底侧空白缝隙；关于空白缝隙问题，也可以将元素设置为块级元素display：block‘
4.溢出的文字省略号显示
-
white-space
-
text-overflow
-
总结三部曲
//先强制一行内显示文本white-sapce：nowrap； //超出的部分隐藏overflow：hidden； //文字用省略号代替超出的部分text-overflow：ellipsis；
5.CSS精灵技术
-
background-image、background-repeat、background-position
-
精确测量，确定图片大小及其位置
-
背景定位基本都是负值
-
滑动门
<style>
/*1. a 是 设置 左侧 背景 （左门）*/
a {
/*因为我们是滑动门，左右推拉 跟文字内容多少有关系，此时需要用文字撑开盒子， 就要用到行内块*/
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat;
margin: 100px;
padding-left: 15px;
color: #fff;
}
/*2. span 是设置 右侧 背景 （右门）*/
a span {
display: inline-block;
height: 33px;
/*一定注意 span 需要背景图片 右对齐*/
background: url(images/to.png) no-repeat right top;
padding-right: 15px;
}
/*3 因为整个导航栏都是 链接 所以 a 要包含 span */
</style>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>公司新闻</span>
</a>
</body>
6.三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*我们用css 边框可以模拟三角效果*/
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
p {
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent red;
//下面两句是为了照顾兼容性
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
三、 HTML5
1. H5新增语义化标签
新增语义化标签：
<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>：块级标签
<aside>：侧边栏标签
<footer>:尾部标签
新增多媒体标签：
<audio>：音频 属性：autoplay(加载完毕，立即播放) | controls(显示播放控件) | loop(结束后重新开始播放) | src
<audio src="文件地址" controls="controls"></audio>
<video>：视频
video标签常见属性
新增input表单、表单属性
四、 CSS3
1. 选择器
1.1 属性选择器
button[disabled]{ cursor:default;}
1.2 结构伪类选择器
ul li:first-child{ color:#ccc;}
注意：n可以是数字、关键词和，比如 even 是偶数， odd 是奇数
1.3 伪元素选择器
div::before{ content:"在原本的div前加上我这段文字"}div::after{ content:"在原本的div后加上我这段文字"}
2. 转换
2.1 2D 转换
写在前面 为了看出变化过程 可以添加 transition属性
// 谁使用 谁添加transition：all 0.4s；
**转换（transform）**是CSS3中具有颠覆性的特性之一，可以实现元素的位移，旋转，缩放等效果。
1. 2D转换之移动 translate
2D移动时2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
transform：translate(x,y);transform：translateX(n);transform：translateY(n);
注意：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的 优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate：(50%,50%);
- 对行内标签没有效果
2. 2D转换之旋转 rotate
2D旋转指的是让元素在2纬平面内顺时针或逆时针旋转。
transform：rotate(度数)
注意：
- rotate里面跟度数，单位是deg
- 角度为正时，顺时针，负时，为逆时针。
- 默认选中的中心点是元素的中心点。
设置元素的中心点 transform-origin
// 注意后面的参数x 和 y用空格隔开
// x y 默认转换的中心点是元素的中心点(50%,50%)
// 还可以给x y设置像素 或者 方位名词 (top bottom left right center)transform-origin：x y;
3. 2D转换之缩放 scale
2D 缩放就是指放大或缩小
// 数字是倍数 所以不跟单位transform：scale(x,y);
参数规则如下：
4. 2D转换综合写法
一句话，顺序很重要，因此一般都是先写移动（translate），再写旋转或缩放。
2.2 动画
**动画(animation)**是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过度，动画可以实现更多变化，更多控制，连续自动播放等效果。
1. 动画的基本使用
- 先定义动画
- 再使用（调用）动画
1. 用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
width：100px；
}
100%{
width：200px；
}
}
2. 调用动画
div{
width:100px;
height:200px;
//调用动画
animation-name：动画名称；
//持续时间
animation-duration：持续时间；
}
2. 动画的常用属性
//animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态；animation:myfirst 5s linear 2s infinite alternate;
2.3 3D 转换
三维坐标系，X、Y、Z轴（垂直于屏幕，往人这边为正，往电脑里面为负）。
1. 3D位移：translate3d（x,y,z）
// Z轴出效果，需要现在父元素添加perspective属性。
// 在2D的基础上多加一个Z轴
translform：translateX(100px):仅仅是在x轴上移动
translform：translateY(100px):仅仅是在y轴上移动
translform：translateZ(100px):仅仅是在z轴上移动
translform：translate3d(x,y,z):在x,y,z轴上移动
2. 3D旋转：rotate3D（x,y,z）
// 为了看出效果，需要现在父元素添加perspective属性。
// 在2D的基础上多加一个Z轴
// 关于方向，可以使用左手准则进行判断（左手招财猫，大拇指指向X轴/Y轴为正方向）Z轴就是2d的旋转效果，因为左手拇指指向自己。
translform：rotateX(45deg):仅仅是在x轴上旋转
translform：rotateY(45deg):仅仅是在y轴上旋转
translform：rotateZ(45deg):仅仅是在z轴上旋转
translform：rotate3d(x,y,z):在x,y,z轴上旋转
3. 透视：perspective
该属性需要写在被观察元素的父盒子上面的。
4. 3D呈现：transform-style
- 控制子元素是否开启三维立体环境
- transform-style：flat 子元素不开启3d立体空间 默认的
- transform-style：preserve-3d；子元素开启立体空间
- 代码写给父级，但影响的是子盒子
注：本文仅作为自己学习的经验日志…如若侵权，联系即删。
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
