Web开发——HTML基础

文档资料参考：

• 参考：MDN官网
• 参考：http://www.runoob.com，W3School
• 参考：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics
• 参考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
• 实践网站：https://jsbin.com/?html,output
• 实践网站：https://thimble.mozilla.org/zh-CN/
• API网站参考：https://devdocs.io/
• 前端涉及的全部知识体系参考：http://www.cnblogs.com/Leo_wl/p/5879684.html

建立HTML项目方式：

•  本地计算机上建立实例
• 在线编码程序：JSBin、Thimble、jsfiddle.net、Tinkerbin、Rendur等

专业人员使用哪些工具：

• 计算机，也许这对你来讲是很明显的，可是大家中有些人们是经过手机或者图书馆的计算机来阅读这篇文章的。对于正经的 Web 开发，最好仍是使用运行 Windows，Mac，或者 Linux 系统的台式计算机或笔记本电脑。
• 文本编辑器，用来编写代码。这能够是纯文本编辑器，好比 Sublime，Brackets， Atom 或 Visual Studio Code；也能够是混合的编辑器，如 Dreamweaver 或者WebStorm。Office 文档编辑器不适合在此使用，由于他们依赖的隐藏元素会干扰浏览器渲染机制。
• 浏览器，用来测试你的代码。现在使用最多的浏览器有 Firefox，Chrome，Opera， Safari，Internet Explorer 和 Microsoft Edge。你同时须要在移动设备和任何你的目标用户可能使用的老式浏览器（如 IE 8-10）中测试你的网页表现如何。
• 图像编辑器，像 The GIMP，Paint.NET，或 Photoshop，用来编辑你的网页所需的图像。
• 版本控制系统，用来管理服务器文件，支持项目中的团队协做，共享代码与资源，以及避免编辑冲突。当今最流行的版本控制工具是 Git，同时 GitHub 这个基于 Git 的代码托管服务网站也很是流行。 
• FTP 工具软件，在旧式使用网络帐户管理的服务器上，一般咱们使用 FTP 进行文件管理（Git 正在取代 FTP）。有不少 (S)FTP 工具软件，好比 Cyberduck，Fetch，和 FileZilla。
• 自动化构建工具， 好比 Grunt 或 Gulp，来自动完成重复的任务，例如压缩代码和运行测试。
• 模板，库，框架等等，任何用来加快编写常规功能的工具。
• 还有更多工具哟！

文本编辑器，推荐使用Visual Studio Code

1. 下载安装NodeJs环境（若是已经安装能够忽略）；
2. 下载安装VS Code编译器（官方下载地址：http://code.visualstudio.com/，VS Code官方插件地址：https://marketplace.visualstudio.com/vscode，http://code.visualstudio.com/docs）
3. 使用Typing工具配置VS Code的智能提示（参考连接：https://blog.csdn.net/u011127019/article/details/56671511）
4. 建立一个JavaScript的Demo

 　　切换语言（默认为英文）：在Extension中搜索language，安装简体中文语言安装包，而后按下F1 输入language，选择“Configure Display Language”，修改 "locale":"zh-CN" 为 "locale":"zh-CN"，重启VS Code便可。

 　　切换背景颜色：按下F1 输入color，进行背景颜色选择便可。

书籍资源下载：

• 参考：https://www.jqhtml.com/download

---

目录：

• 一、涵盖主题
• 二、JSLint——JavaScript语法检查器和校验器
• 三、HTML简介
• 四、解析一个HTML元素
  • 4.1 嵌套元素
  • 4.2 空元素（图像）
  • 4.3 块与内联元素
  • （1）HTML <div> 元素
    
  • （2）HTML <span> 元素
  • （3）HTML 分组标签
  • （4）HTML 类
  • • （4.1）分类块级元素
    • （4.2）分类行内元素
• 五、解析HTML文档
  • 5.1 主动学习：添加了一些功能到HTML文档
  • 5.2 HTML部分中空格
  • 5.3 实体引用：在HTML 编辑部分中包含特殊字符
  • 5.4 HTML评论（注释）
  • 5.5 HTML中显示中文
  • 5.6 重点和重要性编辑
    • （1）重点部分
    • （2）很是重要的部分
    • （3）斜体，粗体，下划线...... 
• 六、HTML的元数据
  
  • 6.1 什么是HTML头？
  • 6.2 元数据：<meta>元素
    • （1） 指定文档的字符编码
    • （2） 添加做者和描述
    • （3） 主动学习：描述在搜索引擎中的使用 
    • （4） 其余类型的元数据
  • 6.3 将自定义图标添加到您的网站编辑（自定义左上角网页图标）
  • 6.4 将CSS和JavaScript应用于HTML
    • （1）CSS应用于HTML
    • （2）JavaScript应用于HTML
    • （3）主动学习：将CSS和JavaScript应用于页面
  • 6.5 设置文档的主要语言编辑
• 七、建立超连接
  
  • 7.1 什么是超连接？
  • 7.2 连接剖析编辑
  • 7.3 关于URL和路径的快速入门编辑
    • （1）文件碎片
    • （2）绝对与相对URL
  • 7.4 连接最佳实践
    
    • （1）尽量使用相对连接
    • （2）连接到非HTML资源 - 留下明确的路标
  • 7.5 主动学习：建立导航菜单
    
  • 7.6 电子邮件连接
    • （1）指定详细信息
      
• 八、HTML CSS和JavaScript
  
  • 8.1 HTML CSS
    
    • （1）外部样式表
      
    • （2）内部样式表
    • （3）内联样式
  • 8.2 HTML Script
    • （1）HTML script 元素
      
    • （2）<noscript> 标签
    • （3）将CSS和JavaScript应用于HTML
• 九、HTML框架集与布局、Frame/Iframe、HTML5新标签
  • 9.1 Frameset布局
    
  • 9.2 Table布局
  • 9.3 Div布局
    • （1）通常经常使用的Div页面布局
      
    • （2）HTML5新增语义化标签
  • 9.4 从对象到iframe-其它嵌入技术
    
  • 9.5 HTML框架 Frame/Iframe 经过使用在同一个浏览器中显示不止一个页面
    • （1）举例1（垂直框架）
      
    • （2）举例2（水平框架）
    • （3）举例3（使用 <noframes> 标签）
    • （4）举例4（混合框架结构）
    • （5）举例5（三个网页，上1下2，下左边为列表网页，内容均在下右边网页中打开）
    • （6）举例6（含有 noresize="noresize" 属性的框架结构）
    • （7）Iframe框架的使用
• 十、标签和属性
• 十一、HTML事件属性
  • 11.1 全局事件属性
    
  • 11.2 Window 事件属性
  • 11.3 Form 事件
  • 11.4 Keyboard 事件
  • 11.5 Mouse 事件
  • 11.6 Media 事件

---

一、涵盖主题

　　如下是 MDN 学习区涵盖的全部主题列表：

　　 Web入门

　　为初学者提供一个实用的 Web 开发入门。

　　 HTML — 构建网站

　　HTML 是咱们用来构造网站内容的不一样部分并定义它们的意义或目的的语言。本主题详细讲授 HTML。

　　 CSS — 美化网站

　　咱们能够使用 CSS 这个语言来设计和布局咱们的 Web 内容，以及添加像动画一类的行为。这个主题提供了详细的 CSS 指导。

　　 JavaScript — 动态客户端脚本语言

　　JavaScript 是用于向 Web 页面添加动态功能的脚本语言。本主题讲授了编写和理解JavaScript 所需的全部基本要点。

　　 可访问性 — 让网站能被任何人使用

　　可访问性是将 Web 内容尽量地提供给尽量多的人的实践，而无论残疾、设备、地区或其余不一样的因素。这个主题给了您全部您须要了解的内容。

　　 工具集与测试

　　本主题介绍了开发人员用来促进其工做的工具，如跨浏览器测试工具。

　　 服务端网站编程

　　即便您专一于客户端 Web 开发，了解服务器和服务端代码功能如何工做仍然是有用的。本主题提供服务器以及服务端代码特性如何工做的概述，并详细介绍了如何使用最流行的两个框架—— Django（Python）以及 Express（node.js）创建一个服务端的应用程序。

二、JSLint——JavaScript语法检查器和校验器

• JSLint在线网址为：http://www.jslint.com/
• JSLint本地安装和使用：原文连接：http://www.javashuo.com/article/p-depcqavu-u.html

npm install -g jslint

　　接下来验证JSLint是否安装成功，新建一个JavaScript的Demo，spa.js（假设存放到桌面）：

 1 /*jslint
 2 browser : true,  continue :  true,    devel    :  true,
 3 indent   : 2,       maxerr    :  50,      newcap :  true,
 4 nomen  : true,   plusplus  :  true,    regexp  :  true,
 5 sloppy   : true,   vars        :  false,    white   :  true,
 6 */
 7 var spa = (function(){
 8     var initModule = function ( $container ) {
 9             $container.html(
10                 '<h1 style="display:inline-block;margin:25px;">'
11                  + ' hello World' 
12                  + '</h1>'
13             );
14     };    
15     return {
16         initModule : initModule
17     };
18 }());

　　输出结果：略。

　　在Windows的CMD窗口下，输入jslint命令编译验证spa.js文件，出现spa.js is OK，表示JSLint已经安装完成。

三、HTML简介

　　HTML 并非编程语言，它是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）所组成，这些元素能够用来封装不一样部分的内容，使其以某种方式呈现或者工做。 闭合标签（ tags）能够使得一个文字或者一张图片超连接到其余地方，能够使得文字变为斜体，可以让文字变大或者变小等等。 例如，键入下面一行内容：

My cat is very grumpy

　　若是咱们想要让这行单独呈现，咱们能够将其封装成为一个段落（paragraph）元素：

<p>My cat is very grumpy</p>

　　设置字体为斜体：

<em>This is my text.</em>

四、解析一个HTML元素

　　让咱们深刻探索一下这个段落元素。

<p>My cat is very grumpy</p>
解析以下
<p>: Opening tag
</p>: Closing tag
My cat is very grumpy: Content
<p>My cat is very grumpy</p>: Element

　　这个元素的主要部分有：

　　开始标签（The opening tag）：这里包含了元素的名称（本例为 p），被开、闭尖括号所包围。这表示元素今后开始或者开始起做用——在本例中即段落由此开始。

• 闭合标签（The closing tag）：与开始标签类似，只是其在元素名以前包含了一个斜杠。这表示着元素的结尾——这表示元素在此结束——在本例中即段落在此结束。初学者经常会犯忘记包含闭合标签的错误，这可能会产生一些奇怪的结果。
• 内容（The content）：这是一个元素的内容，这个例子中就是所输入的文本自己。
• 元素（The element）：开标签、闭标签与内容相结合，即是一个完整的元素。

　　属性（Attribute）包含了关于元素的一些额外的信息，这些信息自己并不须要被显如今内容中。在这个例子中，class 是一个属性名称，editor-note 是属性的值 。class 属性容许你为元素提供一个标识名称，以便进一步为元素指定样式或进行其余操做时使用。

