《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="">
相关文章
|
19天前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
19天前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
19天前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
19天前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
19天前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
19天前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
19天前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
19天前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
19天前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习

热门文章

最新文章