2.1 HTML 5的语法结构
相信HTML对于大多数读者来说应该已经不是什么陌生的新技术了。但我们仍将在这一节中简要介绍HTML网页设计的基本方法和技巧,并在此过程中逐步介绍HTML 5与过去传统HTML在语法结构和设计思想上的不同、HTML 5的优点和特点,以及HTML 5对桌面Web和移动Web在设计理念上带来的变化。
在第1章中,我们介绍了HTML 5在逐步标准化的过程中,WHAT工作组,以及经由W3C参与组建的HTML工作组起到了关键的作用。但是,WHAT工作组与W3C在设计理念和技术标准化方面的看法有很多不同,从2011年起,HTML 5技术标准逐渐出现了一些分支。其中最主要的表现是W3C和WHAT工作组分别发布了HTML 5技术标准的草稿。W3C发布的草稿以WHAT工作组的最新更新为前提,并补充了一部分W3C认为必须马上标准化的内容。而WHAT工作组坚信HTML 5技术的发展是一个漫长的渐进过程,他们更愿意维护一个逐渐发展的版本,而不是一个可以马上实现标准化的版本。分歧使我们可以同时看到两个非常类似、但在某些技术细节上存在着一些显著差异的HTML 5技术规范草稿。
HTML 5的设计与一些正在使用的其他技术标准在个别内容上有冲突。细心的读者在阅读技术规范草稿原文的时候,可能会注意到这些差别。本书将介绍已经被广为接受的HTML 5语法,对于HTML 5在技术理论的层面上不做探讨。
2.1.1 HTML 5网页的基本结构
HTML网页从源代码上看,是由一组标签经过一定的嵌套规则而组成的树状结构代码。HTML的标签嵌套不需要像XML那样严格,也就是说,有一些HTML元素并不要求必须使用结束标签。在HTML 5中,某些元素的结束标签在特定情况下是可有可无的。有关这些元素标签的特殊语法规则,我们将在本章的2.2.7小节中介绍。
HTML 5的语法与传统的HTML相似,同时带有XHTML的特征。作为一种标记语言,HTML 5保留了语法简洁的特点,同时,稍微严格的语法规则使HTML 5更容易以DOM方式处理。代码2.1展示了一个含有基本组成部分的HTML 5网页样本。
代码2.1 一个含有最基本结构的HTML 5样本文件
你好, HTML5!
代码2.1与平常所见的HTML文档(比如HTML 4.0格式的网页文档)非常相似。它含有HTML文档的最外层的标签。标签是HTML网页文档的根元素,网页开发人员可以在根元素中添加lang属性,用于说明当前网页所用的语言,比如表示当前网页中的内容使用法语。lang属性值为由两个字母组成的国际标准语言代码 。添加了语言描述的网页更易于在线翻译工具准确地识别和翻译。表2.1列举了常用的语言代码。
表2.1 常用的ISO 639-1语言代码
语 言 标准代码
阿拉伯语 ar
中文 zh
简体中文 zh-Hans
繁体中文 zh-Hant
英语 en
法语 fr
德语 de
日语 ja
韩语 ko
俄语 ru
西班牙语 es
标签的内容含有由和分别标记的两部分。标签及其和两大组成部分组成了HTML文档的基本结构。网页的部分的作用在于说明网页的标题、标题图标、附加的脚本语言程序、网页样式,以及有关网页其他属性的描述等。这部分内容除了网页的标题和图标以外,还有其他内容,能够影响到网页的显示方式,例如附加的样式定义;另外还有一些能够影响到网页的动作行为,例如网页自动跳转等,但本身并不直接显示在网页上。网页的部分包含了网页在浏览器中显示的全部内容,这也是本章将要着重介绍的部分。
很多开发人员在网站的开发过程中已经通过DOCTYPE使用了文档类型声明,尤其是CSS的某些功能,比如z-index,要求网页必须含有文档类型声明,才能够在IE浏览器中正确显示。DOCTYPE声明没有结束标签,它必须出现在网页文档的第一行,即在标签之前,用于向浏览器声明当前网页文档所采用的HTML的语法版本。DOCTYPE声明源自于XML中引用DTD验证文档有效性的方法。
在过去的HTML版本中,我们能够看到下面一些文档类型声明:
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
在HTML 5中,DOCTYPE声明不再引用DTD,只需要简单的即可。但是在HTML 5网页中,DOCTYPE声明不能省略,否则浏览器不会使用HTML 5的语法,而是会自动启用早期版本的HTML语法处理程序来解析当前的HTML 5网页。
HTML是大小写无关的标记语言。包括DOCTYPE声明在内,浏览器不会区分DOCTYPE或者doctype、或者。在HTML 5网页中,混合使用大小写是允许的。从编写HTML 5代码的惯例角度来看,DOCTYPE通常用大写字母来声明,而HTML标签则用小写表示。代码2.1中的源代码编写格式就遵循了这个惯例。
2.1.2 成员元素
网页部分用于定义样式规则、引用样式表和脚本语言,或者用于网页本身属性等相关信息的描述等。
1. 网页的标题
网页标题是显示在浏览器标题栏中的若干主题说明文字,如图2.1所示为清华大学主页上的网页标题。
图2.1 浏览器标题栏中的标题和图标(来源:清华大学网站)
从原则上说,一个HTML 5文档(不是一个Web页面,因为一个HTML 5文档可以表现为多个网页。一个文档也能是一个字符流,而不是一个文件)的部分必须包含一个,并且只能包含一个
代码2.2演示了通过
代码2.2 通过
2. 网页的图标
在图2.1中,我们在浏览器的标题栏上除了看到网页标题以外,在标题文字的旁边,还很容易找到网页的图标。网页的图标是通过元素实现的。
元素用于链接当前HTML文档和其他资源。元素必须包含rel属性或者itemprop属性中的一个,但是,不允许同时使用这两个属性。这两个属性中的rel是个常用属性,用于说明所链接的资源与当前文档的关系。当使用rel属性时,元素只允许在的范围内使用,而当使用itemprop属性时,元素既可以包含在网页的部分,也可以包含在网页的部分。当我们为一个网页链接网页图标时,应该按照代码2.3所演示的方法,指定rel属性的值为“icon”,并且通过href属性指向实际所链接的图标资源文件,这样就能得到如图2.2所示的效果。
代码2.3 通过元素引用网页图标
注意: 在Chrome等浏览器中测试代码2.3时,需要Web服务器的支持才能正确显示网页图标,而在Firefox浏览器中,则不需要Web服务器的支持。
图2.2 网页的标题与图标
在不同的使用场合中,网页图标也被称为快捷图标、书签图标,或者标签页图标等。图标文件一般采用16×16像素的ICO文件,也可以采用GIF,或者PNG等图片格式。另外,在元素中,可以通过type属性声明所链接的图标文件的MIME类型。
一些读者可能会注意到一些网页有类似的用法,而shortcut并不是HTML 5中rel属性有效的属性值。实际上,rel=“shortcut icon”的用法在HTML 5中是允许的,但这仅仅是为了满足向过去的HTML版本兼容的要求,如果在rel属性中使用shortcut属性值,另一个属性值icon必须紧随其后,而且两个属性值之间必须使用一个空格来分隔。
3. 网页的样式
层叠式样式表CSS在Web设计中起到了网站风格统一、用户界面美观、优化用户体验等作用。定义和引用样式规则有3种常见的方式:在特定的元素上通过定义style属性值的方法为相应的元素添加样式规则、通过
你好, HTML5!
代码2.5 通过元素引用样式表文件(此处省略样式表文件)
你好, HTML5!
图2.3 在部分通过样式定义或引用外部样式表来改变网页内容的表现形式
综合代码2.3和2.5,两者都用到了元素来链接外部资源文件,其中的不同点是在rel属性中所描述的外部资源类型。当使用rel=“stylesheet”链接一个样式表文件时,即使省略MIME类型描述type=“text/css”,浏览器仍然能够正确解析样式表文件,但如果MIME类型描述错误,即使链接的URL正确,浏览器仍不能以正确的MIME类型来处理样式表文件。也就是说,从HTML 5技术标准的角度看,一旦MIME类型描述错误,样式表文件就会失效。在实际应用当中,某些浏览器会优先判断rel属性中的资源类型,即使MIME类型描述不匹配,浏览器仍然能够正确处理样式表文件。需要注意的是,这里的正确处理,是依赖于浏览器容错性能的,而不是HTML 5技术规范所要求的。
4. 脚本程序
当
JavaScript是Web开发中最常用的脚本语言,它的MIME类型用text/javascript来表示。
……