　　一个属性应该包含：

1. 在属性与元素名称（或上一个属性，若是有超过一个属性的话）之间的空格符。
2. 属性的名称，并接上一个等号。
3. 由引号所包围的属性值。

4.1 嵌套元素

　　你也能够将一个元素置于其余元素之中——这被称做嵌套。若是你想代表你的猫很是的暴躁，咱们能够将 “很是” 用 <strong> 元素包裹，这意味着这个单词将被强调：

<p>My cat is <strong>very</strong> grumpy.</p>

　　你必须保证你的元素被正确地嵌套：在这个例子中咱们首先使用 p 标签，而后是 strong 标签，接着咱们须要先闭合 strong 标签，最后再闭合 p 标签。下面是一个错误示范：

<p>My cat is <strong>very grumpy.</p></strong>

　　元素必须正确地开始和闭合，才能清楚地显示出正确的嵌套。若是它们像上面这样，那么你的浏览器将尽可能地猜想你想要表达的意思，可是你很大程度上不会获得你指望的结果。因此千万不要这样作！

4.2 空元素（图像）

　　有一些元素并不包含内容，它们被称为空元素。看看咱们 HTML 代码中已经存在的 <img> 元素：

　　它包含了两个属性，可是这里并无 </img> 闭合标签，也没有内部内容。由于图像元素不须要包含内容来产生效果，它的做用是向其所在的位置嵌入一个图像。

　　图像：

　　让咱们从新回到 <img> 元素：

<img src="images/firefox-icon.png" alt="My test image">

// images/firefox-icon.png为图片路径
// My test image为当图片没法打开（好比路径不正确）显示的文字

　　像咱们以前说过的，它将图像嵌入到元素所在位置。它经过包含图像文件路径的 src (source) 属性实现这一功能。

　　可是这一元素也要包括 alt (alternative) 属性 —— 这个属性应该是图像的描述内容，当图像不能被某些用户看见时，多是由于：

1. 他们是盲人或者有视觉障碍。某些有严重视觉损伤的用户常用屏幕阅读器来为他们读出 alt 属性里的内容。
2. 有些代码里的错误让图像不能被展现出来。举个例子，试着故意将 src 属性里的路径改错。若是你保存而且从新加载页面，你应该能在图像的位置看到：

　　alt 属性的关键就是要“能够描述图像的文本”。当被读出来时， alt 里面的内容应该向用户传递足够图像表达的意思。因此咱们如今的文本 "My test image" 并不合适。一个描述火狐Logo的更好的文本应该是 "The Firefox logo: a flaming fox surrounding the Earth."。

　　如今为你的图像尝试一些更好的 alt 文本。

　　提示： 点击 MDN 无障碍着陆页 查看更多。

4.3 块与内联元素

• 参考：块级元素和内联元素

　　HTML中有两个重要的元素类别，它们是块级元素和内联元素。

• 块级元素在页面上造成一个可见的块 - 它们将显示在前面的任何内容的新行上，而且在它以后的任何内容也将出如今新行上。块级元素每每是页面上的结构元素，例如，段落，列表，导航菜单，页脚等。块级元素不会嵌套在内联元素中，但它可能嵌套在内部另外一个块级元素。
• 内联元素是包含在块级元素中的元素，仅包含文档内容的小部分，而不是整个段落和内容分组。内联元素不会致使新行出如今文档中; 它们一般出如今文本段落中，例如<a>元素（超连接）或强调元素，如<em>或<strong>。

　　大多数 HTML 元素被定义为块级元素或内联元素。

　　编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

　　块级元素在浏览器显示时，一般会以新行来开始（和结束）。

　　例子：<h1>, <p>, <ul>, <table>

　　内联元素在显示时一般不会以新行开始。

　　例子：<b>, <td>, <a>, <img>

　　采用如下示例：

<em>first</em><em>second</em><em>third</em>  // 内联元素
<p>fourth</p><p>fifth</p><p>sixth</p>  // 块级元素

　　<em>是一个内联元素，以下所示，前三个元素位于同一条线上，二者之间没有空格。

　　另外一方面，<p> 是一个块级元素，所以每一个元素都出如今一个新行上，每一个元素的上方和下方都有空格（间距是因为浏览器应用于段落的默认CSS样式）。

　　注意：HTML5从新定义了HTML5中的元素类别：请参阅元素内容类别。虽然这些定义比之前更准确，更模糊，但它们比“阻塞”和“内联”更难理解，所以咱们将在整个主题中坚持这些定义。

　　注意：本主题中使用的术语“块”和“内联”不该与具备相同名称的CSS框的类型相混淆。虽然它们默认关联，但更改CSS显示类型不会更改元素的类别，也不会影响它能够包含哪些元素以及能够包含哪些元素.HTML5删除这些术语的缘由之一是防止这种至关常见的混乱。

（1）HTML <div> 元素

　　HTML <div> 元素是块级元素，它是可用于组合其余 HTML 元素的容器。

　　<div> 元素没有特定的含义。除此以外，因为它属于块级元素，浏览器会在其先后显示折行。

　　若是与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

　　<div> 元素的另外一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的做用是显示表格化的数据。

（2）HTML <span> 元素

　　HTML <span> 元素是内联元素，可用做文本的容器。

　　<span> 元素也没有特定的含义。

　　当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

（3）HTML 分组标签

标签	描述
<div>	定义文档中的分区或节（division/section）。
<span>	定义 span，用来组合文档中的行内元素。

（4）HTML 类

　　对 HTML 进行分类（设置类），使咱们可以为元素的类定义 CSS 样式。

　　为相同的类设置相同的样式，或者为不一样的类设置不一样的样式。

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <style>.cities {
 8             background-color:black;
 9             color:white;
10             margin:20px;
11             padding:20px;
12         }
13         </style>
14     </head>
15     
16     <body>
17         <!--<div>容器,设置class属性是为了在<head>中配置css样式-->
18         <div class="cities">
19             <h2>London</h2>
20             <p>
21                 London is the capital city of England. 
22                 It is the most populous city in the United Kingdom, 
23                 with a metropolitan area of over 13 million inhabitants.
24             </p>
25         </div>
26 
27     </body>
28 </html>

　　输出结果：

（4.1）分类块级元素

　　HTML <div> 元素是块级元素。它可以用做其余 HTML 元素的容器。

　　设置 <div> 元素的类，使咱们可以为相同的 <div> 元素设置相同的类：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <style>.cities {
 8             background-color:black;
 9             color:white;
10             margin:20px;
11             padding:20px;
12         }
13         </style>
14     </head>
15     
16     <body>
17         <!--<div>容器,设置class属性是为了在<head>中配置css样式-->
18         <div class="cities">
19             <h2>London</h2>
20             <p>
21                 London is the capital city of England. 
22                 It is the most populous city in the United Kingdom, 
23                 with a metropolitan area of over 13 million inhabitants.
24             </p>
25         </div>
26             
27         <div class="cities">
28             <h2>Paris</h2>
29             <p>Paris is the capital and most populous city of France.</p>
30         </div>
31 
32         <div class="cities">
33             <h2>Tokyo</h2>
34             <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
35             and the most populous metropolitan area in the world.</p>
36         </div>
37 
38     </body>
39 </html>

　　输出结果：

（4.2）分类行内元素

　　HTML <span> 元素是行内元素，可以用做文本的容器。

　　设置 <span> 元素的类，可以为相同的 <span> 元素设置相同的样式。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <style>
 8             span.red{
 9                 color: red
10             }
11         </style>
12     </head>
13     
14     <body>
15 
16         <h1>My <span class="red">Important</span> Heading</h1>
17 
18     </body>
19 </html>

　　输出结果：

五、解析HTML文档

　　上面咱们介绍了一些基本的 HTML 元素，可是它们本身不是颇有用。如今咱们看看如何将它们组合起来成为一个完整的 HTML 页面。让咱们从新看看  index.html 示例里的内容（咱们先前在文件处理里建立的）：

　　举例1：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

　　这里咱们有：

• <!DOCTYPE html> — 文档类型。在 HTML 刚刚出现的时期里（大约是1991/2 年），文档类型是用来连接一些好的 HTML 应该遵照的规则，有点像自动校订等。然而如今已经没有人关心这些，只是由于历史缘由必须它必须包含在代码中。如今你只须要知道这些就能够。
• <html></html> — <html> 元素。这个元素包含了整个页面的内容，有时也被称做根元素。
• <head></head> — <head> 元素。这个元素能够包含你想添加的全部内容，可是不会被用户所看到。这里面包括像想被搜索引擎搜索到的关键字（keywords）和页面描述，CSS 样式表和字符编码声明等。
• <body></body> — <body> 元素。这个元素包含了你想让用户在访问你的页面时看到的内容，无论是文本，图像，视频，游戏，可播放的音轨或其余内容。
• <meta charset="utf-8"> — 这个元素指定了你的文档须要使用的字符编码是 UTF-8 ，它包括了很是多人类已知语言的字符。基本上 UTF-8 能够处理任何文本内容。咱们没有任何理由不去设定字符编码，并且也能够避免之后可能出现的问题。
• <title></title> — <title> 元素。这个元素设置了页面的标题，标题显示在浏览器标签页上，并且在你将网页添加到收藏夹或喜好中时将做为默认名称。

　　举例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>
    </head>
    <body>
        <p>This is my page</p>
    </body>
</html>

　　咱们在这里：

1. <!DOCTYPE html>：doctype。在时间的迷雾中，当HTML年轻时（约为1991/2），doctypes意味着充当HTML页面必须遵循的一组规则的连接，被认为是好的HTML，这可能意味着自动错误检查和其余有用的东西。他们过去看起来像这样：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   然而，如今没有人真正关心它们，它们实际上只是一个历史性的工件，须要包含在一切工做中。 <!DOCTYPE html>是最短的字符串，被视为有效的doctype; 这就是你真正须要知道的。
2. <html></html>：<html>元素。此元素包装整个页面上的全部内容，有时也称为根元素。
3. <head></head>：<head>元素。此元素充当您要包含在HTML页面上的全部内容的容器，该页面不是您向页面查看者显示的内容。这包括您但愿在搜索结果中显示的关键字和页面描述，用于设置内容样式的CSS，字符集声明等内容。您将在本系列的下一篇文章中了解更多相关信息。
4. <meta charset="utf-8">：此元素将文档应使用的字符集设置为UTF-8，其中包括绝大多数人类书面语言中的大多数字符。从本质上讲，它如今能够处理您可能放在其上的任何文本内容。没有理由不设置它，它能够帮助避免之后的一些问题。
5. <title></title>：<title>元素。这将设置页面的标题，即加载页面的浏览器选项卡中显示的标题，用于在书签/收藏页面时描述页面。
6. <body></body>：<body>元素。这包含您在访问网页时要向网络用户显示的全部内容，不管是文本，图片，视频，游戏，可播放的音轨仍是其余任何内容。

5.1 主动学习：添加了一些功能到HTML文档

　　若是您想尝试在本地计算机上编写一些HTML，您能够：

