https://www.jianshu.com/p/8247a9401725

2.1 Script元素

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

<script>定义了下列6个属性:

  async：可选。async 属性规定一旦脚本可用，则会异步执行，表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。async 属性仅适用于外部脚本（只有在使用 src 属性时）。
    charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值因此很少用。
    defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。最好只包含一个延迟脚本。HTML5 的实现会忽略给嵌入脚本设置的 defer 属性。
language: 已经废弃。
    src：可选。表示包含要执行代码的外部文件。
    type：可选。可以看成language的替代属性，表示编写代码使用的脚本语言的内容类型(也称MIME类型)。服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript。

2.1.1 标签的位置

把JavaScript文件放入<head>元素中，意味着必须等到全部JavaScript代码都被下载，解析和执行完成之后，才开始呈现页面内容（浏览器在遇到body标签时才开始呈现内容）。
这个问题会导致浏览器在呈现页面时出现明显延迟，导致浏览器窗口一片空白。
现在Web程序一般都把JavaScript引用放在<body>元素页面的内容后面。

2.1.2 延迟脚本

HTML4.0.1为<script>标签定义了defer属性（只适用外部脚本）。这个属性的用途是表明脚本在执行的时候不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。
因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
在</html>之后才执行，按照出现的先后吮吸执行。
IE4、FireFox3.5、Safari5、Chrome是最早支持defer属性的浏览器。其他浏览器会忽略这个属性，像平常脚本一样处理。
为此，把延迟脚本放在页面底部仍然是最佳选择

2.1.3 异步脚本

HTML5为<script>标签定义了async属性（只适用外部脚本）。告诉浏览器立即下载文件。标记为async的脚本并不保证它们的先后顺序执行。
 

2.1.4 在XHTML中的用法

      用CData片段来包含JavaScript代码，在XHTML中，CData是文档中的一个特殊区域，这个区域可以包含不需要解析的任意格式的文本内容。
       [CDATA{
      //中间可以写js代码
      }]
     如果有浏览器不兼容XHTML的话，可以使用JavaScript注释将CData标记注释掉

2.1.5  不推荐使用的语法

在最早引入<script>元素的时候，该元素与传统的HTML的解析是有冲突的。由于要对这个元素应用特殊的解析规则，因此在那些不支持JavaScript的浏览器(Mosaic)中就会导致问题。
具体来说，不支持JavaScript的浏览器会把<script>元素的内容直接输出到页面中，因此会破坏页面的布局和外观。
让JavaScript代码包含在一个HTML注释中，如下所示
<script><!--
//js代码
//--></script>
虽然这种注释JavaScript代码的格式得到了所有浏览器的认可，也能被正确解释，但由于所有浏览器都已经支持JavaScript，因此也就没有必要再使用这种格式。
在XHTML模式下，因为脚本包含在XML注释中，所有脚本会被忽略
 

2.2 嵌入代码与外部文件

在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码。

不过，并不存在必须使用外部文件的硬性规定，但支持外部文件的人多会强调如下优点：

1.可维护性

遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下，集中精力编辑JavaScript代码。

2.可缓存

浏览器能够根据具体的设置，缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都是用同一个文件，那么这个文件只需要下载一次。因此，最终结果就是能够加快页面加载的速度。

3.适应未来：

通过外部文件来包含JavaScript无须使用前面提到的XHTML或者注释。HTML和XHTML包含外部文件的语法是相同的。

2.3 文档模式

ie5.5引入了文档模式的概念，而这个概念是通过使用文档类型doctype切换实现的。

最初的两种文档模式，混杂模式quirks mode和标准模式 standard mode。

ie之后又提出了，所谓的准标准模式almost standards mode，这种模式下的浏览器特性有很多都是符合标准的，但是也不尽然。不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）

如果在文档开始处没有发现文档类型声明，则所有的浏览器都会默认开启混杂模式。但是采用混杂模式，并不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大。

1.对于标准模式，可以使用下面任何一种文档类型来开启

<!-- HTML 4.01 严格型 -->

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--HTML 5-->

<!DOCTYPE html>

2.对于准标准模式，可以通过使用transitional或frameset文档类型来触发

<!-- HTML 4.01 过渡型 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 过渡型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。因此，当有人提到“标准模式”时，有可能是指这两种模式中的任何一种。而且检测文档模式时也不会发现什么不同。本书后面提到的标准模式时，指的是除混杂模式之外的其他模式。

