H5新增标签和属性

HTML5

什么是HTML5

• HTML5 是最新的 HTML 标准。
• HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
• HTML5 拥有新的语义、图形以及多媒体元素。
• HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
• HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

为html5而定的规则

• 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
• 减少对外部插件的需求（比如 Flash）
• 更优秀的错误处理
• 更多取代脚本的标记
• HTML5 应该独立于设备
• 开发进程应对公众透明

html5的优缺点

• 优点

  • 网络标准统一、HTML5本身是由W3C推荐出来的
  • 多设备、跨平台
  • 即时更新
  • 提高可用性和改进用户的友好体验；
  • 由W3C推荐，有统一的网络标准跨平台、多设备支持SEO友好、利用搜索引擎抓取和搜录便于游戏开发更好的互动性音视频的直接支持标签代码更加简单简洁、更加清晰的代码方便的存储及时更新的特性
  • 有几个新的标签，这将有助于开发人员定义重要的内容；
  • 可以给站点带来更多的多媒体元素(视频和音频)；
  • 可以很好的替代Flash和Silverlight；
  • 涉及到网站的抓取和索引的时候，对于SEO很友好；
  • 被大量应用于移动应用程序和游戏。

• 缺点

  • 安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
  • 完善性：许多特性各浏览器的支持程度也不一样。
  • 技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
  • 性能：某些平台上的引擎问题导致HTML5性能低下。
  • 浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

表单元素

最重要的表单元素是 <input> 元素。

• <input> 元素根据不同的 type 属性，可以变化为多种形态。

<select> 元素定义下拉列表

<option> 元素定义待选择的选项。

• 列表通常会把首个选项显示为被选选项。

• 您能够通过添加 selected 属性来定义预定义选项。

  • <option value="fiat" selected>Fiat</option>

<textarea> 元素定义多行输入字段（文本域）

<button> 元素定义可点击的按钮

• <button type="button" onclick="alert('Hello World!')">Click Me!</button>

<datalist> 元素

• <datalist> 元素为 <input> 元素规定预定义选项列表。
• 用户会在他们输入数据时看到预定义选项的下拉列表。
• <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<input> 元素的输入类型。

<input type="text"> 定义供文本输入的单行输入字段：

<input type="password"> 定义密码字段：

• password 字段中的字符会被做掩码处理（显示为星号或实心圆）

<input type="submit"> 定义提交表单数据至表单处理程序的按钮

• 表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
• 在表单的 action 属性中规定表单处理程序（form-handler）
• 如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本

<input type="radio"> 定义单选按钮

<input type="checkbox"> 定义复选框

• 复选框允许用户在有限数量的选项中选择零个或多个选项。

<input type="button> 定义按钮。

• <input type="button" onclick="alert('Hello World!')" value="Click Me!">

<input type="date"> 用于应该包含日期的输入字段。

• 根据浏览器支持，日期选择器会出现输入字段中。

<input type="range"> 用于应该包含一定范围内的值的输入字段。

• 根据浏览器支持，输入字段能够显示为滑块控件。
• 需要max和value属性值

<input type="color"> 用于应该包含颜色的输入字段。

• 根据浏览器支持，颜色选择器会出现输入字段中。

<input type="week"> 允许用户选择周和年。

• 根据浏览器支持，日期选择器会出现输入字段中。

<input type="month"> 允许用户选择月份和年份。

• 根据浏览器支持，日期选择器会出现输入字段中。

<input type="time"> 允许用户选择时间（无时区）。

• 根据浏览器支持，时间选择器会出现输入字段中。

<input type="datetime"> 允许用户选择日期和时间（有时区）。

• 根据浏览器支持，日期选择器会出现输入字段中。

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

• 根据浏览器支持，日期选择器会出现输入字段中。

<input type="email"> 用于应该包含电子邮件地址的输入字段。

• 根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
• 某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。
• 必须要有@符号,@符号前后必须有字符

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

• 跟text类似，自带清空按钮

<input type="tel"> 用于应该包含电话号码的输入字段。

• 没有验证，各国手机号格式不一致，但是自动打开数字键盘

<input type="url"> 用于应该包含 URL 地址的输入字段。

• 根据浏览器支持，在提交时能够自动验证 url 字段。
• 某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。
• 验证网址http:// https:// ftp:// ，而且除此之外后面还需要字符