1. 复制上面列出的HTML页面示例。
2. 在文本编辑器中建立一个新文件。
3. 将代码粘贴到新文本文件中。
4. 将文件另存为index.html。

　　注意：您还能够在MDN学习区域Github存储库中找到此基本HTML模板。

　　所以，在本练习中，您能够在计算机上本地编辑代码，如上所述，或者您能够在下面的可编辑示例窗口中编辑代码（<body>在这种状况下，可编辑示例窗口仅表明元素的内容。）

• 在<body>元素的开始标记下方，添加文档的主标题。这应该包含在<h1>开始标记和</h1>结束标记内。
• 编辑段落内容以包含有关您感兴趣的内容的一些文本。
• 经过将它们包装在<strong>开始标记和</strong>结束标记内，使任何重要单词以粗体显示
• 添加指向段落的连接，如本文前面所述。
• 图像添加到您的文档，段后，如本文前面所解释的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>
        <p>This is my page</p>
    </head>
    <body>
         
    </body>
</html>

　　在网页的开头能看到：This is my page

• <h1>在浏览器中加载时，页面上会显示该元素 - 一般每页应使用一次，以标记页面内容的标题（故事标题，新闻标题或适合您使用的任何内容）。
• 该<title>元素是表明整个HTML文档的标题元数据（而不是文档的内容。）

5.2 HTML部分中空格

　　在上面的例子中，可能已经注意到代码清单中包含了不少空白 - 这根本不是必需的; 如下两个代码段是等效的：

<p>Dogs are silly.</p>
等效于
<p>Dogs        are
         silly.</p>

　　输出结果：

Dogs are silly.
Dogs are silly.

　　不管使用多少空格（包括空格字符，还包括换行符），HTML解析器在渲染代码时都会将每一个空格减小到一个空格。那么为何要使用这么多的空白呢？答案是可读性 - 若是你的代码格式很好，那么理解你的代码中发生的事情要容易得多，而不只仅是在一个大混乱中汇集在一块儿。在咱们的HTML中，咱们将每一个嵌套元素缩进两个空格，而不是它所在的空间。你能够使用什么样的格式（例如，每一个缩进级别有多少个空格），但应该考虑对其进行格式化。

5.3 实体引用：在HTML 编辑部分中包含特殊字符

• 参考： HTML 实体符号参考手册以及HTML 4.01 符号实体

　　在HTML，好比<，>，"，'和&特殊字符。它们是HTML语法自己的一部分，所以如何在文本中包含其中一个字符，例如，若是您真的想要使用＆符号或少于符号，而不是像某些浏览器那样将其解释为代码？

　　咱们必须使用字符引用 - 表示字符的特殊代码，而且能够在这些确切的状况下使用。每一个字符引用以＆符号（＆）开头，以分号（;）结束。

　　在下面的示例中，您能够看到两个段落，它们讨论的是Web技术：

<p>In HTML, you define a paragraph using the <p> element.</p>

　　输出结果（出错）：

In HTML, you define a paragraph using the
element. 

　　咱们用字符引用替换了尖括号：

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

　　输出结果（正确）：

In HTML, you define a paragraph using the <p> element.

　　注意：能够在Wikipedia上找到全部可用HTML字符实体引用的图表：XML和HTML字符实体引用列表。请注意，您不须要对任何其余符号使用实体引用，由于只要HTML的字符编码设置为UTF-8，现代浏览器就会处理实际符号。

5.4 HTML评论（注释）

　　在HTML中，与大多数编程语言同样，有一种机制可用于在代码中编写注释 - 注释被浏览器忽略而且对用户不可见，其目的是容许您在代码中包含注释以说明您的注释代码工做，代码的不一样部分作什么，等等。若是你回到你已经工做六个月的代码库，而且不记得你作了什么 - 或者若是你手你的代码交给其余人来处理。

　　要打开你的HTML文件中一段内容为注释，你须要把它包在特殊标记<!--和-->，例如：

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

　　输出结果：I'm not inside a comment（第一段显示在实时输出中，但第二段不显示）

5.5 HTML中显示中文

　　参考代码：

<!DOCTYPE html>
<html>
    <head>
        <!--<meta charset="utf-8">-->
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>页面标题</title>
        
    </head>
    
    <body>
    
    </body>
</html>

　　输出结果：略。

5.6 重点和重要性编辑

　　在人类语言中，咱们常常强调某些词语来改变句子的含义，咱们常常但愿以某种方式将某些词语标记为重要或不一样。HTML提供了各类语义元素，容许咱们用这样的效果标记文本内容，在本节中，咱们将介绍一些最多见的内容。

（1）重点部分

　　当咱们想要强调口语时，咱们会强调某些词语，巧妙地改变咱们所说的含义。一样地，在书面语言中，咱们倾向于经过将它们用斜体来强调词语。例如，如下两个句子具备不一样的含义。

　　我很高兴你没迟到。

　　我很高兴你没迟到。

　　第一句听起来真的松了一口气，这我的没有迟到。相比之下，第二个听起来是讽刺性的或被动式的，表达了这我的迟到的烦恼。

　　在HTML中，咱们使用<em>（emphasis）元素来标记这样的实例。除了使文档阅读更有趣以外，这些文档还被屏幕阅读器识别并以不一样的语调说出来。默认状况下，浏览器将此样式设置为斜体，但您不该仅使用此标记来获取斜体样式。要作到这一点，你要使用一个<span>元素和一些CSS，或者一个<i>元素（见下文）。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

　　输出结果：I am glad you weren't late.

（2）很是重要的部分

　　为了强调重要的话，咱们倾向于强调他们在语言和大胆他们在书面语言。例如：

　　这种液体毒性很大。

　　我期望着你。别迟到了！

　　在HTML中，咱们使用<strong>（强重要性）元素来标记这样的实例。除了使文档更有用以外，屏幕阅读器还能够识别这些文档，并以不一样的语调使用。默认状况下，浏览器将其设置为粗体文本，但您不该仅使用此标记来得到粗体样式。要作到这一点，你要使用一个<span>元素和一些CSS，或者一个<b>元素（见下文）。

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

　　输出结果：

　　This liquid is highly toxic.

　　I am counting on you. Do not be late!

　　若是须要，能够在彼此内部强大并强调：

<p>This liquid is <strong>highly toxic</strong> --
if you drink it, <strong>you may <em>die</em></strong>.</p>

　　输出结果：This liquid is highly toxic -- if you drink it, you may die.

　　举例1：

<h1>Important notice</h1>
<p>On Sunday January 9th 2010, a gang of goths were
spotted stealing several garden gnomes from a
shopping center in downtown Milwaukee. They were
all wearing green jumpsuits and silly hats, and
seemed to be having a whale of a time. If anyone
has any information about this incident, please
contact the police now.</p>

（3）斜体，粗体，下划线......

　　到目前为止咱们讨论过的元素都有明确的语义关联。有这种状况<b>，<i>和<u>稍微复杂一些。他们的出现使得人们能够在CSS仍然支持不良或根本不支持的时代写出粗体，斜体或带下划线的文本。像这样的元素，只影响表示而不是语义，被称为表示元素，不该再使用，由于正如咱们以前所见，语义对于可访问性，SEO等很是重要。

　　HTML5从新定义<b>，<i>而且<u>具备新的，有些使人困惑的语义角色。

　　这是最好的经验法则：若是没有更合适的元素<b>，它可能适合使用，<i>或<u>传达传统上用粗体，斜体或下划线表达的含义。可是，保持可访问性思惟方式始终相当重要。斜体的概念对于使用屏幕阅读器的人或使用拉丁字母之外的书写系统的人来讲并非颇有帮助。

• <i> 用来表达传统上用斜体传达的含义：外来词，分类学名称，技术术语，思想......
• <b> 用来传达传统上用粗体表达的含义：关键词，产品名称，主导句......
• <u> 用于表达传统上由下划线传达的含义：正确的名称，拼写错误......

　　关于下划线的一种警告：人们强烈地将下划线与超连接联系起来。所以，在Web上，最好只加下连接。在<u>语义上合适时使用该元素，但考虑使用CSS将默认下划线更改成更适合Web的内容。下面的例子说明了如何完成它。

<!-- scientific names -->
<p>
    The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
    is the most common hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
    The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
    <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>
    Someday I'll learn how to <u>spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
    <li>
        <b>Slice</b> two pieces of bread off the loaf.
    </li>
    <li>
        <b>Insert</b> a tomato slice and a leaf of
        lettuce between the slices of bread.
    </li>
</ol>

　　输出结果：

　　The Ruby-throated Hummingbird (Archilochus colubris) is the most common hummingbird in Eastern North America.

　　The menu was a sea of exotic words like vatrushka, nasi goreng and soupe �� l'oignon.

　　Someday I'll learn how to spel better.

1. Slice two pieces of bread off the loaf.
2. Insert a tomato slice and a leaf of lettuce between the slices of bread.

六、HTML的元数据

6.1 什么是HTML头？

• 参考：What’s in the head? Metadata in HTML

　　举例HTML文档：

 1 <!DOCTYPE html>
 2 <ht
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     <body>
 8         <p>This is my page</p>
 9         </body>
10 </html>

　　HTML头是<head>元素的内容 - 与元素的内容<body>（在浏览器中加载时显示在页面上）不一样，头部的内容不会显示在页面上。相反，负责人的工做是包含有关文档的元数据。在上面的例子中，头部很是小：

1 <head>
2     <meta charset="utf-8">
3     <title>My test page</title>
4 </head>

　　然而，在较大的页面中，头部能够变得很是饱满。尝试访问一些您喜欢的网站，并使用开发人员工具查看他们的头部内容。咱们的目标不是向您展现如何使用可能放在头部的全部东西，而是教您如何使用您想要包含在头部的主要元素，并给您一些熟悉。让咱们开始吧。

6.2 元数据：<meta>元素

　　元数据是描述数据的数据，HTML具备向文档添加元数据的“官方”方式 - <meta>元素。固然，咱们在本文中讨论的其余内容也能够被视为元数据。

（1） 指定文档的字符编码

　　在咱们上面看到的示例中，包括如下行：

1 <meta charset="utf-8">

　　此元素仅指定文档的字符编码 - 容许文档使用的字符集。utf-8是一个通用字符集，包括来自任何人类语言的几乎任何字符。这意味着您的网页将可以处理显示任何语言; 所以，最好在您建立的每一个网页上进行设置！例如，您的页面能够正常处理英语和日语：

 1 <!DOCTYPE html>
 2 <html>
 3     head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     <body>
 8         <p>Japanese example: ご飯が熱い</p>
 9     </body>
10 </html>

　　输出结果：Japanese example: ご飯が熱い

　　例如，若是将字符编码ISO-8859-1设置为（拉丁字母的字符集），则页面渲染可能会显示为乱糟糟的：

 1 <!DOCTYPE html>
 2 <html>
 3     head>
 4         <meta charset="ISO-8859-1">
 5         <title>My test page</title>
 6     </head>
 7     <body>
 8         <p>Japanese example: ご飯が熱い</p>
 9     </body>
