HTML5知识点整理

HTML5的简述:

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5有哪些改进呢?

新元素，新属性，完全支持 CSS3，Video 和 Audio，2D/3D 制图，本地存储，本地 SQL 数据，Web 应用

现在大多数的浏览器都支持HTML5, 而且HTML5相比XHTNL在书写上更加的简洁了~~话不多说, HTML5走起.

1.

文档声明, 声明当前脚本遵循HTML5规范~~

2.

这个标签是用来播放视频资源的, 使用的时候一定要注意文件的格式和浏览器是否支持的问题~~

 
 

3.向浏览器中加入新元素. 具体一点就是说:用JS脚本创造一个标签~~

实例:

我的第一个标题

我的第一个段落。

我的第一个新元素

注意上面一个实例中,有这么一个JS脚本:,通过这段脚本创造一个新标签,标签名为myHero

4., 基于JS的绘图工具

实例:

your browser does not support the canvas tag

解析:
1)your browser does not support the canvas tag , 这里可以理解成一个图形的容器

2)var canvas=document.getElementById('myCanvas'); 查找元素, 我们把它理解成寻找图形的容器会更加直观.
3)var ctx=canvas.getContext('2d');这里可以理解成检测绘图环境

容器创建并指定成功了, 绘图环境也符合2d环境了. 接下来要做的就是绘图了~~

5.

实例:

6., 在网页中嵌入图片,包括动图.

C:\Users\Administrator\Pictures\1.jpg">

7.

实例:

注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。

在上面这个实例中, 中有list="browsers", 呼应datalist列表.

8., 对表单数据进行加密处理(表单提交时). 具体实现:生成密钥对, 私钥在本地, 公钥发送到服务器端.

  用户名:
  加密:
 

注意: Internet Explorer 不支持 keygen 标签。

9.

, 本质上也是一个布局标签. 和

一样.

实例:

 

Internet Explorer 9

 

Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。

10.

, 也是一个布局标签.

My family and I visited The Epcot center this summer.

Epcot Center

The Epcot Center is a theme park in Disney World, Florida.

11., 设置理论意义上的按钮.

实例:

Save

注意：只有 IE 9 支持 command 标签。

上面实例中有这么一个元素:Save.

这里相当于创建 了一个按钮, 点击"Save"字样, 触发事件.

12.

, 一般这两个标签在一起使用, 阐述一个细节.

是

的标题.

实例:

Copyright 1999-2011.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.

注意：目前，只有 Chrome 和 Safari 6 支持 details 标签。

13.

这个标签很有意思. 相信大家在生活中都见过盖过章的文档吧.

就相当于在文档上盖的章.

有两个属性, open/close.  这两个属性的意思是:显示/不显示

标签包含的内容

实例:

注意：目前只有 Chrome 和 Safari 6 支持 dialog 标签。

January This is an open dialog window	February	March
31	28	31

14.

, 两者也是经常一起使用.

, 其实也是一块独立单元. 该元素包含的内容可以是图像,文字等.

是

的标题,对

所包含的流进行概括.

实例:

The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.

 
 

Fig.1 - A view of the pulpit rock in Norway.

在上面的实例中,我们可以看到:

标签包含了一张图像,

是图像的标题.

15.

比较简单. 这里只提. 可以理解成一个独立的单元, 不收父元素的影响.

实例:

在下面的示例中,显示着每个用户比赛的分数。将用户名从周围的文本方向设置中隔离出来。

 
• 用户 hrefs: 60 分

 
• 用户 jdoe: 80 分

 
• 用户 إيان: 90 分

注意： 目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签。

16., 标记文本

实例:

Do not forget to buy milk today.

17., 展示进度条. 常用的属性有:value,min,max

实例:

展示给定的数据范围：

2 out of 10

60%

注意： IE 浏览器不支持 meter 标签。

18., 显示进度条. 同样,有value,nax这两个属性

实例:

下载进度：

注意： IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。

19., 三个标签一般同时使用. 起到注释作用.

想必大家都知道小时候学汉字的时候,拼音都注释在汉字上方. 现在我们就用上面三个标签在网页上实现相同的效果.

其中, 标签包含的是汉字,, 而包含的是汉字注释

实例:

  漢 Kan
  字 ji

