第二节:细说一下那些由繁变简的语法
很多人都已经知道HTML5给我们带来了很多高大上的新标签、新属性,但是却不怎么重视一些细节之处,比如:一些繁琐的语法已经变得更加的简洁了。这些变化虽不起眼,但却时刻影响着我们的日常coding。今天,我们就来细说一下,那些由繁变简的语法。
变化最大的莫过于<!DOCTYPE>,这东西放在文档的第一行,十分重要。它的作用是告诉浏览器:“嘿,哥们,我用的是xxx版本的HTML,你待会渲染我的HTML页面代码的是记得按照这个规则来,别搞错了啊!”
在HTML4.01的年代,这个HTML的版本有3中, 分别是: Strict、Transitional 和 Frameset。
HTML4.01声明<!DOCTYPE>的时候,要写成这样,我们拿其中一个来举例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
上面的写法,就是声明了一个HTML 4.01中的 Strict类型版本。是不是相当繁琐复杂,好在这段代码编辑器一般会帮我们自动生成,无需自己动手。也正因为这样,估计很多童鞋并不是很了解这个<!DOCTYPE>。
而现在,我们学习的HTML5,它的<!DOCTYPE>声明只有一个版本,并且语法也简洁了许多,看:
<!DOCTYPE html>
看到这简洁的代码,是不是感觉整个世界都美好了。这就是HTML5给开发者带来的方便。
在HTML4.01中我们利用<meta>标签去指定网页的字符编码的时候,我们得这样写:
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
但是在HTML5中,只要这样写就足够了:
<meta charset="UTF-8">
在HTML4.01中,我们经常使用的<script>标签,要加上一个type属性:
<script type="text/javascript" src="demo.js"></script>
但在HTML5中,这个可以省略掉了,简写成这样:
<script src="demo.js"></script>
同样,用于导入外部样式资源CSS文件的<link>标签也由繁变简了,以前要这样写:
<link rel="stylesheet" type="text/css" href="demo.css">
现在,type属性也可以直接省略掉了:
<link rel="stylesheet" href="demo.css">
此外,相比于XHTML,HTML5还提供了一些更灵活的语法。(什么是XHTML?文章底部有介绍)
在XHTML中,标签名严格要求小写:
<div></div>
在HTML5中,没有大小写的严格规定,你可以大写标签名:
<DIV></DIV>
但是,相信很多人更倾向于用小写来表示,因为它更符合我们的阅读习惯。这里前端君也不建议大家使用大写字母来表示,因为这种写法已经out了。
在HTML5中,属性值的引号可选,你可以省略:
<span class=box></span>
这个span标签的class属性值不需要用引号,浏览器也可以解析渲染成功。但是习惯上大家还是会用上。
在HTML5中,空元素闭合可选。什么是空元素呢?
空元素:并不包含任何文本内容的元素,比如:img标签,br标签,hr标签等。
在XHTML中,空元素要求必须闭合的,空元素用斜杠表示闭合。比如这样:
<img src="" alt="" />
<br/>
<hr/>
在HTML5中,斜杠闭合是可选的了,你可以不闭合:
<img src="" alt="">
<br>
<hr>
有人习惯使用斜杠表示闭合,有的人喜欢更简洁的HTML5写法。这里前端君并没有建议大家具体要以哪一种为准,任君选择。不管选择哪种方式,重要的是始终保持一致。
在HTML5中,元素的属性也是可选的了,比如:
<div class></div>
其实这样的语法确实是灵活了,但除非无法抗拒,否则不推荐大家这样写,因为并没有实际的效用。
你可以把XHTML理解成语法更严格的HTML版本,它和HTML4.01大部分是相同的,不同点在于:XHTML 元素必须被正确地嵌套、元素必须被关闭、标签名必须用小写字母等等,它对语法的要求更加的严格、更加的严谨。
但是HTML5的出现让语法变得更加的宽松,开发者可以在允许的规定内,根据自己的子喜欢来写,剩下的都交给浏览器去解析。
不过,前端君建议在选择写法的时候要遵循:符合大家的代码阅读习惯,代码风格要一致。不能同一个标签出现不同的编写风格,也不能盲目地追求代码简洁而忽略了大家的代码阅读习惯。
总结:HTML5让语法变得更加的简洁,语法要求也变得更加宽松,大家在选择语法的时候,不放参考一下前端君的建议。