HTML5新的标签和属性

原文链接： http://www.cnblogs.com/yoyohong/p/6025600.html

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article>article>
HTML4:<div>div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。div>

<audio> 标签定义声音，比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav">object>

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200">canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">object>

<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist>datalist>
HTML4: see combobox.

<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details>details>
HTML4: <dl style="display:hidden">dl>

<embed> 标签定义嵌入的内容，比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash">object>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRCfigcaption>figure>
HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRCfigcaption><p>The People's Republic of China was born in 1949...p>figure>
HTML4: <dl><h1>PRCh1><p>The People's Republic of China was born in 1949...p>dl>

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer>footer>
HTML4: <div>div>

<header> 标签定义 section 或 document 的页眉。
HTML5: <header>header>
HTML4: <div>div>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup>hgroup>
HTML4: <div>div>

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark>mark>
HTML4: <span>span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: <meter>meter>
HTML4: none

<nav> 标签定义导航链接的部分。
HTML5: <nav>nav>
HTML4:<ul>ul>

<output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output>output>
HTML4: <span>span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress>progress>
HTML4: none

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(rp>ㄏㄢˋ<rp>)rp>rt>ruby>
HTML4: none

<rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ rt>ruby>
HTML4: none

<ruby> 标签定义 ruby 注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(rp>ㄏㄢˋ<rp>)rp>rt>ruby>
HTML4: none

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section>section>
HTML4: <div>div>

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5summary>This document teaches you everything you have to learn about HTML 5.details>
HTML4: none

<time> 标签定义日期或时间，或者两者。
HTML5: <time>time>
HTML4: <span>span>

<video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv">object>

HTML5新的input属性

新增加的属性描述如下：

autocomplete ：是否显示与现在输入内容相匹配的历史输入记录。

autofocus ：当页面加载完成后，此元素获得焦点。

form ：设置元素归属表单的ID。

formaction ：设置表单action属性的值。

formenctype ：设置表单enctype属性的值。

formmethod ：设置表单method属性的值。

formnovalidate ：关闭表单的验证。

formtarget ：设置表单target属性的值。

max ：设置元素中数字或日期控件的最大值。

min ：设置元素中数字或日期控件的最小值。

minlength ：设置文本输入控件的内容最小长度。

pattern ：设置元素文本内容需匹配的正则表达式。

placeholder ：设置文本控件的预先显示内容。

readonly ：设置元素是否只读。

required ：设置控件是否为必填项。

 

HTML5新的input控件

元素type属性的值：

color ：颜色控件。

date ：日期控件。

email ：电子邮件地址输入框。

month ：年月日历控件。

number ：数值输入框。

range ：滑动条。

search ：搜索框。

tel ：电话号码输入框。

time ：时间控件。

url ：网址输入框。

week ：周数控件。

 

手机端html5触屏事件(touch事件)

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

var obj = document.getElementByIdx_x('id');

obj.addEventListener( 'touchmove' ,  function (event) {

 

      // 如果这个元素的位置内只有一个手指的话

 

     if  (event.targetTouches.length == 1) {

 

　　　　 event.preventDefault(); // 阻止浏览器默认事件，重要 

 

         var  touch = event.targetTouches[0];

 

         // 把元素放在手指所在的位置

 

         obj.style.left = touch.pageX-50 +  'px' ;

 

         obj.style.top = touch.pageY-50 +  'px' ;

 

         }

 

},  false );

 

转载于:https://www.cnblogs.com/yoyohong/p/6025600.html