草丁图书馆

  1. 首页 > 生活杂烩 >

html5新特性有哪些，h5和c3新增特征( 四 )

小知识


3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>
CSS中使用：
<style>
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>
27. Output元素
<output>元素用来显示计算结果 ， 也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块 ， 它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=http://www.ncwxdh.com/p/”">
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
html5有哪些新特性 ， 移除了那些元素 跟HMTL相比 ， HTML5新增了很多内容 ， 其中有一些特性是作为开发人员必须要了解的 。 一个叫秒秒学的教学网站上有专门针对HTML5的课程 ， 讲解得还蛮细致 ， 推荐你去看看 。
1.新的文档类型 (New Doctype)
HTML5简化了文档类型的声明方式 。 HTML5的声明方式为：<!DOCTYPE html> 。
而之前的文档类型的声明方式是非常复杂 ， 并且难以记忆的 ， 比如XHTML 1.0的文档类型是：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

2.脚本和链接无需type

在HTML4或XHTML中 ， 你需要用下面的几行代码来给你的网页添加CSS和JavaScript文件 。
< link rel="stylesheet" href="http://www.ncwxdh.com/p/stylesheet.css" type="text/css" />
< script type="text/javascript" src="http://www.ncwxdh.com/p/script.js"></script>

而在HTML5中 ， 你不再需要指定type属性 。 因此 ， 代码可以简化如下：
< link rel="stylesheet" href="http://www.ncwxdh.com/p/stylesheet.css" />
< script src="http://www.ncwxdh.com/p/script.js"></script>

3.更加语义化的元素
HTML5 新增的一些更具有语义化的新标签来替代<div> 标签 ， 但它们并不提供额外的功能 。 这些新增的标签是：<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>等 。

4.占位符 (Placeholder)
在HTML4或XHTML中 ， 一般需要用JavaScript来给文本框添加占位符 。 比如：通过脚本设置 ， 当用户开始输入时 ， 文本框中的文字就消失 。 而在HTML5中 ， 新增的逗placeholder地功能可以很简单的解决这个问题 。

5.Audio 和Video 支持
在HTML5之前 ， 网页通常需要依靠第三方插件来渲染音频 。 而在HTML5中 ， <audio>元素被引进来后 ， 我们可以使用audio元素来渲染音频 。
在HTML5中 ， 不仅新增渲染音频的元素 ， 同时也新增了支持视频的元素video 。
6.离线 & 存储
IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据 ， 并且在这些数据上使用索引进行高性能检索的 API 。 虽然 DOM 存储 对于存储少量数据是非常有用的 ， 但是它对大量结构化数据的存储就显得力不从心了 。 IndexedDB 则提供了这样的一个解决方案 。
7.HTML5 canvas
<canvas> 是 HTML5 新增的元素 ， 可使用JavaScript脚本来绘制图形 。 例如：画图 ， 合成照片 ， 创建动画甚至实时视频处理与渲染 。

8.设备访问
HTML5新增的特性中 ， 允许通过页面元素访问硬件设备 ， 比如：[ ]摄像头、地理位置服务、检测方向、触控事件等 。
HTML5新特性有哪些 ， 你都知道吗 1、离线缓存 。 可以在关闭浏览器后再次打开时恢复数据 ， 以减少网络流量 。

推荐阅读


上一篇：【紫荆花】紫金花和紫荆花一样吗

下一篇：【品种】目前最甜的梨新品种