首页 > 代码库 > 深入理解HTML5
深入理解HTML5
1.accesskey,tabindex
<a href="http://www.google.com/" accesskey="g">Google</a>
请使用 Alt + accessKey 来访问带有快捷键的元素。
<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br /> <a href="http://www.google.com/" tabindex="1">Google</a><br /> <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
按tab键一次访问
2.title
<p title="this is sheet">asdfasdf</p>
3.hidden
<p title="this is sheet" hidden>asdfasdf</p>
等同于 display:none,省去CSS遍历页面
js:element.hidden = true;
4.dir
<p dir="rtl">Write this text right-to-left!</p>
文档流从右向左排
5.manifest
离线缓存!!
6.base
<base href="" /> <a href="http://www.mamicode.com/b"></a>
a指向http://a/b
7. <script>元素async,defer异步加载
async - HTML属性 如我前面提到的,添加async属性非常简单: [html] view plaincopy <!-- 指定async,以及 onload 回调--> <script async src="http://www.mamicode.com/siteScript.js" onload="myInit()"></script> 事实上,如果你的JavaScript以及HTML结构设计的合理,那么90%的情况下你的Script元素可以使用异步加载。 defer - HTML属性 Safari 浏览器额外添加了defer属性 [html] view plaincopy <!-- 指定defer,效果和async差不多--> <script defer src="http://www.mamicode.com/siteScript.js" onload="myInit()"></script> async 与 defer 的差别 WebKit官方博客 很好地解释了async 与 defer 的不同 ------------------------------------ 正常情况下,当浏览器在解析HTML源文件时如果遇到外部的script,那么解析过程会暂停,并发送请求来下载script文件,只有script完全下载并执行后才会继续执行DOM解析。比如: <script src="http://www.mamicode.com/myBlockingScript.js"></script> 在下载过程中浏览器是被阻止做其他有用的工作的,包括 解析HTML,执行其他脚本,以及展示CSS布局。虽然Webkit预加载扫描程序可以探测性地在下载阶段进行多线程下载,但是某些页面仍然存在很大的网络延迟。 当前有很多技术来提升页面显示速度,但都需要额外的代码以及针对特定浏览器的技巧。现在,script可以通过添加async或者defer属性来让脚本不必同步执行,示例如下: [html] view plaincopy <script async src="http://www.mamicode.com/myAsyncScript.js" onload="myInit()"></script> <script defer src="http://www.mamicode.com/myDeferScript.js" onload="myInit()"></script> async 和 defer 标注的 script 都不会暂停HTML解析就立刻被下载,两者都支持onload事件回调来解决需要该脚本来执行的初始化。 两者的区别在于执行时的不同: async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。 与此相对,浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后,document的DOMContentLoaded 事件触发之前。
7.table 语义标签
<table> <thead> <tr></tr> </thead> <tfoot> <tr></tr> </tfoot> <tbody> <tr></tr> </tbody> </table>
8.<details>,<summary>
<details> <summary>sssssss1</summary> <p>sdfdsdfsdfsdfsdfsf</p> </details>
深入理解HTML5
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。