在上面的实例中,我们可以看到是怎么使用的. 其实,没什么卵用~~

20.<canvas>

1).这个标签是干什么的??

该标签是用来绘制图形/图像的. 这里需要注意:只是图形容器, 图形的绘制是基于JS完成的~~

标签可以绘制路径, 圆, 盒, 字符,图像

首先来一个简单的实例, 看一下是怎么用的~

如下:

 
 
 



您的浏览器不支持 HTML5 canvas 标签。

从上面的实例我们可以看到: , 图形容器. 在浏览器上就是开辟的一块画布. 这里稍微提一下: id标识这个元素~

接下来再看另一个实例:

 
 
 



您的浏览器不支持 HTML5 canvas 标签。

我们来解析一下上面的实例:

浏览器上创建一个画布, 宽:200px, 高:100px, 实线边框

容器有了之后, 现在就是用JS脚本在容器中绘制图形了~~ 

var c=document.getElementById("myCanvas"); 通过中的id属性找到事先在网页上上开辟的画布

var ctx=c.getContext("2d"); 创建画布 的2d绘图环境对象

2d绘图环境对象有了之后, 接下来我们就可以通过该对象中方法绘制路径,盒,圆,字符,添加图像了~~

ctx.fillRect(0,0,150,75); 在画布中绘制矩形, 该方法参数分别是起始位置, 矩形的宽, 矩形的高

ctx.fillStyle="#FF0000"; 该属性可以指明矩形的css颜色, 渐变效果, 图案. 默认情况下, 该属性指明矩形是黑色的.

上面的实例搞懂之后,我们来看一下下面这个实例:

 
 
 



您的浏览器不支持 HTML5 canvas 标签。

接下来,我们解析一下上面这个例子:

...

这几句大会意思就是:准备一个容器,找到这个容器, 然后创建2d绘图环境对象. 上面的实例中有说到~

ctx.moveTo(0,0); 这句话的意思:指明路径的起始位置

ctx.lineTo(200,100); 这句话的意思是:制定路径的结束位置.

ctx.stroke(); 这句话才是真正的绘制路径.

接下来,我们看另外一个实例(绘制圆):

 
 
 



您的浏览器不支持 HTML5 canvas 标签。
 

上面这个实例中有几个点需要我们注意:

1)ctx.beginPath(); 如果我们想在画布中画出两个不同的圆, 这个时候就要用到ctx.beginPath()

2)ctx.strokeStyle="red"; 指明所画圆的颜色是红色

3)ctx.arc(95,40,40,0,2*Mah.PI); 指明所画圆的位置. 其中参数分别表示: 圆心, 半径, 起始弧度, 终止弧度~

画布中绘制文字, 我们来看一下下面这个实例:

 
 
 



您的浏览器不支持 HTML5 canvas 标签。

上面这个实例有几个需要注意的地方:

ctx.font="30px Arial"; 指明字体大小为30px, 字体类型是Arial

ctx.fillText("Hello World",10,50); 在画布的(10,50)位置上填充"Hello World"字样, (10,50)是一个坐标~

这里我们需要注意:还可以用ctx.srokeText("Hello World",10,50);填充文字. 而用这个函数填充的文字是空心的~

图形渐变, 我们来看下面一个实例:

 
 
 



您的浏览器不支持 HTML5 canvas 标签。

var grd=ctx.createLinearGradient(0,0,200,0); 借助2d绘图环境对象创建线性渐变对象(左-->右)

grd.addColorStop(0,"red");
grd.addColorStop(0.5,"black");
grd.addColorStop(0.75,"blue");
grd.addColorStop(1,"white");

这几个语句指明:0px~100px 颜色由红到黑渐变, 100px~150px 颜色由黑到蓝渐变 以此类推~

 ctx.fillStyle="grd"; 按照上面的渐变规律开始填充颜色~

对于渐变我们再来看另外一个例子:

 
 
 



您的浏览器不支持 HTML5 canvas 标签。

现在我们来仔细分析一下上面的例子:

您的浏览器不支持 HTML5 canvas 标签。

我们来解析一下上面的例子:

Canvas:

这句话的执行实际上也就相当于给我们提供了一个图像