2.4 <noscript>元素

早期的浏览器都面临一个特殊的问题，即当浏览器不支持JavaScript时，如何让页面平稳地退化。

解决方案是创造一个<noscript>元素，用以在不支持JavaScript的浏览器中显示替代内容。

这个元素可以包含在能够出现在文档<body>中的任何HTML元素--<script>元素除外。

包含在<noscript>元素中的内容只有在下列情况下才会显示出来：

1.浏览器不支持脚本

2.浏览器支持脚本，但是脚本被禁用

第二章 在Html中使用JavaScript的更多相关文章

  1. javascript高级程序设计第3版——第二章使用javascript

  2. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  3. Javascript高级程序设计读书笔记（第二章）

    第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到 ...

  4. JavaScript高级程序设计第三版-读书笔记（1-3章）

    这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript   提供核心语言功能 DOM     提供访问 ...

  5. javascript高级程序设计第三版书摘

    在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...

  6. DOM 操作技术【JavaScript高级程序设计第三版】

    很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

  7. 10.2 DOM 操作技术【JavaScript高级程序设计第三版】

    很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

  8. 2.1 <script>元素【JavaScript高级程序设计第三版】

    向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...

  9. Python核心编程第三版第二章学习笔记

    第二章 网络编程 1.学习笔记 2.课后习题 答案是按照自己理解和查阅资料来的,不保证正确性.如由错误欢迎指出,谢谢 1. 套接字:A network socket is an endpoint of ...

  10. 20.2 解析与序列化【JavaScript高级程序设计第三版】

    JSON 之所以流行,拥有与JavaScript 类似的语法并不是全部原因.更重要的一个原因是,可以把JSON 数据结构解析为有用的JavaScript 对象.与XML 数据结构要解析成DOM 文档而 ...

随机推荐

  1. c++类简介

    C++类(Class)总结   一.C++类的定义     C++中使用关键字 class 来定义类, 其基本形式如下:class 类名{ public: //行为或属性  protected: // ...

  2. 梦想CAD控件COM接口标注样式

    增加标注样式 用户可以增加标注样式到数据库,具体实现c#代码如下: private void CreateDim() { //返回控件的数据库对象 MxDrawDatabase database = ...

  3. JAVA基础数组

    数组: 数组是一种容器 存储同一类型的一组数据(必须是 类型相同的一组数据) 定义数组的公式:(有两种) 1.静态定义      1)数据类型[ ] 数组名 = {元素1,元素2,元素3,元素4,元素 ...

  4. TWaver GIS在电信中的使用

    GIS作为信息系统的重要组成部分,在电信行业中的应用由来已久.将GIS引入电信管理系统,GIS强大的功能就会得到充分的体现,GIS技术可以将各类电信信息系统以其特有的表现形有机整合在一起,并为真正做到 ...

  5. 洛谷——P3373 【模板】线段树 2&& B 数据结构

    P3373 [模板]线段树 2 题目描述 如题,已知一个数列,你需要进行下面三种操作: 1.将某区间每一个数乘上x 2.将某区间每一个数加上x 3.求出某区间每一个数的和 线段树维护区间乘法 1.如何 ...

  6. Python，socket编程

    TCP协议 IP+端口 应用层协议做的事不同,但都离不开数据的交换,本质上都是收和发~为什么要三次握手?目标机器可能不存在,握手期间,发送方也可能down掉.客户端————服务器,先发请求的那个是客户 ...

  7. Python学习——filter&map

    filter&map 1.filter函数 filter()函数用于过滤序列,过滤掉不符合条件的元素,Python3以后返回一个迭代器对象(可以用list()转化为列表查看). filter( ...

  8. 【Codeforces 1009C】Annoying Present

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 其实就是让你最后这n个数字的和最大. 加上的x没有关系.因为肯定都是加上n个x 所以直接加上就可以了 主要在于如何选取j 显然我们要找到一个位 ...

  9. 重载与重写的区别----https://blog.csdn.net/zhu_apollo/article/details/1852542

    重载 overloading        1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载是一个类中多态性的一种表现.        ...

  10. 添物零基础到大型全栈架构师 Java实战及解析（实战篇）- 概述

    ​ 实战篇是在基础之上,进一步提升的内容.通过实战篇可以深入理解Java相关框架和库的使用,能够独立开发小模块,或者按照架构师的指导进行代码编写和完善. 主要讲解核心框架和库的使用和使用场景介绍.通过 ...