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
角色,可使辅助技术轻松导航到页面各个区域。同时还可以使用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,视频和音频,我觉得应该在具体使用的时候回头看,现在看了之后也会忘记…慢慢加油吧~