html5那些事儿
2016-02-19 22:50
716 查看
一、优势
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最好写行内样式,宽高不加单位。
三、自定义数据属性
1、使用getAttribute获取data-属性
2、使用setAttribute设置data-属性
四、语义化标签
HTML5Shiv解决ie旧版本不支持h5新元素,浏览器小于IE9时会加载html5shiv.js文件。你必须将其放置于<head>元素中,让CSS样式应用在未知元素上只需执行document.createElement(elementName) 即可实现。
五、一些新标签
1、details,summary
可以通过html和css实现树形结构,下拉菜单,展开更多,不用js。
2、datalist
搜索下拉框。
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拓扑图形组件设计
- 矢量化的HTML5拓扑图形组件设计
- HTML5总结
- ie8及以下无法识别html5新增标签,怎么破?
- HTML5离线存储原理及实现
- H5真的很强悍?
- Modernizr——为HTML5和CSS3而生!
- Html5页面中存放可拨打电话
- HTML5:嵌入内容
- 浅析HTML5的WebSocket与服务器推送事件
- 在HTML5中使用MathML数学公式的简单讲解
- 使用HTML5进行SVG矢量图形绘制的入门教程
- 整理HTML5中表单的常用属性及新属性
- HTML5+CSS3鼠标悬停图片特效
- H5新春贺卡之笔记
- Hello,HTML 到 HTML5
- 自定义表单(完)--(html5版本)
- 【HTML5】利用lufylegend实现游戏中的卷轴
- HTML5的WebGL实现的3D和2D拓扑树
- HTMl5的sessionStorage和localStorage