关于HTML和XHTML的理解
其实XHTML就是HTML,但是写法要求是非常严格的。
在XHTML中使用<script>
<script type="text/javascript">
//HTML
function compare(a,b){
if(a > b){
console.log("a 大于 b");
}else if(a < b){
console.log("a 小于 b");
}else{
console.log("a 等于 b")
}
}
compare(1,2) //正常结果
//XHTML
compare(1,2) //报错
//解决
function compare(a,b){
if(a > b){
console.log("a 大于 b");
}else if(a < b){
console.log("a 小于 b");
}else{
console.log("a 等于 b")
}
}
</script>
这里可以看 < 小于号 在XHTML里面会被当做标签<尖括号去解析,所以需要用实体HTML ⇒ <去代替小于号才会被正常解析
这样写未免太麻烦了一点,那么有一个好用的写法
<![CDATA[...]]>片段是XHTML(XML)文档中的一个特殊区域,这个区域可以包含不需要解析的任意格式文本内容<script type="text/javascript">
//XHTML
<![CDATA][
function compare(a,b){
if(a > b){
console.log("a 大于 b");
}else if(a < b){
console.log("a 小于 b");
}else{
console.log("a 等于 b")
}
}
]>
//有人会问那么如果浏览器不支持XHTML怎么办很简单
//注释掉他 或者写个if判断一下
//<![CDATA][
function compare(a,b){
if(a > b){
console.log("a 大于 b");
}else if(a < b){
console.log("a 小于 b");
}else{
console.log("a 等于 b")
}
}
//]>
</script>
至于为什么现在很少又问到这方面问题,有一部分是因为现在我们的开发习惯是吧sciprt脚本文件用<script src="…">外部引入,这样开发人员能够在不触及HTML的情况下去专心改写JavaScript代码确实便于维护。
而XHMLT的
大家都知道HTML中<script>标签的位置决定了页面JS部分加载顺序,但是顺序会优于DOMcontentLoaded事件
其实<script>也是可以异步加载的 ===> defer属性
*只适用于外部文件
<html lang="zh-CN">
<head>
<!--defer 的作用是告诉浏览器立即下载(同步下载),但是延迟执行,也就是延迟脚本。
顺序也不一定会在DOMcontentLoaded之前执行-->
<script src="..." defer="defer"></script>
</head>
</html>
<script> async属性
*只适用于外部文件
<html lang="zh-CN">
<head>
<!--async 的作用是立即下载(异步下载),延迟执行,是异步脚本。
顺序也不一定会在DOMcontentLoaded之前执行,但一定在页面load事件之前执行-->
<script src="..." async="async"></script>
</head>
</html>