欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-28 14:10:58
 在讲head标签前,我想先说下html这个根元素,一个网页所有的标签都位于html这个根元素内。既然从头开始,那么就从它开始吧。     我们最经常见到的h...

 在讲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)