html5那些事儿

一、优势
1、标签的改变：<header>，<footer>，<dialog>，<aside>，<figure>，<section>等；
2、代码简洁，开发游戏，移动开发工具；
3、标准未定，浏览器兼容性问题。

二、svg和canvas
1、svg
svg可以单独作为文件打开，在AI里做矢量图形，保存图层路径，即可另存为Svg文件。
path语法：命令+参数。大写字母表示坐标参数为绝对位置，小写字母表示坐标参数为相对位置（即上次画笔结束后的位置）。
Svg画椭圆：M200 200 A 200 100 0 0 1 300 300。初始位置，x半径，y半径，旋转角度，选弧长较短，顺时针，结束位置。

2、canvas
Canvas是基于状态，而不是基于对象画图。它提供容器，配合JS后，才能在页面展现图形。Canvas最好写行内样式，宽高不加单位。

三、自定义数据属性

<div id ="user" data-uid="2009" data-uname="camille" > </div>

1、使用getAttribute获取data-属性

var user = document.getElementById('user');

var userName = user.getAttribute('data-uname'); // userName = 'camille'

var userId = user.getAttribute('data-uid'); // userId = '2009'

2、使用setAttribute设置data-属性

user.setAttribute('data-age' , '100');

四、语义化标签

HTML5Shiv解决ie旧版本不支持h5新元素，浏览器小于IE9时会加载html5shiv.js文件。你必须将其放置于<head>元素中，让CSS样式应用在未知元素上只需执行document.createElement(elementName) 即可实现。

<!--[ifltIE9]>

  <script type="text/javascript" src="scripts/html5shiv.js"></script>

<![endif]-->

五、一些新标签

1、details，summary

可以通过html和css实现树形结构，下拉菜单，展开更多，不用js。

2、datalist

搜索下拉框。

巴特西

html5那些事儿

最新文章

热门文章