HTML5新特性、CSS3新特性

1.HTML5

一：canvas 标签

your browser does not support the canvas tag

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

渲染结果：

通过这个元素你可以绘制你想要的图案。

二：video标签​​

your browser does not support the video tag   //可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

video 标签具有以下属性：

1.autoplay:如果出现该属性，则视频在就绪之后马上播放

2.controls:如果出现该属性，则向用户显示控件，比如播放按钮

3.height：设置视频播放器高度

4.loop：如果出现该属性，则会重复播放

5.preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。

6.src：视频地址

7.width：设置视频播放器宽度

三：localStorage 和 sessionStorage

Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

1.localStorage: 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2.sessionStorage: 用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。

Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie。sessionStorage.setItem("name", "三十亿少女的梦");

console.log(sessionStorage.getItem("name")); //三十亿少女的梦

四：语义化标签

在 HTML5 出来之前，我们用 div 构建页面，但是这些 div 都没有实际意义。我们只能通过 id 等属性认为赋予它一些身份。为了便于开发者观察和 seo(搜索引擎优化)，html5 推出了这些语义化标签。

header：代表“网页”或“section”的页眉。

footer：代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

hgroup：代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将 h1 到 h6 元素放在其内，譬如文章的主标题和副标题的组合

nav：元素代表页面的导航链接区域。用于定义页面的主要导航部分。

aside：被包含在 article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。

section：代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

article：最容易跟 section 和 div 容易混淆，其实 article 代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的 widget 小工具。(特殊的section)

五：新表单控件

html5 中添加了 date(日期选择)、time(时间选择)、email(邮箱地址)、url(链接)等表单控件，我个人非常喜欢这些添加。比如 email 控件，以前我们没有这个控件的时候要判断用户输入的是不是 email 格式只能通过js正则表达式来判断，但 h5 之后只用在 input 的 type 属性写上 email 就可以了，但这只是基本的判断不能保证百分百过滤，为了安全，后台还是要进行 email 格式判断的。

六：去掉 script 和 link 标签里的 type 属性

html5 之后你的 script 和 link 不用再加 type 属性，一样可以工作正常，但是为了不出差错，最好还是加上。

七：contenteditable 属性

你的任何 dom 节点只要加上 contenteditable="true"就可以变得可编辑，也是一个很棒的属性添加,用这个你可以模拟 textarea。

八：input 添加了 placeholder，required,autofocus,pattern 等属性

九：mark标签

使用 mark 标签可以使你的内容有醒目的标记，从 mark 这个单词相信你就能猜出这个标签大概用途

十：pageInput 创建滑块

HTML5 引用的 range 类型可以创建滑块，它接受 min, max, step 和 value 属性，可以使用 css 的 :before 和 :after 来显示 min 和 max 的值 ，但是显示的不是很友善。

input[type=range]:before {undefined

content: attr(min);

padding-right: 5px;

}

​

input[type=range]:after {undefined

content: attr(max);

padding-left: 5px;}

}

2.CSS3

一、css3的新选择器

1. E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式
2. E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素
3. E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应
4. E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素
5. E:empty 选择没有子元素的每个E元素
6. E:target 选择当前活动的E元素
7. ::selection 选择被用户选取的元素部分
8. 属性选择器
9. E[abc*="def"] 选择adc属性值中包含子串"def"的所有元素

二、文本

1. text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色
2. text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)
3. text-wrap：规定文本换行的规则
4. word-break 规定非中日韩文本的换行规则
5. word-wrap：对长的不可分割的单词进行分割并换行到下一行
6. white-space：规定如何处理元素中的空白
7. white-space:nowrap 规定段落中的文本不进行换行

三、边框

border-raduis 边框的圆角

border-image 边框图片

.border-image {
    border-image-source:url(images/border.png);
    boder-image-slice:27;
    border-image-width:10px;
    border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边  
}
四、背景

rgba

backgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片

五、渐变

linear-gradient

background-image:linear-gradient(90deg,yellow 20%,green 80%)
1
radial-gradient

background-iamge:radial-gradient(120px at center center,yellow,green)
1
六、多列布局

column-count

column-width

column-gap

column-rule

七、过渡

transition

transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔

transition-duration:2s; //过渡持续的时间

transition-timing-function:ease;

transition-delay:5s //过渡延迟5s进行

八、动画、变形

animation

transform ：translate（x,y) rotate(deg) scale(x,y)

translate

scale

rotate

skew（倾斜）

九、flex布局

十、@media媒体查询