前言：我们不是代码的创造者，我们只是代码的搬运工。
<h1>文本标题
<p>段落标签
<br>强制换行标签
空格
<hr>水平线标签
<b>加粗
<strong>加重语气的加粗标签
<i>倾斜
<em>加重语气
<u>下划线
<s>删除线标签
<a>超链接
<a href="#">超链接
<a href="https://www.taobao.com" target="_blank"></a>
<a href="index" target="_blank">超链接：相对路径
<img src=""/>
<form></form>表单
name:定义表单名
method="get/post"
action="请求地址"
<textarea>文本内容</textarea> 多行文本框
<select>下拉框
<option select></option select>下拉框内容
<input type="类型"/ value="内容">表单元素
text 单行文本框
placeholder 提示信息
password 密码输入框
rodio 单选框
checkbox 复选框
checked=checked 默认选中
submit 提交按钮
reset 重置按钮
button 自定义按钮
CSS(cascading style sheets)
内部样式表
<style type="text/css">
</style>
外部样式表
<link rel="stylesheet" type="text/css" href="/"/>
内联样式表
<div style="height:100px"/>
/* */ CSS注释符
<!-- --!> HTML注释符
a:link{} 初始状态
a:visited{} 被访问过后
a:hover{} 鼠标悬停时
a:action{} 被访问时
内联样式的权重 1000
id选择符 0100
class选择符 0010
伪类选择符 0010
类型选择符 0001
继承样式 0000
包含选择符：为包含选择符的权重之和
margin:0 auto;width: ;
float:left;
font-style:normal/italic; 设置文本为斜体
font-weight:normal(100-500)/blod(600-900);
font-family:""; 设置文本字体
text-align: ; 文本水平方式居中
vertical-align:top/middle/bottom 垂直方式居中
line-height: px; 设置文本在一行内的高度
font:blod italic px/ px "";
border: px solid实线/dashed /dotted bloubie
text-decoration: 文本修饰
none: 没有修饰
underline: 下划线
overline: 上划线
line-through: 添加删除线
text-indent:+-2em;(首行缩进2字符)
over-flow 溢出属性
overflow:hidden; 文本溢出就消失
text-overflow:ellipsis; 文本溢出时用省略号
word-wrap:break-word; 让英文字母和数字在没有空格的情况下强行换行
display:block; 块元素 默认宽度和父框一样宽 能强行换行 能设置宽高
inline; 元素不能设置宽高，在一行显示由内容撑大
inline-block; 在一行显示并且能设置宽高的行内元素
none; 不显示元素
position: 定位属性
static 默认值
absolute 绝对定位
relative 相对定位
fixed 绝对定位
left:0;right:0;top:0;bottom:0;margin:0 auto; 能把块元素绝对居中
z-index: ; 层级
opacity:0.5(值0-1，IE9以下无效) 透明度
filter.aloha(opacity=50); 值0-100；非ie浏览器无效
注：给父元素透明，子元素也透明。
cursor:pointer; 鼠标触碰变手。
图片整合的优劣势：
优 通过图片整合来减少对服务器的请求次数，从而提高图片的加载速度。
通过整合图片来减少图片的体积
劣势 增加了开发人员的负担
伪元素选择符
:after 最后一个子元素
:before 第一个元素之后前添加一个类
:first-letter; 定义第一个字符的样式
:first-line; 定义第一行的样式
ie8以下不支持伪元素
解决高度塌陷
overflow:hidden; 自动检索子元素宽度
clear:both; 清除浮动（在最后一个浮动元素之后添加一个块元素）
.clear{zoom:1;}
.clear:after{content:"",clear:both;display:block;height:0;overflow:hidden}
visibility:hidden/visible 不可见/可见
html,body{height:100%}
网页优化
关键词<meta name="keyword" content=""/>
描述 <meta name="description" content=""/>
高级表单
表单字段集
<fieldset></fieldset>
字段集标题
<legend></legend>
表单元素
上传文件框<input type="file">
图像域<input type="image" src="路径"/>
提示信息标签<label for="绑定控件ID名"></label>
<input type="hidden" value="隐藏"/>
<section></section> 表示文档的栏目，结构
<header></header> 头标签
<nav></nav> 导航标签
<article></article> 文章标签
<aside></aside> 侧边栏导航
<footer></footer> 页脚
<mark></mark> 凸显文字
<figure></figure> 用来表示网页上一块独立的内容
figcaption 用来表示figure的标题作为第一个或最后一个元素。
output 显示表单元素结果
datalist 提供表单选项列表
<input type="url">
<input type="number" value="25" min="10" max="100"step="5"/> step跳跃数 min 最小值 max 最大值
<input type="email" required="required" multiple="multiple"> required 判断是否为空 multiple 可用逗号分割
<input type="date" value="yyyy-mm-dd"/>
<input type="month" value="yyyy-mm"/>
<input type="week" value="yyyy-W01"/>
<input type="time" value="hh:mm"/>
<input type="datetime-local" value="yyyy-mm-ddT00:00"/>
属性选择器
[tittle] 选择所有title属性的元素
[title=a] 选择所有title=a的元素
[title="1"] 选择名字为1的元素
[class="ab"]
[class~="a"] 选择所有单词为a的元素
[class|=a] 选择带有a开头的完整单词的元素
[class^=a] 选择所有a开头的元素
[class$=a] 选择所有a结尾的元素
[class*=a] 选择所有带有a的元素
结构性伪类选择器
:root 选择根目录 可以理解成html
body :not(h1) 除子元素h1的所有子元素
p:empty 选择内容为空的元素(回车换行都不算空)
:target 选择被锚点选中的元素
ul li:first-child 选择第一个子元素
ul li:last-child 选择最后一个（子)元素
ul li:nth-child(2) 选择第二个(子)元素
ul li:nth-last-child(2) 选择倒数第二个(子元素）
ul li:nth-child(odd)/(even) 选择正数下奇数/偶数下的子元素
ul li:nth-of-type(2) 有关这个元素的第二个子元素
ul li:nth-last-of-type(2) 有关这个元素的倒数第二个子元素
div p:only-child 只有p元素是唯一一个(子)元素才有效
n运算
ul li:nth-child(n+2) 匹配从第二个元素开始
ul li:nth-child(2n) 匹配偶数
ul li:nth-child(2n-1)匹配奇数
状态性伪类选择器
input:focus 元素获取焦点时的状态
input:enabled 元素可以时候的状态
input:disabled 元素禁用时候的状态
input:read-only 元素只读时候的状态
input:read-write 元素非只读时候的状态
案例:read.html
input:checked 元素被选中时候的状态
案例:checked.html
input:default 元素默认有checked的状态
案例:default.html
input:inderterminate 元素都没选中过的状态只支持google
案例:inderterminate.html
input::selection 元素被选取的状态
需要加前缀
案例:selection.html
相邻兄弟选择器
li+li 选择下一个元素
案例：jia.html
span~p 选择span之后所有的同级p元素
案例：bolang.html
扩展：
:lang(xx) 选择lang属性值以xx开头的元素
ul>li 子选择器 只能选择亲儿子
:after{content:url(路径);} 添加图片
:after{content:attr(id);} 使用元素属性值作为content值 不是所有属性值都能显示 对单标签元素效果不佳
兼容前缀
-moz- Gecko 火狐
-ms- Trident IE
-o- presto 前欧朋
-webkit- webkit 苹果
文本阴影
text-shadow:x坐标 y坐标 阴影大小 颜色
text-shadow:5px 5px 5px #f00;
text-shadow:5px 5px 5px #f00,2px 3px 4px #00f;
word-break:
normal 默认
keep-all 只能在半角空格或连接字符处换行
break-all 允许在单词内换行(会整个单词都换行)
word-wrap:
normal 默认
break-word 允许在单词内换行(单纯的换行)
显示服务端字体
@font-face {
font-family:WebFont;
src:url("fonts/Fontin_Sans_B_45b.otf") format("opentype");
}
format 声明文件类型
opentype *.otf
truetype *.ttf
*.eot 格式文件不需要声明 format
与背景和边框相关样式(例：banground1.html)
background-clip : 设置背景显示区域
border-box padding-box content-box
background-origin 指定绘制背景图像时的起点
border-box padding-box content-box
background-size 指定背景中图像的尺寸
大小 或 百分比
cover 按比例撑满背景
contain 刚好填满一边大小的尺寸
background-break 指定内联元素的背景图像进行平铺时的循环方式，浏览器支持不友好，暂时不需要了解
颜色值
rgba 新的颜色值能设置 红绿蓝透明
background:rgba(100,100,100,0.5);
好处：能单纯设置背景或文字透明不影响子元素不透明
坏处：颜色设置复杂0-255; 不能一次性复制ps颜色
hsl 色调 饱和度 亮度
background: hsl(180, 50%, 50%);
hsla 你猜
background: hsla(180, 50%, 50%,0.5);
盒子阴影属性
box-shadow:x坐标 y坐标 阴影大小 颜色
box-shadow:5px 5px 5px #f00;
box-shadow:5px 5px 5px #f00, 2px 3px 4px #00f;
border-radius:10px 设置圆角元素
可以设置 1-4个值 有点类似盒模型设置
(border-radius:10px/10px; 左边设置水平半径右边设置垂直半径
这种方式几乎用不到)
边框颜色
border-color:#f00 #ff0 #f0f #00f;
border-image:
图片路径
4个方向
宽度
平铺方式
stretch拉升 round平铺
bd-image.html
CSS3 渐变的语法及应用
线性渐变
径向渐变
重复渐变
线性渐变
linear-gradient (方向[可选],颜色1,颜色2)
就是，一个方向到另一个方向笔直进行渐变
径向渐变
radial-gradient (正圆椭圆[可选],颜色1,颜色2)
从起点到终点颜色从内到外进行圆形渐变
circle：渐变为最大的圆形；
ellipse：(椭圆)根据元素形状渐变，元素为正方形是显示效果与circle无异。
重复渐变
repeating-radial-gradient
会按照规律一层一层循环
repeating-linear-gradient
会按照规律一层一层循环
动画过度
transition:2s linear all; (必须加前缀-moz-)
定义过度属性
transition-property: all 或 属性名,属性名
定义过度时间
transition-duration: 2s
延迟多少时间开始
transition-delay: 2s
transition-timing-function:
linear 匀速 ease 慢快慢
ease-in 慢开始 ease-out 慢结束
ease-in-out 慢开始慢结束
cubic-bezier 自定义贝兹尔曲线
2D 转换属性
transform: (-moz-)
translate() 移动
通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标） 位置参数
例：transform.html
rotate() 旋转
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale() 缩放
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
skew() 倾斜
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix() 合体写法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
缩放X, tan(X度), tan(Y度),缩放Y,位置X,位置Y
transform 向元素应用 2D 或 3D 转换。C3
transform-origin 允许你改变被转换元素的位置 C3
matrix(n,n,n,n,n,n) 定义2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
3D
3D转换
3D 翻转方法：
rotateX(30deg)
rotateY(30deg)
注： Internet Explorer 和
Opera
不支持 rotateX, rotateY 方法。
扩展
rotate和rotateZ()效果一样
它如何工作？
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera,ie9仍然不支持 3D 转换 它只支持 2D 转换
3D位置移动 的3种写法
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);
在2D的基础上多了1D (Z轴)
3D视距
perspective
元素要使用3D效果 需要perspective属性配合
方法1：
<div>
<p></p> div{perspective:200px;}
p{width:100px;height:100px;
transform:translate3d(0,0,-50px);background:#ff9;}
</div>
方法2:
<p></p> p{width:100px;height:100px;
transform:perspective(200px) translate3d(0,0,-50px);
background:#ff9;}
3D缩放翻转
scale3d 不能自己单独使用，需要配合其他变换效果一起使用。
父框设置
perspective:1200px
transform-style:preserve-3d;(3D视角)
（子元素保持3D位置）
transform-origin:left/top/right/bottom
翻转位置
例：preserve-3d.html
3D动画
CSS3 @keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式，
就能创建由当前样式逐渐改为新样式的动画效果。
IExplorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
语法：
keyframes zidingyi{
from {background: red;}
to {background: yellow;}
to {background: yellow;}
}
@-moz-keyframes myfirst{/* Firefox */{
from {background: red;}
to {background: yellow;}
to {background: yellow;}
}
CSS3 动画
当您在 @keyframes 中创建动画时，
请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
动画属性
animation: (可以理解为循环过度动画效果)
animation-name: 动画名
animation-duration: 时间 默认0
animation-timing-function: 曲线 默认ease
animation-delay : 延时 默认0
animation-iteration-count: 播放次数 默认1
animation-direction: 周期后是否倒放
animation-play-state: 是否暂停 默认 running
animation-fill-mode: 动画结束后的状态
animation: name 5s linear 2s infinite alternate;
关键帧：
from to 0% 100%
弹性盒子与响应式
怪异盒模型
弹性盒子
响应式设计布局概念
多列布局
怪异盒模型
css3 盒模型
box-sizing:
content-box 标准盒模型 (默认)
border-box 怪异盒模型
弹性盒子
display: 弹性盒子类型
box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)
inline-box:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最老版本)
flexbox:将对象作为弹性伸缩盒显示。 (伸缩盒过渡版本)
inline-flexbox:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒过渡版本)
flex:将对象作为弹性伸缩盒显示。 (伸缩盒最新版本)
inline-flex:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最新版本)
注：设置在父元素上 使用弹性盒 float vertical-align 多列都无效
弹性盒流向(设置父元素上)
flex-direction:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
flex-direction.html
弹性盒子子元素顺序(设置在子元素上)
order:
负数靠前:(越小越前)
0为原始位置
正整数靠后(越大越后)
order.html
弹性盒子分配剩余空间(设置在子元素上)
flex-grow :
0为默认
分配提成 数字
flex-grow.html
伸缩性（设置子元素上）
flex:
按提成分配 数字
0 0 百分比分配
flex.html
伸缩换行 (适用于父类容器上)
flex-wrap:
nowrap：当子元素溢出父容器时不换行。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：反转 wrap 排列。
flex-wrap.html
伸缩流方向与换行(适用于父类容器上)
flex-flow: flex-direction属性值 flex-wrap属性值
将2个属性结合一起使用
主轴横向对齐 (设置在父类容器上)
justify-content:
flex-start： 左对齐
flex-end： 右对齐
center： 居中对齐
space-between: 分开对齐
space-around: 分开左右边距对齐
justify-content.html
主轴纵向对齐 (设置在父类容器上)
align-content:
flex-start： 上对齐
flex-end： 下对齐
center： 居中对齐
space-between: 分开对齐
space-around: 分开上下边距对齐
strecth 上下拉升对齐
align-content.html
侧轴对齐
align-items (设置在父) 、align-self (设置在子)
flex-start： 上对齐
flex-end： 下对齐
center： 居中对齐
baseline 基线对齐
stretch 上下拉升对齐
注:align-items基本与align-content差不多 就2个参数没有
align-self.html
检索弹性盒的收缩比率(子元素设置)
flex-shrink:
数字
注：溢出时计算比例
flex-shrink.html
检索弹性盒伸缩基准值(子元素设置)
flex-basis:
数值
注：溢出时计算数值比例
flex-basis.html
响应式设计布局概念
<meta name="viewport" ?content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
width=device-width:宽度等于当前设备的宽度;
initial-scale=1：初始的缩放比例(默认为1);
maximum-scale=1：允许用户缩放到得最大比例(默认为1)
user-scalable=no：用户不能手动缩放;
@media screen and (max-width:720px) and (min-width:320px){
body{
background-color:red;
}
}
@media screen and (max-width:320px){
body{
background-color:blue;
}
}
该段媒体查询的意思是：
当设备屏幕宽度在320px——720px之间时，媒体查询中body的背景色（background-color:red;）会重叠之前的body背景色，
当设备屏幕宽度在320px及以下时，媒体查询中body的body背景色（background-color:blue;）会重叠之前的body背景色；
优势
多终端视觉和操作体验非常好风格统一
兼容当前及未来新设备
响应式web设计中的大部分技术可以用在WebApp开发中
节约了开发成本，维护成本也降低很多
不足
兼容性：低版本浏览器兼容性有问题
移动带宽流量：相比较手机定制网站，流量稍大，
但比较加载一个完整pc端网站显然是小得多
代码累赘，会出现隐藏无用的元素，加载时间加长
兼容各种设备工作量大
适用什么？
对于重内容的网站，例如形象展示，则比较适合使用响应式web设计
不适用什么？
对于重功能的网站，如电子商务类，则更推荐使用独立移动网站
(1)使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
(3)设置Web App的状态栏（屏幕顶部栏）的样式
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
@media 媒体查询 (media query)
基本语法
外联CSS语法
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href=“medium.css” media=“screen and
(max-width:1024px) and (min-width:320px)" />
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
多列属性：
column-count
column-gap
column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性
创建多列
column-count: 数字
属性规定元素应该被分隔的列数
规定列之间的间隔
column-gap:数值
属性规定列之间的间隔
列规则
column-rule:
属性设置列之间的宽度、样式和颜色规则
duolie.html
移动端页面布局
移动端布局的优缺点
优点：
移动端基本都兼容h5 css3 所有可以放心的去使用css3的样式来布局
移动端页面一般都不大 所以标签使用的并不多 相对一个一面开发时间没web端长
缺点
移动端宽高尺寸不同 因此测量尺寸称为了一个难题 无法非常精确的写尺寸
因为无法使用使用正常尺寸 不能直接写像素 通常用2种方式来写
新单位 rem
rem是获取html的font-size值
例 html{font-size:100px;} 那么所有子元素 1rem=100px;
然后通过js获取屏幕尺寸 制定出一个系数 去改变html的font-size值
(当屏幕尺寸是320px我想设置1rem=1% 那么就设置html的font-size:32px; 通过js来设置 屏幕尺寸除以100)
vw,vh 获取屏幕宽高
100vw=屏幕的宽度
1vw=1%屏幕尺寸
这样更直观的获取百分比 但是少部分手机不支持 所以需要自己把控
vw,wh是未来的趋势
\
\
要移动端尺寸显示正常需要加上以下meta
<meta name="viewport" ?content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
复制时多注意标点符号,英文单词.如果出错,本人概不负责!
作者:搬运工
再次强调,本人只是搬运工。