【编程标签】

---

编程标签

标签名	用于
① <script>	嵌入 内部脚本语句,或 引用 外部脚本文件(搭配 src 属性)。
② <noscript>	定义 针对 不支持(禁用)脚本 的浏览器的 脚本替代内容。
③ <object>	定义 嵌入的对象。
④ <param>	提供 参数. 为嵌入对象 提供参数 (搭配 object 标签,name,value 属性)
⑤ <embed>	html5 标签 . 为 外部应用程序（非 HTML）定义 容器。
⑥ < applet >	已废弃。嵌入 插件/ 小程序 . (用 object 替代)

---

1. ★ script 嵌入/引用 脚本 (搭配 type,src 属性)

• 嵌入/引用 脚本

  • <script> 脚本标签 用于嵌入或引用 可执行代码。
    • 通常用于 嵌入或引用 JavaScript代码。
  • script元素 也可以 与其他语言一起使用，比如 WebGL 的 GLSL着色器编程语言。
    • 不只是 服务于 javascript
    • 脚本: 允许作者向文档中 添加 交互性。Scripts allow authors to add interactivity to their documents.

• 使用说明

  • ① 嵌入 脚本语句:
    • <script>脚本 标签 可以包含
      • 脚本语句
  • ② 引用 外部脚本: <script> 脚本标签 也可以通过 src资源 属性
    • 指向 外部 脚本文件。

• 必需 属性:

  • 脚本 类型: type 类型 属性
    • 建议 省略: (html 5中 这个属性 建议省略,默认是type="text/javascript")
  • 用于: 规定 脚本的 MIME 类型。

• JavaScript 的常见应用

  • 图像 操作
  • 表单验证
  • 动态内容 更新。

• 代码的位置 和 执行时机

  • ① 不在 函数内: 假如 脚本script 元素 内部的代码 没有位于 某个函数中，那么这些代码
    • 加载时 立即执行: 会在页面 被加载时 被立即执行。
      • 即, 函数外的代码 , 会被立即执行.
  • ② 被忽略的 脚本: 框架集 <frameset>标签 之后的脚本 会被忽略。
    • 为什么 ?(这个 frameset 标签 已弃用.)

• 禁用脚本 或者其 浏览器不支持客户端脚本

  • 使用 noscript元素 , 对于那些在

---

• 过时 属性: HTML 与 XHTML 之间的差异

  • 在 HTML 4.01 中，script 元素的 "language" 属性 不被赞成使用。
  • 在 XHTML 1.0 Strict DTD 中，script 元素的"language"属性 不被支持。

