HTML5(一)

HTML 5小白入门
最近整理的一些关于html 5的一些内容，不是很详细，但是也可以用来看看，记一记笔记能更好的理解html中的一些标签以及它所使用的一些属性，可以更好的去使用

新增特性

1.结构标签

       header：头标签
       footer：脚注
       nav:导航链
       section：内容
       main:主内容

2.功能标签

     menu:菜单标签
     time：时间或日期标签
     video:音频标签
     audio:视频标签
     embed:用来插入各种媒体
     canvas:图形，用于做画布
     output:表示不同类型的输出
     source:为媒介元素定义媒介资源
     datalist：可以制作输入值的下拉列表
     meter：度量给定范围内的数据

3.表单元素

3.1通过type属性

         input中新增属性：
                  url:表示路径文本框属性
                  tel:电话文本框属性
                  search:查询文本框属性
                  emil:电子邮件文本框属性
                  date:日期文本框属性
                  datetime:时间文本框属性
                  color:颜色文本框属性
                  week:周几文本框属性
                  month:月份文本框属性
                  number:数字文本框属性
                  range:范围文本框属性

3.2表单属性

       1.input 新增了：autofocus(让元素自动获得焦点)，placeholder(输入提示信息属性)，
                      form（声明input属于哪个表单），required(提交文本框时检查元素一定要有输入内容)， multiple(允许一次上传多个文件)，disabled(定义无效)，[stpe(规定输入字段的合法数字间隔),min(最小)，max(最大)，pattern(规定用于验证输入字段的模式)]于range属性混合使用，novalidate(无条件提交),autocomplete(自动完成)
       2.select新增了:autofocus,form
       3.textarea新增了:autofocus,form,placeholder,required,
       4.button新增了:autofocus,form,novalidate
       5.output新增了:form
       6.fieldse新增了t:form,disabled
       7.list元素与datalist混合使用，datalist与autocmplete属性配合使用。

注：input与button新增的属性中formaction,formenctype,formmethod,formnovalite,formtarget可以重载form元素的action,enctype,method,novalidate,target

链接属性

  a元素：media(规定了目标url是什么类型的媒介/设备进行优化的只能在href属性存在时使用)
  area元素:hreflang(规定目标 URL 的语言),rel(当前页面与其他页面的关系)

其他属性

   ol:reversed(指定列表倒序显示)
   meta:charset(指定了编码)
   menu：type(可以让菜单出现上下文，工具条，列表菜单)，label(为菜单定义一个可见标注)       
   style:scoped(定义样式作用范围)、
   script:async(是否异步执行)

全局属性

contentEditable：可编辑元素内容（属性值为true） false:不可编辑

contentmenu:用于定义上下文菜单（点击右键时出现）
如：

<div contentmenu='my'>上下文菜单
      <menu id="my" type="context">
                 <menuitem label="1"></menuitem>
                  <menuitem label="2"></menuitem>
      </menu>
 </div>

data-*:（好处：可以通过脚本JavaScript使用其存储的自定义数据，不必进行Ajax 调用或服务器端数据库查询，从而创建出更好的用户体验）
1.可用于自定义用户数据
2.用于存储页面或web应用的私有自定义数据
3.赋予所有HTML元素嵌入自定义data的能力

data-*：包括两部分

 属性名：不能包含任何大写字母，data-*后必须有一个字符（如data-type）
 属性值:可以是任意字符

<ul>
    <li data-type='a'>1</li>
    <li data-type='b'>2</li>
    <li data-type='c'>3</li>
</ul>

var list=document.getElementsByTagNmae('li');
  for(var i=0;i<=list.length;i++){
      console.log(list[i].dataset.type);
  }

注：data-type中的值顺序打印在控制台中

hidden:设置元素的可见状态

spellcheck:定义是否对元素进行拼写和语法检查主要是对

   input中的文本,
   <textarea>中的文本,  
    可编辑元素中的文本

translate: 定义是否翻译该元素内容
后续HTML 5(二)中是关于CSS 3的一些笔记内容