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

【HTML5+CSS3开发实战】第2章 初识HTML5

2015-07-14 09:39 411 查看

2.2 关于
<head>

2.2.1 更完美的DOCTYPE

在XHTML1 Strict或HTML4 Strict中，DOCTYPE是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">


其实无须让DOCTYPE如此复杂难记，因为DOCTYPE最初设计的作用就是为了告诉浏览器，以标准模式而不是以怪异模式呈现页面。所以在编写HTML5规范时，DOCTYPE只要这么写：

<!DOCTYPE html>


2.2.2 在HTML5中声明语言

“对于大量的应用程序而言，从语言敏感的搜索到运用语言专用的显示属性，指定内容的语言都是有用的。在某些情况下，用于语言信息的潜在应用程序仍需进一步实现，而在另一些情况下，如发声浏览器的语言检测，指定内容的语言目前还是必需的。”——W3C

为HTML文档指定语言最容易的方式是对HTML页面的根元素添加一个lang属性。HTML页面的根元素始终是
<html>
，因此为了指定语言，可以采用如下方法。

<html lang="en">


在这个示例中，lang的属性的值是en，意指该文档是英语写成的。但是如果文档中含有非以lang指定的语言写成的元素，语言属性也可以内联使用。以下示例包含了一个内联的
<span>
元素，它含有一个值为fr的lang属性：

<p>Miss Baker,on entering the capsule, declared to her fellow astronaut Able:<span> lang="fr">"Bon chance!"</span></p>


基本代码：de（德语）、it（意大利语）、nl（荷兰语）、es（西班牙语）、ru（俄语）、zh（中文）、en-US（美式英语）、en-GB（英式英语）。

2.2.3 字符编码

开篇代码里，Miss Baker页面中对于指定字符编码是这样写的：

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />


而在HTML5中，指定页面的字符编码就简单多了：

<meta charset="UTF-8">


事实上你并不需要了解字符编码的细节，但是要知道，使用UTF-8是最安全的，这是一套几乎含有所有语言全部字符的通用字符集。

2.2.4 简单易记

2.3 ”Hello World!“旅程

2.3.1 XHTML 1.0 风格的”Hello World!“

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Hello World! XHTML 1 Strict</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>


2.3.2 HTML4风格的”Hello World!“

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> //现在已经不再需要这一属性了，xmlns属性用于告诉浏览器，该页面上的所有元素都来自与XHTML命名空间。在HTML5中，元素总是位于这个命名空间，因此不再需要作明确声明。
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title>Hello World! XHTML 1 Strict</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>


2.3.3 HTML5”松散“风格的”Hello World!“

<!DOCTYPE html>
<meta cahrset=UTF-8>
<title>Hello World!</title>
<p>Hello World!


可以使用你所选择的语法来标记HTML5页面，而且其他做法完全由你决定。但是，我们建议采用较为严格的XHTML语法。

2.3.4 HTML5”严格“风格的”Hello World!“

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>


2.4 让HTML5得到跨浏览器支持

2.4.1 浏览器如何处理未知元素

一般浏览器都会温和地处理它们不认识的元素和属性，把这些元素处理成匿名的内联元素，并允许设定它们的样式。

例如
<time>
新元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styling Unknown Elements - 1</title>
<style>
time
{
font-style:italic;
}
</style>
</head>
<body>
<p>Miss Baker made her historic journey on <time datetime="1959-05-28">May 28,1959</time></p>
</body>
</html>


如果要继续
<html>
后面的内容，这一问题有一种解决方案：我们可以用JavaScript为IE明确声明这一元素。其做法是创建一个新的DOM元素（与目标元素同名）以欺骗IE，使其能够”看到“这一新的元素及其运用的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styling Unknown Elements - 2</title>
<script>document.createElement('time');</script>//添加语句
<style>
time
{
font-style:italic;
}
</style>
</head>
<body>
<p>Miss Baker made her historic journey on <time datetime="1959-05-28">May 28,1959</time></p>
</body>
</html>


通过这一简单的JavaScript片段，可以使IE能够看到
<time>
元素，并允许插入斜体样式。显然，这只能解决单个元素问题，但是如下示例演示如何解决HTML引入的所有新元素的问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styling Unknown Elements - 3</title>
<script>(function(){if(!/*@cc_on!@*/0)return;var e="abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}}))()
</script>
<style>
time
{
font-style:italic;
}
</style>
</head>
<body>
<p>Miss Baker made her historic journey on <time datetime="1959-05-28">May 28,1959</time></p>
</body>
</html>


显然，这需要在每个页面中都包含大量JavaScript代码，尽管可以使用一个晓得正则表达式，对你所创建的HTML5页面做一点查找和替换工作，但是有一个简单得多的方案是现成的——shiv。

2.4.2 shiv

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styling Unknown Elements - 4</title>
<!--[if It IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
time
{
font-style:italic;
}
</style>
</head>
<body>
<p>Miss Baker made her historic journey on <time datetime="1959-05-28">May 28,1959</time></p>
</body>
</html>


在页面中加入这段脚本，它会处理以上所讨论的所有问题，甚至还能照顾到一些其他方面。（国内对于Google Code可能访问不了，W3CSchool推荐使用百度JS）

强调两点，首先，这一
<shiv>
需要
<head>
元素中，以使IE在呈现之前能识别这些HTML5新元素。其次，shiv依赖于启用JavaScript。如果用户禁用JavaScript的方式浏览Web，那么便需要考虑替代方案。

2.4.3 IE打印保护器

链接到Google Code上的shiv除了为你提供最新版的shiv，还包含了IE Print Protector，它解决了IE在试图打印HTML5页面时具有的一个问题。IE Print Protector的工作方式是，在打印时所支持的后备元素（如
<div>
和
<span>
）临时替换HTML5元素，并根据现有样式为这些元素创建一个特殊的样式表。

2.4.4 声明块级元素

HTML5引入大量新的块级元素：如果这些元素未包含在浏览器的已知元素查找表中，那么它们将被视为内联元素。因此我们需要添加一个CSS规则，将它们声明为块级元素。

<style>
article,aside,details,figcaption,figute,footer,header,hgroup,menu,nav,section{
display: block;
}
</style>


这一简单规则指示浏览器将这些新的HTML5元素视为块级元素，并相应地显示它们。

2.5 HTML5样板页面

我们已经讨论过了shiv的重要性、将HTML5元素声明为块级元素的重要性、新的HTML5 DOCTYPE、使用简化的meta charset属性进行字符编码，我们将它们综合在一起，形成一个简单的HTML5样板页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styling Unknown Elements - 4</title>
<!--[if It IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article,aside,details,figcaption,figure,fooer,header,hgroup,menu,nav,section
{
display:block;
}
</style>
</head>
<body>
<p>Insert your content here.</p>
</body>
</html>


2.5.1 不再有type属性

在声明JavaScript或CSS时，已不再需要包含type属性。这是因为在样式设置和脚本语言方面只有CSS和JavaScript，已经没有其他语言可用并要进行区分。

2.5.2 填充材料与替换

2.6 验证

对页面进行验证通常是找出问题的第一阶段。使用验证器有助于找出简单且易忽视的错误，并了解标记运行的更多情况。

2.6.1 HTML5验证器

2.6.2 HTML Lint

2.7 重新讨论Miss Baker页面

2.8 小结

2.9 作业

参照本章示例创建一个”Hello World!“Web页面

验证它

重新考察Gordo页面，参照本章示例将其修改为HTML5页面
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航