10 </html>

　　输出结果：Japanese example: ご飯が熱い

　　注意：某些浏览器（例如Chrome）会自动修复不正确的编码，所以根据您使用的浏览器，您可能没法看到此问题。您仍应utf-8在页面上设置编码，以免在其余浏览器中出现任何潜在问题。

　　添加中文参考代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>页面标题</title>
 8         
 9     </head>
10     
11     <body>
12     
13     </body>
14 </html>

 　　输出结果：略。

（2） 添加做者和描述

　　许多<meta>元素包括name和content属性：

• name指定元素的类型; 它包含什么类型的信息。
• content 指定实际的元内容。

　　在页面上包含两个有用的元元素定义页面的做者，并提供页面的简明描述。咱们来看一个例子：

1 <meta name="author" content="Chris Mills">
2 <meta name="description" content="The MDN Web Docs Learning Area aims to provide
3 complete beginners to the Web with all they need to know to get
4 started with developing web sites and applications.">

　　指定做者在如下几个方面颇有用：若是您想要联系他们有关内容的问题，那么可以找出编写页面的人是颇有用的。一些内容管理系统具备自动提取页面做者信息并使其可用于此目的的工具。

　　由于它使你的网页出如今搜索引擎中进行相关搜索更高的潜力，指定包括关键字与您的网页内容的描述是有用的（这种活动被称为搜索引擎优化或SEO）。

（3） 主动学习：描述在搜索引擎中的使用 

　　该描述也用于搜索引擎结果页面。让咱们经过练习来探索这个

1. 转到The Mozilla Developer Network的首页。
2. 查看页面的来源（右键/ Ctrl点击页面，从上下文菜单中选择查看页面源。）
3. 找到描述元标记。它看起来像这样（尽管它可能会随着时间而改变）：
4. 如今在您最喜欢的搜索引擎中搜索“MDN Web Docs”（咱们使用了Google。）您会注意到搜索结果中使用的描述<meta>和<title>元素内容 - 绝对值得拥有！

1 <meta name="description" content="The MDN Web Docs site 
2   provides information about Open Web technologies 
3   including HTML, CSS, and APIs for both Web sites and 
4   progressive web apps.">

　　注意：在Google中，您会看到主要主页连接下方列出的MDN Web文档的一些相关子页面 - 这些子页面称为附加连接，能够在Google的网站管理员工具中配置- 这种方式可让您的网站在Google搜索引擎中得到更好的搜索结果。

　　注意：许多<meta>功能再也不使用。例如，关键字<meta>element（<meta name="keywords" content="fill, in, your, keywords, here">） - 应该为搜索引擎提供关键字，以肯定该网页对不一样搜索字词的相关性 - 被搜索引擎忽略，由于垃圾邮件发送者只是在关键字列表中填充了数百个关键字，偏向结果。

（4） 其余类型的元数据

• 参考：https://www.cnblogs.com/zhongxinWang/p/4105915.html

　　例如，Open Graph Data是Facebook发明的一种元数据协议，用于为网站提供更丰富的元数据。在MDN Web Docs源代码中，您会发现：

1 <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
2 <meta property="og:description" content="The Mozilla Developer Network (MDN) provides
3 information about Open Web technologies including HTML, CSS, and APIs for both Web sites
4 and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
5 <meta property="og:title" content="Mozilla Developer Network">

　　这样作的一个结果是，当您在Facebook上连接到MDN Web Docs时，该连接将与图像和描述一块儿显示：为用户提供更丰富的体验。

　　Twitter也有本身相似的专有元数据，当网站的URL显示在twitter.com上时，效果相似。例如：

1 <meta name="twitter:title" content="Mozilla Developer Network">

　　meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签一般用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它能够用于鉴别做者，设定页面格式，标注内容提要和关键字；还能够设置页面使其能够根据你定义的时间间隔刷新本身,以及设置RASC内容等级，等等。

name 属性

1 <meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
2 <meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；
3 <meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；
4 <meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制做的做者；
5 <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">

　　其中的属性说明以下：

　　设定为all：文件将被检索，且页面上的连接能够被查询；

　　设定为none：文件将不被检索，且页面上的连接不能够被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的连接能够被查询；

　　设定为noindex：文件将不被检索，但页面上的连接能够被查询；

　　设定为nofollow：文件将不被检索，页面上的连接能够被查询。

http-equiv属性

1 <meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制做所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG五、utf-八、shift-Jis、Euc、Koi8-2等字符集；
2 <meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内，跳转到页面http://yourlink；
3 <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">能够用于设定网页的到期时间，一旦过时则必须到服务器上从新调用。须要注意的是必须使用GMT时间格式；
4 <meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就没法从Cache中再调出；
5 <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定，若是网页过时，存盘的cookie将被删除。须要注意的也是必须使用GMT时间格式；
6 <meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，能够防止浏览一些受限制的网站，而网站的限制级别就是经过meta属性来设置的；
7 <meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，能够防止本身的网页被别人看成一个frame页调用；
8 <meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不可以是一个frame页面。

Open Graph Protocol

　　Meta Property=og标签是什么呢?
　　og是一种新的HTTP头部标记，即Open Graph Protocol：

　　The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }

　　即这种协议可让网页成为一个“富媒体对象”。
　　用了Meta Property=og标签，就是你赞成了网页内容能够被其余社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。
　　SNS已经成为网络上的一大热门应用，优质的内容经过分享在好友间迅速传播。为了提升站外内容的传播效率，2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol)，任何网页只要遵照该协议，SNS就能从页面上提取最有效的信息并呈现给用户。

 1 <meta property=”og:type” content=”video”/>
 2 <meta property=”og:title” content=”五月天_忽然好想你MV现场版”/>
 3 <meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... 9-76EA-E5E20A1887C4″/>
 4 <meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/>
 5 <meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/v.swf”/>
 6 <meta property=”og:width” content=”500″ />
 7 <meta property=”og:height” content=”416″ />
 8 <meta property=”og:type” content=”video”/>
 9 <meta property=”og:title” content=”五月天_忽然好想你MV现场版_AA”/>
10 <meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... EA-E5E20A1887C44444″/>
11 <meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMyyyyyyyyyyyyyyyy.html”/>
12 <meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/y.swf”/>
13 <meta property=”og:width” content=”600″ />
14 <meta property=”og:height” content=”716″/>

 　　输出结果：略。

6.3 将自定义图标添加到您的网站编辑（自定义左上角网页图标）

　　为了进一步丰富您的网站设计，您能够在元数据中添加对自定义图标的引用，这些将在特定上下文中显示。最经常使用的是favicon（“收藏夹图标”（Favicon Icon）的缩写，指的是它在浏览器中的“收藏夹”或“书签”列表中的使用）。

　　卑微的图标已经存在不少年了。它是此类型的第一个图标：在多个位置使用的16像素方形图标。您可能会看到（取决于浏览器）包含每一个打开页面的浏览器选项卡中显示的图标，以及书签面板中带书签的页面旁边的图标。

　　首先要生成一个favicon.ico的文件。下面是链接：http://www.bitbug.net/（友情提示这个上传的图片不要超过512K，否则生成不出来），或者参考《教你制做完美的FAVICON图标》。

　　能够经过如下方式将favicon添加到您的页面：

1. 将其保存在与网站索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更常见格式的图标，.gif或者.png，但使用ICO格式将确保它能够像Internet Explorer 6同样工做。）
2. 将如下行添加到HTML <head>块中以引用它（type属性，type="image/x-icon"是指定文件的类型为icon）：

1 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

　　下面介绍设置favicon的几种方式：（参考：https://blog.csdn.net/YLXB2/article/details/53336962）

第一种方法：放在根目录（全站的）

　　这种方法最简单，在服务器根目录下放一个 favicon.ico 的文件，浏览器发现后就会使用。

第二种方法：link标签（能够针对某个网页单独设置ico）

　　在head里面加入代码：

1 <link rel="shortcut icon" href="ico文件url">

　　第二种方法有两种语法（上述列出了其中一种语法），对好比下：

1 <link rel="icon" href=".../favicon.ico">

　　或者

1 <link rel="shortcut icon" href=".../favicon.ico">

　　icon的link还有个type属性，指定文件的类型为icon。

1 <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

 　　还有不少其它图标类型须要考虑。例如，能够在MDN Web Docs主页的源代码中找到它：

 1 <!-- third-generation iPad with high-resolution Retina display: -->
 2 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
 3 <!-- iPhone with high-resolution Retina display: -->
 4 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
 5 <!-- first- and second-generation iPad: -->
 6 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
 7 <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
 8 <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
 9 <!-- basic favicon -->
10 <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

　　这些评论解释了每一个图标的用途 - 这些元素涵盖了提供一个漂亮的高分辨率图标，以便在网站保存到iPad的主屏幕时使用的内容。

　　注意：若是您的站点使用内容安全策略（CSP）来加强其安全性，则该策略将应用于favicon。若是您在加载favicon时遇到问题，请验证Content-Security-Policy标头的img-src指令是否阻止访问它。

6.4 将CSS和JavaScript应用于HTML

　　几乎全部你在现代都会使用的网站都会使用CSS来让它们看起来很酷，而JavaScript则能够提供互动功能，例如视频播放器，地图，游戏等等。这些最经常使用于分别使用<link>元素和<script>元素的网页。

（1）CSS应用于HTML

（1.1）外部引用

　　该<link>元素老是转到您的文档的头内。这须要两个属性，rel =“stylesheet”，它表示它是文档的样式表，而href，它包含样式表文件的路径：

1 <link rel="stylesheet" href="my-css-file.css">

　　规范写法：

1 <link rel="stylesheet" type="text/css" href="my-css-file.css">

（1.2）内部引用

1 <style>
2     <!--css样式设置-->
3 </style>

（2）JavaScript应用于HTML

（2.1）外部引用

　　该<script>元素没有在头上去; 事实上，一般最好将它放在文档正文的底部（就在结束</body>标记以前），以确保浏览器在尝试将JavaScript应用到它以前已经读取了全部HTML内容（若是JavaScript尝试访问尚不存在的元素，浏览器将抛出错误。）

1 <script src="my-js-file.js"></script>

　　规范写法：

1 <script type="text/javascript" src="my-js-file.js"></script>

　　注意：<script>元素可能看起来像一个空元素，但它不是，所以须要一个结束标记。您也能够选择将脚本放在<script>元素中，而不是指向外部脚本文件。

（2.2）内部引用

1 <script>
2     <!--脚本语句-->
3 </script>

（3）主动学习：将CSS和JavaScript应用于页面

1. 要开始这种主动学习，请获取咱们的meta-example.html，script.js和style.css文件的副本，并将它们保存在同一目录中的本地计算机上。确保使用正确的名称和文件扩展名保存它们。
2. 在浏览器和文本编辑器中打开HTML文件。
3. 按照上面给出的信息，添加HTML元素<link>和<script>元素，以便将CSS和JavaScript应用于HTML。

