11-13浏览的比较重要的内容

1.addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。
您还可以将许多同一类型的事件处理程序添加到一个元素，即两个“点击”事件。

element.addEventListener(event, function [, useCapture]);
第一个参数是事件的类型（如“点击”或“鼠标按下”）。
第二个参数是事件发生时要调用的函数。
第三个参数是一个布尔值，指定是否使用事件冒泡或事件捕获。此参数是可选的，将在下一课中进行说明。

提示:在添加事件类型的时候没有on 如:click 而不是 onclick
提示: Internet Explorer版本8及更低版本不支持 addEventListener() 和 removeEventListener() 方法。但是，您可以使用 document.attachEvent() 方法在Internet Explorer中附加事件处理程序。

2.HTML5添加了一些允许表单验证的属性。例如，require 属性可以添加到输入字段，以使其强制填写。
更复杂的表单验证可以使用JavaScript来完成。
表单元素具有可以处理以执行验证的 onsubmit 事件。

3.使用 target 属性，你可以规定在何处打开链接文档。
给属性赋予 _blank 值将使链接在新窗口或新选项卡中打开。

4.method 属性指定在提交表单时使用的 http 方法：get 或 post。
下面是两个示例：
<form action="url" method="get">
<form action="url" method="post">

提示：
当您使用 get 时，表单数据将在页面地址中显示。
如果表单正在更新数据或使用敏感信息（密码），请使用 post。post 提供更好的安全性，因为提交的数据在页面地址中不可见。

5.通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 
<iframe> 标签规定一个内联框架。 
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 
标记一个内联框架：
<iframe src="https://www.w3cschool.cn"></iframe>
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。HTML5 中不支持<frame> 标签。

定义iframe表示是否显示边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框

6.HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

7.HTML5 中引入了很多的标记元素，根据内容类型的不同，这些元素被分成了7大类：
内联（Embedded）
流（Flow）
标题（Heading)
交互（Interactive）
元数据（Metadata）
短语（Phrasing）
区段（Sectioning)

元数据（Metadata）：通常出现在页面的head中，设置页面其他部分的表现和行为 。
元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>。 

内联（Embedded）：在文档中添加其他类型的内容。
元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>。 

交互（Interactive）：与用户交互的内容。
元素：<a> , <audio> , <video> , <button> , <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>。 

标题（Heading）：定义段落标题。
元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>。 

短语（Phrasing）：文本和文本标记元素。
元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等

在 HTML5 中，<nav> 标签定义导航链接的部分。 
并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。 

8.在 HTML5 中，<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<article> 的潜在来源：
论坛帖子
博客文章
新闻故事
评论

9.在 HTML5 中，<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域

10.在 HTML5 中，<aside> 标签定义 <article> 标签外的内容。
aside 的内容应该与附近的内容相关。
提示：<aside> 的内容可用作文章的侧栏。

11.<audio> 标签定义声音，比如音乐或其他音频流。
目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
如需在 HTML5 中播放音频，你需要使用以下代码： 
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

12.<audio> 元素中的常见的属性：
src 属性 
规定音频文件的 URL。 

controls 属性 
如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 

autoplay 属性 
如果出现该属性，则音频在就绪后马上播放。 

loop 属性 
如果出现该属性，则每当音频结束时重新开始播放。

13.<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
如需在 HTML5 中显示视频，你需要使用以下代码：
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
<video> 元素与 <audio> 元素一样，支持多个 <source> 元素，<source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。<video> 元素也可以在 <video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

14.<progress> 标签定义运行中的任务进度（进程）。
<progress> 属性 
max：规定需要完成的值。 
value：规定进程的当前值。

15.Web 存储对象有两种类型：
localStorage 
sessionStorage 
localStorage 与 sessionStorage 的区别 

localStorage 对象存储的数据没有时间限制。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

16.不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);//用key来存储value的值
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
清除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

17.拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

18.要使用 SVG 绘制图形，你首先需要创建一个 <svg> 标签。 
<svg width="1000" height="1000"></svg>
要创建一个圆形，需要添加一个 <circle> 标签。
下面是 SVG 代码：
<svg width="1000" height="1000">
   <circle cx="100" cy="50" r="40" fill="red" />
</svg>
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为 (0, 0)。
r属性定义圆的半径。

SVG 矩形 - <rect> 
<rect> 标签可用来创建矩形，以及矩形的变种。 
<svg width="1000" height="1000">
   <rect width="400" height="200" 
     x="20" y="20" fill="red" />
</svg>

SVG 直线 - <line> 
<line> 标签是用来创建一个直线。 
<svg width="500" height="510">
    <line x1="20" y1="20" x2="300" y2="200" 
        style="stroke:#000000; stroke-linecap:round; 
        stroke-width:20"  />
</svg>

SVG 曲线 - <polyline> 
<polyline> 标签是用于创建任何只有直线的形状。 
<svg width="2000" height="500">
    <polyline style="stroke-linejoin:miter; stroke:black; 
        stroke-width:12; fill: none;"
        points="100 100, 150 150, 200 100" />
</svg>

SVG 椭圆 - <ellipse> 
<ellipse> 标签是用来创建一个椭圆。 
椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的。 
<svg width="500" height="250">
   <ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
</svg>

SVG 多边形 - <polygon> 
<polygon> 标签用来创建含有不少于三个边的图形。 
<svg width="1000" height="1000">
<polygon points="100 100, 200 200, 300 0" 
      style="fill: red; stroke:black;" />
</svg>

19.SVG 动画可以使用 <animate> 元素创建。
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
  <animate attributeName="x" from="0" to="300"
    dur="3s" fill="freeze" repeatCount="2"/> 
</rect>
</svg>

20.<path> 元素用于定义一个路径。
下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
实例
<svg width="500" height="500">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>
上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

21.Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)

 

22.rotate() 方法用于旋转 HTML5 画布
translate(x,y) 方法用于移动 Canvas。
scale() 方法缩放当前绘图至更大或更小。

23.当表autofocus 属性规定在页面加载时，域自动地获得焦点。
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

24.<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

25.TML5 拥有多个新的输入类型，包括 email，tel，url，date，time 等。
下面是一个例子：
<form>
  <input type="email" name="email" placeholder="example@example.com" />
  <br />
  <input type="tel" name="usrtel" placeholder="666.666.6666" />
  <br />
  <input type="url" name="homepage" placeholder="example.com" />
</form>