lEach element in a document is considered to be a rectangular box consisting of content area, padding, a border and margins
The Box Model in DOM(HTML)
回复
分类目录归档：HTML5
Core Concepts of Responsive Web Design
Three key technical features are the heart of responsive Web design:
- Media queries and media query listeners
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
Truly responsive Web design requires all three features to be implemented.
The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.
While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.
HTML5 Overview 11/25
Why HTML5?
•HTML5 enables mobile and desktop Web site designers to deliver the advantages of client-side and server-side development to their users simultaneously.
•API development and workability in the browsers will take a leap forward.
What does HTML5 mean to Web designers?
•new tags for semantic layout
•improved microformatting
•new tags for incorporating rich media
•new tags for APIs, applications
doctype
•<!DOCTYPE HTML>
HTML5 – basic document structure
<DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>HTML5</title>
</head>
<body>
</body>
</html>
HTML5 程序接口,元素变化,异常处理
程序接口
除了原先的DOM接口，HTML5增加了更多API,如：
1． 用于即时2D绘图的Canvas标签
2． 定时媒体回放
3． 离线数据库存储
4． 文档编辑
5． 拖拽控制
6． 浏览历史管理
元素变化
新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput
元素的新属性：日期和时间，email, url。
新的通用属性：ping, charset, async
全域属性：id, tabindex, repeat。
移除元素：center, font, strike。
异常处理
HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比，HTML 5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。
HTML5 重要标记
<video>标记
定义和用法：
<video> 标签定义视频，比如电影片段或其他视频流。
各系统与浏览器支持的视频格式
操作系统
浏览器
支持度（ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件。
mp4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件。）
备注
Windows
Internet Explorer 6
不支持
如果安装了Google Chrome Frame，支持HTML5
Internet Explorer
7
不支持
如果安装了Google Chrome Frame，支持HTML5
Internet Explorer
8
不支持
如果安装了Google Chrome Frame，支持HTML5
Internet Explorer
9
支持(mp4,webm*)
*如果安装了VP8解码器
Firefox < 3.5
不支持
Firefox 3.5, 3.6
支持（ogg）
Firefox 4
支持（webm,ogg）
Firefox 5
支持（webm,ogg）
Firefox 6
支持（webm,ogg）
Chrome < 3
不支持
Chrome 3, 4, 5
支持（mp4,ogg）
Chrome 6
支持（mp4,webm,ogg）
Chrome>6
支持（mp4,webm,ogg）
Opera < 10.5
不支持
Opera 10.5
支持（ogg）
Opera 10.6
支持（webm,ogg）
Opera 11
支持（webm,ogg）
Safari 3.1, 4, 5
支持（mp4）
Mac
Safari < 3.1
不支持
Safari 3.1, 4, 5
支持（mp4）
Firefox < 3.5
不支持
Firefox 3.5, 3.6
支持（ogg）
Firefox 4
支持（webm,ogg）
Firefox 5
支持（webm,ogg）
Chrome < 3
不支持
Chrome 3, 4, 5
支持（mp4,ogg）
Chrome 6
支持（mp4,webm,ogg）
Opera < 10.5
不支持
Opera 10.5
支持（ogg）
Opera 10.6
支持（webm,ogg）
Opera 11
支持（webm,ogg）
Linux
Firefox < 3.5
不支持
Firefox 3.5, 3.6
支持（ogg）
Firefox 4
支持（webm,ogg）
Firefox 5
支持（webm,ogg）
Chrome < 3
不支持
Chrome 3, 4, 5
支持（mp4,ogg）
Chrom
支持（mp4,webm,ogg）
Opera < 10.5
不支持
Opera 10.5
支持（ogg）
Opera 10.6
支持（webm,ogg）
Opera 11
支持（webm,ogg）
Konqueror < 4.4
不支持
Konqueror 4.4+
支持（ogg）
iOS
(iPhone,iOS 3,4)
Safari
支持（mp4）
早期版本（iOS 1,2）不支持HTML5视频
(iPad, iOS 3.2)
Safari
支持（mp4）
Android
Android 2.1, 2.2
支持（mp4）
Android 2.3
支持（mp4）
<audio> 标记
定义和用法
<audio> 标签定义声音，比如音乐或其他音频流。
实例：
一段简单的HTML 5 音频
<audio src=”someaudio.wav”>
您的浏览器不支持 audio 标签。
</audio>
音频格式：
当前，audio 元素支持三种音频格式：
IE 8
Firefox 3.5
Opera 10.5
Chrome 3.0
Safari 3.0
Ogg Vorbis
√
√
√
MP4
√
√
Wav
√
√
√
<canvas> 标记
定义和用法：
<canvas> 标签定义图形，比如图表和其他图像。
HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实例：
通过 canvas 元素来显示一个红色的矩形：
<canvas id=”myCanvas”></canvas>
<script type=”text/javascript”>
var canvas=document.getElementById(‘myCanvas’);
var ctx=canvas.getContext(’2d’);
ctx.fillStyle=’#FF0000′;
ctx.fillRect(0,0,80,100);
</script>
HTML5 改进特性
HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。
1.取消了一些过时的HTML4标记
其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。
HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。
2.将内容和展示分离
b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。
3.一些全新的表单输入对象
包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。
4.全新的，更合理的Tag
多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。
5.本地数据库
这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。
6.Canvas 对象
将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。
7.浏览器中的真正程序
将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。