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.但是详细介绍的不多,尤其 ...
随机推荐
- python第三方库 pip 豆瓣源
pip install xxx -i http://pypi.douban.com/simple/ xxx 为包名
- sql多表关联
inner join(等值连接) 只返回两个表中联结字段相等的行 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有 ...
- form-control给input添加这个class类后就会使用bootstrap自带的input框
<input type="text" class="form-control" id="name" placeholder=" ...
- JS 输名字随机弹出
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 第一章 JavaScript 简介
1.1 JavaScript 的简史 JavaScript 诞生于1995年 ,后由 欧洲计算机制造商协会( ECMA,European Computer Manufacturers Associ ...
- jquery bind 传参数
方法一. ? 1 2 3 4 function GetCode(event) { alert(event.data.foo); } ? 1 2 3 4 $(document).ready(functi ...
- Java IO 流总结
Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...
- Python 从入门到实践 - Web应用程序
一.创建项目 1.建立虚拟环境 python -m venv ll_env # 出现ll_env文件夹 2.激活虚拟环境 source ll_env/bin/activate # 要停止使用虚拟环境, ...
- bash脚本编程知识储备
bash脚本编程: 脚本程序:解释器解释执行: 首先得理清一些琐碎的知识点,我尽量把我所学的帮朋友一起梳理一下 编程环境:(我会在接下来的篇章,图文例子三结合的方式带大家一起学习) ...
- Advanced Fruits HDU杭电1503【LCS的保存】
Problem Description The company "21st Century Fruits" has specialized in creating new sort ...