　　meta-example.html内容以下：

 1 <!DOCTYPE html>
 2 <html lang="en-US">
 3   <head>
 4     <meta charset="utf-8">
 5     <title>Meta examples</title>
 6     
 7     <meta name="author" content="Chris Mills">
 8     <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
 9 
10     <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
11     <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
12     <meta property="og:title" content="Metadata; The HTML &lt;head&gt;, on MDN">
13 
14     <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
15     <link rel="stylesheet" href="my-css-file.css">
16   </head>
17   <body>
18     <h1>Meta examples</h1>
19 
20     <p>Japanese example: ご飯が熱い。</p>
21     
22     <script src="my-js-file.js"></script>
23   </body>
24 </html>

　　my-js-file.js内容以下：

 1 var list = document.createElement('u1');
 2 var info = document.createElement('p');
 3 var html = document.querySelector('html');
 4 
 5 info.textContent = 'Below is a dynamic list. Click anywhere outside the list to add a new list item. Click an existing list item to change its text to something else.';
 6 
 7 document.body.appendChild(info);
 8 document.body.appendChild(list);
 9 
10 html.onclick = function() {
11     var listItem = document.createElement('li');
12     var listContent = prompt('What content do you want the list item to have?');
13     listItem.textContent = listContent;
14     list.appendChild(listItem);
15 
16     listItem.onclick = function(e) {
17         e.stopPropagation();
18         var listContent = prompt('Enter new content for your list item');
19         this.textContent = listContent;
20     }
21 };

　　my-css-file.css内容以下：

 1 html {
 2   background-color: green;
 3   font-size: 20px;
 4 }
 5 
 6 ul {
 7   background: red;
 8   padding: 10px;
 9   border: 1px solid black;
10 }
11 
12 li {
13   margin-left: 20px;
14 }

　　输出结果：

• JavaScript在页面中添加了一个空列表。如今，当您单击列表中的任意位置时，将弹出一个对话框，要求您为新列表项输入一些文本。按“肯定”按钮时，新列表项将添加到包含文本的列表中。单击现有列表项时，将弹出一个对话框，容许您更改项目的文本。
• CSS致使背景变绿，文字变得更大。它还设置了JavaScript添加到页面的一些内容（带有黑色边框的红色条是CSS添加到JS生成列表中的样式。）

6.5 设置文档的主要语言编辑

 　　最后，值得一提的是，您能够（而且确实应该）设置页面的语言。这能够经过将lang属性添加到开始HTML标记来完成（如meta-example.html中所示，以下所示）。

1 <html lang="en-US">

　　这在不少方面都颇有用。若是设置了语言，您的HTML文档将被搜索引擎更有效地编制索引（例如，容许它在特定语言的结果中正确显示），而且对于有视力障碍的人使用屏幕阅读器（例如，单词）法语和英语中都有“六”，但发音不一样。）

　　您还能够将文档的子部分设置为可识别为不一样的语言。例如，咱们能够将日语部分设置为日语，以下所示：

1 <p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

　　这些代码由ISO 639-1标准定义。您能够在HTML和XML中的语言标签中找到有关它们的更多信息。

七、建立超连接

• 参考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

　　超连接很是重要 - 它们是使Web 成为网络的缘由。本文介绍了建立连接所需的语法，并讨论了连接最佳实践。

7.1 什么是超连接？

　　超连接是Web提供的最激动人心的创新之一。它们从一开始就是Web的一个特性，但它们是使Web 成为Web的缘由 - 它们容许咱们将文档连接到咱们想要的任何其余文档（或其余资源），咱们也能够连接对于文档的特定部分，咱们能够在简单的网址上提供应用程序（与原生应用程序造成对比，必须安装并完成全部业务。）几乎任何Web内容均可以转换为连接，这样当单击（或以其余方式激活）它将使Web浏览器转到另外一个Web地址（URL）。

　　注意：URL能够指向HTML文件，文本文件，图像，文本文档，视频和音频文件以及能够在Web上生存的任何其余内容。若是Web浏览器不知道如何显示或处理该文件，它将询问您是否要打开该文件（在这种状况下，打开或处理该文件的任务将传递给设备上合适的本机应用程序）或下载文件（在这种状况下，您能够尝试稍后处理它。）

7.2 连接剖析编辑

　　经过将要转换为元素内的连接的文本（或其余内容，请参阅块级连接）包装<a>，并为其提供将包含该元素的href属性（也称为超文本引用或目标）来建立基本连接。您但愿连接指向的网址。

　　举例1：

<p>I'm creating a link to <a href="https://www.baidu.com">the Baidu homepage</a>.</p>

　　输出结果：I'm creating a link to the Baidu homepage.

　　举例2：

• href：此href属性将您但愿连接指向的Web地址指定为其值; 单击连接时浏览器导航到的位置。例如，href="https://www.mozilla.org/"，href="#"（表明回到页面的顶部，如<a href="#">回到顶部</a>）。
• title：该title属性指定有关连接的额外信息，例如您要连接到的页面。例如，title="The Mozilla homepage"。这将在悬停时显示为工具提示。
• target：该target属性指定将用于显示连接的浏览上下文。例如，target="_blank"将在新选项卡中显示该连接。若是要在当前选项卡中显示连接，请忽略此属性。
• name：该name属性规定锚（anchor）的名称，能够使用 name 属性建立 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，咱们能够建立直接跳至该命名锚（好比页面中某个小节）的连接，这样使用者就无需不停地滚动页面来寻找他们须要的信息了。

<p>I'm creating a link to <a href="https://www.baidu.com" title="Baidu" target="_blank">the Baidu homepage</a>.</p>

　　输出结果：I'm creating a link to the Baidu homepage.

值	描述
_blank	在新窗口中打开被连接文档。
_self	默认。在相同的框架中打开被连接文档。
_parent	在父框架集中打开被连接文档。
_top	在整个窗口中打开被连接文档。
framename	在指定的框架中打开被连接文档。

块级连接

　　如前所述，您能够将任何内容转换为连接，甚至是块级元素。若是您有想要变成连接的图像，则能够将图像放在<a></a>标记之间。

<a href="https://www.baidu.com" title="Baidu" target="_blank">
    <img src="baidu.png" alt="baidu log that link to the Baidu homepage">
</a>

　　img中的src为图片路径，img中的alt为当图片没法打开时的提示语。

　　命令锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

　　提示：锚的名称能够是任何你喜欢的名字。

　　提示：您能够使用 id 属性来替代 name 属性，命名锚一样有效。

　　举例1：

　　首先，咱们在 HTML 文档中对锚进行命名（建立一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

　　而后，咱们在同一个文档中建立指向该锚的连接：

<a href="#tips">有用的提示</a>

　　您也能够在其余页面中建立指向该锚的连接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

　　在上面的代码中，咱们将 # 符号和锚名称添加到 URL 的末端，就能够直接连接到 tips 这个命名锚了。

　　举例2（连接到同一个页面的不一样位置）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test page</title>

    </head>
    
    <body"> 
        <p>
            <a href="#C4">See Chapter 4</a>
        </p>
    
        <h2>Chapter 1</h2>
        <p>This chapter explains ba bla bla.</p>
        
        <h2>Chapter 2</h2>
        <p>This chapter explains ba bla bla.</p>
        
        <h2>Chapter 3</h2>
        <p>This chapter explains ba bla bla.</p>
        
        <h2><a name="C4">Chapter 4</a></h2>
        <p>This chapter explains ba bla bla.</p>

        <h2>Chapter 5</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 6</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 7</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 8</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 9</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 10</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 11</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 12</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 13</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 14</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 15</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 16</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 17</h2>
        <p>This chapter explains ba bla bla</p>
    </body>
</html>

　　输出结果：略。

7.3 关于URL和路径的快速入门编辑

　　要彻底了解连接目标，您须要了解URL和文件路径。本节为您提供实现此目的所需的信息。

　　URL或统一资源定位器只是一个文本字符串，用于定义Web上某些内容的位置。例如，Mozilla的英文主页位于https://www.mozilla.org/en-US/。

　　URL使用路径查找文件。路径指定文件系统中您感兴趣的文件所在的位置。让咱们看一个目录结构的简单示例（请参阅creation-hyperlinks目录。）

　　调用此目录结构的根creating-hyperlinks。在本地使用网站时，您将拥有一个整个网站所在的目录。在根目录中，咱们有一个index.html文件和一个contacts.html。在真实的网站中，index.html将是咱们的主页或登陆页面（做为网站或网站特定部分的入口点的网页）。

　　咱们的根目录中还有两个目录 - pdfs和projects。它们每一个都有一个文件 - 分别是PDF（project-brief.pdf）和index.html文件。请注意index.html，只要它们位于文件系统的不一样位置，您就能够很是高兴地在一个项目中拥有两个文件。许多网站都这样作。第二个index.html多是项目相关信息的主要登录页面。

　　相同目录：若是要包含指向内部index.html（顶层index.html）的超连接contacts.html，则只需指定要连接到的文件的文件名，由于它与当前文件位于同一目录中。因此你要使用的URL是contacts.html：

<p>Want to contact a specific staff member?
Find details on our <a href="contacts.html">contacts page</a>.</p>

　　向下移动到子目录：若是要在指向内部index.html（顶层index.html）中包含超连接projects/index.html，则须要projects在指示要连接到的文件以前进入目录。这是经过指定目录的名称，而后是正斜杠，而后指定文件的名称来完成的。因此你要使用的URL是projects/index.html：

<p>Visit my <a href="projects/index.html">project homepage</a>.</p>

　　返回到父目录：若是要在projects/index.html指向内部包含超连接pdfs/project-brief.pdf，则必须进入目录级别，而后返回到pdf目录。使用两个点表示“上一个目录” ..- 因此你要使用的URL是../pdfs/project-brief.pdf：

<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

　　注意：若是须要，您能够将这些功能的多个实例组合到复杂的URL中，例如../../../complex/path/to/my/file.html。

（1）文件碎片

　　能够连接到HTML文档的特定部分（称为文档片断），而不是仅连接到文档的顶部。要执行此操做，首先必须为id要连接的元素指定属性。连接到特定标题一般是有意义的，所以看起来以下所示：

• id 属性规定 HTML 元素的惟一的 id。
• id 在 HTML 文档中必须是惟一的。
• id 属性可用做连接锚（link anchor），经过 JavaScript（HTML DOM）或经过 CSS 为带有指定 id 的元素改变或添加样式。

　　语法：

<element id="value">

　　使用示例以下：

<h2 id="Mailing_address">Mailing address</h2>

　　而后要连接到该特定的id，您将其包含在URL的末尾，前面有一个哈希/井号符号，例如：

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

　　甚至能够单独使用文档片断引用连接到同一文档的另外一部分：

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

　　举例1：

<h2 id="Mailing_address">Mailing address</h2>
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

　　输出结果：

　　点击company mailing address 连接：

　　举例2：

 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4         function change_header()
 5         {
 6             document.getElementById("myHeader").innerHTML="Nice day!";
 7         }
 8         </script>
 9     </head>
10 
11     <body>
12 
13         <h1 id="myHeader">Hello World!</h1>
14         <button onclick="change_header()">Change text</button>
15 
16     </body>
17 </html>

