您的位置：首页 > Web前端 > HTML5

Notes On <The Definitive Guide to HTML5> - 01

2012-02-08 10:11 645 查看

Chapter 1: Putting HTML5 in Context

讨论历史，没啥好说的，这类大部头的教材都会从这里说起，显得有因有果。这里唯一我想转述的一部分就是：HTML5的出现迟过人们的期望，原因是参与制定HTML5的各个组织或者公司都想把自己的东西加进这个标准来从中获利，这导致各方的意见始终难以统一，所以这个标准的落实被一拖再拖。可是从另一个方面，眼下的HTML5又是个早生儿，因为大家都很需要结束眼下不同浏览器不同标准的混乱局面，再不推出就无法向江东父老们交代了，所以这些参与定制的巨头们只好硬着头皮先搞出这个版本来交功课。这样的出生环境导致HTML5的一个问题是，作为一个标准，它并未稳定，作者认为在未来3到5年内，它会经历比较大的变化然后趋于稳定。而眼下不同浏览器都开始陆陆续续向HTML5靠拢，可是因为标准不稳定，所以在这个转型过渡时期内，程序员将会遇到一些麻烦，作者的建议是及时去到官方网站更新HTML5的最新标准和各家浏览器的执行情况，除此他还提供了两个网站参考：

Modernizr

When Can I Use?

Mozilla Developer Network

Chapter 2: Getting Ready

古人曾经曰过：“工欲善其事必先利其器”，一般来说第二章都是介绍开发工具，看标题就知道。

Chapter 3: Getting Started with HTML

作者从最基本的HTML语法讲起，所以大部分跟HTML4没啥出入，后面介绍些新引入的属性：

contenteditable

contextmenu

dir

draggable

dropzone

hidden

lang

spellcheck

基本上从名字就看得出其含义和作用。注意，hidden同HTML4里的form里的hidden有些不同（至少我这么觉得），所以放了出来，还有就是spellcheck目前不是所有浏览器都支持，支持的浏览器中，做法也有所不同。

Chapter 4: Getting Started with CSS

基本上这里讲的也都是传统的CSS，即CSS2。

样式的优先级：

1. Inline styles (styles that are defined using the style global attribute on an element)
2. Embedded styles (styles that are defined in a style element)
3. External styles (styles that are imported using the link element)
4. User styles (styles that have been defined by the user)
5. Browser styles (the default styles applied by the browser)

CSS里的度量：

分为绝对度量和相对度量。前者包括in，cm，mm，pt和pc；后者包括em，ex，rem，px和%。另外还有几个尚未被广泛支持的：gd，vw，vh，vm，ch。

在新版的CSS标准里（应该就是CSS3吧），提供一个新特性，就是calc()函数，它可以用来计算度量，这样就可以用表达式来给样式属性赋值：

p {
background: grey;
color:white;
font-size: 20pt;
width: calc(80% - 20px);
}

其他的计量单位：角度有deg，grad，rad，turn；时间有s，ms。不过它们还没有被普及。

最后作者推荐一个工具：SelectorGadget。

Chapter 5: Getting Started with JavaScript

在这一章我并没见到与古老的Javascript的标准有出入的地方。

Chapter 6: HTML Elements in Context

这一章讲的主要是一些使用HTML5的思路。

Chapter 7: Creating HTML Documents

这章从宏观的角度介绍了一个HTML5页面的构成，然后罗列了每个部分相应的HTML5标签。有一点很有趣，就是用来告诉浏览器这是HTML5的声明指令是HTML4的一个简化：

什么意思呢？眼下的HTML4的页面的首行通常是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这行的意思就是告诉浏览器要按照哪个标准来分析这个HTML页面。而HTML5的相应的声明则是：

<!DOCTYPE HTML>

没有后面那串又臭又长的签名引用，就是HTML5了。

Chapter 8: Marking Up Text

这一章介绍的是可以用来呈现文本的HTML标签，作者完全就是在这里写词典，逐个逐个罗列。

a

b

em

i

s

strong

u

small

sub/sup

br

wbr(new in HTML5)

code, var, samp, kbd

abbr, dfn, q, cite

