zoukankan      html  css  js  c++  java
  • 【第二章】 跟我一起学javascript -- HTML javascript

    本章内容

    • script元素
    • 嵌入脚本和外部脚本
    • dtd文档模式对 JavaScript 的影响
    • 禁用Javascript时候该怎么办

    1、script 元素

    如果我们要向html页面中插入javascript,大家都懂的,就是直接在html中写入script标签。然而这个script标签中除了我们经常使用的scr元素(表示外部链接javascript url地址)以外,还有另外5个属性。分别是:

    • async [可选] 异步加载,不影响页面中其他操作
    • charset [可选] 很少用
    • defer [可选] 表示脚本可以延迟到文档完全被解析和显示之后再执行。 IE7 及更早版本对嵌入脚本也支持这个属性
    • src [可选] 表示包含要执行代码的外部文件
    • type [可选] language 替代品,表示编写代码使用的脚本语言的内容类型 就是MIME,js 直接写成text/javascript

    2、嵌入脚本和外部脚本

    使用<script>元素的方式有两种:直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript
    文件。 建议使用外部引入外部JavaScript文件方式


    那么问题来了,多个script脚本执行顺序是怎么样的?

    答案是:只要不存在 defer 和 async 属性,浏览器都会按照<script>元素在页面中
    出现的先后顺序对它们依次进行解析。换句话说,在第一个<script>元素包含的代码解析完成后,第
    二个<script>包含的代码才会被解析,然后才是第三个、第四个

    2.1、script标签位置放入head或者body大不同

    一般很多新手javascripter 都会将javascript标签写入html <head>标签中。
    这种做法存在一个问题,就是必须等待head元素中所有的css和javscript 被下载,解析和执行完毕后,才会呈现我们的html页面上的内容,设想假如我们的css,javascript很大,或者在网络带宽有限的情况下,会不会给用户带来不良的使用体验呢?为了避免这个问题,现代 Web 应用程序一般都把全部 JavaScript 引
    用放在<body>元素中页面内容的后面,如下例所示:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Example HTML Page</title>
    </head>
    <body>
    <!-- 这里放内容 -->
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
    </body>
    </html>
    

    这样,在解析包含的 JavaScript 代码之前,页面的内容将完全
    器窗口显示空白页面的时间缩短而感到打开页面的速度加快了

    3、dtd文档模式

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

    如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。但采用混杂模式
    不是什么值得推荐的做法,因为不同浏览器在这种模式下的行为差异非常大,如果不使用某些 hack 技
    术,跨浏览器的行为根本就没有一致性可言。

    对于标准模式,可以通过使用下面任何一种文档类型来开启:

    <!-- 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>
    

    而对于准标准模式,则可以通过使用过渡型( 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">
    

    准标准模式是IE提出来的,这种模式不大标准,体现在处理图片间隙的时候,在表格中使用图片时问题最明显

    建议使用标准模式

    4、禁用Javascript时候该怎么办

    采用<noscript>元素可以解决该问题。该元素只有在下列情况才会显示出内容来:

    • 浏览器不支持js脚本
    • 浏览器支持脚本,但是被用户禁用了

    例子:

    html>
    <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
    </head>
    <body>
    <noscript>
    <p>本页面需要浏览器支持(启用) JavaScript。
    </noscript>
    </body>
    </html>
    

    该页面中的noscript元素中的内容在启用了javascript脚本支持的浏览器中永远也不会被用户看到。

  • 相关阅读:
    Java并发编程:synchronized
    对一致性Hash算法,Java代码实现的深入研究
    在Xcode中使用Git进行源码版本控制
    这些 Git 技能够你用一年了
    简明 Git 命令速查表
    Git 分支管理是一门艺术
    2016年Web前端面试题目汇总
    iOS 面试基础题目
    Json数据交互格式介绍和比较
    SpringBoot端口和访问路径
  • 原文地址:https://www.cnblogs.com/ling-2yuan/p/13025813.html
Copyright © 2011-2022 走看看