JavaScript代碼嵌入HTML的方法、及兩者的在執(zhí)行流程上的細(xì)微區(qū)別

了執(zhí)行Javascript，需要在HTML文件內(nèi)以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執(zhí)行的流程也各不相同：

1 <script>標(biāo)簽嵌入

此種嵌入方法無法操作<script>之后的DOM元素。因?yàn)?lt;script>之后的DOM元素還未構(gòu)造，因此在<script>標(biāo)簽內(nèi)就無法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行，async可以異步執(zhí)行。

3 onload嵌入

此種嵌入方法在頁面讀取完后再對(duì)其執(zhí)行，所以可以對(duì)所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

當(dāng)window.onload事件觸發(fā)時(shí)，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。

//window.onload不能同時(shí)編寫多個(gè)。
//以下代碼無法正確執(zhí)行，結(jié)果只輸出第二個(gè)。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同時(shí)編寫多個(gè)
//結(jié)果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些許區(qū)別：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結(jié)果為：

"DOMContentLoaded"
"bodyonload"

說明body中的onload會(huì)覆蓋window.onload

在chrome下，結(jié)果為：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代碼移到最下面，結(jié)果又會(huì)是什么樣呢？

chrome和IE10、FireFox的結(jié)果竟然是一樣的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰在下面就是誰覆蓋誰，只會(huì)執(zhí)行后面的那個(gè)。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時(shí)間，而本方法可以在完成HTML解析后發(fā)生的事件，減少等待時(shí)間。

在chrome、IE10和FireFox中，執(zhí)行結(jié)果是：DOMContentLoaded然后才是onload的輸出。所以說一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當(dāng)DOM樹構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是個(gè)jQuery使用者，你可能會(huì)經(jīng)常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動(dòng)態(tài)載入JavaScript文件

5.1 使用原生js方法

動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并指定script的src屬性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

還可以使用同樣的原理動(dòng)態(tài)加載css文件，只不過插入的的父節(jié)點(diǎn)是head標(biāo)簽。

5.2 使用document.write/writeln(）方式

該種方式可以實(shí)現(xiàn)js文件的動(dòng)態(tài)加載，原理就是在重寫文檔流，這種方式會(huì)導(dǎo)致整個(gè)頁面重繪。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉(zhuǎn)義。

5.3 使用jQuery

使用getScript(url,callback)方法實(shí)現(xiàn)動(dòng)態(tài)加載js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

級(jí)元素與內(nèi)聯(lián)元素的概念與區(qū)別

在HTML中，大多數(shù)元素都被定義為塊級(jí)元素或內(nèi)聯(lián)元素。

塊級(jí)元素通常會(huì)獨(dú)立成行，而內(nèi)聯(lián)元素會(huì)并排顯示。

在我們學(xué)過的元素中，

塊級(jí)元素如：<h> <p> <table>這些。

內(nèi)聯(lián)元素如<td><a><img>

下面我們通過練習(xí)來直觀看看他們的區(qū)別。

塊級(jí)元素展示，代碼如下：

<body>
  <h1>第一個(gè)網(wǎng)頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級(jí)元素與內(nèi)聯(lián)元素</p>
  <p>零基礎(chǔ)自學(xué)網(wǎng)頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標(biāo)題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內(nèi)聯(lián)元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰(zhàn)斗機(jī)</a>
<img src="img/戰(zhàn)斗機(jī)/image3.jpg" width = "200px"/>

效果如圖：

其中，<img>標(biāo)簽中的width屬性規(guī)定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對(duì)圖片的寬或高進(jìn)行數(shù)值指定，那么未指定的數(shù)值會(huì)隨著指定數(shù)值進(jìn)行等比例縮放！

熟知html元素是塊級(jí)還是內(nèi)聯(lián)對(duì)以后進(jìn)行頁面布局有一定的指導(dǎo)意義。

<div>與<span>標(biāo)簽

為了方便開發(fā)者對(duì)頁面內(nèi)容進(jìn)行布局和調(diào)整，html開發(fā)者為html加入了專門的區(qū)塊元素<div></div>。

<div></div>是一個(gè)塊級(jí)元素，大家可以把它理解為一個(gè)容器，它本身是不會(huì)顯示在頁面上的。

比如這個(gè)！

筆者第一個(gè)漫畫作品

如果拋開畫面內(nèi)容，我們看到的是一堆對(duì)畫面進(jìn)行分割的方格子。像這樣

<div></div>元素的作用就是對(duì)頁面進(jìn)行了這樣的分割。

實(shí)際上我們的頁面布局都是基于這樣思路進(jìn)行分割的，只是頁面上不會(huì)像漫畫一樣顯示外邊框而已。例如：

強(qiáng)制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來對(duì)頁面進(jìn)行分割劃區(qū)域的。

通過給<div>標(biāo)簽設(shè)置不同的id屬性，可以在css文件中對(duì)不同<div>區(qū)塊中的所有信息進(jìn)行統(tǒng)一調(diào)整樣式的操作。

這是對(duì)塊級(jí)元素整體改變樣式的方法。

但是，如果我們想對(duì)一個(gè)塊級(jí)元素中的不同文字或圖片這些內(nèi)聯(lián)元素進(jìn)行單獨(dú)操作怎么做呢？

html開發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標(biāo)簽。比如我們對(duì)<p>我有一個(gè)夢(mèng)想</p>這個(gè)段落元素中的"夢(mèng)想"兩個(gè)字進(jìn)行變化顏色的操作，我們可以這樣寫：

通過對(duì)<span>指定不同的id或class屬性在CSS文件中對(duì)"夢(mèng)想"二字進(jìn)行改變顏色的操作而不會(huì)影響段落元素中的其他文字。

今天的內(nèi)容結(jié)束了，下一次我們建立一個(gè)新的頁面來簡(jiǎn)單看看<div>元素的基本用法。

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來看看這些方式和它們的優(yōu)缺點(diǎn)。

內(nèi)聯(lián)方式

內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁難以維護(hù)。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁面有效，所以當(dāng)多個(gè)頁面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁面時(shí)只需加載 HTML 文件即可。

導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

link 屬于 HTML，通過 <link> 標(biāo)簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；
當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

在線咨詢

上一篇：在網(wǎng)頁開發(fā)中，我們需要掌握的常用HTML標(biāo)簽有哪些？
下一篇：戰(zhàn)“疫”宅在家，北京出版業(yè)這些資源可以免費(fèi)看

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商