　　输出结果：略。

（2）绝对与相对URL

　　在Web上遇到的两个术语是绝对URL和相对URL：

　　绝对URL：指向由其在Web上的绝对位置定义的位置，包括协议和域名。所以，例如，若是index.html页面上传到projects位于Web服务器根目录内的目录，而且该网站的域名是http://www.example.com，则该页面将可用http://www.example.com/projects/index.html（或者甚至只是http://www.example.com/projects/，由于大多数Web服务器只是寻找着陆index.html若是未在URL中指定，则加载页面。）

　　绝对URL始终指向相同的位置，不管它在何处使用。

　　相对URL：指向与您连接的文件相关的位置，更像咱们在上一节中看到的内容。例如，若是咱们想要从咱们的示例文件连接http://www.example.com/projects/index.html到同一目录中的PDF文件，那么URL就只是文件名 - 例如project-brief.pdf- 不须要额外的信息。若是PDF在被projects调用的子目录中可用pdfs，则相对连接将是pdfs/project-brief.pdf（等效的绝对URL http://www.example.com/projects/pdfs/project-brief.pdf。）

　　相对URL将指向不一样的位置，具体取决于其内部使用的文件所在的位置 - 例如，若是咱们将index.html文件移出projects目录并进入网站的根目录（顶层，而不是任何目录），pdfs/project-brief.pdf它内部的相对URL连接如今指向位于的文件http://www.example.com/pdfs/project-brief.pdf，而不是位于的文件http://www.example.com/projects/pdfs/project-brief.pdf。

　　固然，project-brief.pdf文件和pdfs文件夹的位置不会由于您移动index.html文件而忽然改变- 这会使您的连接指向错误的位置，所以若是单击它将没法工做。你须要当心！

7.4 连接最佳实践

　　在页面上放置连接很容易。这还不够。咱们须要让全部读者都能够访问咱们的连接，不管他们当前的背景和他们喜欢哪些工具。例如：

• 屏幕阅读器用户喜欢从页面上的连接跳转到连接，以及读取脱离上下文的连接。
• 搜索引擎使用连接文原本索引目标文件，所以最好在连接文本中包含关键字以有效地描述连接的内容。
• 视觉读者浏览页面而不是阅读每一个单词，他们的眼睛将被吸引到突出的页面特征，如连接。他们会发现描述性连接文本颇有用。

　　咱们来看一个具体的例子：

　　好的连接文本：Download Firefox

<p><a href="https://firefox.com/">
    Download Firefox
</a></p>

　　坏连接文本：Click here to download Firefox

<p><a href="https://firefox.com/">
    Click here
</a>
to download Firefox</p>

　　其余提示：

• 不要重复URL做为连接文本的一部分 - URL看起来很丑，而且当屏幕阅读器逐字逐句地读出它们时听起来更加丑陋。
• 不要在连接文本中说“连接”或“连接到” - 这只是噪音。屏幕阅读器告诉人们有一个连接。视觉用户也会知道有一个连接，由于连接一般用不一样的颜色设计并加下划线（这种约定一般不该该被破坏，由于用户习惯了它。）
• 保持您的连接标签尽量短 - 长连接尤为烦恼屏幕阅读器用户，他们必须听到整个事情的读出。
• 最小化将同一文本的多个副本连接到不一样位置的实例。这可能会给屏幕阅读器用户带来问题，他们常常会在上下文中显示连接列表 - 全部标记为“单击此处”，“单击此处”，“单击此处”的连接会使人困惑。

（1）尽量使用相对连接

　　从上面的描述中，您可能会认为一直使用绝对连接是个好主意; 毕竟，当页面像相对连接同样移动时，它们不会中断。可是，当连接到同一网站内的其余位置时，您应该尽量使用相对连接（当连接到另外一个网站时，您将须要使用绝对连接）：

• 首先，扫描代码要容易得多 - 相对URL一般比绝对URL短不少，这使得阅读代码变得更加容易。
• 其次，尽量使用相对URL更有效。当您使用绝对URL时，浏览器首先在域名系统上查找服务器的实际位置（DNS ;请参阅Web如何工做以获取更多信息），而后它转到该服务器并找到正在进行的文件请求。另外一方面，使用相对URL，浏览器只在同一服务器上查找正在请求的文件。所以，若是您使用相对URL能够执行的绝对URL，则会不断地使您的浏览器执行额外的工做，这意味着它的执行效率会下降。

（2）连接到非HTML资源 - 留下明确的路标

　　连接到将要下载的资源（如PDF或Word文档）或流式传输（如视频或音频）或具备其余可能意外的效果（打开弹出窗口或加载Flash影片）时，应添加明确的措辞减小任何混乱。例如，它可能很是烦人：

• 若是您使用的是低带宽链接，请单击连接，而后意外启动多兆字节下载。
• 若是您还没有安装Flash播放器，请单击连接，而后忽然转到须要Flash的页面。

　　让咱们看一些例子，看看这里能够使用哪一种文本：

 1 <p><a href="http://www.example.com/large-report.pdf">
 2   Download the sales report (PDF, 10MB)
 3 </a></p>
 4 
 5 <p><a href="http://www.example.com/video-stream/" target="_blank">
 6   Watch the video (stream opens in separate tab, HD quality)
 7 </a></p>
 8 
 9 <p><a href="http://www.example.com/car-game">
10   Play the car game (requires Flash)
11 </a></p>

　　当连接到要下载而不是在浏览器中打开的资源时，能够使用该download属性提供默认的保存文件名。这是一个带有最新Windows版Firefox的下载连接的示例：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

　　输出结果：略。

7.5 主动学习：建立导航菜单

　　最终效果以下图所示：

　　编写HTML代码以下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Homepage</title>
 6         <link rel="shortcut icon" href="favicon.ico" type="images/x-icon">
 7     </head>
 8     <body>
 9     
10         <ul>
11             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html" title="title_Index" target="_blank">Index</a></li>
12             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html" title="title_Pictures" target="_blank">Pictures</a></li>
13             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html" title="title_Projects" target="_blank">Projects</a></li>
14             <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html" title="title_Social" target="_blank">Social</a></li>
15         </ul>
16         
17     <h2>Homepage</h2>
18     <p>Welcome to my exciting homepage</p>
19     
20     </body>
21 </html>

　　输出结果：略。

7.6 电子邮件连接

　　能够建立连接或按钮，单击这些连接或按钮可打开新的外发电子邮件消息，而不是连接到资源或页面。这是使用<a>元素和mailto:URL方案完成的。

　　在其最基本和最经常使用的形式中，mailto:连接仅指示预期收件人的电子邮件地址。例如：

<a href="mailto:zyjxxxx@126.com">Send email to nowhere</a>
实际举例，即会调用邮件软件发送邮件：
<p><a href="mailto:zyjxxxx@126.com">Send email to nowhere</a></p>

　　输出结果：Send email to nowhere

　　实际上，电子邮件地址甚至是可选的。若是您将其遗漏（即，您href只是“mailto：”），则用户的邮件客户端将打开一个新的外发电子邮件窗口，该客户端还没有指定目标地址。这一般用做“共享”连接，用户能够单击该连接将电子邮件发送到他们选择的地址。

<a href="mailto:">Send email to nowhere</a>
实际举例，即会调用邮件软件发送邮件：
<p><a href="mailto:">Send email to nowhere</a></p>

　　输出结果：Send email to nowhere 

（1）指定详细信息

　　除了电子邮件地址，您还能够提供其余信息。实际上，任何标准邮件头字段均可以添加到mailto您提供的URL中。最经常使用的是“subject”，“cc”和“body”（这不是真正的标题字段，但容许您为新电子邮件指定短内容消息）。每一个字段及其值都指定为查询字词。

　　这是一个包含cc，bcc，主题和正文的示例：

<a href="mailto:mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">Send mail with cc, bcc, subject and body</a>

　　输出结果：

　　注意：每一个字段的值必须是URL编码的，即非打印字符（不可见字符，如制表符，回车符和分页符）和百分比转义空格。还要注意使用问号（?）将主URL与字段值分开，并使用＆符号（＆）分隔mailto:URL中的每一个字段。这是标准的URL查询表示法。阅读GET方法以了解更经常使用的URL查询符号。

八、HTML CSS和JavaScript

8.1 HTML CSS

　　经过使用 HTML4.0，全部的格式化代码都可移出 HTML 文档，而后移入一个独立的样式表。

　　举例1（本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         <style type="text/css">
 7             h1 {color: red}
 8             p {color: blue}
 9         </style>
10     </head>
11     
12     <body"> 
13         
14         <h1>Header 1</h1>
15         <p>A paragraph</p>
16     
17     </body>
18 </html>

　　输出结果：

　　举例2（没有下划线的连接）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <p><a href="https://www.baidu.com" style="text-decoration:none" target="_blank">This is a link without underline.</a></p>
11     
12     </body>
13 </html>

　　测试结果：This is a link without underline.

　　举例3（连接到一个外部样式）：

　　csstest1.css

h1 {
    color: red;
}

p {
    color: blue;
}

　　test.html：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7         <link rel="stylesheet" type="text/css" href="csstest1.css">
 8     </head>
 9     
10     <body"> 
11         <h1>Header 1</h1>
12         <p>This is a link without underline.</p>
13     
14     </body>
15 </html>

　　输出结果：

（1）外部样式表

　　当样式须要被应用到不少页面的时候，外部样式表将是理想的选择。使用外部样式表，你就能够经过更改一个文件来改变整个站点的外观。

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

（2）内部样式表

　　当单个文件须要特别样式时，就能够使用内部样式表。你能够在 head 部分经过 <style> 标签订义内部样式表。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7         <style type="text/css">
 8             body {background-color: red}
 9             p {margin-left: 20px}
10         </style>
11     </head>
12     
13     <body"> 
14         <h1>Header 1</h1>
15         <p>This is a link without underline.</p>
16 
17     </body>
18 </html>

　　输出结果：

（3）内联样式

　　当特殊的样式须要应用到个别元素时，就能够使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性能够包含任何 CSS 属性。如下实例显示出如何改变段落的颜色和左外边距。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body"> 
10         <h1>Header 1</h1>
11         <p style="color: red; margin-left: 20px;">This is a paragraph.</p>
12 
13     </body>
14 </html>

　　输出结果：

8.2 HTML Script

（1）HTML script 元素

　　JavaScript 使 HTML 页面具备更强的动态和交互性。

　　<script> 标签用于定义客户端脚本，好比 JavaScript。

　　script 元素既可包含脚本语句，也可经过 src 属性指向外部脚本文件。

　　必需的 type 属性规定脚本的 MIME 类型。

　　JavaScript 最经常使用于图片操做、表单验证以及内容动态更新。

　　下面的脚本会向浏览器输出“Hello World!”：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <script type="text/javascript">
11             document.write("<h1>Hello, world!</h1>")
12         </script>
13     
14     </body>
15 </html>

　　输出结果：

（2）<noscript> 标签

