html5 好用功能总结
1.表格元素
a.<caption>设置表格标题
b.<colgroup> 、 <col> 设置列 //style span
2.分组元素
a.<blockquote>给大段内容添加换行和首尾缩进(会有一个外边距)
b.<pre>会将编辑器排版展示出来(通常用来展示代码,代码在其中不会执行)
c.<figure>用于图片(<figcaption>是他的标题)
3.语义化标签
a.<header>表示首部
b.<footer>表示尾部
c.<hgroup>对h1-h6进行分组
d.<section>对标题进行分组
e.<nav>存放导航
f.<article>存放文章
g.<aside>可以做文章侧栏,h1-h6被加粗,其他标签以此显示
h.<adress>存放联系信息
4.音频视频
video音频 audio视频 //不依赖插件,播放音频视频
5.js加载
async 异步加载js(页面继续解析,脚本执行)
<script src="js1.js" async="async"></script>
6.不重新加载页面的历史管理
history.back(); //返回上一页面
history.forward(); //移动到下一页面
history.go(-2); //接受一个整数作为参数,移动到该整数指定的页面,没有不返回值
history.go(0) 相当于刷新当前页面。
history.pushState()方法接受三个参数,依次为:
state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填 " "。
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址
ps:不检查新网址是否存在,但地址栏会显示,且加入历史栈
popstate事件:同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。
仅仅调用pushState方法或replaceState方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,
或者使用JavaScript调 用back、forward、go方法时才会触发。
另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。
7.canvas画布和SVG
可用于小应用,制作出超炫的效果
8.html5 web存储
cookie存储量小,速度慢,效率低
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
9.web workers
后台运行的js,不会影响dom
10.获取地理位置
<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
html5 好用功能总结的更多相关文章
- Web开发者应当开始学习HTML5的新功能
据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...
- 用jquery实现html5的placeholder功能
html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的 ...
- 关于html5新增的功能(百度)
HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html> 2. 新增了一些结构化标记的元素(<header>,<nav> ...
- 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- 让IE8支持HTML5及canvas功能!
微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了. 即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧. 首先,需要让IE支持HTM ...
- ionic结合HTML5实现打电话功能
HTML5中这样子可以实现打电话的功能,但是在ionic实际项目中,并不是直接就可以这样子用,需要配置一下config.xml文件就可以在手机上调用到自己的联系人打电话页面了, 因为项目是引用的Cor ...
- HTML5的新增功能有哪些?
HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. 新的功能: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的 ...
- BAT大佬推荐使用的HTML5的十个功能
HTML5不是新事物.自从最初发布(2008年1月)以来,我们一直在使用它的一些功能.后来,我再次仔细查看了HTML5功能列表.看到我发现了什么?到目前为止,我还没有真正使用过它! 在本文中,我列出了 ...
- html5地理位置定位功能小析
Geolocationd 基本原理1.GPS GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
随机推荐
- socket 的通信过程
1.建立套接字 Linux在利用socket()系统调用建立新的套接字时,需要传递套接字的地址族标识符.套接字类型以及协议,其函数定义于net/socket.c中: asmlinkage long s ...
- 认识图片放大工具PhotoZoom的菜单栏
使用PhotoZoom能够对数码图片无损放大,备受设计师和业内人员的青睐,它的出现时一场技术的革新,新颖的技术,简单的界面,优化的算法,使得它可以对图片进行放大而没有锯齿,不会失真.本文为您一起来认识 ...
- iframe里面开启全屏allowfullscreen="true"
<iframe id="J_iframe" width="100%" height="100%" src="client-a ...
- 如何在CentOS 7中禁止IPv6(转载)
最近,我的一位朋友问我该如何禁止IPv6.在搜索了一番之后,我找到了下面的方案.下面就是在我的CentOS 7 迷你服务器禁止IPv6的方法. 你可以用两个方法做到这个. 方法 1 编辑文件/etc/ ...
- 路飞学城Python-Day142
第2节:UA身份伪装 反爬机制 User-Agent:请求载体的身份标识 通过不同的手段的当前的请求载体是不一样的,请求信息也是不一样的,常见的请求信息都是以键和值的形式存在 浏览器的开发者工具 Ne ...
- Spring MVC @PathVariable with dot (.) is getting truncated.
转自:http://stackoverflow.com/questions/3526523/spring-mvc-pathvariable-getting-truncated (这里只截取了问题,和笔 ...
- Nginx 的安装 与 启动
没有图文说明,是我看着视频一步一步照做的,安装过程了,也随便把步骤记录下来了. 我是新装 Linux 服务器,所以安装过程中出现的错误也是第一遇到,希望对你们有所帮助. 也是方便自己以后再次安装 ni ...
- springMVC入门截图
mvc在bs系统下的应用 ---------------------------------------------------- 在web.xml中配置前端控制器(系统提供的一个servlet类 ...
- 机房工程-在线式、后备式UPS选择(转载)
原文网址:http://oa.yesky.com/10/31061510all.shtml#p31061510 1后备式UPS还是在线式UPS? 作为机房设备的一项重要保护措施,UPS起着无可替代的作 ...
- 关于sql连接查询(内联、左联、右联、全联)
内连接(INNER JOIN)(典型的连接运算,使用像 = 或 <> 之类的比较运算符).包括相等连接和自然连接. 内连接使用比较运算符根据每个表共有的列的值匹配两个表中的 ...