《HTML5开发手册》学习笔记(一)
来源:互联网 发布:淘宝能不能花钱解封 编辑:程序博客网 时间:2024/06/06 20:37
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:chunk@html5developerscookbook.com>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,视频和音频,我觉得应该在具体使用的时候回头看,现在看了之后也会忘记…慢慢加油吧~
- 《HTML5开发手册》学习笔记(一)
- 阿里巴巴Java开发手册学习笔记(一)
- HTML5学习笔记(一)
- HTML5学习笔记(一)
- Html5学习笔记(一)
- HTML5学习笔记(一)
- html5学习笔记(一)
- HTML5学习笔记(一)
- HTML5学习笔记(一)
- html5学习笔记(一)
- html5学习笔记一
- HTML5学习笔记一
- cocos2d-html5学习笔记(一)
- HTML5+CSS3学习笔记(一) 概述
- [持续更新]HTML5学习笔记(一)
- HTML5与CSS3学习笔记(一)
- HTML5基础学习笔记(一)
- 【HTML5学习】HTML5学习整理笔记(一)
- Android-25种开源炫酷动画框架
- 超实用的Chrome 控制台实用指南
- 动态规划,计数DP,模拟(Persistent Link/cut Tree,HDU 5401)
- item点击波纹动画
- WWDC 2016 Session笔记
- 《HTML5开发手册》学习笔记(一)
- chap7内存分配
- Android APK反编译就这么简单 详解(附图)
- HDU2578 Dating with girls(1)(二分)
- RxJava2和Retrofit封装的RetrofitClient2终于来了!
- 删除一个无头单链表的非尾节点【每日一题】
- [BZOJ]4810 由乃的玉米田 莫队+bitset
- WWDC 2016 Session笔记
- 解决报错:;Syntax error on token(s), misplaced construct(s)