　　<noscript> 标签提供没法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

　　noscript 元素可包含普通 HTML 页面的 body 元素中可以找到的全部元素。

　　只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <script type="text/javascript">
11             document.write("<h1>Hello, world!</h1>")
12         </script>
13         <noscript>Your browser does not support JavaScript!</noscript>
14     
15     </body>
16 </html>

　　输出结果：略。

（3）将CSS和JavaScript应用于HTML

　　几乎全部你在现代都会使用的网站都会使用CSS来让它们看起来很酷，而JavaScript则能够提供互动功能，例如视频播放器，地图，游戏等等。这些最经常使用于分别使用<link>元素和<script>元素的网页。

　　该<link>元素老是转到您的文档的头内。这须要两个属性，rel =“stylesheet”，它表示它是文档的样式表，而href，它包含样式表文件的路径：

<link rel="stylesheet" href="my-css-file.css">

　　该<script>元素没有在头上去; 事实上，一般最好将它放在文档正文的底部（就在结束</body>标记以前），以确保浏览器在尝试将JavaScript应用到它以前已经读取了全部HTML内容（若是JavaScript尝试访问尚不存在的元素，浏览器将抛出错误。）

<script src="my-js-file.js"></script>

　　（外部）CSS和（外部）JavaScript与HTML结合使用举例以下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7         <link rel="stylesheet" href="my-css-file.css">
 8     </head>
 9     
10     <body"> 
11         <h1>Header 1</h1>
12         <p>This is a link without underline.</p>
13     
14         <script src="my-js-file.js"></script>
15     </body>
16 </html>

　　输出结果：略。

　　注意：<script>元素可能看起来像一个空元素，但它不是，所以须要一个结束标记。您也能够选择将脚本放在<script>元素中，而不是指向外部脚本文件。

九、HTML框架集与布局、Frame/Iframe、HTML5新标签

9.1 Frameset布局

• 参考示例网站：百谷歌度（将百度和谷歌放在一块儿搜索，左边为百度搜索结果，右边为谷歌搜索结果）。

9.2 Table布局

　　不多使用，逐渐被Div布局替代。

　　注释：<table> 元素不是做为布局工具而设计的。

　　<table> 元素的做用是显示表格化的数据。

　　使用 <table> 元素可以取得布局效果，由于可以经过 CSS 设置表格元素的样式：

　　test.html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <link rel="stylesheet" href="csstest1.css">
 8     </head>
 9     
10     <body>
11         <table class="lamp">
12             <tr>
13                 <th>
14                     <img src="baidu.jpg">
15                 </th>
16                 <td>The table element was not designed to be a layout tool.</td>
17             </tr>
18         </table>
19     
20     </body>
21 </html>

　　csstest1.css代码：

table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}

　　输出结果：

9.3 Div布局

　　当前最多见（流行的一种页面布局方式）。

DIV详细解释：

• div：能够定义文档中的分区或节
• div：标签能够把文档分割为独立的、不一样的部分
• div：是一个块级元素。这意味着它的内容自动地开始一个新行
• div：一般与css进行配合，会有更增强的表现形式

布局实例时须要用到的css属性：

• width属性
• height属性
• background-color属性
• float:left 使得div不占据一行

（1）通常经常使用的Div页面布局

　　通常页面能够简单分为上中下结构，上为头部，中为内容部分，下为脚部，举例（html结构以下）：

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

　　举例1：

 1 <!DOCTYPE <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title>
 7         
 8     </title>
 9     <meta name="viewport" content="width=device-width, initial-scale=1">
10     <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
11     <script src="main.js"></script>
12 </head>
13    
14 <body>
15     <div class="header"></div>                    <!--在html5中能够替换为<header></header>-->
16     <div class="nav"></div>　　　　　　　        　　<!--在html5中能够替换为<nav></nav>-->
17     <div class="content">
18         <div class="content_left"></div>
19         <div class="content_right"></div>
20     </div>
21     <div class="footer"></div>                    <!--在html5中能够替换为<footer></footer>-->
22 </body>
23 </html>>

　　输出结果：略。

　　举例2（使用了四个 <div> 元素来建立多列布局）：

　　test.html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7     </head>
 8     
 9     <body>
10 
11         <div id="header">
12             <h1>City Gallery</h1>
13         </div>
14 
15         <div id="nav">
16             London<br />
17             Paris<br />
18             Tokyo<br />
19         </div>
20 
21         <div id="section">
22             <h1>London</h1>
23             <!--<p>标签会自动在其先后建立一些空白-->
24             <p>
25                 London is the capital city of England. It is the most populous city in the United Kingdom,
26                 with a metropolitan area of over 13 million inhabitants.
27             </p>
28             <p>
29                 Standing on the River Thames, London has been a major settlement for two millennia,
30                 its history going back to its founding by the Romans, who named it Londinium.
31             </p>
32         </div>
33 
34         <div id="footer">
35             Copyright W3School.com.cn
36         </div>
37     </body>
38 </html>

　　csstest1.css代码：

 1 #header {
 2     background-color:black;
 3     color:white;
 4     text-align:center;
 5     padding:5px;
 6 }
 7 #nav {
 8     line-height:30px;
 9     background-color:#eeeeee;
10     height:300px;
11     width:100px;
12     float:left;
13     padding:5px; 
14 }
15 #section {
16     width:350px;
17     float:left;
18     padding:10px; 
19 }
20 #footer {
21     background-color:black;
22     color:white;
23     clear:both;
24     text-align:center;
25     padding:5px; 
26 }

　　输出结果：

（2）HTML5新增语义化标签

语义化标签（<header>和<footer>等标签，在一个页面中不限使用的个数）：

1. header：页面头部
2. footer：页面脚部，好比会在<footer>标签中加入<addres>等信息
3. article：定义页面独立的内容区域，通常为文章，标签订义的内容自己必须是有意义的，而且必须是独立于文档的其他部分，好比能够用在的地方：论坛帖子、博客文章、新闻故事、评论等，举例：www.haoroos.cn
4. aside：定义页面的侧边栏内容
5. details：文档某个部分的细节
6. summary：是details中的标题，目前chrome支持。
   

   <details>
       <summary>点击查看更多</summary>
       <img src="img.jpg" alt="" title="">
       <h1>点击展开后能够看到这部分文字</h1>
   </details>

   输出结果：略。
7. time：定义日期或时间，好比一些应用程序可以根据<time>标签订义的日期，把生日提醒或排定的事件添加到用户日程表中，搜索引擎也可以生成更智能的搜索结果。
   

   <p>
       我在<time datetime="2018-05-01">劳动节</time>出去旅游。
   </p>

   输出结果：略。

8. ruby：加注释，就像小时候学汉字时，上面加的拼音。ruby是和<rt>一块儿用的，<rt>的内容会显示在文字的上面，至关于拼音；<rp>是在该标签不能显示时显示的文字内容。
   

   <ruby>
       大<rt>da</rt>
       <rp>不能正常显示文字内容时显示的内容</rp>
   </ruby>

   输出结果：略。

9. mark：标记连接，定义带有记号的文本，它会给你要突出的文本加上背景色。
   

   <p>你最喜欢的<mark>课程</mark>是？</p>

   输出结果：略。

10. nav：导航，并非全部的HTML文档都要用到<nav>元素。<nav>元素只是做为标注一个导航连接的区域。
    

    <!--举例1-->
    <nav>
        <ul>
            <li><a href="/html">HTML<a></li>
            <li><a href="/css">CSS<a></li>
            <li><a href="/javascript">JavaScript<a></li>
            <li><a href="/jquery">jQuery<a></li>
        </ul>
    </nav>
    
    <!--举例2-->
    <nav>
        <a href="/html">HTML<a>
        <a href="/css">CSS<a>
        <a href="/javascript">JavaScript<a>
        <a href="/jquery">jQuery<a>
    </nav>

    输出结果：略。

11. progress：进度标签，通常表明一个进度条，显示数据的进度，而非<range>，<range>是指定范围。属性：value：当前值，max：最大值，最小值默认为0，不用设置。
    

    <progress value="22" max="100"><progress>
    
    10:00开始<progress value=".5" max="2"><progress>12:00结束

    输出结果：略。

12. section：文档中的节或者文章，通常有两个用处：（1）定义文档中的节（section、区段）和<div>相似；（2）定义文章，这时它通常带有标题。
    

    <section>
        <h1>PRC</h1>
        <p>The People's Republic of China was born in 1949...</p>
    </section>

    输出结果：略。

13. video：定义视频，<video> 标签是 HTML 5 的新标签。详细请参考：https://www.cnblogs.com/zyjhandsome/p/9775736.html

    属性	值	描述
    autoplay⭐	autoplay	若是出现该属性，则视频在就绪后立刻播放。
    controls⭐	controls	若是出现该属性，则向用户显示控件，好比播放按钮。
    height⭐	pixels	设置视频播放器的高度。
    loop⭐	loop	若是出现该属性，则当媒介文件完成播放后再次开始播放。
    preload⭐	preload	若是出现该属性，则视频在页面加载时进行加载，并预备播放。 若是使用 "autoplay"，则忽略该属性。
    src⭐	url	要播放的视频的 URL。
    width⭐	pixels	设置视频播放器的宽度。

14. audio：定义音频，<audio> 标签是 HTML 5 的新标签。详细请参考：https://www.cnblogs.com/zyjhandsome/p/9775736.html

    属性	值	描述
    autoplay⭐	autoplay	若是出现该属性，则音频在就绪后立刻播放。
    controls⭐	controls	若是出现该属性，则向用户显示控件，好比播放按钮。
    loop⭐	loop	若是出现该属性，则每当音频结束时从新开始播放。
    muted⭐	muted	规定视频输出应该被静音。
    preload⭐	preload	若是出现该属性，则音频在页面加载时进行加载，并预备播放。 若是使用 "autoplay"，则忽略该属性。
    src⭐	url	要播放的音频的 URL。

15. source：资源
16. datalist：提示可能的值，参考Web开发——HTML基础（HTML表单/下拉列表/多行输入），对比<select>标签
17. embed：引入flash或者插件，定义嵌入的内容，好比插件、flash。它中间不要加内容，和video不一样，会显示出来。
    

    <embed src="deno.swf" type="application/x-shockwave-flash"></embed>

    输出结果：略。

18. canvas：画布标签，<canvas>只是个容器，能够经过控制坐标
    

    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 80, 100);
    </script>

    输出结果：

　　新增的元素包含了语义和结构元素、表单元素、新多媒体元素、绘图元素。

　　html5的标签是语义化的，它是H5的研究者花费大量精力研究用户的通用行为，好比Google分析了上百万的页面，从中分析出了DIV标签的通用ID名称而得来。

语义化的好处：

1. 去掉或样式丢失的时候能让页面呈现清晰的结构
2. 搜索引擎的爬虫也依赖于标记来肯定上下文和各个关键字的权重（若是须要“友情连接”，通常会从footer中查找）
3. 便于团队开发和维护

　　举例（使用 <header>, <nav>, <section>, 以及 <footer> 来建立多列布局）：