ruby, rt, rp

bdo, bdi

span

mark

ins, del

time

Chapter 9: Grouping Content

好像真的没什么好说的，作者就跟写词典一样罗列几个HTML里用来包装内容用的标签，它们的作用就像容器：

p

div

pre

blockquote

hr

ol/ul

figure

Chapter 10: Creating Sections

h1–h6

hgroup

section

header

footer

nav

article

aside

address

details

summary

这一章最后一个示例是展示details与summary标签的，正常来讲，用户将看到的效果应该是details标签的内容是折合起来的，除了summary内的内容作为标题显示出来以外。当按下summary标题前面的三角形图标后，其他内容会被展开。不过这个只有Chrome实现了，在Firefox里被显示的乱七八糟。

Chapter 11: Table Elements

首先，最基本的标签：table，tr，td。

如果想要给表格加上标题，可以用th标签，它不仅可以用来给每列增加标题，也可以给每行增加标题。

table下面，还可以出现的标签是tbody，thead和tfooter。在HTML5里面，tfooter的规则有所调整，它可以摆放在tbody的前面或者后面。

colspan与rowspan属性就不多说了。

td可以有header属性。

caption标签。

colgroup标签，使用这个标签可以将若干个column包在一起，这样做是为了方便设定样式，下面这个图可以用来演示相关规则。

第一个要注意的是：colgroup的specifity小于tr，td和th，即是说，后面的CSS属性的优先级更高。第二点是：对于非正常的表格元素，它被计算在它起始的那个表元，所以样式会跟这个表元。最后则是：colgroup会包含所有的表元。

colgroup下面可以包含col元素。

表格的边：border属性只能是1或者空字符。

Chapter 12: Working with Forms

action属性在不指定情况下是该文件自己。

autocomplete，打开自动完成的功能有助于提高用户体验，所以默认这个属性的值是“on”，另外，你也可以给form中的一个个别input元素的autocomplete指定值，这个设定会覆盖form的值。

关于label标签的for属性究竟能带来什么实际作用，作者并未给出解释。

autofocus

disable

fieldset->legend，这个元素的好处是，你可以通过给这个元素disable属性来禁用若干个输入控件。

button元素的内容可以是复杂的HTML。

在HTML5里，input和button可以不被包含在一个表单里，只需要给它们的form属性指定一个表单的id，即可以把它们与一个表单关联。

Chapter 13: Customizing the Input Elements

在新增加的属性里：

placeholder

list，可以用来给一个输入控件指定建议列表。

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name: <input placeholder="Your name" id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
City: <input placeholder="Where you live" id="city" name="city"/>
</label>
</p>
<p>
<label for="fave">
Fruit: <input list="fruitlist" id="fave" name="fave"/>
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
<option value="Apples" label="Lovely Apples"/>
<option value="Oranges">Refreshing Oranges</option>
<option value="Cherries"/>
</datalist>
</body>
</html>

disable的控件和没有被选中的radio，check的值不会被推送至server。

除了checkbox和radiobutton。HTML5里，input支持一些新的属性来指定他接收的数据类型，除了文本以外的，

color

date

datetime

datetime-local

email

month

number

range

tel

time

week

url

input也支持一种type是image，用来创建一个图片按钮。

Chapter 14: Other Form Elements and Input Validation

select，textarea

HTML5增加了ouput，keygen。还有就是验证功能，通过如下属性：

required

min,max

pattern

Chapter 15: Embedding Content

嵌入一张图片：

img

创建一个server端地图：

使用ismap属性给img标签，发送给server的URL后面将跟鼠标点击点的坐标位置。

创建一个client端地图：

map -> area @ shape @ coords

嵌入一个HTML文档：iframe，HTML5引入两个新属性：seamless和sandbox。

通过插件嵌入内容：

ambed和object；两者差不多，除了可以用于显示浏览器不直接支持的内容，也可以显示支持的内容，比如图。object下面可以再包含param标签。

HTML5有两个新的与数值有关的元素：progress与meter。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Notes On &lt;The Definitive Guide to HTML5&gt; - 01

Notes On <The Definitive Guide to HTML5> - 01