h5新增属性和方法-创新互联

1.header
header 标签定义文档或者文档的一部分区域的页眉。一般作为介绍内容或者导航链接栏的容器。
在一个文档中，可以定义多个 <header> 元素。
注：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

10年积累的网站制作、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有和平免费网站建设让你可以放心的选择与我们合作。

2.nav
nav定义页面中导航链接部分(传统导航条、腾讯新闻、侧边栏导航、内页导航、百度百科、翻页操作)注：并不一定是视觉上的导航，只要是多链接区域，都可以使用

3.article
<article> 标签定义独立的内容。内容本身必须是有意义的且必须是独立于文档的其余部分。如：论坛帖子、博客文章、新闻故事、评论

4.aside
<aside> 标签定义 <article> 标签外的内容。应该与附近的内容相关。

5.section
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。标示文档的结构

6.footer
<footer> 标签定义文档或者文档的一部分区域的页脚。如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个 <footer> 元素。

7.figure
定义一段独立的流内容，一般是文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
figure是一种元素的组合，带有可选标题。用来表示网页上一块独立内容。
figcaption表示figure的标题。从属于figure，并且，figure中只能放置一个figcaption
注：有默认的边距或填充值

8.hgroup
表示定义文件中一个区块的相关信息，一般用作放置标题标签的容器。

9.dialog
<dialog> 标签定义一个对话框、确认框或窗口
注：目前，只有 Chrome 和 Safari 6 支持 <dialog> 标签。

新增多媒体元素
（1）video元素
 --在HTML5中专门用来播放网络上的视频或者电影。
（2）audio元素
 --在HTML5中专门用来播放网络上的音频。
3）canvas

表示图形，比如图标和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端js，以使脚本能够把想绘制的东西绘制到这块画布上

<canvas id=“myCanvas” width=“200” height=“200”> </canvas>

新增的表单元素
1.Datalist
datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成的功能，用户将会看见一个下拉列表供其选择。
2.output
表示不同类型的输出，比如脚本的输出
注：表单中有应用

新增的input类型
1.email：专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。
具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。
2.url：专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提交。
例：<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>

3. number 和 range
   number 类型是专门用来输入数字的，并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的大值，min 是允许的最小值，step 是间隔。设置了这些属性后，如果手动填入的数字不符合这些属性条件，将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值，但可以使用 output 输出当前值。
4. datetime 和 datetime-local
   datetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。
5. month 和 week month 类型是月份选择器，它的值为：年-月，如：2012-01；week 类型是周选择器，它的值为：年-W周数，如：2011-W02。
6. search
   search 类型的是用来输入搜索关键词的文本框，它与 text 类型在功能都没有太大区别，只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中，当用户输入内容时，输入框右侧会有一个“×”按钮，单击该按钮，将清空输入框内的内容，使用非常方便。
   7.color
   color 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。
   8.output元素： 定义不同类型的输出，如计算结果的输出，或脚本的输出。
   注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加form属性。

HTML 5 不但新增加了表单元素、表单类型，还增加了一些表单属性，同时使用的话，能更好的提高率开发者的工作效率，同时也提高了用户的操作体验。

1、自动验证

1）、required
可以应用在大多数输入元素上,在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。

2）、
将属性值pattern设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。

例：<input  type=“text” pattern = “[0-9][A-Z]{3}”placeholder=‘输入内容：一个数与三个大写字母’>

3)placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。

4)autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得鼠标焦点，一个页面只能有一个。

5)autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。使用时表单元素必须有name属性；（历史记录功能）
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
提示：在某些浏览器中，您可能需要手动启用自动完成功能。
6）、 min、max、step：为包含数字或日期的 input 类型规定限定（约束）
max: 大值
min: 最小值
step: 数字间隔

例：<input type="number“ min="0" max="10" step="3" />
7)取消验证
可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证
8)Multiple:可以输入一个或多个值，每个值之间用逗号分开；如果要获取其中的值在用split获取；
例：<input type=“email” multiple/>
还可以应用于file

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。