html5系列3 : 从头开始-head标签

 在讲head标签前，我想先说下htML这个根元素，一个网页所有的标签都位于html这个根元素内。既然从头开始，那么就从它开始吧。

    我们最经常见到的html标签是这么写的(比如，京东)：

[html] 
html XMlns="https://www.w3.org/1999/xhtml">  
      其中的 xmlns 属性是 XHTML 1.0 的遗迹。它的意思是，在这个页面上的元素位于XHTML命名空间https://www.w3.org/1999/xhtml之中。但是 HTML5 的 元素都是具有这个命名空间的，因此不必再显示的写明了。不管有没有这个属性，HTML5页面在所有现代浏览器中将会有一致的表现。所以只需最简洁的html> 标签便可。

      接着就来聊聊head> 吧。我们先来看一段在XHTML1.0中常见的head标签代码：

[html] 
head>  
meta http-equiv="Content-tyPE" content="text/html; charset=utf-8">  
tITle> 测试标题/title>  
link rel="stylesheet" type="text/css" href="test.css" />  
script type="text/javascript" src="https://localhost/test/testjs.js" > /script>  
script type="text/javascript">  
alert("test");  
/script>  
/head>  
     接着再来看看与之对应的HTML5下的标签
[html] 
head>  
meta charset="utf-8" />  
title> 测试标题/title>  
link rel="stylesheet" href="test.css" />  
script src="https://localhost/test/testjs.js" > /script>  
script>  
alert("test");  
/script>  
/head>  
     观察上面两段代码，不难看出：
     （1）HTML5 对字符编码设置的简化

     （2）对于link rel="stylesheet"， 用于Web的样式表语言只有一种，就是CSS，因此它就是type属性的默认值，所以HTML5做了一个小优化，允许你去掉type属性。

     （3）对于script标签，在HTML 4中，"type" 属性是必需的，但在 HTML5 中是可选的。如果使用 "src" 属性，则 script> 元素必须是空的。

     既然谈到script不得不提一下，html5为script新增了一个属性async，用于异步执行脚本。

     顺带总结下HTML5中多种执行外部脚本的方法：

     （1）如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

[html] 
script src="https://localhost/test/testjs.js" async="async" > /script>  
     （2）如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

[html]
script src="https://localhost/test/testjs.js" defer="defer" > /script>  
     （3）如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

[html] 
script src="https://localhost/test/testjs.js" > /script>  
       备注：该博文为原创博文，如果转发请注明出处。(max.li)

 在讲head标签前，我想先说下html这个根元素，一个网页所有的标签都位于html这个根元素内。既然从头开始，那么就从它开始吧。

    我们最经常见到的html标签是这么写的(比如，京东)：

[html] 
html xmlns="https://www.w3.org/1999/xhtml">  
      其中的 xmlns 属性是 XHTML 1.0 的遗迹。它的意思是，在这个页面上的元素位于XHTML命名空间https://www.w3.org/1999/xhtml之中。但是 HTML5 的 元素都是具有这个命名空间的，因此不必再显示的写明了。不管有没有这个属性，HTML5页面在所有现代浏览器中将会有一致的表现。所以只需最简洁的html> 标签便可。

      接着就来聊聊head> 吧。我们先来看一段在XHTML1.0中常见的head标签代码：

[html] 
head>  
meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
title> 测试标题/title>  
link rel="stylesheet" type="text/css" href="test.css" />  
script type="text/javascript" src="https://localhost/test/testjs.js" > /script>  
script type="text/javascript">  
alert("test");  
/script>  
/head>  
     接着再来看看与之对应的HTML5下的标签
[html] 
head>  
meta charset="utf-8" />  
title> 测试标题/title>  
link rel="stylesheet" href="test.css" />  
script src="https://localhost/test/testjs.js" > /script>  
script>  
alert("test");  
/script>  
/head>  
     观察上面两段代码，不难看出：
     （1）HTML5 对字符编码设置的简化

     （2）对于link rel="stylesheet"， 用于Web的样式表语言只有一种，就是CSS，因此它就是type属性的默认值，所以HTML5做了一个小优化，允许你去掉type属性。

     （3）对于script标签，在HTML 4中，"type" 属性是必需的，但在 HTML5 中是可选的。如果使用 "src" 属性，则 script> 元素必须是空的。

     既然谈到script不得不提一下，html5为script新增了一个属性async，用于异步执行脚本。

     顺带总结下HTML5中多种执行外部脚本的方法：

     （1）如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

[html] 
script src="https://localhost/test/testjs.js" async="async" > /script>  
     （2）如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

[html]
script src="https://localhost/test/testjs.js" defer="defer" > /script>  
     （3）如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

[html] 
script src="https://localhost/test/testjs.js" > /script>  
       备注：该博文为原创博文，如果转发请注明出处。(max.li)

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！