使用<script>元素的方式

外部引用式、行内式、嵌入式。

　　JavaScript引用放在<body>后面的原因

假如在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。

　　JavaScript在XHTML中的用法

XHTML是一种可扩展超文本标记语言，是将HTML作为XML的应用而重新定义的一个标准。编写XHTML代码的规则要比编写HTML严格的多，而且直接影响能否在嵌入JavaScript代码时使用<script>标签。以下代码块在HTML中是有效的，但在XHTML中则无效，因为在XHTML中小于号（<）将被当做开始一个新标签来解析，作为标签来讲，小于号后面不能跟空格。

解决方法一：用相应的HTML实体（&lt;）替换代码中所有的小于号

解决方法二：用一个CData片段来包含JavaScript代码。在XHTML中，CData片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容。

　　HTML文档模式

通过使用文档类型DOCTYPE来指定，目前文档模式有三种：混杂模式、标准模式和准标准模式。

　　延迟脚本

HTML为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

　　异步脚本

HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。

　　<noscript>元素

可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容。

　　延伸：Hack技术

由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够兼容不同的浏览器，能在不同的浏览器中也能够得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

JS高级程序设计第三版——在HTML中使用JavaScript的更多相关文章

  1. JS高级程序设计第三版——JavaScript简介

    JavaScript简史 JavaScript由Netscape(网景)公司在1995年发布,最开始的主要目的是处理以前由服务器端语言负责的一些输入验证操作,以便提高用户体验,后来就慢慢的发展为一门强 ...

  2. JS高级程序设计第三版——变量、作用域和内存问题

    JavaScript变量: 由于JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可 ...

  3. JS高级程序设计第三版——基本概念

    前言:任何语言的核心都必然会描述这门语言最基本的工作原理.而描述的内容通常都要设计这门语言的语法.操作符.数据类型.内置功能等用于构建复杂解决方案的基本概念. 语法: 1.  区分大小写: 2.  标 ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. JSONP原理及简单实现 可做简单插件使用

    JSONP实现跨域通信的解决方案. 在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有.jsonp主要是通过 ...

  2. 【转】idea中applicationContext-trans.xml中的Cannot resolve bean 'dataSource'...的问题解决

    问题如下: (applicationContext-trans.xml中的部分截图) 先了解问题是怎么出现的: 此处的dataSource是在applicationContext-dao.xml中配置 ...

  3. Flask (五) RESTful API

    RESTful API 什么是REST 一种软件架构风格.设计风格.而不是标准,只是提供了一组设计原则和约束条件.它主要用户客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易 ...

  4. nginx 之 proxy_pass

    nginx中有两个模块都有proxy_pass指令 ngx_http_proxy_module的proxy_pass 语法: proxy_pass URL; 场景: location, if in l ...

  5. 2018acm-icpc青岛站心得

    今年总共两场区域赛,一场南京,一场青岛.南京场队伍真正开始磨合,虽然最后还是铜牌,但是和银牌队伍其实只差一个计算几何的板子的问题.而鉴于南京的教训,所以在准备青岛站的时候,我准备了非常多的模板,还和派 ...

  6. webpacke

    webpacke   安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm 用npm 安装webpack $ npm install webpack -g 此时 Webpac ...

  7. 小a与星际探索---DP

    题目描述 小a正在玩一款星际探索游戏,小a需要驾驶着飞船从11号星球出发前往nn号星球.其中每个星球有一个能量指数pp.星球ii能到达星球jj当且仅当pi>pjpi>pj.同时小a的飞船还 ...

  8. PIE SDK均值滤波

    1.算法功能简介 均值滤波是最常用的线性低通滤波,它均等地对待邻域中的每个像素.对于每个像素,取邻域像素值的平均作为该像素的新值.均值滤波算法简单,计算速度快,对高斯噪声比较有效.从频率域的角度看,相 ...

  9. 第二次 Scrum Meeting

    第二次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/4 19:00 20min 微信群 附Github仓库:WEDO 例会照片 清明假期期间 线上小组例会 工作情 ...

  10. 防盗链与springboot代理模式(图片文件转发)

    在搭建自己的博客网站的时候,很有可能要引入一些外部图片,毕竟多数人最开始不是在自己的平台上写博客. 因某种需要,搬运自己以前写的博客到自己的网站时,在图片这一步可能会出现问题,无法显示.其中往往就是防 ...