开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《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="">

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Html 语法学习笔记三
1、<form> 标签 <form> 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。 注释:form 元素是块级元素,其前后会产生折行。 2、CSS 伪类 (Pse
949 0
Html 语法学习笔记二
1、图像标签(&lt;img&gt;)和源属性(Src)         在 HTML 中,图像由 &lt;img&gt; 标签定义。        &lt;img&gt; 是空标签,意思是说,它只包含属性,并且没有闭合标签。        要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。        定义图像的语法是: &l
931 0
Html 语法学习笔记一
 作者:jiankunking 出处:http://blog.csdn.net/jiankunking 一、HTML文档的基本结构                       HTML部分:每个HTML文档必须以打开HTML标记开始,以关闭HTML标记结束 <HTML></HTML> 说明其间内容为HTML格式文档。                 HEAD头部分:此部
1326 0
JAVA Web入门之HTML5及CSS的使用与实战(超详细,附源码)
JAVA Web入门之HTML5及CSS的使用与实战(超详细,附源码)
44 0
前端静态页面html5样式设置css页面渲染
前端静态页面html5样式设置css页面渲染
47 0
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
36 0
HTML5实践 -- 使用css制作时间 ICON
  最近我在重新设计自己的博客站点,决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片,感谢css3,现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。
975 0
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
《零基础HTML入门教程》
立即下载
Java开发手册-孤尽秘传版
立即下载