深入理解HTML5

标签：google   快捷键   html5   asdfasdf   display   

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" onload="myInit()"></script>  
事实上，如果你的JavaScript以及HTML结构设计的合理，那么90%的情况下你的Script元素可以使用异步加载。

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

标签：google   快捷键   html5   asdfasdf   display   

原文地址：http://bysowhat.blog.51cto.com/4478944/1600361