HTML5+CSS
HTML
HTML（超文本标记语言）
标签
标签都是成对出现的，如
HTML常用的标签
- html：前端页面的起始
- head：头部元素
- meta：声明
- title：网页标题
- body：网页正文（内容）
- h1~h6：标题，从1—6字体大小越来越小
- img：图片
- p：段落
- a：超链接
- li：无序列表
- ul：li的父级元素
- ol：有序列表
- dt：自定义列表
- dd：dt的子元素
以下是不建议使用的标签
- i：倾斜
- b：加粗
- em：倾斜
- strong：加粗
- del：删除线
表单
- input：默认文本框，可选择radio（单选框）、checkbox（复选框）、submit（表单提交）、reset（重置）
-
普通文本框：
-
单选框：
-
复选框：
-
表单提交按钮：
-
重置按钮：
-
- select：下拉菜单，搭配子标签
- textarea：文本域，一般使用场景为留言
- form：表单，有active、method属性，active表示表单提交目标地址，method表示以get/post方法进行提交。
实体
- 空格：
- 左尖括号：
< - 右尖括号：
&rt;
div+span
div标签，一般用于网页布局。span标签，局部标签，一般用于给某个元素添加样式
CSS2
一般来说，CSS设置样式属性百分比参考的是父级元素的宽度。
层叠样式表(Cascading Style Sheet)
<p style="font-size: 20px; color: red;">书山有路勤为径p>
// 2.嵌入式（内嵌式）样式 使用场景: 样式不多
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
}
style>
<div>
我是一个div
div>
// 3.index.css 一般项目中使用 推荐使用
div {
width: 300px;
height: 300px;
background-color: orange;
}
<link href="index.css" rel="stylesheet">
css语法
选择器 {
属性名: 属性值;
}
选择器
-
基本选择器
- 标签选择器
div { ... } h2 { .... } - 类选择器（推荐经常使用）
// 类选择器就是给目标标签添加一个class属性，通过class名字来修改这个元素标签的样式 // 可以设置多个class名字，设置格式为： class="name1 name2 ..." 以空格分隔 <style> .con { background-color: red; } style> <div class="con"> 这是内容 div> - id选择器
// id选择器就是给目标标签添加一个id属性，通过id名字来修改这个元素标签的样式 // 每个标签/容器是唯一id，不允许出现相同id. <style> #con { background-color: red; } style> <div id="con"> 这是内容 div> - 通配符选择器
// *标识全局所有样式修改，一般我们也不用，都是把所有需要的元素都追加 * { color: red; } // 推荐使用这种 div a img li { color: red; }
- 标签选择器
-
高级选择器
- 后代选择器
<style> /*表示ul中所有li的颜色改为绿色*/ ul li { color: green; } style> <ul> <li>111li> <li>222li> <li>333li> <li>444li> ul> - 交集选择器
<style> /*表示ul中所有li的颜色改为绿色， 注意千万不能有空格，加了空格就是后代选择器了*/ // 满足两者情况：既是div 而且class是box div.box { color: green; } style> <div class="box"> <ul> <li>itemli> ul> div> <div>这是第二个divdiv> - 并集选择器
/*用`,`隔开，表示公用同一个样式*/ div,p,h1,li { color: yellow }
- 后代选择器
-
css两性：继承性与层叠性
继承性：css中有一部分属性可以被继承。比如文字和文本的属性color, font-size, font-family, text-*, font-*。即便标签（元素）本身不设置，也能被加载。父元素的宽度可以被继承，但高度不可被继承，当子元素设置height: 100%时，取的是父元素的高度。层叠性：
-
多种选择器都能定位到目标元素的情况下，样式采用权重最高的，
id选择器>class选择器>标签选择器。 -
如果权重一致，以书写顺序有关，采用最后一个样式。
-
如果都没有指定到目标元素，则采用描述离目标元素最近的那个样式
-
多种选择器都没有直接选择元素，则看谁描述的近，就听谁的，假如描述的一样近，再比较权重，权重谁高听谁的，若权重还是一致，则看顺序，谁最后描述，就听谁的。
-
-
!important 提升权重，但无法提升继承权重。用法：
color: red !important在属性后面添加即可。<style> .box1 #box2 .box3 p { color: red; } /*这样是有效的*/ #box1 .box2 .box3 p { color: blue !important; } /*这样是无效的*/ #box1 .box2 { color: skyblue !important; } . box1 .box2 #box3 p { color: green; } style> <div id="box1" class="box1"> <div id="box2" class="box2"> <div id="box3" class="box3"> <p>我的颜色到底听谁的p> div> div> div>
font-*
font-size：可选属性normal, italic, oblique
区别：normal表示无样式；italic表示假如英文字体本身有倾斜，则显示倾斜样式，若英文字体没有倾斜，则替换成倾斜的字体；oblique表示本身字体是倾斜，与字体本身无关。
text-*
- white-space（对文字是否折行、换行）：
nowrap（不换行）、pre-wrap（换行） - text-decoration（文字修饰）：
none（去掉下划线），underline（下划线），line-through（中划线），overline（上划线）。 - text-indent（文本缩进）：设置文本缩进，可以设置
1em 2em 3em .../10px 20px 30px .../10% 20% 30% ...。这里的百分比参考的是自身容器的宽度。
盒模型
遵循原则：上-右-下-左，若少谁就找他的对立面。
建议优先使用width > padding > margin
- padding（内边距）：可以把容器内容撑开。
- border：
border: 20px solid #ccc有三个值分别是：粗细大小，实虚线， 颜色。 - border-width：可以单独设置border的值。
- border-style：
solid(实现) dashed(虚线) dotted(点状线) double(双实线) - border-color：
red green blue ... - margin（外边距）：撑开与容器之间的距离。
overflow
可选项：hidden(隐藏多余部分), visiable(默认显示), scroll(以滚动条方式显示全部内容), auto(自适应)
margin
- 塌陷
上下两个盒子会发生margin塌陷，margin值小的会叠加在margin值大的元素里面。
父子盒子也会发生margin塌陷，父子盒子中以较大margin为准。 - 居中
margin: 0 auto让块级元素水平居中 块级元素包括div、p、li、h1~h6等，但对行内元素无效。
块级元素(div, h1~h6, p)
- 可以设置宽高，设置宽高有效
- 独占一行
- 不设置宽度，默认继承父元素100%宽度
- display：block
内联元素(span, strong, em, i)
- 不可设置宽高，设置宽高无效
- 可以与其他内联元素并排显示
- 宽高由内容撑开
- display：inline
内联块元素(img, input)
- 可以设置宽高，设置宽高有效
- 可以与其他内联元素并排显示
- 宽高由内容撑开
- display：inline-block
使用display默认是底部对齐，可使用vertical-align: top;将对齐方式改为顶部对齐。
标准文档流
三种布局之标准流（浮动、定位）
特点：
- 空白折叠
- 高矮不齐
- 内容在盒子内部默认从左往右、从上往下显示，遇到空间不够，自动换行
浮动（float）
三种布局之float（标准流、定位）。可设置left、right、none(一般需要为none就不设置)
元素设置浮动属性会脱离标准流的控制（脱标）。
块级元素设置浮动，具有内联块元素的特征；内联元素设置浮动，设置宽高有效。
浮动找最近的父元素盒子对齐。
float: right(left)浮动最初用于文字环绕效果- 脱离标准流，不占位置，会影响标准流。
- 子盒子浮动，不会压住父盒子的
padding和margin。 - 浮动元素改变元素的模式。
清除浮动
-
给父元素添加一个高度。一般不推荐，我们一般不设置父元素的高度。
-
clear: both; clear可选值有
both, left, right。能够清除浮动造成的影响，但是不能靠儿子撑开父亲的高度。子元素的高度让父元素的margin失效了 -
外墙法：两个浮动元素的父元素之间设置一个
div，设置方法2再设置高度，可以达到有margin的效果，但是父元素还是不能被子元素撑开。/*css样式*/ .box1, .box2 { width: 800px; margin-bottom: 20px; border: 10px solid red; } div p { float: left; width: 100px; height: 100px; margin-right: 10px; background-color: yellowgreen; } .c1 { clear: both; } .h20 { height: 20px; } //html代码 -
内墙法：浮动最后放一个
div，父元素能被子元素撑开，也能实现父元素设置的margin值。/*css样式*/ .box1, .box2 { width: 800px; margin-bottom: 20px; border: 10px solid red; } div p { float: left; width: 100px; height: 100px; margin-right: 10px; background-color: yellowgreen; } .c1 { clear: both; } //html代码 -
溢出隐藏（推荐使用）：对浮动元素的父元素设置，
overflow: hidden;父元素能寻找子元素最高的高度作为自己的高度。
隔行换色
odd：奇数列，从第一行下标为0开始，所以odd第一行为正常效果的第二行
even：偶数列
ul li:nth-child(even) {
background-color: #0f0;
}
a标签
a标签的伪类：link(访问前), visited(访问后), hover(鼠标放上去), active(激活，按住不放时)；先后顺序为love hate，简称爱恨原则
<style>
a: link {
color: red;
}
a: visited {
color: green;
}
a: hover {
color: blue;
}
a: active {
color: yellow;
}
style>
<a href="#">这是一个超链接a>
a标签文档标记
<div id='box'>
div>
<a href="#box">a>
透明度
rgba() & opacity
设置背景色透明度的方法有两种，background-color: rgba(255, 0, 0, .5) 和 opacity: 0.5，两者的区别是使用rgba只能修改背景色颜色透明度，不能影响内容，而opacity则会影响整个盒子包括文字内容都会起作用。
background
-
background：
background:#ccc url(images/i.png)url表示设置背景图。 -
background-repeat：不设置默认平铺整个盒子，设置
no-repeat不平铺整合盒子。 -
background-position：
background-position: 水平方向 垂直方向设置盒子定位。默认left，top；还可以精确到px单位，也可以设置百分比，百分比设置的是盒子的宽-图片的宽看成100%。/*负数往相反方向移动，正数往相同方向移动*/ 选择器 { background-position: center center; background-position: 150px 150px; background-position: 30% 50%; } /*整合起来写 url-图片地址 no-repeat-是否平铺 center top-图片显示位置 #000-颜色*/ 选择器 { background: url(images/1.jpg) no-repeat center top #000 } -
background-attachment：fixed 固定背景图片，不随着滚动而消失
定位
相对定位
position: relative 设置定位方式为相对定位，相对于自己移动，一般用于微调。
/*做导航栏，给选中导航做边框，不移动，边框多宽，就移动几个像素*/
a {
position: relative;
top: -3px;
border 3px solid #ccc;
}
绝对定位
position: absolute 设置定位方式为绝对定位，若父（祖先）元素设置了position: relative，相对于父（祖先）元素移动，否则相对于body移动，绝对定位的元素脱离标准文档流
固定定位
position：fixed 设置定位方式为固定定位，以浏览器窗口为参考。
HTML5新增元素
新增标签
- header
- footer
- nav
新增多媒体
- audio 音频
- video 视频
新增表单元素
-
用户邮箱 -
搜索框 -
-
滑块 -
取色框 -
表单提交 -
日期选择器 -
手动输入一个日期 -
本地时间 -
选择年、月 -
选择小时、分钟 -
选择年、周 -
选项列表
<input id="myCar" list="cars"> <datalist id="cars"> <option value="WEB">option> <option value="ASD">option> datalist> -
自动完成（autocomplete）
// on-打开 off-关闭 -
自动获取焦点（autofocus）
用户名： 密码： -
multiple 允许多个值，适用于email、file
-
pattern 正则验证
-
required 必填项
-
placeholder 提示信息
CSS3
选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面
浏览器私有前缀，加前缀是兼容老版本的写法
Gecko内核 CSS前缀为“-moz-” 如火狐浏览器
Webkit内核 CSS前缀为“-webkit-” 如Chrome、Safari
Presto内核 CSS前缀为“-o-” 如Opera(欧朋)
Trident内核 CSS前缀为“-ms-” 如IE
新增属性选择器
/*表示所有class中包含box的背景色都改成黄色*/
E[attr*="val"] 例：div[class*="box"]{background-color: yellow;}
/*表示所有class中以box开头的背景色都改成红色*/
E[attr^="val"] 例：div[class^="box"]{background-color: red;}
/*表示所有class中以box结束的背景色都改成粉色*/
E[attr$="val"] 例：div[class$="box"]{background-color: pink;}
新增结构性伪类选择器
/*选择父元素下的第一个子元素li*/
E:first-child{} 例：li:first-child{background-color: red;}
/*选择父元素下的最后一个子元素li*/
E:last-child{} 例：li:last-child{background-color: pink;}
/*选择父元素下的第n个子元素li n从1开始算*/
E:nth-child(n){} 例：li:nth-child(2){background-color: blue;}
/*n写even表示偶数行变色，n写odd表示奇数行变色*/
E:nth-child(n){} 例：li:nth-child(even){background-color: blue;}
/*n取值0 1 2 3 2n>=1*/
E:nth-child(n){} 例：li:nth-child(2n){background-color: blue;}
/*a*n+b a表示序数*/
E:nth-child(n){} 例：li:nth-child(3n-2){background-color: blue;}
/*选择父元素中类型为h2的【正数第n个】子元素*/
/*even(偶数) odd(奇数)*/
E:nth-of-type(n){} 例：.wrap h2:nth-of-type(2){background-color:red;}
新增状态伪类选择器
/*input type为text且状态未enabled的元素*/
input[type=text]:enabled{}
input[type=text]:disabled{}
input[type=text]:checked{}
边框属性
/*顺序为左上 右上 右下 左下 若少哪边就去找其对角*/
border-radius: 20px 20px 20px 20px;
/*边框阴影*/
box-shadow: X轴偏移, Y轴偏移, 模糊值, 颜色
box-shadow: X轴偏移, Y轴偏移, 模糊值, 增强值, 颜色
box-shadow: X轴偏移, Y轴偏移, 模糊值, 颜色, inset(内阴影)
背景属性
/*可设置具体像素、百分比、cover(等比放大)、contain*/
background-size(背景图大小): 宽度值, 高度值
/*content-box、padding-box、border-box*/
background-origin(背景图显示区域):
/*裁剪区域：border-box、padding-box、content-box*/
background-clip:
渐变(绘制一个背景图)
/*线性渐变*/
linear-gradient(颜色1, 颜色2);
linear-gradient(left, 颜色1, 颜色2); // 从左向右渐变
linear-gradient(90deg, 颜色1, 颜色2); // 水平向右90°
/*重复线性渐变 top:方向, 颜色1百分比: 参考盒子从0到颜色1百分比高度 颜色2百分比: 参考盒子从0到颜色2百分比高度渐变颜色*/
repeating-linear-gradient(top, 颜色1 10%, 颜色2 20%)
/*径向渐变*/
radial-gradient(颜色1 百分比, 颜色2 百分比);
radial-gradient(方向1, 方向2, 颜色1 百分比, 颜色2 百分比);
/*参考的是*/
radial-gradient(像素值1, 像素值2, 颜色1 百分比, 颜色2 百分比);
用户界面
/*可选：both(垂直拉伸)、horizontal、vertical*/
resize: 规定是否由用户调整拉伸
// 盒子大小
box-sizing:border-box // 此时盒子的width值包括左右padding左右border+内容
box-sizing: content-box // 默认值
多列布局
// 设置盒子每列宽度 auto-自适应(默认)
column-width: 200px; // 栏目宽度
column-rule: 1px solid red; // 栏目边框
column-gap: 28px; // 栏目间距
column-count: 5; // 栏目总数 会与width发生冲突
弹性盒子
布局模式
CSS2 盒模型+浮动+定位
CSS3 弹性盒子
display: flex;
display:inline-flex;
// 对父元素设置display: flex; 表示该盒子是弹性盒
// 主轴 flex-direction 设置主轴的方向，
//
flex-direction: row-reverse; 此时主轴是水平方向，起点在右
flex-direction: column; 此时主轴是垂直方向，起点在上沿
flex-direction: column-reverse; 此时主轴方向是垂直方向，起点在下沿
flex-direction: row; 默认是row 此时主轴是水平方向，起点在左
主轴对齐方式
子元素在主轴中对齐方式
justify-content: flex-start;
// flex-start(起始位置对齐)、flex-end(末端位置对齐)、flex-center(居中对齐)、space-around(分散对齐)、space-between(两端对齐)
侧轴对齐方式
侧轴方向对齐方式(与主轴垂直，主轴若是水平，侧轴就是垂直)
align-items: flex-start;
// flex-start(起始位置对齐)、flex-end(末端位置对齐)、center(居中对齐)、stretch(拉伸，若子项目/子元素没设置高度，拉伸占满父元素)、baseline(基线)
弹性盒项目换行
flex-wrap: nowrap; // 不换行
flex-wrap: wrap; // 换行
flex-wrap: wrap-reverse; // 换行，起始位置在下
排列次序
flex-wrap: nowrap; // 不换行
flex-wrap: wrap; // 换行
flex-wrap: wrap-reverse; // 换行，起始位置在下
放大缩小
在容器中，根据容器宽度按比例放大
flex-grow: 0; // 默认为0
flex-grow: 1; // 比例放大1倍
flex-grow: 3; // 比例放大3倍
------------------------------------------------
当子项目宽度比容器大，会按比例缩小
flex-shrink: 1; // 默认为1
flex-shrink: 2; // 缩小1倍
2D/3D
transition
transition: width, 2s; //复合属性
transition-property // 参与过渡的属性——默认 all 所有
transition-duration // 过渡持续时间 可以写1s，也可以写1000ms
transition-delay // 过渡延迟的时间 可以写s秒、ms毫秒
transition-timing-function // 时间函数（过渡的动画类型）
linear 匀速
ease-in 加速
ease-out 减速
ease 缓动
ease-in-out 先加速后减速
transform(2D动画)
translate 平移
// 水平向右 向下移动20px
transform: translate(20px, 20px);
// 水平向右移动20px
transform: translate(20px);
// 只能水平向右移动20px 若是负数，则向左移动
transform: translateX(20px);
// 只能竖直向下移动20px 若是负数，则向上移动
transform: translateY(20px);
// 绕着Z轴平移20px 若是正数，则向屏幕放大移动
transform: translateZ(20px);
rotate 旋转
// 以自身容器中心点为中心点，顺时针旋转30°
transform: rotate(30deg);
// 以自身容器中心点为中心点，逆时针旋转30°
transform: rotate(-30deg);
scale 放大
// 水平方向放大2倍，竖直方向放大2倍
transform: scale(2, 2);
// 水平方向和竖直方向放大2倍
transform: scale(2);
// 水平方向放大2倍
transform: scaleX(2);
// 竖直方向放大2倍
transform: scaleY(2);
skew 倾斜
// 水平方向倾斜30°, 竖直方向倾斜20°
transform: skew(30deg, 20deg);
// 水平方向, 竖直方向都倾斜20°
transform: skew(20deg);
// 水平方向倾斜30°
transform: skewX(30deg);
// 竖直方向倾斜30°
transform: skewY(30deg);
origin
// 动画结束之后，与原容器的左上角对齐
transform-origin: left top
// 动画结束之后，与原容器的左下角对齐
transform-origin: left bottom
// 动画结束之后，与原容器的右下角对齐
transform-origin: right bottom
// 动画结束之后，与原容器的中心对齐
transform-origin: center
transform(3D)
transform-style（若是正数，则往里转，若是负数，则往外转）
/*让嵌套子元素以3d空间展示*/
transform-style: preserve-3d;
/*让嵌套子元素以2d平面展示, 默认2d*/
transform-style: flat;
/*视距，加给父元素，只对3d变换元素有效，无穷大时接近于none，等于没有效果，通常设置500px~800px 近大远小*/
perspective: 500px;
帧动画
/*规定帧动画必须@keyframes run是自定义名字*/
@keyframes run {
0%, 100%{left:0;top:0;}
25%{left:200;top:0;}
50%{left:200;top:200;}
75%{left:0;top:200;}
}
@keyframes run {
from{left:0;top:0;}
to{left:200;top:0;}
}
E {
/*动画名称、动画持续时间、动画时间函数*/
animation: run 5s ease-in-out;
/*无限循环*/
animation: run 5s ease-in-out infinite;
/*逆向运动*/
animation: run 5s ease-in-out alternate;
}