<input type="number"> 用于应该包含数字值的输入字段。

• 能够对数字做出限制。
• 根据浏览器支持，限制可应用到输入字段。
• 在手机里面获取焦点，会自动打开数字键盘

输入限制（属性）

• disabled 规定输入字段应该被禁用。

  • 被禁用的元素是不可用和不可点击的。
  • 被禁用的元素不会被提交。
  • disabled 属性不需要值。它等同于 disabled="disabled"。

• max 规定输入字段的最大值。

• maxlength 规定输入字段的最大字符数。

  • 如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
  • 该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
  • 注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

• min 规定输入字段的最小值。

• pattern 规定通过其检查输入值的正则表达式。

• readonly 规定输入字段为只读（无法修改）。

  • readonly 属性不需要值。它等同于 readonly="readonly"。

• required 规定输入字段是必需的（必需填写）。

• size 规定输入字段的宽度（以字符计）。

• step 规定输入字段的合法数字间隔。

• value 规定输入字段的默认值。

HTML5 为 <input> 增加了如下属性

autocomplete 属性规定表单或输入字段是否应该自动完成。

• 当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
• 与name属性相关,取值是on或off,默认值是on
• 提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。
• autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。

novalidate 属性属于 <form> 属性。

• 如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

autofocus 属性是布尔属性。

• 如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
• 当文档加载完毕时，该表单元素自动获取焦点

form 属性规定 <input> 元素所属的一个或多个表单。

• 提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

• formenctype 属性覆盖 <form> 元素的 enctype 属性。
• formenctype 属性适用于 type="submit" 以及 type="image"。

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

• formaction 属性覆盖 <form> 元素的 action 属性。
• formaction 属性适用于 type="submit" 以及 type="image"。

formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

• formmethod 属性覆盖 <form> 元素的 method 属性。
• formmethod 属性适用于 type="submit" 以及 type="image"。

formnovalidate 属性

• novalidate 属性是布尔属性。
• 如果设置，则规定在提交表单时不对 <input> 元素进行验证。
• formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
• formnovalidate 属性可用于 type="submit"。

formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。

• formtarget 属性会覆盖 <form> 元素的 target 属性。
• formtarget 属性可与 type="submit" 和 type="image" 使用。

height 和 width 属性

• height 和 width 属性规定 <input> 元素的高度和宽度。
• height 和 width 属性仅用于 <input type="image">。
• 注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

min 和 max 属性规定 <input> 元素的最小值和最大值。

• min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

multiple 属性是布尔属性。

• 如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。
• multiple 属性适用于以下输入类型：email 和 file。

pattern 属性规定用于检查 <input> 元素值的正则表达式。

• pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
• 提示：请使用全局的 title 属性对模式进行描述以帮助用户。
• 提示：请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

• placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
• 该提示会在用户输入值之前显示在输入字段中。
• placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

required 属性是布尔属性。

• 如果设置，则规定在提交表单之前必须填写输入字段。
• required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

step 属性规定 <input> 元素的合法数字间隔。

• 示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。
• 提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。
• step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

【H5】新增表单事件

onInout 获取input内的value发生变化时触发

oninvalid 提交异常时报错

通过setCustomValidity来设置默认的提示

input 输入就会执行-要用的话要防抖或节流

与change事件的区别：change()提交或者失焦的时候，值变化才会执行
与keyup事件的区别: keyup()需要按键抬起才会执行,input和change事件必须绑定在表单元素上，而keyup可以绑定给document

H5新增多媒体标签

音频：- - - < audio >

• 可以在不使用标签的情况下，能能够原生的支持音频格式文件的播放，但是，播放格式是有限的 。

• audio目前支持三种格式

  • ogg
  • mp3
  • wav

• audio的参数

  • autoplay

    • autoplay

      • 音频在就绪后马上播放

  • controls

    • contrlos

      • 向用户展示该控件

  • loop

    • loop

      • 循环播放

  • src

    • url

      • 要播放的url

视频：- - - < video >

• video目前支持三种格式

  • ogg
  • MP4
  • wwbm

• video的参数

  • autoplay

    • autoplay

      • 视频在就绪后马上播放(谷歌需要静音[muted]播放)

  • controls

    • controls

      • 向用户展示该控件

  • width

    • px

      • 设置播放器宽度

  • height

    • px

      • 设置播放器高度

  • preload

    • auto/none

      • 是否预加载，如果有autoplay属性则忽略

  • loop

    • loop

      • 循环播放

  • src

    • url

      • 要播放视频的url

  • poster

    • imgurl

      • 加载等待的画面图片

  • muted

    • muted

      • 视频静音

