《HTML 5与CSS 3 权威指南(第3版·上册)》——2.1 语法的改变

简介:

本节书摘来自华章出版社《HTML 5与CSS 3 权威指南(第3版·上册)》一 书中的第2章,第2.1节,作者:陆凌牛,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.1 语法的改变

2.1.1 HTML 5的语法变化

与HTML 4相比,HTML 5在语法上发生了很大的变化。可能很多人会因为“之前的HTML已经相当普及”,“如果改变基础语法,会产生什么影响”等想法而感到不安。
但是,HTML 5中的语法变化,与其他开发语言中的语法变化在根本意义上有所不同。它的变化,正是因为在HTML 5之前几乎没有符合标准规范的Web浏览器导致的。
HTML的语法是在SGML(Standard Generalized Markup Language)语言的基础上建立起来的。但是SGML语法非常复杂,要开发能够解析SGML语法的程序也很不容易,因此很多浏览器都不包含SGML的分析器。因此,虽然HTML基本上遵从SGML的语法,但是对于HTML的执行在各浏览器之间并没有一个统一的标准。
在这种情况下,各浏览器之间的互兼容性和互操作性在很大程度上取决于网站或网络应用程序的开发者在开发上所做的共同努力,而浏览器本身始终是存在缺陷的。
如上所述,在HTML 5中提高Web浏览器之间的兼容性是它的一个很大的目标,为了确保兼容性,就要有一个统一的标准。因此,在HTML 5中,围绕着这个Web标准,重新定义了一套在现有HTML的基础上修改而来的语法,以便各浏览器在运行HTML的时候能够符合一个通用标准。
因为关于HTML 5语法解析的算法也都提供了详细的记载,所以各Web浏览器的供应商可以把HTML 5分析器集中封装在自己的浏览器中。最新的Firefox(默认为4.0以后的版本)与WebKit浏览器引擎中都迅速地封装了供HTML 5使用的分析器,IE(Internet Explorer)与Opera也在努力加快对HTML 5的支持——提高浏览器的兼容性指日可待。
接下来,让我们具体看一下在HTML 5中对语法进行了哪些改变。

2.1.2 HTML 5中的标记方法

首先看一下HTML 5中的标记方法。
1.?内容类型(ContentType)
首先,HTML 5的文件扩展符与内容类型保持不变。也就是说,扩展符仍然为“.html”或“.htm”,内容类型(ContentType)仍然为“text/html”。
2.?DOCTYPE声明
DOCTYPE声明是HTML文件中必不可少的,它位于文件第一行。在HTML 4中,它的声明方法如下:

<!DOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Transitional// EN" 
"http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML 5中,刻意不使用版本声明,一份文档将会适用所有版本的HTML。HTML 5中的DOCTYPE声明方法(不区分大小写)如下:
<!DOCTYPE html>```
另外,当使用工具时,也可以在DOCTYPE声明方式中加入SYSTEM识别符,声明方法如下:

`
在HTML 5中像这样的DOCTYPE声明方式是允许的(不区分大小写,引号不区分是单引号还是双引号)。
3.?指定字符编码
在HTML 4中,使用meta元素的形式指定文件中的字符编码,如下所示:

在HTML 5中,可以使用对元素直接追加charset属性的方式来指定字符编码,如下所示:

<meta charset="UTF-8">```
两种方法都有效,可以继续使用前面一种方式(通过content元素的属性来指定),但是不能同时混合使用两种方式。在以前的网站代码中可能会存在下面代码所示的标记方式,但在HTML 5中,这种字符编码方式将被认为是错误的,这一点请注意。

content="text/html;charset=UTF-8">`
从HTML 5开始,对于文件的字符编码推荐使用UTF-8。

2.1.3 HTML 5确保的兼容性

HTML 5的语法是为了保证与之前的HTML语法也能够达到最大程度的兼容而设计的。例如,符合“没有

的结束标记”的HTML代码随处可见,HTML 5中并没有把这种情况作为错误来处理,而是允许存在这种情况,但明确规定了这种情况应该怎么
处理。
那么,针对这个问题,我们从元素标记的省略、具有boolean值的属性、引号的省略这几方面来详细看一下在HTML 5中是如何确保与之前版本的HTML实现兼容的。
1.可以省略标记的元素
在HTML 5中,元素的标记可以省略。具体来说,分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。
接着,我们针对这三类情况列举一个元素清单,其中包括本书到现在为止还没有介绍的HTML 5中的新元素(关于这些新元素,2.2节将进行介绍)。
不允许写结束标记的元素有:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略结束标记的元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
可以省略全部标记的元素有:html、head、body、colgroup、tbody。
“不允许写结束标记的元素”是指不允许使用开始标记与结束标记将元素括起来的形式,只允许使用“<元素/>”的形式进行书写。例如“
...”的书写方式是错误的,只允许“
”的书写形式。当然,HTML 5之前的
这种写法可以被沿用。
“可以省略全部标记的元素”是指该元素可以完全被省略。注意,即使标记被省略了,该元素还是以隐式的方式存在的。例如省略不写body元素时,在文档结构中它还是存在的,可以使用document.body访问。
2.?具有boolean值的属性
对于具有boolean值的属性,例如disabled与readonly等,当只写属性而不指定属性值时,表示属性值为true,如果想要将属性值设为false,则可以不使用该属性。另外,要想将属性值设定为true时,也可以将属性名设定为属性值,或将空字符串设定为属性值。
属性值的设定方法可以参考下面的代码示例:

<!--只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!--不写属性代表属性为false-->
<input type="checkbox">
<!--属性值=属性名,代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串,代表属性为true-->
<input type="checkbox" checked="">```
3.?省略引号
大家已经知道,在指定属性值的时候,属性值两边加引号时既可以用双引号,也可以用单引号。
HTML 5在此基础上做了一些改进,当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时,属性值两边的引号可以省略。如下面的代码所示:




`

2.1.4 标记示例

现在,我们通过前面学到的HTML 5的语法知识来看一个关于HTML 5标记的示例。
代码清单2-1完全是用HTML 5写成的。其中省略了、

、等元素。可以通过这个示例复习一下HTML 5的DOCTYPE声明、用元素的charset属性指定字符编码、

元素的结束标记的省略、使用<元素/>的方式来结束元素,以及
元素等本节中所介绍的知识要点。
代码清单2-1 HTML 5标记示例

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML 5标记示例</title>
<p>这段代码是根据HTML 5语法
<br/>编写出来的。```
这段代码在Firefox 4浏览器中的运行结果如图2-1所示,另外,本书中如果没有特别说明使用什么浏览器,则使用的都是Firefox 4浏览器。

<div style="text-align: center"><img src="https://yqfile.alicdn.com/41bc87269180ada13caa86ba0af8ff0be1e6dbcd.png" width="" height="">
相关文章
|
2月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
48 1
|
2月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
28 0
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
6天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
42 6
|
5天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
5天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
13 2