HTML5学习笔记（三）
2019-07-31 本文已影响0人
理以周
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>
image.png
注意：在设置中改变浏览器是否支持JavaScript来凸显对比。
