第二节:细说一下那些由繁变简的语法

很多人都已经知道HTML5给我们带来了很多高大上的新标签、新属性,但是却不怎么重视一些细节之处,比如:一些繁琐的语法已经变得更加的简洁了。这些变化虽不起眼,但却时刻影响着我们的日常coding。今天,我们就来细说一下,那些由繁变简的语法。

 

简化的<!DOCTYPE>声明

变化最大的莫过于<!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给开发者带来的方便。

 

第二节:细说一下那些由繁变简的语法

简化的字符集编码charset

在HTML4.01中我们利用<meta>标签去指定网页的字符编码的时候,我们得这样写:



   <
meta http-equiv="content-type" content="text/html;charset=UTF-8">


但是在HTML5中,只要这样写就足够了:



   <
meta charset="UTF-8">

 

简化的<script>用法

在HTML4.01中,我们经常使用的<script>标签,要加上一个type属性:



   <
script type="text/javascript" src="demo.js"></script>


但在HTML5中,这个可以省略掉了,简写成这样:



   <
script src="demo.js"></script>

 

简化的<link>用法

同样,用于导入外部样式资源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是什么

你可以把XHTML理解成语法更严格的HTML版本,它和HTML4.01大部分是相同的,不同点在于:XHTML 元素必须被正确地嵌套、元素必须被关闭、标签名必须用小写字母等等,它对语法的要求更加的严格、更加的严谨。


但是HTML5的出现让语法变得更加的宽松,开发者可以在允许的规定内,根据自己的子喜欢来写,剩下的都交给浏览器去解析。


前端君的愚见

不过,前端君建议在选择写法的时候要遵循:符合大家的代码阅读习惯,代码风格要一致。不能同一个标签出现不同的编写风格,也不能盲目地追求代码简洁而忽略了大家的代码阅读习惯。


本节小结

总结:HTML5让语法变得更加的简洁,语法要求也变得更加宽松,大家在选择语法的时候,不放参考一下前端君的建议。


第二节:细说一下那些由繁变简的语法