关于如何在html中引用使用js真的是特别简单的事情,因为大家都用一些高能的前端编辑器,比如webstorm,Atom等...输入一个"<s"就会自动补全<script>标签,但这是红皮书的第二章内容,我觉得还是必要做一下笔记的~
首先说一下<script>元素,这个元素由Netscape创造并在Netscape Navigator2中首先实现,后来这个元素被正式被加入html规范中,HTML4.01为其定义了六个属性:
async:可选,表示应该立即下载脚本,但不应该妨碍页面中的其他操作。只对外部脚本有效,也就是通过src引入的。
charset:可选。表示通过src属性指定的代码的字符集,但是大多数浏览器会忽略它的值,所以很少有用。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。也只对外部脚步有效。
language:已废弃。原来用于表示编写代码使用的脚本语言,比如JavaScript,或VBScript.src:可选。表示包含要执行代码的外部文件。
type:可选。表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。实际上服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值可能导致脚本被忽略。另外,在非IE浏览器还可以使用application/javascript和application/ecmascript。考虑到约定俗称的和最大限度的浏览器兼容,其值还是text/javascript!
以上是HTML4为<script>定义的6个属性,接下来我们看看HTML5又有做了什么样的改动。
可以看到‘language’已经废弃了,多了一个crossorigin属性。虽然还没有完全被标准化,但是一些浏览器支持crossorigin属性。基本的想法是,浏览器会限制对非同源资源的使用(同源资源是指相同的协议、hostname 以及端口)。crossorgin不是一个神奇的安全手段,它所做的只是让浏览器启用正常的 CORS 访问检查,发起一个OPTIONS请求并检查Access-Controlheader。它有两个值:anonymous和use-credentials。这个属性通用可以用在<video>和<img>。
关于属性补充两个地方
defer(延迟下载) vs asyn(异步脚本)
虽然两个属性都是告诉浏览器立即下载但是脚本会被延迟到整个页面都解析完毕再运行。但是众所周知,多个脚本执行顺序是按照<script>标签在html中顺序,但是async则无法保证先后执行顺序。因此建议异步脚本不要在加载期间修改DOM。
src vs href
src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。
<script src="js.js"></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加
<link href="css.css" rel="styesheet">
那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
引用JS
使用<script>元素的方式有两种:直接在页面嵌入JavaScript代码和包含外部JavaScript文件
在使用<script>元素嵌入JavaScript代码时,只须为<script>指定type属性,即text/javascript。通过<script>来包含外部js文件,src则是必须的,另外扩展名不是必需的,如果不适用.js扩展名,请确保服务器能返回正确的MIME类型。另外当浏览器遇到字符串"</script>"时,就会认为那是结束的</script>标签,而通过转义字符"\"解决这个问题。关于<script>位置应该页面后面,防止出现由于等待js代码被全部下载而导致浏览窗口一片空白。
另外在XHTML可以写成<script src="js.js" /> 但是在html是不可以这样,这样书写不符合HTML规范。而且也得不到某些浏览器,尤其是IE的正确解析。
在XHTML中
在HTML中,有特殊规则用以确定<script>元素中的那些元素可以被解析,但这些特殊的规则在xhtml中不适用,比如在html中可以用"<" 来判断a是否小于b,可是xhtml需要将所有小于号替换成html实体(<)。保证相同代码在xhtml中正常运行的方法就是使用一个CData片段来包含JS代码,在xhtml中,CData是文档中的一个特殊区域。
<script><![CData[
//正常js的代码
]]></script>
最后,要说的是现在很少有浏览器不支持js,可以使用<noscript>标签,这个标签的内容会在不支持js的浏览器中显示出来