1、链接外部样式表：

1.1 相濡以沫不如相“见”于江湖：

除了可以在style元素中添加，我们还可以将css样式表保存为外部文件，然后使用link元素将其链接进来；
<link> 标签用于指定外部资源。link 元素最常见的用途是链接样式表。
注意：link 元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。
- 属性：

属性	值	描述
href	URL	指定被链接资源的URL
hreflang	language-code	指定被链接资源使用的语言
sizes	HeightxWidth	指定图标的大小（比如sizes-"16x16"）
media	media-query	指定被链接的资源将被显示到什么设备上
rel	altermate、author、help、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、bag	指定当前文档与被链接资源之间的关系
type	MIME_type	规定被链接文档的MIME类型

1.2 层叠样式表的使用：将使用到的css样式单独弄成一个文档，然后link，达到原本一样的效果；

    <link rel="stylesheet" type="text/css"href="style.css">
    <link rel="stylesheet" type="text/css"media="print"href="print.css">
    <link rel="stylesheet" type="text/css"media="screen and (min-width:512px) and (max-width:1024px)"href="screen512to1024.css">

链接网站图标:

<link rel="icon" type="image/x-icon"href="./img/jianshu.ico">

image.png

指定相对URL的解析基准（相对路径和绝对路径）：
- 在 Web 开发中经常会碰到路径问题，唯有指明正确的路径，伯乐方能找到千里马。路径通常分为绝对路径和相对路径。
- 绝对路径是文件的完整 URL，比如

<img src="http://man.fishc.com/html5/image/FishC.png" alt="FishC-logo">

而相对路径是以当前网页所在位置作为基准，建立出的目录路径。比如

<img src="../html5/image/FishC.png" alt="FishC-logo">

1.3 <base> 标签用于设置相对 URL 的解析基准。base 元素可以用来设置一个基准 URL，让 HTML 文档中的相对链接在此基础上进行解析。

<!DOCTYPE html>
<html>
<head>
    <title>一只特立独行的猪</title>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width,initial-scale=1.0">
    <meta name="keywords"content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
    <meta name="description"content="《零基础入门学习Web开发》案例演示">
    <meta name="author"content="小甲鱼">
    <link rel="stylesheet" type="text/css"href="style.css">
    <link rel="stylesheet" type="text/css"media="print"href="print.css">
    <link rel="stylesheet" type="text/css"media="screen and (min-width:512px) and (max-width:1024px)"href="screen512to1024.css">
    <link rel="icon" type="image/x-icon"href="./img/jianshu.ico">
    <base href="http://demo.fishc.com/html5/lession4/"target="_blank">
</head>
<body>
    <a href="test01">第一个例子</a>
    <a href="test04">第四个例子</a>
    
    
</body>
</html>

image.png

2、HTML5=HTML（框架、骨骼）+CSS（美颜）+JavaScript（不再是花瓶，与用户交互的操作）

JavaScript：一个与Java唯一沾边的语言；

2.1 为网页注入灵魂：

定义文档内嵌脚本：
- < script>标签用于在HTML文档中加入脚本（例如JavaScript）；
- script元素既可以直接定义内嵌脚本语句，也可以通过src属性引用外部脚本文件；
- script元素可以出现在HTML文档中各个部分，一个文档可以包含多个script元素；
  注意：每定义或导入一段脚本，都需哟啊使用一个script元素；不能用同一个script元素既定义内嵌脚本，又引用外部脚本。

<!DOCTYPE html>
<html>
<head>
    <title>定义文档内嵌脚本</title>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width,inital-scale=1.0">
    <meta name="keywords"content="小甲鱼，Web开发，HTML5，CSS3，Web编程教学">
    <meta name="description"content="《零基础入门学习Web开发》案例演示">
    <meta name="author"content="小甲鱼">
    <script typc="text/javascript">
        document.write("I love BeiJing!");
    </script>
</head>
<body>
    <p>上面的内容哪里来的？</p>
</body>
</html>

image.png

载入外部脚本库：

<script type="text/javascript" src="hi.js"></script>

image.png

延迟执行脚本：有时候，我们可能需要让HTML文档先完成解析，最后再执行脚本.....
- 脚本解析过程(补丁操作)：
  
  image.png

    <p>我是谁？</p>
    <p>我从哪里来？</p>
    <p>我要到哪里去？</p>
    <script type="text/javascript" src="patch.js"></script>

image.png

var x= document.getElementsByTagName("p");

for(var i=0;i<x.length;i++)
{
    x[i].innerText="周普莉到此一游";
}

image.png

defer属性（相当于告诉浏览器我们要延迟执行脚本）：

<script type="text/javascript" src="patch.js"defer></script>

注意：defer属性只能用于外部脚本文件！

异步执行脚本：
- async属性：当浏览器不支持JavaScript的时候。<noscript>标签用来向不支持JavaScript的浏览器显示一些替代内容。如果浏览器支持脚本，那么它不会显示出noscript元素中的内容；

<script type="text/javascript">
        document.write("I love 小王子！");
    </script>
    <noscript>
        <p>都什么年代了，没有JavaScript哪行！</p>
        <img alt="嫌弃" src="/img/xianqi.jpg">
    </noscript>