內聯CSS也可稱為行內CSS或者行級CSS,它直接在標簽內部引入。
優點:便捷、高效
缺點:不能夠重用樣式
代碼樣式:
<p style="color:red;font-size:18px">這里文字是紅色。</p>
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css”為擴展名,在內使用標簽將css樣式文件鏈接到HTML文件內。
代碼樣式:
<link href="base.css" rel="stylesheet" type="text/css" />
1
內聯JS
代碼示例:
下面的IsEven() 函數是以內聯的方式出現在網頁中的.
[html]
[head]
[script type="text/javascript"]
function IsEven()
{
var number = document.getElementById("TextBox1").value;
if (number % 2 == 0)
{
alert(number + " is even number");
}
else
{
alert(number + " is odd number");
}
}
[/script]
[/head]
[body]
[form id="form1" runat="server"]
Number :
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[input type="button" value="Check Number" onclick="IsEven()" /]
[/form]
[/body]
[/html]
外聯JS
外部式JS就是把JS代碼寫一個單獨的外部文件中,這個JS文件以“.js”為擴展名。
新建JS文件,命名為ExternalJavaScript.js:
function IsEven()
{
var number = document.getElementById("TextBox1").value;
if (number % 2 == 0)
{
alert(number + " is even number");
}
else
{
alert(number + " is odd number");
}
}
將ExternalJavaScript.js引入到HTML文件中:
[html]
[head]
[script type="text/javascript" src="ExternalJavaScript.js"][/script]
[/head]
[body]
[form id="form1" runat="server"]
Number :
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[input type="button" value="Check Number" onclick="IsEven()" /]
[/form]
[/body]
[/html]
使用外部JS相較於內聯JS的優勢:
可維護性:
外置Javascript文件可以被多個頁面調用而不用在每個頁面上反復地書寫.如果有需要改變的部分,你只需要在一處修改即可.所以外置Javascript導致代碼工作量減少,進而使得維護手續也更加方便。
關注點分離:
將Javascript封裝在外部的.js文件遵循了關注點分離的法則.總體來說,分離HTML,CSS和Javascript從而讓我們更容易操縱他們.而且如果是多名開發者同步工作的話,這樣也更方便.
表現性:
外置Javascript文件可以被瀏覽器緩存住,但是內聯Javascript在每次頁面加載的時候都會被重新加載。