新增标签
html5特点：标签语义化；尽量使用有相对应结构含义的html标签，如span div无意义，<adress>表示地址<em>表示强调内容。
1.结构更好更利于搜索引擎的抓取（SEO）和开发人员的维护
2.更有利于手机客户端的阅读
header:内容区块或者标题
footer:一般包含创作者信息
article:一块与上下文无关的内容，譬如一篇文章
aside:辅助信息，div:left
section:章节，页眉，页脚，内容等，可以结合h1-h6,强化文章结构
nav:导航
figure:一段独立的流内容，一般表示文章主体内容中的一个独立内容，唯一figcaption来给figure添加标题，类似dl dt dd
mark:突出显示或高亮文字，一般用在搜索结果中高亮搜索关键字
CSS3选择器和新增属性
1.属性选择器
语法：
E[att]{};image[title]{};//css2
E[att=""]{};input[type="text"]{};//css2
E[att~=""]{};选取属性值中有指定词汇的元素。比较少用，比如class里面有两个词组时class="div1 layout"，div[class~="layout"];//css2
E[att|=""]{};用于选择指定值开头的元素，必须是整个单词，比如class="a-img";image[|="a"]{};//css2
E[att^=""]{};匹配指定值开头的所有的元素;//css3;
E[att$=""]{};匹配指定值结尾的每个元素;//css3;
e[att*=""]{};匹配包含指定值的每个元素;//css3;
2.伪类选择器
结构性伪类选择器，
语法：:first-child与:last-child:单独指定第一个和最后一个元素，.nav1 li:first-child{}
语法：:nth-child（数字）与:nth-last-child（数字）(倒数):指定序号的子元素，.nav1 li:nth-child(2){}
对奇数个或偶数个子元素使用样式，如果子元素不是同类型，会出问题，先定义排位，再定义元素
:nth-child(odd){}:奇数个元素li:nth-child(odd){}
:nth-child(even){}:偶数个元素
:nth-last-child(odd){}:倒数奇数个元素
:nth-last-child(even){}:倒数偶数个元素
:nth-of-type与:nth-last-of-type:先定义元素，再定义排位
:nth-child(αn+β)与:nth-last-child(αn+β):循环使用样式，α表示每次循环中共包括几种样式，β表示在循环中的位置
nth-child(3n){};nth-child(2n+1){};n从0开始
:only-child:只有一个子元素会被匹配，li:only-child{}
目标伪类选择器
语法：:target,突出显示HTML活动的锚，URL后面带有很多#的名称，指向文档内的特定元素，这个被链接的元素就是目标元素（target element）
:target选择器可用于选取当前活动的目标元素。只有用户点击了超链接有target目标才起作用。
:target{};
3.层级选择器
E>F{}:子元素选择器，只能选择某元素的子元素F元素，子子元素F不能匹配。 ul .li1>span
E+F{}:相邻元素选择器，他们具有相同的父元素，只选择一个F在后面。ul .li1+li
E~F{}:通用选择器，同一个父元素中，F在E后面，选择全部F。ul .li1~H1
浏览器前缀简介与应用
某些CSS还只是预览版，但大部分浏览器已经提供了支持，但这些属性是小部分浏览器专有的，为了让浏览器识别，CSS允许这些属性前添加各自的浏览器前缀
-webkit-:webkit,如chrome,safari
-moz-:mozila,gecko引擎，如firefox
-ms-:microsoft
-o-:opera,例如，-o-text-overflow
服务器端字体和iconfont
1.服务器端字体
@font-face{font-family:WebFont;src:url("")format("opentype")}
div{font-family:WebFont}
opentype字体后缀otf,truetype字体后缀ttf
2.iconfont
用字体来代替图片来展示特殊字体、图标，体积小，拉伸不变形，支持CSS3一些文字特效，去阿里巴巴iconfont下载。
CSS3新增属性
1.背景属性
background-clip:
border-box：背景被裁剪到边框盒，包含边框，默认属性
padding-box：背景被裁剪到内边距框，不包含边框
content-box：背景被裁剪到内容框，不包含边框和内边距
css2中背景不包括边框，css2.1-3中包括了边框
background-origin:设定背景图从边框，内边距或者内容的左上角开始。
border-box:从边框开始
padding-box:默认
content-box:
background-size:定义背景图片大小。
length:设置高宽，如果只设置一个，另一个默认AUTO
percentage:以父元素的百分比来设置高宽
cover:等比放大覆盖整个区域
contain:等比缩放，不覆盖整个区域
在一个元素里面可以添加多张背景图片
div{background:url(""),url("");background-repeat:no-repeat;repeat-x;background-position:20px 20px,center center}
background-clip:background-clip:background-size:background-iamge这些都可以多次使用
2.边框属性
border-raidus:左上15px 右上 右下 左下；左上右下 右上左下；
border-image:url("")A B C D(表示上，右，下，左边距，可以缩写成一个，不需要单位)
-webkit-border-image:url("../img/borderbg.png")30 30 30 30/10px repeat;repeat/round铺满/stretch拉伸;
3.盒阴影
box-shadow:5px 5px 5px 5px #333 inset/outset
h-shadow :必须，水平阴影位置，可以为负值
v-shadow :必须，垂直阴影位置，可以为负值
blur :模糊
spread: 尺寸
color :颜色
inset:将外部阴影改成内部阴影
边框背景图片练习
.borderimg{height: 100px;width: 300px;-webkit-border-image:url("../img/borderbg.png")30 30 30 30/10px round;}
<div class="borderimg"></div>
盒子阴影练习
.box1{height: 100px;width: 100px;box-shadow:0px 5px 5px 0px #333 outset;}<div class="box1"></div>
伪类选择器的练习，边框箭头
.box{height: 50px;width: 100px;position: relative;margin: 100px 0;line-height: 50px;}
.box:hover::after{content: "";height: 0;width: 0;border: 10px solid transparent;border-right: 10px solid #f00;
position: absolute;top: 50%;margin-top:-10px; left: 83%;}
.box:hover::before{content: attr(data-text);height: 40px;width: 120px;background: #ff0000;border-radius: 3px;
position: absolute;line-height: 40px;text-align: center;left: 100%;top: 50%;margin-top:-20px;}
<p class="box" data-text="hello!world!">hello!world!</p>