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>
最新文章
- Redux原理(一):Store实现分析
- 倍数提高工作效率的 Android Studio 奇技
- Linux环境PHP5.5以上连接SqlServer2008【全网最经典无错版】
- Linux命令--top使用技巧
- Nginx基础知识————生成自签名ca 证书 使nginx 支持https
- Darwin Streaming Server 安裝操作備忘
- 关于hibernate映射过程中的笔记
- jsp应用bootstrap表格应用实例
- jquery中Live方法不可用,Jquery中Live方法失效
- TreeView绑定无限层级关系类
- (史上最全的ios源码汇总)
- Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment variable to “*****”
- Web服务器(Apache)与Servlet容器(Tomcat)
- HighCharts之2D带Label的折线图
- 设计模式 -->; (17)状态模式
- linux scp 命令
- bzoj4476 [Jsoi2015]送礼物
- spring boot项目配置跨域
- [模板] Manacher(马拉车)算法
- MATLAB数值积分法