前端小常识

关于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 &lt; b){
			console.log("a 小于 b");
		}else{
			console.log("a 等于 b")
		}
	}
</script>

这里可以看 < 小于号 在XHTML里面会被当做标签<尖括号去解析,所以需要用实体HTML ⇒ &lt;去代替小于号才会被正常解析

这样写未免太麻烦了一点,那么有一个好用的写法

<![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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值