HTML5部分新属性的认识

一、HTML5中新增几个全局属性

• 1、contenteditable是否可支持编辑:true表示可以false表示不可以
• 2、tabindex值为数字:表示按键盘tab键先切换到哪里
• 3、hiddlen布尔值，表示隐藏元素,但是会渲染该DOM节点

二、HTML5中新增的事件

NO	事件	触发时机	代码案例
1	beforeprint	打印前触发
2	afterprint	打印完成触发
3	resize	窗口改变大小
4	error	页面加载错误时候
5	offline	页面离线的时候触发
6	online	页面在线的时候触发
7	pageshow	页面加载的时候触发
8	beforeunload	页面关闭的时候触发
9	hashchange	url上的哈希改变的时候触发
11	mousewheel	鼠标在元素上并滚动触发
12	scroll	元素滚动的时候
13	input	修改文本框的时候
14	reset	表单重置的时候

三、HTML5新增结构元素

NO	元素名称	描述	备注
1	article	表示文档	里面可以包含任何的标签，也可以嵌套
2	section	分块处理
3	nav	导航
4	aside	表示当前页面的附件信息
5	time	表示时间的
6	header	头部信息
7	footer	底部
8	address	文档中的联系方式
9	main	页面主要内容

四、HTML5对表单的处理

• 1、元素可以写在form元素外面,但是要指定form

  <form id="myform">
      <input type="text" />
  </form>
  <textarea form="myform"></textarea>

• 2、formaction指定提交到对应的服务上

  <form action="xxx">
      <input type="submit" value="提交" formaction="yyy" />
      <input type="submit" value="提交" formaction="zzz" />
      <input type="submit" value="提交"/>
  </form>

• 3、formmethod使用方式跟上面的formaction类似

• 4、autofocus自动获取焦点

• 5、文本框的list的使用

  类似下拉框的，但是能做到的联想记忆，输入一个字符就会联想出全部的

  <input type="text" name="greeting" list="greeting" />
  <datalist id="greeting">
      <option value="腾讯">腾讯</option>
      <option value="百度">百度</option>
      <option value="新浪">新浪</option>
      <option value="网易">网易</option>
      <option value="网易1">网易1</option>
  </datalist>

• 6、上面list方法如果不显示出来就要加上autocomplete='on'开启

• 7、textarea中属性的扩展
  
  • 1、maxlength最大长度
  • 2、wrap换行
    
    • wrap=hard提交到后端会加入换行
    • wrap=soft提交到后端不会换行

五、一些增强标签

• 1、a标签与img标签结合可以扩大查看图片

  <a href="http://demo.pythoner.com/itt2zh/static/images/cover.jpg">
      <img src="http://demo.pythoner.com/itt2zh/static/images/cover.jpg" />
  </a>

• 2、download可以使图片点击下载

  <a href="http://demo.pythoner.com/itt2zh/static/images/cover.jpg" download="http://demo.pythoner.com/itt2zh/static/images/cover.jpg">
      <img src="http://demo.pythoner.com/itt2zh/static/images/cover.jpg" />
  </a>

• 3、