img.onload = function() {
ctx.drawImage(img,10,10);
}     找到指定图像之后, 自动执行JS函数,在画布中写入图像~

21.内联SVG

svg和上面所说的canvas一样, 可以在网页中绘制图形. 他的优点就是:绘制出来的图形不失真~  平时使用的比较少,这里不多做介绍.

22.MathML

描述:

HTML5 可以在文档中使用 MathML 元素，对应的标签是 $...$ 

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言

下面我们来看几个实例:

1)

   
     
     
   
   
      $$
           
            a2  
            +
            b2
            =
            c2
         
     
   

2)

   
     
     
   
   
      $$
         
            A
            =
               
                 
                 
                     x
                     y
                 
                 
                     z
                     w
                 
               
           
         
     
   
 

对于上面的实例,我本意是要在网页输出一个矩阵公式,  但是效果没能实现出来. 对于上例哪里出错了, 细心的朋友请留言~

23.拖放

直接实例走起:

1)

 

拖动 RUNOOB.COM 图片到矩形框中:

2)

 

24.地理定位

1)定位当前信息

实例:

 
 
 

点击按钮获取您当前坐标（可能需要比较长的时间获取）：

点我

2)地理定位失败的原因:

实例:

 
 
 

点击按钮获取您当前坐标（可能需要比较长的时间获取）：

点我

除此之外, 还能降地理定位信息放到谷歌/百度地图上, 这个我没搞懂~~ 有知道的请留言!!

25.

请转:http://www.runoob.com/html/html5-video.html

26.

请转:http://www.runoob.com/html/html5-audio.html

27.html5新增的input元素中type属性的值

请转:http://www.runoob.com/html/html5-form-input-types.html

28.html5中新增的表单元素

1), 在输入框中添加一个预选列表

实例:

 
 
 

注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。

2), 表单提交时生成与表单数据相应的密钥对, 私钥在本地, 公钥在服务端

实例:

 
 
 

  用户名:
  加密:
 

注意: Internet Explorer 不支持 keygen 标签。

3)

, 用于计算

实例:

 
 
 

0
100
+
=

注意:  Internet Explorer 不支持 output 标签。

解析:我们可以看到上面的例子中有两个不同类型的输入框, 而output元素负责将两个输入框中的内容相加求和~

29.html5新增的表单元素属性

1)autocomplete, 如果该属性的值是on,浏览器会记录输入, off-->不会记录

实例:

 
 
 

  First name:

  Last name:

  E-mail:

 

填写并提交表单，然后重新刷新页面查看如何自动填充内容。

注意 form 的 autocomplete 属性为  "on"（开），但是 e-mail 自动为“off”（关）。

在上面的例子中我们可以看到form元素中autocomplete属性的值是on, 而input元素中autocomplete属性的值是off, 这种情况下浏览器不会保留email的输入记录的.

2)novalidate, form元素中一旦有了这个属性, 提交的表单数据不进行检测

实例:

 
 
 

E-mail:

注意：在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

3)autofocus, input元素属性, 页面加载完成时自动聚焦

实例:

 
 
 

  First name:

  Last name:

 

注意： Internet Explorer 9及更早 IE 版本不支持 input 标签的 autofocus 属性。

这里提到的自动聚焦是什么意思呢?  自动聚焦-->默认从哪个input元素开始输入~

4)form, 指定表单元素隶属于哪个表单

实例:

 
 
 

First name:

"Last name" 字段没有在 form 表单之内，但它也是 form 表单的一部分。

Last name:

注意: IE 不支持 form 属性

我们观察一下上面的例子, 不难发现:一个input元素在表单外面. 但是由于input元素中form属性的存在,指明了该元素隶属于哪个表单.

5)formaction, 指明表单数据提交至哪个文件进行处理. 该属性会覆盖form元素中action属性

实例:

 
 
 

  First name:

  Last name:

 

 

注意： Internet Explorer 9及更早 IE 版本不支持 input 标签的 formaction 属性。

6)formenctype, 表单数据以指定的编码格式输送到服务器

实例:

 
 
 

  First name:

 
 

注意： Internet Explorer 9及更早 IE 版本不支持 input 标签的 formenctype 属性。

在上面的实例中, form元素有自己的默认编码格式(编码格式由enctype属性指定). 而input元素中fomenctype属性的存在覆盖了默认的编码