• 实体 解析: HTML 4 和 XHTML 在 处理脚本中的内容方面 有所不同：

  • 不 解析实体: 在 HTML 4 中，内容类型 声明为
    • CDATA，就是说
      • 不会 对实体 进行解析。
  • 解析实体: 在 XHTML 中，内容类型 声明为
    • (#PCDATA)，也就是说
      • 会对实体 进行解析。
  • 这意味着，在 XHTML 中，应该
    • 编码 所有特殊的 字符
    • 或者把 所有内容 嵌套在 CDATA 部分中。

• 脚本 script 标签和属性的 浏览器支持

  • 

• 脚本解析: 为了确保在 XHTML 文档中 脚本正确进行解析，请使用 如下语法：

<script type="text/javascript"><![CDATA[
  document.write("Hello World!")
//]]></script>

• 脚本的使用 和替代
  • ① 能使用标签实现的 别使用脚本: 鼓励作者 尽可能使用声明性 替代脚本，因为声明性机制 通常更容易维护，而且许多用户 禁用脚本。
    • 例如，可以使用 细节details 元素，而不是使用 脚本 显示或隐藏 一个部分 来显示更多细节。
  • ② 在无脚本时 也能正常显示: 还鼓励作者 在缺少脚本支持的情况下, 适当地降低 应用程序的性能。
    • 例如，如果作者在表头中 提供了一个链接 来动态地 引用表，那么也可以 通过向服务器 请求已排序的表 , 来使该链接 在没有脚本的情况下 发挥作用。

---

1.1 script 脚本标签的 属性

• 必需的 属性

属性名	属性值	用于
① type	MIME-type	指示 脚本的 MIME 类型。 (html5 中 建议省略)

---

• 可选的 属性

属性名	属性值	用于
① charset	=charset	已废弃 . 字符编码: 规定 在 外部脚本文件 中 使用的 字符编码。
② defer	=defer	延迟执行: 规定是否 对脚本执行 进行 延迟，直到 页面加载为止。页面完成解析时,才执行脚本.
③ src	=URL	外部脚本 url: 规定 外部脚本文件的 URL。
④ xml:space	=preserve	保留空白: 规定是否 保留 代码中的空白。
⑤ async	=async	异步 同时执行: html5 新属性 . 规定 异步执行脚本（仅适用于 外部脚本）。页面 解析时,执行脚本.
⑥ language	=script	已废弃。规定 脚本语言。请使用 type 属性代替它。
⑦ crossorigin	=anonymous,use-credentials	跨域: 可以使用本属性 来使那些将静态资源 放在另外一个域名的站点 打印错误信息。
⑧ integrity	base64 编码过后的 文件哈希值	防篡改: 在执行脚本之前 对比所加载文件的哈希值 和期望的哈希值。一致时才执行脚本.

---

• defer
  • 推迟 , 延期
• preserve
  • 保留(维护原状态),保存

---

⑴ type 属性: 脚本 类型 (可省略,唯一值: text/javascript)

• ⑴ <script>脚本 标签的 type属性

  • 脚本类型
    • 必需的 type属性规定
      • 脚本的 MIME 类型。
  • 脚本类型: 此属性 指示所表示的 脚本类型。该属性的值 将属于以下类别之一:
    • ① JavaScript: 省略 或 JavaScript MIME类型 text/ JavaScript
      • JavaScript 脚本: 这表明 脚本是JavaScript
      • 要求省略type类型: HTML5 规范要求作者省略该属性，而不是提供冗余的MIME类型,默认是 JavaScript
      • 代码的 脚本语言: 在早期的浏览器中，这标识了 嵌入 或导入(通过src属性)代码 的脚本语言
      • JavaScript MIME types: 根据HTML规范，JavaScript 文件应该 始终使用 MIME类型 text/ JavaScript来提供
        • 没有其他值被认为是有效的，使用其中任何一个值 都可能导致脚本无法加载或运行。
    • ② JavaScript 模块: module
      • 使代码 被视为 JavaScript 模块
      • 脚本内容的处理: 不受charset字符集和defer延迟属性的影响
    • ③ 数据块: 任何其他值-有效的 非text/javascript类型
      • 数据块: 嵌入式内容 被视为一个 数据块，不会被浏览器处理。
      • 有效类型值: 开发人员 必须使用 非 JavaScript MIME类型 的有效MIME类型 来表示数据块。src属性将被忽略。
  • type 属性标识
    • <script>和 </script>标签之间的内容。
  • MIME 类型 由两部分组成：
    • 媒介类型 / 子类型。
  • 对于 JavaScript，其 MIME 类型是
    • "text/javascript"。
    • script-type="text/javascript"
  • type 和 language 属性 的区别
    • type 和language属性都可用来
      • 脚本类型: 指定 <script> 标签中的 脚本的类型。
    • 未标准化,type替代:
      • 与 type属性一样，该language语言 属性 标识正在使用的 脚本语言。然而，与type属性不同，该属性的可能值 从未标准化。应该使用type属性。

• 如果使用 JavaScript，可以使用下面 两种属性：

language = "JavaScript"

或者：

type = "text/javascript"

• 可能偶尔会看见 language的值为 (language 属性,目前 已经过时)
  • VBScript
  • （对 type 而言是 text/vbscript），表示
    • 包含的脚本代码是用
      • Microsoft 的 Visual Basic Script 编写的。
• 利用 JavaScript，您还可以使用language的值
  • “JavaScript 1.1” ，表示
    • 包含的脚本语句 只能被 Netscape 3.0 或更新的版本处理。
  • Netscape 2.0 只支持 JavaScript 1.0，而无法处理
    • 标记为 "JavaScript 1.1"的脚本。

---

• <script>脚本 标签的 type类型 属性值
  • MIME_type
    • MIME 类型。
  • 一些 可能属性值：
    • text/javascript
    • text/vbscript
    • text/ecmascript
    • application/javascript
    • application/ecmascript

---

• 示例1: 在 HTML 页面中 插入一段 JavaScript：

<script type="text/javascript">
  document.write("Hello World!")
</script>

---

• 示例2: 这些示例 展示了 如何在 HTML4 和 HTML5中使用 <script>脚本 标签
  • html 5 中 可以省略type 类型 属性

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>

---

• 示例3: 模块回退
  • 属性的搭配: 支持type="module"的浏览器 会忽略任何带有nomodule属性的脚本。
  • 回退脚本: 这使您能够 在使用模块脚本的同时，为 不支持浏览器 提供nomodule标记的 回退脚本。

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

---

⑵ crossorigin 属性: 引入 跨域脚本 (枚举属性,公开 错误信息,搭配 src 属性)

• <script>脚本 标签的 crossorigin跨域 属性
  • 元素如何处理 跨域请求
  • 跨域 crossorigin属性 是一个 = CORS 设置 属性。
    • CORS: 点击查看 “跨域 资源共享”（Cross-origin resource sharing）,这篇文章说得很生动,可以参考下.
    • crossorigin 属性
  • ① 对于 脚本(classic script)
    • 公开 错误信息: 当脚本 从其他来源(不同域名的站点) 获取时，它控制 是否会 公开错误信息。
    • 脚本 有一个 一个隐藏的错误errors布尔值
      • 一个布尔值，如果为 真true，则表示 不会 为脚本中的错误 提供 错误信息。这用于 消除跨源脚本的错误，因为这会 泄漏私有信息。
      • ❶ 传递 错误信息: 那些 没有通过标准 CORS 检查 的 script元素, 传递最少的 错误信息到 window.onerror。
        • 因为,一般使用window.onerror来捕获 js脚本的错误信息。
      • ❷ 打印 错误信息: 可以 使用本属性 来使那些 将资源 放在另外一个域名的站点,如 用别的站点的脚本 (即, 跨源脚本), 打印错误信息。
        • 对于 跨域调用的 js 脚本，onerror事件 只会给出 很少的报错信息：error: Script error.
        • ★ 同样的 报错信息: 这个简单的信息 , 很显然不能 看出脚本的具体错误，所以可以使用 跨源crossorigin 属性，使得 加载的跨域脚本 可以得出跟 同域脚本 同样的报错信息：
          • <script crossorigin src="http://www.lmj.com/demo/crossoriginAttribute/error.js"></script>
        • 如果是这样，www.lmj.com 的服务器 必须给出一个Access-Control-Allow-Origin的header，否则, 无法访问此脚本。
  • ② 对于模块脚本( module scripts)
    • 它控制用于 跨源请求的 凭据模式。
    • 与经典脚本不同，模块脚本 需要使用 CORS 协议 进行跨源抓取。
      • 凭据模式
        • 请求具有 关联的凭据模式，即“忽略”、“同源”或“包含”"omit", "same-origin", or "include"。除非另有说明，否则为“omit”。
      • ❶ “省略”: omit
        • 从该请求中 排除凭据。
      • ❷ “同源”:same-origin
        • 包含 对同源url 发出请求的凭据。
      • ❸ “包含”:include
        • 始终在此请求中 包含凭据。
      • 请求的凭据模式 在获取期间 控制凭据流。当请求的模式是“导航”navigate时，它的凭据模式 被假定为“包含”include，并且获取fetch 当前不考虑其他值。
      • 如果HTML在这里改变了，这个标准 将需要相应的改变。

<script src="" crossorigin="anonymous"></script>

• 支持 crossorigin的 标签:
  • 在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如
    • <script> , <link>, <img>和<video>
  • 均有一个 跨域 crossorigin属性
  • 它 允许配置元素 获取 数据的 CORS 请求。
• 跨域 crossorigin 属性值: (不是 同一个网站/域名)
  • 这个属性 是枚举的，并具有以下可能的值：
    • 属性值 使用前提: 在使用 这两个值时, 都需要 服务器 server 端, 在 response 的 header 中, 带上Access-Control-Allow-Credentials 属性。
  • ① (匿名)不提供 凭据: crossorigin="anonymous" 对此元素的 CORS请求, 将 不设置凭据标志。跨域的 不发送凭据,同源的 才发送凭据.
    • 对元素的请求 ,
      • ❶ 请求的模式: 将这个请求的 模式(mode) 设置为: “cors”，
        • 使请求成为 CORS 请求。如果请求的资源 不理解 CORS协议，Fetch 将返回一个 网络错误。
      • ❷ 请求的 凭据模式: 把这个请求的 凭据模式(credentials mode) 设置为 同源“same-origin”。
        • 包含 对同源url 发出请求的 凭据。(跨域的 就不发送凭据了?)
        • 会在请求中的 header 中, 带上Origin属性，但请求 不会带上 cookie和其他的一些认证信息。
        • 匿名: 同源才 交换(发送)凭据: 意味着 不会通过 cookie、客户端SSL证书 或CORS规范的术语部分中描述的HTTP身份验证 来交换 用户凭据，除非, 它们来自 同一个源。
    • 请求(request) 的 模式mode，属性值是:
      • “same-origin”、“cors”、“no-cors”、“navigate”或“websocket”。除非另有说明，否则它是“no-cors”。
  • ② 提供 凭据: crossorigin="use-credentials" ,始终提供 凭据.
    • credentials [krə’dɛnʃlz] 证书
    • 对元素的请求, 将
    • ❶ 请求的模式: 设置为“cors”
    • ❷ 请求的凭据模式: 设置为“include”。
      • 始终 在此请求中 包含凭据。
      • 会在跨域请求中, 带上cookie和其他的一些 认证信息。
  • 两个 属性值的区别: 第一种,匿名的,跨域请求时,不提供凭据,第二种,始终 提供凭据.
• 未指定(省略) crossorigin 属性:
  • 默认情况下 （即 没有crossorigin属性时）, CORS 根本不会使用,即,缺省值是 No CORS 状态.
• “anonymous"关键字 适用情形
  • anonymous [ə’nɑnəməs] 匿名的
  • 说明 不会通过 cookies，客户端 SSL 证书或 HTTP 认证 交换用户凭据。
  • 等同 匿名anonymous: 即使是 无效的属性值 和 空字符串 也会 被当作anonymous关键字使用。

---

• 跨域crossorigin 存在的意义：
  • ① 引入 跨域的脚本（如,使用别的网站的 js文件,不是自己本地的 js 文件）
    • 如果这个 跨域 js 脚本有错误，因为浏览器的限制（根本原因是 协议的规定），是拿不到错误信息的。
    • 如果是本地的 js 文件,不存在 跨域问题,也没有必要使用 跨域crossorigin属性.
    • 无法 获取 具体错误信息: 当本地尝试使用window.onerror去记录 脚本的错误时，跨域脚本的错误 只会返回 Script error。这个错误信息,看不到具体 错在哪里了,只知道是脚本错误.
  • ② 获取 跨域脚本的具体信息:
    • 但 HTML5 新的规定，是可以 允许本地 获取到 跨域脚本的错误信息
    • 两个条件：
      • ❶ 跨域脚本的服务器 设置:
        • 必须通过 Access-Controll-Allow-Origin 头信息 ,允许当前域名 可以获取错误信息
      • ❷ 引用 跨域脚本的 script标签 设置:
        • 当前域名的 script 标签, 也必须指明 src 属性 引用的 跨域脚本, 是支持跨域的
          • 即, <script>必须设置 crossorigin 属性。

---

• 注意: crossorigin 属性 涉及到 网络安全问题；
  • ① 文件 多站点共享:
    • 使用 内容传递 网络 Content Delivery Networks (CDNs)来 托管脚本和样式表等文件，这些文件 在多个 站点之间共享
    • 可以 提高 站点性能 并 节省带宽。
  • ② 引入 被恶意 劫持和攻击了的 文件:
    • 然而，使用 CDNs 也有风险，因为如果攻击者 获得了 对 CDN 的控制，攻击者 可以将任意恶意内容 注入CDN上的文件(或完全替换文件)
    • 因此也可能攻击 从该 CDN 获取文件的 所有站点。
  • ③ 透露 信息: 通过 错误信息的提示,间接了解了 一些不便透露的信息,假如是用户不愿意透露的,那就侵犯了 隐私了.

---

• 参考文章
  • HTML5 script 标签里的 crossorigin 属性到底有什么用？

---

• 示例1: 使用 crossorigin的 script基本 元素
  • 可以使用下面的<script>脚本 元素告诉浏览器 执行来自https://example.com/example-framework.js的脚本 而不发送 用户凭据。

<script src="https://example.com/example-framework.js"
        crossorigin="anonymous"></script>

---

• 示例2: 引入 Bootstrap 4 框架 依赖的 jQuery 的代码

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>

---

⑶ async 属性: 异步 加载脚本(布尔属性,页面解析时 加载脚本,搭配 src 属性,仅限 外部脚本)

• HTML 5 <script>脚本 标签的 async异步 属性
  • async
    • [əˈsɪŋk]
    • 异步，非同步（asynchronous）
• 异步 加载脚本: async 属性规定 页面解析和渲染时，会 异步加载。
  • 该布尔属性 指示浏览器 是否在允许的情况下 异步 并行加载 该脚本。
  • 布尔属性
    • 指示 浏览器应该 异步加载脚本(加载 不打断页面解析和渲染)，然后在 下载脚本后 立即执行(执行 会打断 页面解析渲染)。
  • 异步加载: 脚本 相对于 页面的其余部分 异步地加载（当页面进行 解析时，脚本将被加载,相当于 同时进行 两个流水线一样,不在一个流水线上 完成,所以互不影响. ）
  • ★ 重点: asnyc
    • ① 异步加载: 会让脚本被 异步加载,这个时候 加载(下载) js 文件,不会打断 页面的解析渲染
    • ② 同步执行: 但是,一旦 js文件 下载完成,进行执行时,页面解析和渲染,就会被打断,然后执行脚本文件
    • ③ 区分 加载和执行: 加载和执行,是两个过程,而异步加载 async,只是异步 并行加载,执行并不是异步并行的,仍然会 打断页面解析 (如果执行的时候,页面还没有 解析完毕).
      • (这个是在 html5 规范文档上 翻译过来的,现在很多文章和主流前端学习网站上 都是错的,把 “异步加载”,翻译成 “异步加载和执行”,或者 “异步执行”, 其实执行 并没有异步,执行 仍然会打断页面解析(渲染/显示)一定要记住这点.)
      • 如下图,就是错误的翻译
    • 没有设置 async属性的脚本 : 加载(下载) 脚本文件时, 会 阻断 浏览器渲染页面
    • 设置async的脚本: 脚本 并行加载(下载) 与页面的渲染(解析) 互不影响,相当于 两条流水线,各干各的活.
      • 可以 边渲染 边下载 js文件，什么时候下载完成 什么时候执行

---

• 不异步执行 内联脚本: 该属性 对于内联脚本 无作用 (即没有src属性的脚本）。
• 限定使用
  • 仅用于 外部脚本: script-async 属性仅适用于
    • 外部脚本
    • 搭配属性: （所以, 只有在使用 src属性 时才使用 async属性）。
    • 同时使用: src 属性 和 async属性 必须一起使用

---

• 执行 外部脚本 和页面解析
  • 多种 执行外部脚本的方法：
    • Ⅰ. 异步加载: async="async"：
      • ① 并行加载(获取): 对于脚本，如果有async属性，那么脚本 将在 页面解析过程中被 并行获取,不会打断 页面的解析,互不影响.
      • ② 加载/下载完 立即执行: 并在 脚本文件加载(下载)完成 可用时(可能在 页面解析完成 之前) 进行执行。
      • ③ 执行 会打断解析: 加载 不打断页面解析,但 执行会打断 页面解析,记住,只是异步加载,执行 并不是异步的,还要回到原来的 流水线上.
      • 注意: 搭配 src 事项,异步加载, 仅限 外部脚本
    • Ⅱ. 延迟执行: defer="defer"
      • ① 并行获取: 如果 异步加载 async属性 不存在，而 延迟执行defer属性 存在，那么脚本将被 并行获取,不会影响 页面解析.
        • 加载/获取/下载,都是一个意思
      • ② 延迟执行: 并在页面完成解析后 进行执行,也不会影响 页面解析.
      • 注意: 搭配 src 属性,延迟执行, 仅限 外部脚本
    • Ⅲ. 同步加载
      • 又称 阻塞 模式，会打断 页面解析(渲染/显示)
        • ① 立即加载: 如果async,defer 两个属性 都不存在，则立即加载(获取) 脚本,并且 会打断 页面解析 (因为是同步的,相当于 是在一个流水线上)
        • ② 立即执行: 加载完成后, 立刻执行 脚本, 直到 脚本加载和执行 完成,才能进行 页面的解析/渲染/显示。
        • 这个时候,加载和执行 脚本, 都会 阻塞(打断)解析，多多少少 都会影响页面的显示速度,严重的时候,直接导致 页面白屏,什么内容也没有.
• 异步加载 注意事项: 永远不要 从异步脚本调用document.write()。
  • 在Firefox 3.6中，调用 document.write() 会产生 不可预知的效果。
  • 在Firefox 4中，从异步脚本调用document.write()没有效果(除了 向错误控制台 打印警告)。
• ★重点: 点击查看 【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】

---

• 示例1: 页面解析时, 脚本将会 被异步 并行加载：

<script type="text/javascript" src="demo_async.js" async="async"></script>

---

⑷ defer 属性: 延迟执行 (布尔属性,不是 延迟加载,加载是 并行的,搭配 src 属性,仅限 外部脚本 )

• <script> 脚本 标签的 defer延迟执行 属性

• 延迟执行

  • defer [dɪ’fɝ] 推迟
  • defer
  • ① 页面解析完成时,执行脚本: 这个布尔属性 被设定用来 通知浏览器 该脚本将在文档页面 解析完成后，触发 DOMContentLoaded事件前执行。
    • 并行加载:
      • 只有执行 是被延迟的,加载并不是,加载是 并行的,在页面解析的同时,脚本文件也 并行加载了,并且不会打断 页面解析.
  • ② 仅对 外部脚本使用: 如果缺少 src属性（即 内嵌脚本），该属性 不应被使用，因为这种情况下 它不起作用。对动态嵌入的脚本 使用async=false来达到类似的效果。
  • ③ 搭配属性: defer 必须和 资源地址 src 一起使用,必须指定了 外部脚本,才能用延迟执行.

• 延迟执行 defer 的使用时机: 如果脚本 不会改变 文档的内容

  • 加快 文档处理: 可将 defer 延迟执行 属性加入到<script>脚本 标签中，以便加快 处理文档的速度。
    • 有的 js 脚本 用 document.write方法 来创建 当前的文档内容
  • 因为浏览器知道 它将能够安全地 读取文档的剩余部分 而不用 执行脚本，
    • 先显示文档,再执行脚本: 它将推迟 对脚本的解释，直到 文档 已经显示给用户为止。

• ★重点: 点击查看 【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】

• defer 延迟执行 属性的使用：

  • defer="defer"

---

• 示例1: MDN 网站中,在 文档的 底部,</body>之前,就添加了 延迟执行的 脚本文件.

---

• 示例2: 延迟加载 (无关defer)
  • 如果 页面 初始的渲染, 并不依赖于 js 或者 css, 可以用 延迟加载
  • 即,最后加载js, css代码，把 引用外部文件的代码 写在最后 </body>前面。
  • 比如,一些按钮的 点击事件，轮播图动画的脚本 也可以放在最后。

<html>
   <head>
   </head>
   
   <body>

     <!--延迟加载  -->
     <script type="text/javascript" src="a.js"></script>
     <link href="a.css" rel="stylesheet" />
  </body>
</html>

---

⑸ integrity 属性: 验证资源 完整性 (生成算法-哈希值,搭配 src 属性)

• <script>脚本 标签的 integrity完整性 属性

  • integrity [ɪn’tɛɡrəti] 完整

  • 此属性包含 内联元数据，用户代理 可以使用这些元数据 来验证 所获取的资源 是否 已在没有意外操作的情况下 交付(比如,没有被 恶意劫持和篡改).

    • ① 资源 防篡改: 子资源 完整性(SRI:Subresource Integrity) 是 允许浏览器 检查其 获得的资源（例如从 CDN 内容分发网络 获得的）是否被篡改的 一项安全特性。
      • CDN abbr. 内容分发网络 Content Distribution Network
    • ② 验证 哈希值: 它通过 验证获取文件的哈希值 是否和你提供的哈希值一样 来判断资源 是否被篡改。

  • 浏览器如何处理 SRI (Subresource Integrity 子资源完整性)

    • 对比 哈希值:
      • ❶ 执行脚本 或应用样式前: 当浏览器在 <script>或者<link> 标签中遇到integrity完整性 属性之后，会在执行脚本 或者应用样式表之前 对比所加载文件的哈希值 和期望的哈希值。
      • ❷ 不一致时:
        • 拒绝执行脚本 和应用样式 + 返回 网络错误: 当 脚本 或者样式表的哈希值 和期望的不一致时，浏览器必须 拒绝执行脚本 或者应用样式表，并且 必须返回一个 网络错误 说明获得脚本 或样式表失败。

  • integrity完整性的属性值 = 哈希值

    • 属性值分成 两个部分: 属性值= 生成算法-哈希值
      • ① 生成算法 第一部分: 指定哈希值的 生成算法（目前支持 sha256、sha384 及 sha512）
      • ② 实际 哈希值 第二部分: 是经过 base64 编码的 实际哈希值，两者之间 通过一个短横（-）分割。
    • 多个 哈希值: integrity 值 可以包含 多个由 空格 分隔 的哈希值，只要文件 匹配其中任意一个哈希值，就可以 通过校验 并加载该资源。

---

• integrity 搭配属性:
  • 当没有指定 src 属性时，不能指定 integrity 属性。
• integrity存在的意义
  • ① 防止 篡改过的 文件: CDN(内容传递 网络 Content Delivery Networks) 虽好，但 CDN 有可能 被劫持，导致下载的文件 是被篡改过的（比如通过 DNS 劫持），有了integrity就可以检查文件是否是原版。
  • ② 本地文件 不需要integrity: 因为本地文件 用的域名 , 跟网页是同一个域名，不存在劫持的问题（或者劫持就连网站本身 一起被劫持了，那就不是 integrity 能解决的问题了），所以本地静态文件, 没有必要用这个属性。

---

• 更多 子资源完整性 介绍
• 在线生成 SRI 哈希值的工具

---

• 示例1:在 script 标签中增加 子资源 完整性 SRI
  • 可以使用以下的 <script>元素, 告诉浏览器在执行https://example.com/example-framework.js中的内容之前，必须 先比较该文件的哈希值 是否和预期的一致
  • 只有 哈希值 对比一致 才能执行。

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

---

⑹ src 属性: 外部脚本文件 地址

• <script>脚本 标签的 src资源 属性

  • 外部脚本文件 地址
    • src属性规定 外部脚本文件 的 URL。
    • ① 引用 外部脚本: 此属性 指定外部脚本的URI;这可以作为 直接在文档中 嵌入脚本的 替代方法。
    • ② 外部脚本 和内嵌脚本, 不要同时使用: 如果<script>脚本 元素 具有指定的 src属性，则不应该 在其标记中 嵌入脚本，因为这会导致 意外行为。
      • 因为只有 src资源 属性中 引用的文件中的 JavaScript 才会 添加到HTML页面。
  • 代码 重用
    • 外部脚本: 重复利用 js 代码
    • 有时，我们需要在网站的多个页面中运行 相同 JavaScript。不需要 重复编写 相同的脚本，只需
      • 在单独的文件中创建 JavaScript，
      • 并以.js 为后缀保存，
      • 然后使用<script> 标签中的src属性 引用该文件即可。

• 示例1: 链接一个 外部脚本文件

<script type="text/javascript" src="myscripts.js"></script>

---

⑺ charset 属性: 外部脚本的 字符编码(已废弃,继承 文档的字符编码)

• <script>脚本 标签的 charset字符编码 属性 [已废弃]
  • 脚本的 字符编码
    • charset字符编码 属性规定
    • 字符编码: 在 外部脚本文件中 使用的 字符编码。
      • 如果存在，它的值必须是与“utf-8” 不区分大小写的 ASCII 匹配。
      • 继承 文档字符编码: 已废弃,无需指定charset属性，因为 文档必须使用UTF-8，而script脚本 元素从文档中继承 字符编码,这个设置 就显得多此一举了.
  • 使用时机: 如果 外部脚本 文件中的字符编码
    • 与 主文件中的 编码方式不同
      • 就要用到 charset属性。
      • 基本上 不会出现这样的情况,大部分情况下 脚本文件和文档的 字符编码,都会是 utf-8,这个是全世界通用的,兼容性最强的 字符编码.
  • 默认的 字符编码是
    • ISO-8859-1。
    • 属于单字节编码，最多能表示的字符范围是 0-255，应用于 英文系列。比如，字母a的编码为 0x61=97。
    • 很明显，iso8859-1编码表示的 字符范围 很窄，无法表示 中文字符。但是，由于是 单字节 编码，和计算机 最基础的表示 单位一致，所以很多时候，仍旧使用iso8859-1编码来 表示。而且在很多协议上，默认使用 该编码。

---

• 示例1: 定义 外部脚本文件中 所使用的字符编码：

<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>

• 必须 关闭标签: 请注意，尽管<script>标签没有内容，
  • 结束的</script>标签也是 必需的。
• charset 属性与 src 属性一起使用，告诉浏览器
  • 用来编码这个 javascript 程序的
    • 字符集。
• charset 字符编码的 属性值
  • 任何一个 ISO 标准字符集 编码的名称。
  • character_encoding
    • 外部脚本文件 的 字符编码方式。
  • 常用的字符编码：
    • UTF-8
      • Unicode 字符编码
      • Unicode 转换格式（UCS Transformation Format）
      • abbr. 通用字符集（Universal Character Set）；
    • ISO-8859-1
      • 拉丁字母表 的字符编码

---

• 浏览器支持
  

---

1.2 防止 js 代码 在页面上显示

• <script>脚本 标签中js代码的处理
  • ①无法识别的js会 显示在页面(不应该显示的):无法识别 <script>脚本标签 的 浏览器
    • <script>脚本标签的js代码 显示到页面上。
  • ② 避免 js显示(在页面上)的 方法:
    • 注释标签+ 隐藏脚本: 为了避免浏览器这样做 ,我们应当在 注释标签中 隐藏脚本。
      • 解决方法: 把 js 代码 ,写在 注释标签中
        • 把 js 代码,作为注释掉,作为 注释内容的一部分.
      • ❶ 老式浏览器 忽略 注释标签的内容:(不会把脚本 js显示在页面上了)
        • 老式的浏览器, 无法识别 脚本<script> 标签的, 但是 能识别注释标签
          • 这样 js代码 作为 被注释的内容, 就不会把 脚本标签的js 内容 写到页面上
      • ❷ 新式浏览器 执行脚本: (执行 注释标签的内容)
        • 新式的浏览器,就算js代码 写在注释标签里,也会执行 这些脚本
          • 脚本js代码 放在注释标签中 不影响执行
• 浏览器支持
  • 所有浏览器 都支持<noscript>无脚本替代 标签。

---

♣. js 代码的 特别注释 方法 (加// 和 ')

• 2 种 特别注释js代码的方式
  • ① JavaScript 的特别注释
    • html 注释标签<!-- -->+ 结束之前 加上 js 的注释标签//: <!-- js代码 //-->
  • ② VBScript 的 特别注释: + 单引号
    • <!-- '-->

JavaScript 注释
  <!-- 
  //-->
VBScript  注释
  <!--
   '-->

• JavaScript

<script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>
  
  <noscript>Your browser does not support JavaScript!</noscript>

• VBScript

<script type="text/vbscript">
   <!--
   document.write("Hello World!")
   '-->
  </script>
  
  <noscript>Your browser does not support VBScript!</noscript>

---

• 示例1: 兼容 不支持脚本(关闭脚本)的浏览器,显示提示内容.

<body>

<script type="text/javascript">
	<!--
	document.write("Hello World!")
	//-->
</script>
<noscript>
  <p>本页面需要 浏览器支持（启用）JavaScript</p>
</noscript>
 
</body>

---

1.3 知识拓展: MIME 类型

• (Multipurpose Internet Mail Extensions)
  • 多用途 互联网 邮件 扩展类型。
• MIME 类型 用途
  • ① 文件名: 一些 客户端 自定义的文件名
  • ② 打开方式: 以及一些 媒体文件打开方式。
    • 打开文件的方式 类型: 设定 某种扩展名的文件 用一种应用程序 来打开的 方式类型
    • 指定 相应的应用程序: 当该扩展名文件 被访问的时候
      • 浏览器会 自动使用 指定应用程序来打开
• MIME 类型 支持
  • 是一个 互联网标准
  • 扩展了 电子邮件标准，使其能够支持：
    • 非 ASCII 字符文本；
    • 非文本格式附件
      • （二进制、声音、图像等）；
    • 由多部分（multiple parts）组成的消息体；
    • 包含 非 ASCII 字符的 头信息（Header information）。
• MIME 类型 应用历史
  • 电子邮件系统 到浏览器: 在1992年最早应用于 电子邮件系统，但后来也应用到 浏览器。
  • MIME 类型 用于浏览器
    • ① 说明 多媒体数据类型: 服务器会将 它们发送的 多媒体数据的类型
      • 告诉浏览器，而通知手段就是
        • 说明 该多媒体数据的 MIME类型，从而让浏览器知道
          • 接收到的信息 哪些是MP3文件
          • 哪些是 Shockwave文件等等。
    • ② 指明类型 对应插件: 服务器将 MIME 标志符放入传送的数据中 来告诉浏览器
      • 使用 哪种插件 读取相关文件。

---

• MIME 类型组成
  • 数据的 大类别 + 具体的种类
  • 每个MIME类型由两部分组成，前面是
    • 数据的大类别
    • 例如声音audio、图象image等，
  • 后面定义
    • 具体的种类

---

• 常见的 MIME类型(也称为 媒体类型)：
  • 超文本标记语言文本 .html
    • text/html
  • xml文档 .xml
    • text/xml
  • XHTML文档 .xhtml
    • application/xhtml+xml
  • 普通文本 .txt
    • text/plain
  • RTF文本 .rtf
    • application/rtf
  • PDF文档 .pdf
    • application/pdf
  • Microsoft Word文件 .word
    • application/msword
  • PNG图像 .png
    • image/png
  • GIF图形 .gif
    • image/gif
  • JPEG图形 .jpeg,.jpg
    • image/jpeg
  • au声音文件 .au
    • audio/basic
  • MIDI音乐文件 mid,.midi
    • audio/midi,audio/x-midi
  • RealAudio音乐文件 .ra, .ram
    • audio/x-pn-realaudio
  • MPEG文件 .mpg,.mpeg
    • video/mpeg
  • AVI文件 .avi
    • video/x-msvideo
  • GZIP文件 .gz
    • application/x-gzip
  • TAR文件 .tar
    • application/x-tar
  • 任意的二进制数据
    • application/octet-stream

---

• 用于 WAP服务器 的MIME类型有：
  • MRP文件（国内普遍的手机）
    • .mrp application/octet-stream
  • IPA文件(IPHONE)
    • .ipa application/iphone-package-archive
    • .deb application/x-debian-package-archive
  • APK文件(安卓系统)
    • .apk application/vnd.android.package-archive
  • CAB文件(Windows Mobile)
    • .cab application/vnd.cab-com-archive
  • XAP文件(Windows Phone 7)
    • .xap application/x-silverlight-app
  • SIS文件(symbian平台/S60V1)
    • .sis application/vnd.symbian.install-archive *（下有）
  • SISX文件(symbian平台/S60V3/V5)
    • .sisx application/vnd.symbian.epoc/x-sisx-app
  • JAR、JAD文件(JAVA平台手机通用格式)
    • .jar .jad
• MIME 类型 标准化:

  • Internet 中有一个专门组织 IANA 来确认标准的 MIME 类型，但 Internet 发展的太快，很多应用程序 等不及 IANA 来确认他们使用的 MIME 类型为标准类型。

  • IANA abbr. 互联网 地址编码 分配机构（Internet Assigned Numbers Authority）

  • 未标准化: 因此他们使用 在类别中以x-开头的方法 标识这个类别

    • 还没有成为标准，
      • 例如：x-gzip，x-tar等。

  • 未标准化 也可以使用的类型: 事实上 这些类型 运用的很广泛，已经成为了事实标准。

    • 只要 客户机和服务器 共同承认 这个 MIME 类型，
      • 即使它是 不标准的类型也没有关系，

  • 缺省值设置: 而 Web服务器 和浏览器（包括操作系统）中，

    • 缺省 都设置了 标准的和常见的MIME类型

  • 类型识别: 只有对于 不常见的 MIME类型，

    • 才需要同时设置 服务器和客户浏览器，以进行识别。

---

• 服务器区分 MIME 类型:
  • 文档的后缀: 由于MIME类型与 文档的后缀 相关，因此服务器使用 文档的后缀 来区分 不同文件的MIME类型
    • 文档后缀和 MIME 类型的 对应关系:
      • 服务器中 必须定义 文档后缀 和MIME类型之间的 对应关系。
• 服务器 如何 告诉 客户端 数据的 MIME 类型 ?
  • 通过 Content-type定义的类型: 而客户程序 从服务器上接收数据的时候，
    • 先发送数据类型,再发送数据: 它只是从服务器接受 数据流，并不了解 文档的名字，
    • 因此服务器必须
      • 使用 附加信息 来告诉客户程序 数据的MIME类型。
        • 服务器在发送 真正的数据之前，
          • 就要 先发送 标志数据的 MIME类型的信息，
          • 这个信息使用由 Content-type关键字 进行定义
• 示例1: 对于 HTML文档，服务器将 首先发送
  • 以下两行 MIME标识信息,这个标识 并不是 真正的数据文件的一部分。

Content-type: text/html

• 数据和数据类型分隔: 分隔 MIME 信息 和真正的数据
  • 注意，第二行为 一个 空行，这是必须的，
    • 使用这个空行的目的是
      • 将MIME信息 与真正的数据内容 分隔开。

---

• 了解 MIME 类型更多信息

• IANA MIME 类型，获得完整的标准 MIME 类型列表

---

2. ★ noscript 脚本的替代内容 (兼容 可搭配 特别注释标签)

• 脚本的 替代内容
  • <noscript>元素用来 定义
  • ① 替代内容: 在 脚本未 被执行时(不支持脚本 / 关闭脚本) 的 脚本替代内容（文本）。
  • ② 识别脚本标签 无法支持脚本: 可识别 <script> 脚本 标签 但无法支持 其中的脚本 的浏览器。
    • html 代码: 当 ❶ 不支持 页面上的 脚本类型, 或当前在浏览器中 ❷ 关闭脚本时 要插入的 HTML 部分。
  • ③ 属性: 这个元素 只包含 全局属性。

---

⑴ 脚本 替代内容的 显示

• 脚本 替代内容的 显示
  • ① 支持(启用)脚本 不显示:
    • 如果浏览器 支持脚本,也 启用了脚本，那么它
      • 不会显示出 <noscript>脚本替代内容 标签中的文本,即使是在 正文<body>中的一部分。
  • ② 不支持(关闭)脚本 显示:
    • ❶ 浏览器 不支持脚本
    • ❷ 浏览器支持脚本，但 脚本 被禁用
      • 无法支持 其中的脚本类型 的浏览器,会显示<noscript>脚本替代内容 标签中的文本。
        • 网站虽然 不能强制用户 启用浏览器的 Javascript，但是可以 提示用户的浏览器 已经禁用脚本，来达到更好的用户体验。(有的时候,用户 都不知道自己禁用了 脚本,不知道问题出在了哪里.)
    • 下面的 facebook 网站 的提示,明确的告诉用户,js 被禁用了,用户就知道哪里出了问题
    • 

---

• 示例1: 不支持脚本.关闭脚本,脚本无法执行时,显示一个相关的链接,进行跳转.

<noscript>
  <!-- 链接到 外部文件 -->
  <a href="https://www.mozilla.com/">外部链接</a>
</noscript>
<p>Rocks!</p>

---

⑵ noscript 标签 存在的意义 (提示 ,脚本回退 , 动态脚本)

• 脚本替代内容 noscript标签 存在的意义

  • ① 不支持的 提示信息: 在不支持 脚本的浏览器中,给用户提示信息

  • ② 建议开启脚本 提示: 在禁用脚本的浏览器中, 使用 noscript 标签 给网站用户传达一个信息，比如, 如果不启用 Javascript，网页内容和效果 可能不能 完全被呈现。

    • 不会 开启脚本: 但有些用户不会开启脚本的话，这样的提示信息 对他也并没有什么实际的帮助了(但总比没有要好的多,至少知道问题出在哪里)。

  • ③ 脚本的 回退内容: 或者一些 脚本禁用的情况下,显示的回退内容,比如 一个按钮,一个链接等.

    • 这样可确保,没有脚本,也能为用户提供 一些有用的信息.
      • 尽量 不要使用,因为 脚本启用的情况下,脚本也可能会 执行失败,这个时候, 脚本替代内容就 不显示,应该执行的脚本 也没执行,赔了媳妇又折兵,得不偿失了.
      • 使用 无关noscript的动态脚本 替代,见下方 示例2 ↓

  • ④ 无脚本 如何减少影响: 在网站设计的时候, 应该多考虑在没有 脚本 支持的情况下，如何也能 尽量减小 对 用户的浏览体验的 影响。

---

• 示例1: 在下面的示例中，使用noscript元素 为脚本提供回退。
  • 脚本执行了,则 脚本替代内容noscript的标签内容,那个提交按钮不显示,
    • 否则,就算脚本 不执行,也会显示一个 提交按钮,作为回退的内容.
  • 当脚本被禁用时，一个按钮 将在服务器端 执行计算。当启用脚本时，值将被 动态计算。

<form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
 </script>
 <noscript>
  <input type=submit value="Calculate Square">
 </noscript>
</form>

---

• 示例2: ★ 动态脚本 页面
  • noscript最为脚本回退的缺点:
    • 浏览器 启用脚本的时候，页面的脚本 可能也会失败。这个时候, 脚本替代内容不显示,应该执行的脚本 也没执行,两个都 没用了.
    • 出于这个原因，通常最好避免使用noscript，而是设计脚本 将页面从无脚本页面 更改为 动态脚本页面，如下面的示例所示:
  • 这个技术 在 XML文档中 也很有用，因为不允许使用 noscript。
  • 动态脚本 设置方法: 先添加,再删除.
    • ❶ 设置 一个替代品: 提交按钮 (提交到服务器 进行计算操作)
    • ❷ (脚本成功执行) 删除替代品:
      • 在 js 代码最后写上删除"提交按钮"的 代码,这样,假如 成功执行脚本了,多余的 用作替代的 提交按钮 就不需要,会被删除了
      • 假如js 没有成功执行,最后的那个删除代码也不会执行, 就还保留那个 用作替代的 “提交按钮”.
    • 这就是 双重保证.

<form action="calcSquare.php">
    <p>
        <label for=x>Number</label>:
        <input id="x" name="x" type="number">
    </p>
    <!-- 这个按钮,是个替代品,注意,并没有放在 noscript 标签中  -->
    <input id="submit" type=submit value="Calculate Square">
    
    <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = 'Type a number; it will be squared right then!';
    x.form.appendChild(output);
    x.form.onsubmit = function() {
        return false;
    }
    x.oninput = function() {
        var v = x.valueAsNumber;
        output.textContent = v + ' squared is ' + v * v;
    };
    //js 代码成功执行,就删除多余的 用作替代的 提交按钮
    var submit = document.getElementById('submit');
    submit.parentNode.removeChild(submit);
    </script>
</form>

---

• ⑸ 脚本替代内容 <noscript> 标签的 内容限定
  • noscript 元素由 HTML解析器, 根据在调用解析器时, 是否启用了 脚本 而进行不同的处理。(存疑: 开发者怎么知道 用户的脚本是不是启用的呢 ?按照这个来限定标签的内容,太扯了吧…)
    • 详情见 文档规范,这里不翻译了,无法理解的内容,翻译了意义也不大.
  • 标签位置: 大部分情况下,脚本替代内容 <noscript>是写在 <body>里面的,作为正文的一部分
  • 标签内容: 目前来看,标签的内容,可以是 纯文本,也可以是一些 其他的 标签(不能是 自身,不 自嵌套),主要用来提示用户 是否支持脚本,脚本是不是被禁用了的一些信息.

---

3. ★ applet 嵌入 插件/ 小程序 (已废弃,用 object 替代)

• applet

  • ['æplɪt]
  • 小应用程序

• 嵌入 插件(小程序)

  • 嵌入java 小程序: <applet>标签定义 嵌入的 applet。用于: 将Java 小程序 嵌入到文档中.
    • 不再支持 插件: 不建议在 Web上使用 Java applet;大多数浏览器 不再支持插件的使用，包括 Java插件。

• 已废弃: HTML 4.01 与 HTML5 之间的差异

  • 在 HTML5 中，不支持 applet元素, 使用 object标签代替。
  • 在 HTML 4.01 中，不赞成使用 applet元素。

• applet标签的 浏览器支持

  • 某些浏览器中 依然存在对 <applet>标签的一些支持，但是需要 额外的插件和安装过程 才能起作用。

  • 不要使用: 已废弃. 这个特性已经过时了。

  • 尽管它在一些浏览器中 仍然可以工作，但它的使用 是不被鼓励的，因为它可以随时 被删除。尽量避免使用它。这个支持度,就是在告诉我们: 别用我 !
    

---

• 示例: 一个嵌入的 Java applet：

<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
  <param name="difficulty" value="easy">
  <b>Sorry, you need Java to play this game.</b>
</applet>

• applet 的必需属性

属性名	属性值	用于
code	URL	规定 Java applet 的 文件名。
object	name	定义了包含该 applet 的一系列 版本的资源名称。

---

• applet 的可选属性

属性名	属性值	用于
align	left , right , top,bottom,middle,baseline,texttop,absmiddle,absbottom	定义 applet 相对于周围元素的 对齐方式。
alt	text	规定 applet 的替换文本。
archive	URL	规定 档案文件的位置。
codebase	URL	规定 code 属性中指定的 applet 的基准 URL。
hspace	pixels	定义围绕 applet 的 水平间隔。
name	unique_name	规定 applet 的名称（用在脚本中的）。
vspace	pixels	定义围绕 applet 的 垂直间隔。
width	pixels	定义 applet 的宽度
height	pixels	定义 applet 的高度

---

4. ★ embed 嵌入 外部内容 (推荐用 object,iframe 替代)

• embed [ɪm’bɛd]
  • 使嵌入
• 嵌入
  • <embed> 嵌入标签, 定义 嵌入的内容，比如 flash 动画,视频 等。
    • embed元素为外部(通常是非 html)应用程序 或 交互式内容 提供一个 集成点 (想要嵌入进来,需要用到这个 集成点)。
  • 嵌入 外部内容:
    • <embed>嵌入 元素 将外部内容 嵌入到文档中 指定的位置。
    • 此内容 由外部应用程序 或其他交互式内容源(如浏览器插件) 提供。
  • 使用注意事项:
    • 请记住，大多数现代浏览器 已经弃用并取消了 对浏览器插件的支持
    • 如果希望网站 可以在普通用户的浏览器上 运行，那么依靠 <embed>通常是不明智的。
    • 少用 / 不用: 插件的支持度差,所以这个<embed> 嵌入 标签 要少用或者不用
    • 应该避免 引用 不可信的资源，因为这样的资源 可以用来 实例化插件 或 运行脚本，即使 作者使用了 Flash“allowScriptAccess”参数 等 特性。
• 标签类型
  • 空 标签,要正确关闭: <embed />,只有 属性,没有 标签内容,因为没有 结束标签.

---

• 嵌入 外部内容 embed标签和属性的 浏览器支持

  • 不同浏览器之间 显示有差异。
  • Blink 内核浏览器（Chrome，Opera）会显示 HTML 资源的内容
  • 在版本45之前，Firefox不显示HTML资源的内容，而是显示一条 消息，说明内容需要插件（见 bug 1237963）。建议使用 <object> 或 <iframe> 元素。
  • 

• 嵌入 外部内容<embed> 标签 的属性

属性名	属性值	用于
src	=url	资源地址. 嵌入内容的 URL。
type	= type	资源类型. 定义嵌入内容的 类型。
width	=pixels	设置嵌入内容的 宽度。
height	=pixels	设置嵌入内容的 高度。

• 点击查看 更多属性介绍
  • 除了name、align、hspace和vspace之外，任何 没有名称空间 的属性 都可以在 embed元素上 指定，只要它的名称 是 xml 兼容的，并且不包含 ASCII upper alphas。
  • 然后,将这些属性 作为 参数 传递给插件。

---

• 示例1: 嵌入 一个 flash 动画：
  • 如果用户 没有插件(例如，如果插件供应商 不支持 用户的平台)，那么用户将 无法使用资源。

<body>

		<embed src="http://www.w3school.com.cn/i/helloworld.swf" type="application/x-shockwave-flash" width="200" height="200" style="border:1px solid" />

</body>

---

• 示例2为了给插件 传递一个参数quality=“high”，可以 指定一个属性:

<embed src="catgame.swf" quality="high">

• 这相当于 以下使用一个对象object元素代替:

<object data="catgame.swf">
   <param name="quality" value="high">
</object>

---

• 示例3: 嵌入 一个视频

<body>
	<embed type="video/webm"
       src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
       width="250"
       height="200">
</body>

---

5. ★ object 嵌入外部资源

• object ['ɑbdʒɛkt]

  • 物体,目标,对象

• 嵌入的 对象

  • 定义一个 嵌入的对象。
  • 嵌入 外部资源: <object>嵌入对象 标签 表示外部资源，可以将其视为 图像、嵌套浏览上下文 或插件要处理的 资源。
    • 添加 多媒体: 使用 <object>嵌入对象 标签 向页面 添加多媒体。
    • 嵌入对象的 数据和参数: <object>允许我们 规定 插入页面的对象的 数据和参数，
    • 显示和操作数据 的代码: <object>可用来 显示和操作 数据的 代码。

• <object>嵌入对象标签 可包含对象

  • ① 图像(一般不建议,建议使用<img>图像标签)
  • ② 音频
  • ③ 视频
  • ④ Java applets(小程序)
  • ⑤ ActiveX
  • ⑥ PDF
  • ⑦ Flash
  • ⑧ 网页 (.html文件)

• <object>标签 的初衷是

  • 取代img 图片 和 applet(已废弃)小程序 元素。
  • 不过由于 漏洞以及缺乏浏览器支持，这一点并未实现。

• 兼容性: 如果未显示 <object> 嵌入对象 元素，

  • 就会执行位于<object>和 </object>之间的代码。

  • 通过这种方式，我们能够

    • 嵌套多个 <object>标签
    • （每个 对应一个浏览器）。

  • 图像 文件: 不要对图像 使用 <object> 标签，请使用

    • 图像 <img> 标签 代替。

---

• 思考: embed,object两个 嵌入标签有什么区别?
  • 资源地址 属性 不一样: embed-src属性 , object-data属性
  • …待补充 (都是嵌入 外部资源,为什么要多此一举的 定义两个标签呢 ?)

---

• object标签和属性的 浏览器支持
  • 几乎所有主流浏览器 都拥有部分对 <object>嵌入对象 标签 的支持。
  • 
  • 

---

5.1 object 嵌入对象 标签 的属性

属性名	属性值	用于
① name	=unique_name	为对象定义 唯一的名称（以便 在脚本中使用）。
②form	=form_id	所属表单. html5 新属性 .规定 对象所属 的 一个或多个 表单。
③ data	=URL	资源地址. 一个合法的 URL , 作为资源的地址，资源地址 data 和资源类型 type 中, 至少 有一个必须存在。如果在对象元素上指定了 itemprop 属性，那么也必须指定data属性。
④ type	=MIME_type	资源类型. type属性(如果存在)指定 资源的类型。如果存在，属性必须是 有效的 MIME类型 字符串。
⑤ usemap	URL,#map-name	关联到 图像映射. 用object指定的图像,和 图片映射map标签相关联,关联关系 object-usemap="#map-name"。img定义的图像,和这个 方法一致. 限定 图像使用: 如果 嵌入对象object元素 不表示图像，则必须忽略 该属性。
⑥ height	pixels	定义 对象的 高度。
⑦ width	pixels	定义 对象的 宽度。
archive	URL	H4 可用, H5 已废弃 .由 空格分隔的 指向档案文件 的 URL 列表。这些档案文件 包含了 与对象相关的资源。
border	pixels	已废弃 .控件周围 边框的宽度，以像素 为单位。
classid	class ID	H4 可用, H5 已废弃 .对象实现文件的 地址 (已废弃)。它可以与data属性一起使用，或者代替 data属性。定义嵌入 Windows Registry 中或某个 URL 中的 类的 ID 值，此属性可用来 指定浏览器中 包含的对象的位置，通常是一个 Java 类(.class文件,文件中有 小程序 实现代码)。
codetype	MIME type	H4 可用, H5 已废弃 . 通过 classid 属性 所引用的 代码的 MIME 类型。
codebase	URL	H4 可用, H5 已废弃 .定义 在何处可找到 对象所需的代码，提供一个 基准 URL。对象 所在目录地址 /根路径 (已废弃)
declare	declare	H4 可用, H5 已废弃 .可定义此对象 仅可被声明，但不能 被创建或例示，直到此对象 得到应用为止。
standby	text	H4 可用, H5 已废弃 .定义 当对象正在加载时 所显示的文本。

---

• 示例1:向页面 嵌入一个 pdf文件
  • 注意: 数据的 url 是用 data 数据属性 来引用的,不是src资源属性

<body>
	<object type="application/pdf"
	    data="https://interactive-examples.mdn.mozilla.net/media/examples/In-CC0.pdf"
	    width="650"
	    height="500">
	</object>
</body>

---

• 示例2: 嵌入 页面
  • 使用 嵌入对象object元素 , 将 HTML页面, 嵌入到另一个页面中。

    <figure>
        <object data="https://html.spec.whatwg.org" width="600" height="500"></object>
        <figcaption>HTML 标准规范文档</figcaption>
    </figure>

---

⑴ form 属性: 指定 所属表单 (=form-id)

• <object>标签的form所属表单 属性

  • 定义和用法
    • form 所属表单 属性规定 <object> 元素 所属的一个或多个表单。
      • 绑定到表单: 把表单外的 <object> 嵌入对象 标签, 绑定到 指定 id的表单中
      • object-form=form-id
  • object-form所属表单 的属性值
    • form_id
    • 规定 <object> 元素所属的一个或多个 表单的 id列表，
      • object-form=form-id;
    • 以 空格 分隔。

• 示例1: 让位于表单之外的 <object>元素, 仍然是表单的一部分：

<form action="demo_form.asp" method="get" id="form1">
	First name: <input type="text" name="fname" /><br />
	<input type="submit" value="Submit" />
</form>

<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1">
</object>

---

⑵ data 属性: 外部资源 地址

• <object>标签的data数据 属性

  • 外部资源 地址

    • data (如果存在) 指定 资源的 URL。
      • 如果存在，属性必须是 有效的 非空 URL。
      • 必须 至少定义一个data 数据属性 或 type 类型属性。

  • object- data 属性值 = url

    • 指定 资源的 URL, 该 URL 可能是
      • ❶ 相对于 当前文档的 基本 URL 的
        • 绝对 URL / 相对 URL，
      • ❷ 相对于 codebase (已废弃) 属性 提供的 URL 的
        • 绝对 / 相对 URL。

  • data 属性 和 <img> 标签中的 src 属性之间的差别

    • data 属性允许包含
      • 几乎 任何 文件类型，(这么厉害的吗…海纳百川啊…)
      • 而不仅仅是 图像文件。

---

⑶ archive 属性: 资源档案 地址(已废弃)

• <object>标签的archive档案url 属性【H4 可用,H5 已废弃】
  • archive
    • ['ɑrkaɪv], 档案文件
  • object-archive资源档案地址 的属性值
    • 对象的 资源档案的uri, 空格分隔 列表.
  • 预先下载 对象集
    • 预先下载: 因为性能方面的原因，可以选择 预先下载 包含一个或多个档案中的 对象集。
      • 依赖 其他类: 对基于 Java 的应用程序来说 尤其是这样，在这些应用程序中，一个 Java 类 将会依赖于 很多其他类 才能完成它的工作。
  • archive 资源档案 属性值
    • 一个用引号括起来的
      • URL 列表
    • 每个 URL = 1 个与对象相关的 资源档案文件
      • 一个在 显示或执行 对象之前, 浏览器 需要加载的 资源档案 文件。
        • 与对象相关: 这些档案文件 包含了 与对象相关 的资源。

---

⑷ classid 属性: 对象实现文件(程序)的 地址(一般是 文件名) (已废弃)

• <object>标签的classid类url 属性 [ H4可用,H5已废弃]
  • 对象实现文件的 地址 (存疑)
    • classid属性, 指定
      • 对象实现文件的 URI。它可以与data属性一起使用，或者代替data属性。
      • java类: 指定 通常是一个 Java 类。(.class 文件,文件中有一个 小程序 实现代码)
  • classid属性值
    • URL:对象实现的 绝对或相对的 URL。
    • 相对于谁: 相对 URL 是
      • 提供了codebase属性的话，相对于codebase 属性 指定的 URL 而言的；
      • 否则，它们是 相对于 当前文档的 URL。

---

• 示例1: 为了执行 包含在 clock.class 文件中 的时间 Java applet 小程序，可以在 HTML 文档中 包含如下的代码：
  • 对象,包含在 clock.class文件中.

<object classid="clock.class"></object>

• 浏览器将会用
  • 当前文档的基本 URL 为这个小程序 查找代码。
• 因此，如果 当前文档的 URL 如下所示：

http://www.w3school.com.cn/time.html

• 浏览器将会在 下列地址 为我们的 clock.class 实例获取 小程序的 代码：

http://www.w3school.com.cn/clock.class

• classid属性与<applet>标签的 code 属性 类似，提供了
  • 文件名: 对象实现相关的文件 的文件名。

---

⑸ codebase 属性: 对象 所在目录地址 /根路径 (已废弃,可搭配 classid 属性)

• <object>标签的codebase基本路径 属性
  • 根路径
    • codebase 属性是一个可选的属性，提供了 一个基本(基准/根路径)的 URL。
    • 根路径: 用于解析 由classid、data或archive存档属性 指定的 相对 uri的 根路径。
      • 如果没有指定，默认值是: 当前文档的 基本URI。
  • codebase 根路径的 属性值
    • classid 属性指向对象 所在目录地址 url
      • 一个 URL，
      • 该 URL 指向的目录 包含了 classid 属性 所引用的对象。
      • 路径 覆盖: codebaseURL
        • 会覆盖 当前文档的基本 URL，但不会永久替代它。
      • 默认 当前文档路径: 如果不使用 codebase 属性，
        • 这个基本 URL 就是当前文档 ur

---

• 示例1: 假设文档 来源于 http://www.w3school.com.cn，但是这个时钟 applet 放在一个名为 classes 的单独目录中。
  • 通过指定classid= "classes/clock.class" 无法获得这个 applet。相反，需要将 codebase属性和新的基本 URL 包含在内：

<object classid="clock.class" codebase="http://www.w3school.com.cn/classes/">
</object>

• 这行语句 可以解析为这个 URL：

http://www.w3school.com.cn/classes/clock.class

• 尽管我们在此例中 使用了绝对 URL，实际上也可以使用 相对 URL。例如，applet 往往和主机文档 一起保存在 同一台服务器上，因此，处于重新定位的缘故，为 codebase指定一个相对的 URL，情况往往更好一些，例如：

<object classid="clock.class" codebase="/classes/">
</object>

• 搭配属性
  • codebase 属性与 classid 属性 配合使用，可以
    • 指定对象的 完整 URL。
      • ❶ 根 路径: codebase = 指定路径 = 绝对 or 相对 路径
      • ❷ 文件名: classid = 指定文件名

---

⑹ codetype 属性:对象实现文件(程序)的 类型 (已废弃, 搭配 classid 属性)

• <object>标签的codetype代码类型 属性
  • 对象实现文件的 类型: 由对象实现文件 地址 classid指定的 数据的内容类型。
    • 代码类型: codetype 属性用于 标识 程序代码类型。
      • classid 指定的数据: 由classid 指定的数据 的内容类型。
  • 使用 codetype 属性 条件
    • 浏览器无法决定 MIME类型,
    • 服务器 没有传输正确的 MIME 类型 时
  • 只有在
    • 浏览器无法 根据 classid 属性决定 applet 的 MIME 类型，
    • 或者如果在 下载某个对象时 服务器没有传输正确的 MIME 类型的情况下，
      • 才需要使用codetype 属性。

---

♣. codetype 和 type 的区别(分别针对 classid 和 data 属性)

• codetype 代码类型 属性与 type类型 属性的区别
  • ❶ 程序代码 类型: codetype 属性用来
    • 标识 程序代码类型，classid 指定的数据
  • ❷ 数据文件 类型: type属性用来
    • 标识 数据文件类型,data指定的数据

---

• 示例1: 显式地 告知浏览器，对象的代码是 Java：

<object classid="clock.class" codetype="application/java">
</object>

---

⑺ declare 属性:指示元素 仅仅是个声明 (布尔属性,已废弃,实例化,延迟下载)

• <object>标签的declare声明 属性[H4可用, H5 已废弃]
  • 防止 对象下载和处理:
    • 定义 对象: declare 声明 属性可以 定义一个对象，
      • 但同时, 防止浏览器 进行 下载和处理。
        • 直到对象 被应用了,才下载和处理
    • 仅声明 和 实例化:
      • 此布尔属性的存在 使此元素 仅仅是个声明。
      • 对象必须被随后的<object> 元素 实例化。
    • 元素重用: 在 HTML5 中，完整的重复<object>元素，可以重用元素。
  • 与name 属性一起使用时，
    • 前置声明: 这个工具类似于 更为传统的编程语言中的 某种前置声明
  • 这样的声明能够
    • 延迟下载: 延迟 下载对象的时间，
    • 直到这个对象 确实在文档中 得到了应用。

---

6. ★ param 为嵌入对象 提供参数 (搭配 object 标签,name,value 属性)

• param

  • [pə’ræm]
  • 参数（Parametric）
    • [pærə’metrɪk]

• 嵌入对象的 参数

  • <param> 元素定义了 嵌入对象<object>元素的 参数。
  • ① 提供参数:
    • <param> 参数 标签可为 包含它的 嵌入对象<object>或者 小程序<applet> (已废弃)标签 提供参数。
    • 它本身 并不代表 任何东西。
  • ② 参数param标签的 位置: 作为<object>的子元素, 为<object>元素定义参数。( <applet> 已废弃)

• 正确关闭: HTML 与 XHTML 之间的差异

  • 在 HTML 中，<param> 标签 没有结束标签。
  • 在 XHTML 中，<param>标签 必须被正确地关闭。
    • <param />

• 参数 param 标签和属性的 浏览器支持

  • 

---

6.1 param 嵌入对象的参数 的属性

• <param> 参数 标签的必需的属性

属性名	属性值	用于
name	unique_name	定义 参数的 名称（用在脚本中）。

• <param> 参数 标签的可选的属性

属性名	属性值	用于
value	value	指定 参数的 值。
type	MIME type	已废弃 . 规定 参数的 MIME 类型（internet media type）。仅当valuetype=“ref”时才使用。指定 (在value指定的 URI中找到的) 值的MIME类型。
valuetype	=data , ref , object	已废弃 . 规定 值的 MIME 类型。指定value属性的类型

---

• param-valuetype值类型 属性
  • 指定value参数的值 的类型。可能的值是:
    • ① 数据 data:默认值。该值 作为字符串 传递给对象的实现。
    • ② 资源URIref:该值是 存储运行时值的 资源的URI。
    • ③ 对象 idobject:同一文档中另一个<object>嵌入对象的 ID。
• 总结: 因为<param>参数 标签 废弃了两个属性
  • 常用属性: 就是name,value名称和值 属性了
  • 两个属性都 必须存在。它们可能有 任何值。

---

• 参数param标签的 name/value属性值
  • 给定的 名称-值 对:
    • 如果两个属性 name, value 都存在，并且 参数param的父元素是 嵌入对象object元素，那么元素 将使用 给定的名称-值对定义参数。

---

• 示例1: 嵌入 flash影片, 嵌入带有参数的 flash影片

<!-- 嵌入 flash影片 -->
<object data="movie.swf"
  type="application/x-shockwave-flash"></object>

<!-- 嵌入 带有参数的 flash影片 -->
<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

---

• 示例2: 如何在 HTML 中, 使用插件(在本例中 是 Flash 插件，用于显示 视频文件)。
  • ① 回退: 为 没有启用 Flash 的用户 提供了回退
    • ❶ video 提供视频: 使用 视频 video元素 为使用支持视频video的用户代理的用户 显示视频
    • ❷ 视频 链接: 为既没有Flash, 也不支持视频video的浏览器 的用户 , 提供 视频链接。
  • ② 嵌套关系
    • p > object
      • object > param*3 | video
        • video > a

    <p>查看我的视频:
        <object type="application/x-shockwave-flash">
            <param name="movie" value="https://video.example.com/library/watch.swf">
            <param name="allowfullscreen" value="true">
            <param name="flashvars" value="https://video.example.com/vids/315981">
            
            <video controls src="https://video.example.com/vids/315981">
                <a href="https://video.example.com/vids/315981">View video</a>.
            </video>
        </object>
    </p>

---

• 示例3: 使用 参数 param元素 将参数 传递给插件，在本例中是 O3D 插件。
  • 嵌套关系
  • p > object | script
    • object > param | img | p
      • p > a

    <!DOCTYPE HTML>
    <html lang="en">

    <head>
        <title>O3D Utah Teapot</title>
    </head>

    <body>
        <p>
            <object type="application/vnd.o3d.auto">
                 <!-- o3d的特征 / 浮点纹理 -->
                <param name="o3d_features" value="FloatingPointTextures">
                
                <img src="o3d-teapot.png" title="3D Utah Teapot 使用O3D渲染的插图." alt="当用 O3D 渲染 the Utah Teapot, 它看起来是蹲式的茶壶上 有闪亮的金属光泽, 周围都是反光，有一层淡淡的阴影
照明。">
                <p>要查看由 O3D 在您的计算机上 实际呈现的茶壶，请下载并安装 <a href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D 插件</a>.</p>
            </object>
            <script src="o3d-teapot.js"></script>
        </p>
    </body>

    </html>
</body>

---

结束语

• 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
  
• 捐助二维码:
  

---

• 参考文档
  • W3School 教程
  • MDN HTML 教程
• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/91969234
  • 版权声明：本文为博主原创文章，转载请附上博文链接！