深入理解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="b"></a>

a指向http://a/b

7. <script>元素async,defer异步加载

async - HTML属性
如我前面提到的,添加async属性非常简单:

[html] view plaincopy
<!-- 指定async,以及 onload 回调-->  
<script async src="siteScript.js" ></script>  
事实上,如果你的JavaScript以及HTML结构设计的合理,那么90%的情况下你的Script元素可以使用异步加载。

defer - HTML属性
Safari 浏览器额外添加了defer属性
[html] view plaincopy
<!-- 指定defer,效果和async差不多-->  
<script defer src="siteScript.js" ></script>  

async 与 defer 的差别
WebKit官方博客 很好地解释了async 与 defer 的不同

------------------------------------
正常情况下,当浏览器在解析HTML源文件时如果遇到外部的script,那么解析过程会暂停,并发送请求来下载script文件,只有script完全下载并执行后才会继续执行DOM解析。比如:
<script src="myBlockingScript.js"></script>
在下载过程中浏览器是被阻止做其他有用的工作的,包括 解析HTML,执行其他脚本,以及展示CSS布局。虽然Webkit预加载扫描程序可以探测性地在下载阶段进行多线程下载,但是某些页面仍然存在很大的网络延迟。
当前有很多技术来提升页面显示速度,但都需要额外的代码以及针对特定浏览器的技巧。现在,script可以通过添加async或者defer属性来让脚本不必同步执行,示例如下:

[html] view plaincopy
<script async src="myAsyncScript.js" ></script>  
<script defer src="myDeferScript.js" ></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>

时间: 2024-11-05 19:38:44

深入理解HTML5的相关文章

深入理解html5系列-文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢? 本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些

深入理解html5标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢? 本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些

深入理解html5标签含义

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢? 本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些

理解HTML5中Range对象

1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在HTML5中,一个Range对象代表页面上的一段连续区域.可以通过如下语句创建一个空的Range对象.如下代码: var range = document.createRange(); 什么是Selection对象? 在HTML5中,每一个浏览器窗口都有一个Selection对象,代表用户鼠标在页面中

深入理解HTML5 2

1.<map>图像映射 点击图片不同区域 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap">   <area shape="circle" coords=&quo

Web程序员们,你准备好迎接HTML5了吗?

HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash.QuickTime.Silverlight等插件,也简化了原来需要大量JS才能达到的效果.虽然HTML5还在讨论过程中,但是其优越的特性已经得到了大家的认可,各大浏览器厂商,一些知名的内容发布网站也都是积极地推动, 尤其是即将发布的IE9会完全支持HTML5.作为Web开发人员的我们,需要做的是:如何把HTML5转化为各种Web应用,如何做到现有的Web应用过渡到HTML

html5全局属性

全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx">,但这是种非常不规范的方式. 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性.html5中开发人员可自定义任何想要的属性,只要加上前缀data-,通过这种方式避免与未来的html版本冲突. <form data-type="comment"

HTML5实战与剖析之历史管理(history对象)

HTML5新添加了对历史的管理,更新了history对象让管理历史状态更加方便了.在现代Web应用中,用户可以通过"前进"和"后退"按钮进行历史页面的切换.这让一些不在新页面中打开的新页面前进后退自如,提高了用户体验. 通过haschange事件,可以知道URL的参数什么时候发生了变化,也就是什么时候该有所反应.通过状态管理的API,能够在不加载新页面的情况下改变浏览器的URL.所以需要使用history.pushState()方法.history.pushStat

HTML5学习参考资料整理

给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料,让我们的开发者和HTML5的爱好者受益,利人利己的事,童鞋们多多益善啊! 1. http://www.w3school.com.cn/html5/index.asp 介绍:W3C HTML5开发者指南,学习HTML5的各种标签,查询参考手册. W3C HTML 5 权威教程 2. http://h