HTML5学习

HTML5 中的新特性：

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

1.canvas绘图

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，须使用脚本来绘制图形。

• canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
• canvas 是一个二维网格，左上角坐标为(0,0)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75)  //在画布上绘制 150x75 的矩形，从左上角开始 (0,0)

• 在canvas上画线

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);   //定义线条开始的坐标
ctx.lineTo(200,100);  //定义线条结束的坐标
ctx.stroke();   //”ink“方法stroke()开始绘制

• 在canvas中绘制圆形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);  //绘制圆形的方法
ctx.stroke();

• canvas文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";   //定义字体
ctx.fillText("Hello World",10,50);  //fillText表示实心文本，strokeText表示空心文本

• 渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);   
//线性渐变createLinearGradient(x,y,x1,y1)，圆形渐变createRadialGradientt(x,y,r,x1,y1,r1)
grd.addColorStop(0,"red");     //指定颜色停止，参数使用坐标来描述，可以是0至1
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

• 图像drawImage(image,x,y)

2.内联 SVG：也是一种处理图形的元素

3.MathML数学标记语言

对应的标签是 <math>...</math> ，可以写一些数学符号和公式的置标语言。

4.拖放（Drag 和 Drop）

详见博客HTML5拖放

5.地理定位

6.Video视频

7.Audio音频

8. 表单输入类型

• color 类型用在input字段主要用于选取颜色

  <form action="demo-form.php">   
生日: <input type="date" name="bday">  
 <input type="submit">
 </form>

• date 类型允许你从一个日期选择器选择一个日期

<input type="date" name="bday">

• datetime 类型允许你选择一个日期（UTC 时间）

<input type="datetime" name="bdaytime">

• datetime-local 类型允许你选择一个日期和时间 (无时区).

<input type="datetime-local" name="bdaytime">

• email 类型用于应该包含 e-mail 地址的输入,在提交表单时，会自动验证 email 域的值是否合法有效

<input type="email" name="email">

• month 类型允许你选择一个月份
• number 类型用于应该包含数值的输入域。能够设定对所接受的数字的限定：规定最大最小,间隔等
• range 类型用于应该包含一定范围内数字值的,输入域显示为滑动条,类似于一个滑块.

<input type="range" name="points" min="1" max="10">

• search 类型用于搜索域，比如站点搜索或 Google 搜索。
• tel类型定义输入电话号码字段
• time 类型允许你选择一个时间
• url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
• week 类型允许你选择周和年

9.表单元素

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

<input list="browsers">  
<datalist id="browsers">   
   <option value="Internet Explorer">  
   <option value="Firefox">   
   <option value="Chrome">  
   <option value="Opera">   
   <option value="Safari">
</datalist>

执行结果:输入一个字母,就会联想出名称里有该字母的单词

• <keygen>元素的作用是提供一种验证用户的可靠方法。<keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（clien certificate）。

<keygen name="security">

• <output> 元素用于不同类型的输出，比如计算或脚本输出：

 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 
<input type="range" id="a" value="50">100 + 
<input type="number" id="b" value="50">= 
<output name="x" for="a b"></output>
 </form>

执行结果:不同类型的加减:滑动条与数字的加减

10.表单属性

1.<form>新属性：autocomplete、novalidate

• <form> / <input> autocomplete 属性，规定 form 或 input 域应该拥有自动完成功能，即“自动联想功能”。autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
• <form> novalidate 属性 ，是一个 boolean(布尔) 属性.novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

2.<input>新属性：

• <input> autofocus 属性，是一个 boolean（布尔） 属性.autofocus 属性规定在页面加载时，域自动地获得焦点。
• <input> autocomplete 属性，规定 form 或 input 域应该拥有自动完成功能。
• <input> form 属性。在H4中，表单内的从属元素必须写在表单内部。在H5中，可以把它书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于制定表单了。

 <form id="testform">
        <input type="text">
    </form>
    <textarea form="testform"></textarea>
    //从属元素可以写在任何位置，然后声明一个form

