《HTML5开发手册》学习笔记（一）

1. 简单的HTML5初始页面

<!DOCTYPE html>
<!--  文档类型声明，告诉浏览器如何处理文档。 -->
<!--  若不放在第一行或是在其前面添加其他代码，浏览器将进入怪异模式。 -->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <!--  字符集声明，告诉浏览器如何解释这个文件，比HTML4中的更简洁 -->
    <!--  HTML4版本声明如下  -->
    <!--<meta http-equiv="content-type" content="text/html; charset=utf-8" />-->
    <title>page title</title>
    <script src="my-javascript-file.js"></script>
    <link rel="stylesheet" href="my-css-file.css" />
    <!--  HTML5版本中，link标签和script标签无需再声明type属性  -->
</head>

<body>
<!--  new HTML5 elements are going to go here  -->
</body>
</html>

2. 使用figure和figcaption插入图片和图注

在figure中添加图片，注意添加图片的alt属性。一个figure中可以包含多张图片，但是只能包含一个figcaption。

3. 使用details元素创建可伸缩控件

利用details元素能够在无需任何JavaScript和/或CSS的情况下，创建交互式展开/收缩的开关效果，其中还可以使用summary元素创建内容的概述信息。
details有一个可选属性：open。若真则默认展开，summary元素用于控制内容的展开与收缩。

<article>
    <h1>A massive document with lots of juicy content</h1>
    <details>
        <summary>Table of contents</summary>
        <nav>
            <ul>
                <li><a href=#chapter1>Chapter 1</a></li>
                <li><a href=#chapter2>Chapter 2</a></li>
            </ul>
        </nav>
    </details>
    <section>
        <h1 id="chapter1">Chapter 1</h1>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </section>
    <section>
        <h1 id="chapter2">Chapter 2</h1>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </section>
</article>

4. 使用address元素提供通信信息

规范中address为“分节元素”，它并非是显示通用邮寄地址的通用方式（这是错误用法）。HTML5中的准确定义为：显示与它最近的article或body元素的通信信息。这表明address元素用于显示当前article作者或整个页面的通信信息。

<!--  Wrong Use  -->
<address>
    Tom Leadbetter
    1 My Street
    United Kingdom
</address>
<!--  Correct Use  -->
<footer>
    This site is owned by
    <address>
        <a href="me.htm">Tom Leadbetter</a> and
        <a href=mailto:[email protected]>Chunk Hudson</a>
    </address>
</footer>

5. 在HTML5中使用WAI-ARIA

Web Accessibility Initiatives Accessible Rich Internet Applications —— WAI-ARIA，是一个旨在提高Web应用和Web页面可访问性的草稿规范，它允许使开发者与内容作者开发能够被辅助技术识别和使用的富Internet应用与内容（什么鬼没读懂）。这里主要说一下ARIA的Landmark Roles（地标角色），它是页面中用作导航地标的区域。常用的角色：

role=”article”
role=”baner”
role=”complementary”
role=”contentinfo”
role=”form”
role=”heading”
role=”main”
role=”navigation”
role=”search”

使用了ARIA角色的基本网站布局如下图所示：
使用了ARIA角色的基本网站布局
在代码中使用逻辑结构和ARIA角色，可使辅助技术轻松导航到页面各个区域。同时还可以使用CSS“钩子”访问指定的元素：

/*  to style all headers  */
header {background: red;  border: 5px dotted black;}
/*  to style our main header, which likely has the site logo  */
header[role=banner] {background: black; border: 5px solid red;}

6. HTML5特性检查

在浏览器中进行简单的检查以确定浏览器对Geolocation API和Canvas的支持情况。

<script>
    if (navigator.geolocation) {
        alert('Geolocation is supported.');
    } else {
        alert('Geolocation is not supported.')
    }
         }
    /**
     *  任何canvas对象肯定默认提供了getContext方法，
     *  因此，如果不存在getContext方法，则该元素不存在或浏览器不支持
     */   
    if (document.createElement('canvas').getContext) {
        alert('Canvas is supported.')
    } else {
        alert('Canvas is not supported.')
    }
</script>

7. Polyfilling

为了使原本不支持的浏览器能够提供某个HTML5功能，我们通常需要使用某个第三方库为各种浏览器实现相同功能。因此我们把这种为各种浏览器提供统一特性支持的代码或库称作polyfill或polyfiller。注意，为实现跨浏览器浏览体验一致的有效方法是使用各种polyfill、技巧和第三方库。

8. 使用CSS3媒介查询（Media Query）建立响应式设计

       使用link标签来进行媒介查询功能会需要很多个不同的媒体查询语句，精确程度无止境，更重要的是，使用下面例子中的“简单媒介查询实例”意味着head标记中会产生很多的HTTP请求。
       在CSS中使用媒介查询，所有的媒介查询都是同一个CSS的一部分，可以在写完默认设计后添加媒介查询代码，并且在CSS中修改媒介查询比在所有页面中修改HTML要简单得多。使用and语法可以组合不同的查询，值得注意的是，max-device-with是设备的屏幕尺寸，而max-width只是可视区域的宽度。
       虽然我们可以为不同设备、不同屏幕尺寸创建不同的样式，但我们应该考虑是否随时需要使用媒介查询，通常媒介查询需要根据屏幕尺寸显示或隐藏某些内容。当目标设备为手机时，可以强制命令浏览器将可视宽度（视口）作为设备宽度：<meta name="viewport" content="width=device-width; initial-scale=1.0; "/>

<!--  简单媒介查询实例  -->
<link rel="stylesheet" media="screen and {max-device-width: 480px}" href="smartphone.css" />
<link rel="stylesheet" media="screen and {min-width:480px}" href="screen.css" />

/*  CSS文件中媒介查询实例  */
body {background: black; color: #fff; font: normal 62.5%/1.5 Tahoma, Verdana, sans-serif;  }
h1 { font-size: 2em; }
/*  styles for smartphones and very small screen resolution  */
@media only screen and (min-width: 320px) and (max-width: 400px){
    body { background: blue; }
}
/*  styles for screen resolutions bigger than smartphones but smaller or equal to 1024px  */
@media only screen and (min-width: 401px) and (max-width: 1024px){
    body { background: red; }
}
/*  styles for screen resolutions for a very wide resolution  */
@media only screen and (min-width: 2000px){
    body { background:green; }
}

以上是我看完前5章把自己不熟悉的地方拷下来或者稍作修改留下来的笔记，留做后面复习的时候看。第6-8章涉及到Canvas，视频和音频，我觉得应该在具体使用的时候回头看，现在看了之后也会忘记…慢慢加油吧~