4.2 如何编写 HTML5 网页

发布于 2024-08-18 00:24:15 字数 4181 浏览 0 评论 0 收藏 0

打开一个已有的网页。你可能会看到文件开头有这样几行代码：

删除上面的代码片段并将其替换成如下代码片段：

保存刚才的文档，现在你就有了自己的第一个W3C验证器（http://validator.w3.org/）认可的HTML5网页。

不要担心，本章尚未结束！刚才这个简单的练习只是为了展示HTML5的适应性。这只是已有代码的一次演进，而不是彻底革命。我们可以用它来增强我们已经掌握的标签代码。

到底该怎么做呢？首先，从新的HTML5文档类型声明开始：

如果你喜欢用小写字母，<！doctype html>也没问题。大小写没有区别。

HTML5 文档类型为什么这么简短？

HTML5的<！DOCTYPE html>文档类型如此简短，目的是以简洁的方式告诉浏览器用“标准模式”渲染页面。这种简洁高效的思想渗透在HTML5的方方面面。

在文档类型声明之后，开写HTML标签，设置language属性，然后开写部分：

你会说汉语吗？

根据W3C的定义（http://dev.w3.org/html5/spec/Overview.html#attr-lang），lang属性用来指定页面元素内容和元素属性值的主语言。如果你的网页不是英语内容，你最好设定正确的页面语言。例如对于中文网页，HTML标签应该是。完整的语言列表请见这个网址：http://www.iana.org/assignments/language-subtag-registry。

最后，设置一下字符编码。meta是一个单闭合元素所以不需要关闭标签：

字符编码通常都是UTF-8，除非你有特殊理由才可能使用其他编码。

4.2.1　HTML5的精简之道

我记得在学校的时候，对我们超级严厉（其实是对我们负责）的数学老师最后都会因教不下去而走人。整个班级里充斥着被解放的愉悦，没有人因此对“严厉先生”（用这个名字来保护那些无辜的老师）感到惋惜。新来的老师一般都很和蔼可亲，他静静地坐在讲台上，任由我们胡闹也不会训斥或者给我们找麻烦。他没有强制要求我们在学习时要保持安静，也不关心我们的作业题解得如何精巧——他只关心答案。如果HTML5是一位数学老师，那它一定是那个好好先生。接下来我将证明这个奇怪的比喻……

如果你很注意代码风格，一般都会使用小写字母，将属性值用引号括起来，而且会为脚本或样式文件链接声明type属性。例如，你会使用如下的代码来引入一个样式表：

HTML5中不需要这么仔细，这样写它一样乐于接受：

你看了一定感到怪异，我懂我也明白。代码没有闭合标签的斜线（/），属性值没有用引号括起来，没有type声明。但是，好说话的HTML5不在意这些。第二行示例代码和第一行一样有效。

这种宽松的语法可应用于整个文档，而不仅仅是链接CSS和JavaScript文件的元素。例如定义一个如下所示的div：

这是完全有效合法的HTML5代码。插入一个图片：

这样同样有效。没有结束标签的斜线，没有引号，大小写混杂。甚至，省略<head>元素，页面依然有效。XHTML 1.0对这种情况会怎么说呢？

4.2.2　HTML5标签的合理写法

虽然我们的目标是采纳移动优先的响应式设计和开发思想，但我承认无法完全按照我所认为的最佳方式来编写页面（注意，我所举的例子都遵循基于XML语法的XHTML 1.0规范）。使用这种精简的编码方式确实可以节省极其微量的数据，但老实说，如果有这个需要，我宁愿通过从网页中删去一张图片来达到同样的目的。

对我而言，那些看似多余的字符（用于闭合的斜线和属性值两边的引号）可以提高代码的可读性。因此在编写HTML5文档时我倾向于在老式编写风格（这样风格的代码在HTML5中依然有效，不过可能在验证器或类似检查工具中会产生一些警告）和HTML5的极简主义之间找到一个平衡。举例说明，以上节的CSS链接为例，我会这样写：

我闭合了标签，使用了引号，但删除了type属性。关键是找到一种你自己满意的风格。HTML5不会训斥你，也不会在课堂上批评你糟糕的标签代码，更不会因为你的代码没通过验证而罚你站墙角。

4.2.3　伟大的<a>标签万岁

HTML5中一个真正便利的精简之处，是我们可以在标签中嵌入多个元素。（哇哈哈！终于来了。）以前，如果你想让代码通过验证，必须将每个元素单独使用标签来包裹。例如以下代码片段：

现在，我们可以摆脱这个限制，像下面代码那样将一组元素包裹其中：

唯一需要记住的是——很明显：不能在一个标签中嵌套另一个标签，也不能在标签中嵌套表单。

4.2.4　HTML的废弃零件

除了script链接中的language属性，还有很多你可能已经习以为常的HTML标签或属性，在HTML5中都被认为是“废弃的”。HTML5中的废弃零件分为两类——暂保留和非保留的。暂保留零件仍可正常运行但验证工具会报警告。在实际开发中尽量避免使用，但用了也不会让天塌下来。非保留的零件在某些浏览器中仍可以渲染，但如果你使用了它们，别人会认为你是顽冥不化的，周末恐怕谁都不愿意跟你玩。

举个使用暂保留的废弃零件的例子，即给图片设置border属性。这种方法以前用来去掉超链接中图片的蓝色边框。示例代码如下：

现在则建议你使用CSS来完成同样的效果。

至于非保留的废弃零件都有哪些，多了去了。坦白地说，很多我从来都没用过（有些甚至见都没见过！）。你的情况可能和我差不多。如果你好奇，可以在后面这个网址找到完整的非保留废弃零件列表：http://dev.w3.org/html5/spec/Overview.html#non-conforming-features。比较常见的非保留废弃零件有strike、enter、font、acronym、frame和 frameset。

分享到QQ

分享到微博