7)formmethod, 指定表单是数据的发送方式

实例:

 
 
 

  First name:

  Last name:

 
 

注意： Internet Explorer 9及更早 IE 版本不支持 input 标签的 formmethod 属性。

在上面这个例子中,input元素中的formmethod属性覆盖了form元素中的method属性~

8)formnovalidate,表单数据提交时无需被验证. 该属性同样覆盖form元素中的novalidate属性

实例:

 
 
 

  E-mail:

 

 

注意： Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 formnovalidate 属性。

9)formtarget, 指定提交后的数据是在父窗口处理, 还是新建窗口处理.

实例:

 
 
 

  First name:

  Last name:

 
 

注意： Internet Explorer 9及更早 IE 版本不支持 input 标签的 formtarget 属性。

10)width, height

描述: 我们的提交按钮可以是一张图片. 既然是图片,我们就可以设置它的宽和高

 
 
 

  First name:

  Last name:

 

11)list, 在输入框中整一个下拉列表

实例:

 
 
 

注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。

12)min,max  指定最小/大值

实例:

 
 
 

 输入 1980-01-01 之前的日期:
 

 输入 2000-01-01 之后的日期:
 

  数量 (在1和5之间):
 

 

注意: Internet Explorer 9及更早 IE 版本，Firefox 不支持 input 标签的  max 和 min 属性。

注意:
在 Internet Explorer 10中 max 和 min 属性不支持输入日期和时间，IE 10 不支持这些输入类型。

13.multiple, input元素有了multiple属性之后, 可以一次性选择多个文件.

实例:

 
 
 

  选择图片:
 

尝试选取一张或者多种图片。

注意:  Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。

14.pattern, 属性值是一个正则表达式. 提交表单数据时,会验证其所属元素的内容是否符合指定的正则

实例:

 
 
 

  Country code:
 

注意:  Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 pattern 属性。

15)placeholder, 提示要输入什么内容~~  该属性和value属性还是有很大差别的

实例:

 
 
 

  First name：

  Last name：

 

注意： Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。

16)required, 该属性所在元素对应的文本框必须有内容, 否则表单不会提交

实例:

 
 
 

  Username:
 

注意： Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 required 属性。

17)step, 设置数字间隔~~ 比如:我们设置文本框可输入数字的范围是1~5, 有了step="2"这个属性之后,我们只能在输入框中输入1,3,5

实例:

 
 
 

 
 

注意： Internet Explorer 9及更早 IE 版本，或 Firefox 不支持 input 标签的 step 属性。

30.html5 web存储

描述:web存储和cookie的作用一样, 都是用来存储用户的浏览信息. web存储主要依靠两个对象:localStorage, sessionStorage. localStorage, 用于不限时存储. sessionStorage, 基于会话存储.

1)localStorage对象的使用:

实例:

 
 
 

2)localStorage, sessionStorage 所用的API是相同的, 即有相同的方法~

localStorage.setItem(key,value) 保存数据(键值对)

localStorage.getItem(key) 读取数据(根据key获取value)

localStorage.removeItem(key) 删除单个键值对

localStorage.clear() 删除对象中的所有键值对(清空对象)

localStorage.key(index) 获得某个索引的key

3)记录用户的浏览次数. 这里用到了localStorage对象中的clickcount

实例:

 

点我！

点击该按钮查看计数器的增加。

关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。

4)sessionStorage对象的使用

实例:

 
 

点我！

点击该按钮查看计数器的增加。

关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。

这里注意:sessionStorage对象是基于会话的. 浏览器关闭,会话结束,sessionStorage对象中的数据也会被清空

5)localStorage对象综合使用

实例:

 
 
     
     
 
 
   

    
        网站名(key)：  
         
       
 
        网 址(value)：  
         
       
 
         
       

---

 
        输入网站名：  
         
         
       

 
   

 
   
 
   

 
   
 

上面这个实例比较抽象, 看的时候需要细心~~ 注释在程序中.

6.JSON.stringify() JSON.parse()应用

实例:

 
 
     
     
 
 
   

        别名(key):  
         
       
 
        网站名：  
         
       
 
        网 址：  
         
       
 
         
       

---

 
        输入别名(key)：