　　test.html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <link rel="stylesheet" href="csstest1.css">
 8     </head>
 9     
10     <body>
11 
12         <header>
13             <h1>City Gallery</h1>
14         </header>
15 
16         <nav>
17             London<br>
18             Paris<br>
19             Tokyo<br>
20         </nav>
21 
22         <section>
23             <h1>London</h1>
24             <p>
25             London is the capital city of England. It is the most populous city in the United Kingdom,
26             with a metropolitan area of over 13 million inhabitants.
27             </p>
28             <p>
29             Standing on the River Thames, London has been a major settlement for two millennia,
30             its history going back to its founding by the Romans, who named it Londinium.
31             </p>
32         </section>
33 
34         <footer>
35             Copyright W3School.com.cn
36         </footer>
37     </body>
38 </html>

　　输出结果：

9.4 从对象到iframe-其它嵌入技术

• 参考：从对象到iframe-其它嵌入技术

　　嵌入各类内容类型到您的网页：对<iframe>，  <embed>和<object>元素。<iframe>用于嵌入其余网页，另外两个容许您嵌入PDF，SVG甚至Flash - 一种即将推出的技术。

9.5 HTML框架 Frame/Iframe 经过使用在同一个浏览器中显示不止一个页面

　　经过使用框架，你能够在同一个浏览器窗口中显示不止一个页面。

• <frameset>标签，参考：http://www.w3school.com.cn/tags/tag_frameset.asp
• <frame>标签，参考：http://www.w3school.com.cn/tags/tag_frame.asp
• <noframes>标签，参考：http://www.w3school.com.cn/tags/tag_noframes.asp

<frameset>标签可选的属性：

属性	值	描述
cols	pixels % *	定义框架集中列的数目和尺寸。有关 cols 属性的详细信息。
rows	pixels % *	定义框架集中行的数目和尺寸。有关 rows 属性的详细信息。

　　<frameset>标签的其它属性：border（设置边框的宽度）、bordercolor（边框的颜色）、noresize="noresize"（可让框架固定住，不可拖动）、frameborder="yes|no"（显示或隐藏边框）。

<frame>标签可选的属性（包括标准的全局属性）：

属性	值	描述
frameborder	0 1	规定是否显示框架周围的边框。
longdesc	URL	规定一个包含有关框架内容的长描述的页面。
marginheight	pixels	定义框架的上方和下方的边距。
marginwidth	pixels	定义框架的左侧和右侧的边距。
name	name	规定框架的名称。
noresize	noresize	规定没法调整框架的大小。
scrolling	yes no auto	规定是否在框架中显示滚动条。
src	URL	规定在框架中显示的文档的 URL。

（1）举例1（垂直框架）

 1 <html>
 2 
 3 <frameset cols="25%,50%,25%">
 4 
 5     <frame src="https://www.baidu.com/">
 6     <frame src="https://www.jd.com/">
 7     <frame src="https://www.taobao.com/">
 8 
 9 </frameset>
10 
11 </html>

　　输出结果：

（2）举例2（水平框架）

 1 <html>
 2 
 3 <frameset rols="25%,50%,25%">
 4 
 5     <frame src="https://www.baidu.com/">
 6     <frame src="https://www.jd.com/">
 7     <frame src="https://www.taobao.com/">
 8 
 9 </frameset>
10 
11 </html>

　　输出结果：

（3）举例3（使用 <noframes> 标签）

 1 <html>
 2 
 3     <frameset rows="25%,50%,25%">
 4 
 5         <frame src="https://www.baidu.com/">
 6         <frame src="https://www.jd.com/">
 7         <frame src="https://www.taobao.com/">
 8         <noframes>
 9             <body>Your browser is unable to handle the framework!</body>
10         </noframes>
11     </frameset>
12 
13 </html>

　　输出结果：略。

（4）举例4（混合框架结构）

 1 <html>
 2 
 3     <frameset rows="50%,50%">
 4         <frame src="https://www.baidu.com/">
 5         
 6         <frameset cols="25%,75%">
 7             <frame src="https://www.jd.com/">
 8             <frame src="https://www.taobao.com/">
 9         </frameset>
10         
11     </frameset>
12 
13 </html>

　　输出结果：

（5）举例5（三个网页，上1下2，下左边为列表网页，内容均在下右边网页中打开）

　　listTest.html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11         </script>
12         
13         <style type="text/css">
14         </style>
15 
16     </head>
17     
18     <body>
19         <ul>
20             <li><a href="https://www.baidu.com/" target="rightWin">Baidu</a></li>
21             <li><a href="https://www.taobao.com/" target="rightWin">Taobao</a></li>
22             <li><a href="https://www.jd.com/" target="rightWin">Jingdong</a></li>
23         </ul>
24     </body>
25 </html>

　　frameTest.html代码：

 1 <html>
 2 
 3     <frameset rows="50%,50%">
 4         <frame src="https://www.baidu.com/">
 5         
 6         <frameset cols="40%,60%">
 7             <frame src="listTest.html">
 8             <frame name="rightWin" src="https://www.taobao.com/">
 9         </frameset>
10         
11     </frameset>
12 
13 </html>

　　输出结果：

（6）举例6（含有 noresize="noresize" 属性的框架结构）

　　noresize="noresize"设置几个<frame>网页之间不可拖动

 1 <html>
 2 
 3 <frameset rows="50%,20%,30%">
 4 
 5     <frame src="/example/html/frame_a.html" noresize="noresize">
 6     <frame src="/example/html/frame_b.html">
 7     <frame src="/example/html/frame_c.html">
 8     
 9 </frameset>
10 
11 </html>

　　输出结果：略。

（7）Iframe框架的使用

　　Iframe用于在网页内显示网页。

　　语法：

<iframe src="URL"></frame>

　　Iframe设置高度和宽度

　　举例：

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

　　Iframe删除边框

　　举例：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

　　使用Iframe做为连接的目标

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7     </head>
 8     
 9     <body>
10     
11         <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
12         <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
13         
14     </body>
15 </html>

　　输出结果：

　　点击W3School.com.cn后：

 十、标签和属性

• 参考：http://www.w3school.com.cn/tags/index.asp

十一、HTML事件属性 

11.1 全局事件属性

　　HTML 4 增长了使事件在浏览器中触发动做的能力，好比当用户点击元素时启动 JavaScript。

　　如需学习更多有关事件编程的知识，请访问咱们的 JavaScript 教程。

　　下面列出了添加到 HTML 元素以定义事件动做的全局事件属性。

　　⭐= HTML5 中新的事件属性。

11.2 Window 事件属性

　　针对 window 对象触发的事件（应用到 <body> 标签）：

属性	值	描述
onafterprint	script	文档打印以后运行的脚本。
onbeforeprint	script	文档打印以前运行的脚本。
onbeforeunload	script	文档卸载以前运行的脚本。
onerror	script	在错误发生时运行的脚本。
onhaschange	script	当文档已改变时运行的脚本。
onload	script	页面结束加载以后触发。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当窗口隐藏时运行的脚本。
onpageshow	script	当窗口成为可见时运行的脚本。
onpopstate	script	当窗口历史记录改变时运行的脚本。
onredo	script	当文档执行撤销（redo）时运行的脚本。
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。
onundo	script	在文档执行 undo 时运行的脚本。
onunload	script	一旦页面已下载时触发（或者浏览器窗口已被关闭）。

11.3 Form 事件

由 HTML 表单内的动做触发的事件（应用到几乎全部 HTML 元素，但最经常使用在 form 元素中）：

属性	值	描述
onblur	script	元素失去焦点时运行的脚本。
onchange	script	在元素值被改变时运行的脚本。
oncontextmenu	script	当上下文菜单被触发时运行的脚本。
onfocus	script	当元素得到焦点时运行的脚本。
onformchange	script	在表单改变时运行的脚本。
onforminput	script	当表单得到用户输入时运行的脚本。
oninput	script	当元素得到用户输入时运行的脚本。
oninvalid	script	当元素无效时运行的脚本。
onreset	script	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	script	在元素中文本被选中后触发。
onsubmit	script	在提交表单时触发。

11.4 Keyboard 事件

属性	值	描述
onkeydown	script	在用户按下按键时触发。
onkeypress	script	在用户敲击按钮时触发。
onkeyup	script	当用户释放按键时触发。

11.5 Mouse 事件

由鼠标或相似用户动做触发的事件：

属性	值	描述
onclick	script	元素上发生鼠标点击时触发。
ondblclick	script	元素上发生鼠标双击时触发。
ondrag	script	元素被拖动时运行的脚本。
ondragend	script	在拖动操做末端运行的脚本。
ondragenter	script	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	script	当元素离开有效拖放目标时运行的脚本。
ondragover	script	当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart	script	在拖动操做开端运行的脚本。
ondrop	script	当被拖元素正在被拖放时运行的脚本。
onmousedown	script	当元素上按下鼠标按钮时触发。
onmousemove	script	当鼠标指针移动到元素上时触发。
onmouseout	script	当鼠标指针移出元素时触发。
onmouseover	script	当鼠标指针移动到元素上时触发。
onmouseup	script	当在元素上释放鼠标按钮时触发。
onmousewheel	script	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	script	当元素滚动条被滚动时运行的脚本。

11.6 Media 事件

　　由媒介（好比视频、图像和音频）触发的事件（适用于全部 HTML 元素，但常见于媒介元素中，好比 <audio>、<embed>、<img>、<object> 以及 <video>）:

属性	值	描述
onabort	script	在退出时运行的脚本。
oncanplay	script	当文件就绪能够开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough	script	当媒介可以无需因缓冲而中止便可播放至结尾时运行的脚本。
ondurationchange	script	当媒介长度改变时运行的脚本。
onemptied	script	当发生故障而且文件忽然不可用时运行的脚本（好比链接意外断开时）。
onended	script	当媒介已到达结尾时运行的脚本（可发送相似“感谢观看”之类的消息）。
onerror	script	当在文件加载期间发生错误时运行的脚本。
onloadeddata	script	当媒介数据已加载时运行的脚本。
onloadedmetadata	script	当元数据（好比分辨率和时长）被加载时运行的脚本。
onloadstart	script	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	script	当媒介被用户或程序暂停时运行的脚本。
onplay	script	当媒介已就绪能够开始播放时运行的脚本。
onplaying	script	当媒介已开始播放时运行的脚本。
onprogress	script	当浏览器正在获取媒介数据时运行的脚本。
onratechange	script	每当回放速率改变时运行的脚本（好比当用户切换到慢动做或快进模式）。
onreadystatechange	script	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked	script	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking	script	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled	script	在浏览器不论何种缘由未能取回媒介数据时运行的脚本。
onsuspend	script	在媒介数据彻底加载以前不论何种缘由终止取回媒介数据时运行的脚本。
ontimeupdate	script	当播放位置改变时（好比当用户快进到媒介中一个不一样的位置时）运行的脚本。
onvolumechange	script	每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting	script	当媒介已中止播放但打算继续播放时（好比当媒介暂停已缓冲更多数据）运行脚本