内联外联CSS和JS

内联CSS

代码示例：

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

内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

外联CSS

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

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

内联Javascript

代码示例：

下面的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]

外置Javascript

1、新建JS文件将上面的IaEven()写入如下这段代码：

function IsEven()
{
    var number = document.getElementById("TextBox1").value;
    if (number % 2 == 0)
    {
        alert(number + " is even number");
    }
    else
    {
        alert(number + " is odd number");
    }
}

2、在网页的部分添加指向外置JS文件的路径,如下所示:

[script type="text/javascript" src="ExternalJavaScript.js"][/script]

完整代码为：

[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]

使用外置Javascript相较于内联Javascript的好处在于:

可维护性:

外置Javascript文件可以被多个页面调用而不用在每个页面上反复地书写.如果有需要改变的部分,你只需要在一处修改即可.所以外置Javascript导致代码工作量减少,进而使得维护手续也更加方便

关注点分离:

将Javascript封装在外部的.js文件遵循了关注点分离的法则.总体来说,分离HTML,CSS和Javascript从而让我们更容易操纵他们.而且如果是多名开发者同步工作的话,这样也更方便,

表现性:

外置Javascript文件可以被浏览器缓存住,但是内联Javascript在每次页面加载的时候都会被重新加载

以上资料为多处整理