总结

• 音频标签与视频标签使用基本一致
• 多媒体标签在不同浏览器下情况不同，存在兼容性问题
• 谷歌浏览器把音频和视频标签的自动播放都禁止了
• 谷歌浏览器中视频添加 muted 标签可以自己播放

Canvas

语义元素

常用

• <section> 元素定义文档中的节。

  • “节（section）是有主题的内容组，通常具有标题”。
  • 可以将网站首页划分为简介、内容、联系信息等节

• <article> 定义文档内的文章。

  • <article> 元素规定独立的自包含内容。

  • 文档有其自身的意义，并且可以独立于网站其他内容进行阅读。

  • <article> 元素的应用场景：

    • 论坛
    • 博客
    • 新闻

• 嵌套语义元素

  • <article> 元素定义完整的相关元素自包含块。
  • <section> 元素被定义为相关元素块。

• <header> 元素为文档或节规定页眉。

  • <header> 元素应该被用作介绍性内容的容器。
  • 一个文档中可以有多个 <header> 元素。

• <footer> 元素为文档或节规定页脚

  • <footer> 元素应该提供有关其包含元素的信息。
  • 页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
  • 您可以在一个文档中使用多个 <footer> 元素。

• <nav> 元素定义导航链接集合。

  • <nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！

• <aside> 元素页面主内容之外的某些内容（比如侧栏）

  • aside 内容应该与周围内容相关

• <figure> 和 <figcaption> 元素

  • 在书籍和报纸中，与图片搭配的标题很常见。
  • 标题（caption）的作用是为图片添加可见的解释。
  • 通过 HTML5，图片和标题能够被组合在 <figure> 元素中

了解

• <bdi> 定义与其他文本不同的文本方向。
• <details> 定义用户可查看或隐藏的额外细节。
• <dialog> 定义对话框或窗口。
• <main> 定义文档的主内容。
• <mark> 定义重要或强调的内容。
• <menuitem> 定义用户能够从弹出菜单调用的命令/菜单项目。
• <meter> 定义已知范围（尺度）内的标量测量。
• <progress> 定义任务进度。
• <rp> 定义在不支持 ruby 注释的浏览器中显示什么。
• <rt> 定义关于字符的解释/发音（用于东亚字体）。
• <ruby> 定义 ruby 注释（用于东亚字体）。
• <summary> 定义 <details> 元素的可见标题。
• <time> 定义日期/时间。
• <wbr> 定义可能的折行（line-break）。

<form> 元素定义 HTML 表单

<input> 元素是最重要的表单元素。

action 属性定义在提交表单时执行的动作。

• 向服务器提交表单的通常做法是使用提交按钮。
• 通常，表单会被提交到 web 服务器上的网页。
• 如果省略 action 属性，则 action 会被设置为当前页面。

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

Name 属性

• 如果要正确地被提交，每个输入字段必须设置一个 name 属性。

用 <fieldset> 组合表单数据

• <fieldset> 元素组合表单中的相关数据
• <legend> 元素为 <fieldset> 元素定义标题。

<form> 属性的列表

• accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。

• action 规定向何处提交表单的地址（URL）（提交页面）。

• autocomplete 规定浏览器应该自动完成表单（默认：开启）。

• enctype 规定被提交数据的编码（默认：url-encoded）。

• method 规定在提交表单时所用的 HTTP 方法（默认：GET）。

• name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。

• novalidate 规定浏览器不验证表单。

• target 规定 action 属性中地址的目标（默认：_self）。

• <form> 增加如需属性：

  • autocomplete
  • novalidate

Target 属性

• target 属性可设置以下值之一

  • _blank 响应显示在新窗口或选项卡中。
  • _self 响应显示在当前窗口中。
  • _parent 响应显示在父框架中。
  • _top 响应显示在窗口的整个 body 中。
  • framename 响应显示在命名的 iframe 中。
  • 默认值为 _self，这意味着响应将在当前窗口中打开。

autocomplete 属性规定表单是否应打开自动完成功能。

• 启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

novalidate 属性是一个布尔属性。

• 如果已设置，它规定提交时不应验证表单数据。