了解内联及外联CSS、JS文件

内联及外联CSS、JS文件

内联CSS：

内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入。

优点：便捷、高效

缺点：不能够重用样式

代码样式：

<p style="color:red;font-size:18px">这里文字是红色。p>

外联CSS：

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内使用标签将css样式文件链接到HTML文件内。

代码样式：

"base.css" rel="stylesheet" type="text/css" />

内联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在每次页面加载的时候都会被重新加载。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！