HTML5
IE8不兼容HTML5
一般来说，单数版本为过渡版，偶数版为稳定版
html两种模式 ：1、标准模式 2、混杂模式 。HTML5中只使用<!DOCTYPE html> 即可激活标准模式
xhtml 是一个过渡版本可以不用掌握
box-sizing:border-box (盒子的宽高包括border及padding）
页面适应移动端(emmet快捷：meta：vp)：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
一、<!DOCTYPE html>
注：DOCTYPE的重要性
a)DOCTYPE声明必须是 HTML 文档的第一行，位于 标签之前。
b)DOCTYPE声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
c)DOCTYPE 3种类型:HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset
d)如果html中没有加上DOCTYPE可能在不同浏览器出现bug. 所以html加上DOCTYPE是至关重要的.
二、语义化
语义化的重要性：
语义化标签就是尽量使用有相对应的结构的含义的Html的标签
结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)
更有利于特殊终端的阅读(手机，个人助理等）
尽量用有结构含义的,少用无语义的，如,
无意义，看不出是什么东西,可是一看就知道这里面 的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。
怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样， 如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依 然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签使用比较规范了。
简而言之：搜索引擎的优化，便于开发及阅读
新增标签（列举）见：http://blog.csdn.net/flqbestboy/article/details/78094661
a)header：头标签
b)footer:页脚
c)section：独立的内容区块
d)nav：导航标签
e)aside:侧边栏导航
f)article:文章标签
g)address:地址标签
h)figure+figcaption
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。
figcaption 表示 figure 的标题。从属于 figure ， 并且， figure 中只能放置一个 figcaption
i)video/audio
j)mark:标记，内容显示背景颜色，可以修改
k)canvas
l)output:表示不同类型的输出，比如脚本的输出
m)改良的ol（可以自定义编号 start、可以按编号反向排序 reversed）
n)datalist:input中输入list属性，属性值为该标签的id值，标签中子标签使用option，设置value和label
4、新增标签的兼容
在head标签中加入
<!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> <![endif]-->
四、新增的智能表单
html4：input[type=image]类似于input[type=submit]也用于提交表单，但可使用背景图片
表单中的Boolean属性，其中如：checked 只要取值不为空串都为true ，
readonly与disabled
disabled 表单默认提交时会忽略该值，但readonly则会提交到后台
input[type=hidden]对用户隐藏，也会提交到后台
placeholder中的值不等于value因此不会传到后台，但在某些安卓手机中显示成一行（不会换行）,可通过（适配器，适配某种型号）修改样式或通过div显示隐藏来解决
input[type=url]默认还检测ftp://、http://、https://
新增类型（type属性）
Search/tel/url/email/number/range/color/file/Datetime/date/month/week/time/datetime-local
新增表单属性
required:表示该项是必填项，如果表单未填写，会弹出相应的提示信息
placeholder:占位符，当获取焦点或者输入框中的值输入为空时显示，否则显示自己填写的内容
autofocus：进入该页面自动获取焦点，原则上只允许设置一个，如果设置多个，则只有第一个有效果
autocomplete：是否在双击输入框的时候自动补全，默认值为on，另一个值为off
multiple:支持用户输入多个此类行的文本，以逗号隔开，每个文本均会进行验证,适用于类型type为email属性值和file属性值
pattern：正则表达式,一般和title属性配合说明该项填写的内容
min:最小值，适用于属性type为number和range
max:最小值，适用于属性type为number和range
step:最小值，适用于属性type为number和range
list属性：结合datalist元素使用
取消验证：可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证
三、CSS3选择器（与jQuery选择器引擎"Sizzle"一脉相承）
一般来说，在js中字符串尽量使用单引号（必要时使用单引号包双引号），html中属性值尽量使用双引号
1、属性选择器介绍(选择器{属性：属性值;} E{sRules})
E[att] { sRules } : 选择具有att属性的E元素。
E[att="val"] { sRules } : 选择具有att属性且属性值等于val的E元素。
E[att~="val"] { sRules }:选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）
E[att^="val"] { sRules }:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"] { sRules }:选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"] { sRules }:选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] { sRules }:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择
2、伪结构、元素选择器
first-line:用于为某个元素的第一行文字使用样式
first-letter:用于为某个元素的第一个文字使用样式
before：用于在某个元素之前插入一些内容
after：用于在某个元素之后插入一些内容
:root:将样式绑定到页面的根元素中
:not:排除某个选择器样式
:empty：使用该选择器来制定当元素内容为空白时使用的样式
3、选择奇偶行
nth-child(odd)与nth-child(even)
不足之处：nth-child选择器在计算子元素时第奇数个元素还是偶数个元素时，是连同父元素的所有 子元素一起计算的
nth-of-type(odd)奇数和:nth-of-type(even)偶数
完美解决上面的问题
4、循环使用样式
nth-child(n)、nth-last-child(n)
nth-child(n)选取每一行
nth-child(n+2)除第一行之位的所有行
nth-child(2n)每2行选择一行
:only-child只有一个元素时使用
5、UI元素状态伪类选择器
1）E:hover、E:active、E:focus
2）E:enabled、E:disabled
3)E:read-only、E:read-write
4）E:checked
5）E:default
6）E:inderterminate 当用户将默认设定为选取状态的单选框或者复选框修改为非选取状态，使用default选择器设定的样式依然有效
7)E::selection指定当元素处于选中状态时的样式
6、相邻兄弟选择器
li + li:后边相邻的选择器会被选中，第一个li不会被选中
7、通用兄弟选择器
li ~ li:li后面的所有li元素被选中
8、:lang 伪类---实现引用
<p>文字<q lang="no">段落中的引用的文字</q>文字</p> q:lang(no){ quotes: "~" "~" }9、使用content属性来插入项目编号
<元素>：before{ content:counter(计数器名) } <元素>{ counter-increment:before选择器/after选择器中指定的计数器名 }
谷歌手机模拟器：
物理像素与逻辑像素的比
transform：scale（0.8） 缩小
四、文字字体背景相关样式
1、css3文本效果
a)文本阴影：text-shadow:5px 5px 5px #f66;
指定多个阴影：(参数形式为X坐标 Y坐标 阴影颜色)text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;
b)自动换行：word-break
normal:使用浏览器默认换行规则
keep-all:只能在半角空格或连接字符处换行
break-all:允许在单词内换行（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的）
c)word-wrap：break-word|normal让长单词与URL地址自动换行
word-wrap:break-word;
注：在浏览器中若一个单词过长已经在第一行换行，若第二行还不够，则浏览器不会再做处理，直接溢出
2、盒子阴影
box-shadow:5px 5px 10px #f66
//兼容
-webkit-box-shadow:5px 5px 10px #f66 //safari google
-o-box-shadow:5px 5px 10px #f66 //opera
-moz-box-shadow:5px 5px 10px #f66 //fireFox
-ms-box-shadow:5px
5px 10px #f66 //microsoftware ie
3、圆角
border-radius:5px;
//斜杠前面的一组四个值分别表示四个角的水平半径； 斜杠后面的一组四个值分别表示四个角的垂直半径
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
注：一般浏览器有两个引擎：1、渲染引擎（处理及渲染html、css）；2、js引擎
4、服务端字体
在网页上显示服务端字体,进一步完美的还原设计稿，使用@font-face属性来利用服务端的字体（day01/fonts）
@font-face{ font-family:WebFont; src:url("fonts/Fontin_Sans_B_45b.otf") format("opentype"); font-weight:normal; }
//WebFont用来声明使用服务端的字体。 //format用来声明字体文件的格式，可以省略文件格式的声明而单独使用src属性值。
5、与背景和边框相关样式
background-clip 指定背景的显示范围 border-box/padding-box/content-box
background-origin 指定绘制背景图像时的起点 border-box/padding-box/content-box
background-size 指定背景中图像的尺寸 cover、30px 30px/30px auto
在一个元素中添加多张背景图片
第一个定义的背景图片在最上面的，最后定义的是在最下面的。使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式与放置的位置
*{padding: 0;margin: 0;}
div{
width: 800px;
height: 600px;
/*background-image: url(img/sky.jpg);
background-repeat: no-repeat;
background-position: center center;*/
background-image: url(../img/flower-green.png),url(../img/flower-red.png),url(../img/sky.jpg);
background-repeat:repeat-y,repeat-x,no-repeat;
background-position: 90% 10%,30% 80%,center;
}6、渐变背景色
线性渐变：background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
断点：background:-webkit-gradient(linear,0% 0%,100% 100%,color-stop(0.1,rgb(255,0,0)),color-stop(0.5,rgb(255,255,0)),color-stop(1,rgb(0,0,255)));
新写法：background: -webkit-linear-gradient(top,#fff,#000);
径向渐变：background: -webkit-radial-gradient(50% 50%,#fff,#000，#f00);
webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示：
webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
-webkit-gradient是background的一个属性值；
webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）为 linear；
第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%，当x1,x2,y1,y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），,y1和y2可以取值top（或0%）或bottom（或100%）；
当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
当x1等于x2，y1等于y2，实现没有渐变，取from色，即“ from(颜色值) ”；
实现垂直渐变和水平渐变渐变时，x1和x2可以最简单的取值是left（或0%）或right（或100%）,y1和y2可以最简单的取值是top（或0%）或bottom（或100%）；
from(开始颜色值),to(结束颜色值)是两个渐变颜色值；
[color-stop(偏移量<小数>,停靠颜色值),...]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移量必须为小数，如果偏移量>=1,那么该color-stop相当于无效；
7、使用图像边框 （详解：http://blog.csdn.net/foreverling_ling/article/details/52247649）
应用场景:移动端订单确认页面用的居多
border-image:url("url") A B C D/border-width
border-image: url(borderimage.png) 25 25 25 25/5px stretch/repeat/round
注：A B C D 表示在顺时针方向将背景图片切成九份，分别对应border的九个部分，
注：移动端布局尽量不使用float，因为手机端的页面大小往往是不确定的
注：flex-wrap是新版本flex中新加入的，在低版本的某些安卓机可能不起作用，兼容处理：分开写
注：
flex-direction：row
水平：justify-content
垂直：align-item
flex-direction：column
垂直：justify-content
水平：align-item