• <input> formaction 属性，用于描述表单提交的URL地址（PHP)。在H4中，一个表单的所有元素只能通过表单的action属性被统一提交到另一个页面。在H5中，可以为所有的提交按钮增加不同的formaction属性，使单击不同按钮时可以将表单提交到不同页面，这会覆盖<form> 元素中的action属性。
  注意: The formaction 属性用于 type=“submit” 和 type=“image”.
• <input> formenctype 属性,描述了表单提交到服务器之前应该如何对表单内的数据进行编码 。(只对form表单中 method=“post” 表单)。H4中表单有enctype属性。H5中，表单内每个元素可以使用formenctype 属性指定不同的编码方式，formenctype 属性覆盖 form 元素的 enctype 属性。

 <input type="text" formenctype="application/x-www-form-urlencoded">
<input type="text" formenctype="multipart/form-data">
<input type="text" formenctype="text/plain">

注意: 该属性与 type=“submit” 和 type=“image” 配合使用。

• <input> formmethod 属性,定义了表单提交的方式。H4中，一个表单内只能有一个action属性来指定提交的页面，所以对应的每个表单内只有一个method属性来制定提交的方法。但在H5中，可以指定每个表单元素有不同的提交方法，formmethod 属性覆盖了 form 元素的 method 属性。post和get代表两种不同的提交方式
  注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。
• <input> formnovalidate 属性,是一个 boolean 属性.novalidate属性描述了 <input> 元素在表单提交时无需被验证。formnovalidate 属性会覆盖 form 元素的novalidate属性。
  注意: formnovalidate 属性与type="submit一起使用。
• <input> formtarget 属性，指定在何处打开表单提交后需要加载的页面。H4中表单有一个target属性。H5中，表单内每个元素可以使用formtarget 属性指定在不同的位置打开， formtarget 属性覆盖 form元素的target属性。
  -注意: formtarget 属性与type=“submit” 和 type="image"配合使用.
• <input> height 和 width 属性，height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。
• <input> list 属性，list 属性的值为某的 datalist的id，datalist 是输入域的选项列表。该元素相当于允许输入+下拉菜单：当用户要设定的值在选择列表内时可以进行选择，当用户要设定的值不在选择列表时也允许自行输入。datalist元素本身不显示，而是当文本框获得焦点时以提示输入的方式显示。

<input type="text" name="greeting" list="greetings">
    <datalist id="greetings" style="display: none">
        <option value="前端学习">前端学习</option>
        <option value="后端学习">后端学习</option>
        <option value="ios学习">ios学习</option>
    </datalist>

• <input> min 和 max 属性，min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
• <input> multiple 属性，是一个 boolean 属性.multiple 属性规定<input> 元素中可选择多个值。注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file。
• <input> pattern 属性，描述了一个正则表达式用于验证 <input> 元素的值。在提交时检查内容是否符合给定格式，当不符合时不允许提交，并且在浏览器中显示文字，提醒输入内容必须符合给定格式。
  注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
• <input> placeholder 属性，当文本框处于未输入状态时且未光标焦点时，模糊显示的输入提示文字。注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
• <input> step 属性，为输入域规定合法的数字间隔。如果 step=“3”，则合法的数是 -3,0,3,6 等.。提示： step 属性可以与 max 和 min 属性创建一个区域值.注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week
• <input>SelectionDirection属性，当用户使用鼠标正向选取文字和没有选取时属性值为"forward"，反向选取文字时属性值为"backward"。用于获取用户的操作。
• 复选框<checkbox>的indeterminate属性，之前有两种状态：选取，非选取。h5新增了一种状态：尚未明确是否选取。
• <input>require属性，可以应用在大多数输入元素上。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
• <input>label属性，<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。

11.语义元素

如图所示，HTML5 提供了新的语义元素来明确一个Web页面的不同部分。

• <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
• <article> 标签定义独立的内容。
• <nav> 标签定义导航链接的部分。
• <aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
• <header>元素描述了文档的头部区域，主要用于定义内容的介绍展示区域，可以多次使用。
• <hgroup>元素可以将标题和子标题h1~h6进行分组。
• <footer> 元素描述了文档的底部区域.一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
• <figure> 和 <figcaption> 元素:<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。<figcaption> 标签定义 <figure> 元素的标题.<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
• <address>元素，用来展示网页设计者的信息。