HTML5学习笔记（三）

1、链接外部样式表：

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

• 除了可以在style元素中添加，我们还可以将css样式表保存为外部文件，然后使用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，达到原本一样的效果；

• 链接网站图标:

image.png

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

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

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

    
    
    
    
    
    
    
    
    
    
    


    第一个例子
    第四个例子
    
    

image.png

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

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

2.1 为网页注入灵魂：

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

    
    
    
    
    
    
    


    
上面的内容哪里来的？

image.png

• 载入外部脚本库：

image.png

• 延迟执行脚本：有时候，我们可能需要让HTML文档先完成解析，最后再执行脚本.....

  • 脚本解析过程(补丁操作)：

    
    
    image.png

    
我是谁？
    
我从哪里来？
    
我要到哪里去？
    

image.png

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

for(var i=0;i

image.png

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

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

• 异步执行脚本：
  • async属性： 当浏览器不支持JavaScript的时候。

image.png

注意：在设置中改变浏览器是否支持JavaScript来凸显对比。