HTMLTIPS

超级文本标记语言是 标准通用标记语言下的一个应用，也是一种规范，一种 标准，通过标记符号来标记要显示的网页中的各个部分。网页 文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉 浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 浏览器按顺序阅读网页 文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的 浏览器，对同一标记符可能会有不完全 相 同的解释，因而可能会有不同的显示效果.

对于 HTML, 现摘记基本操作经验及技巧如下.

1.HTML5 规定了一种通过 video 元素来包含视频的标准方法,目前只支持OGG,MPEG4,WebM三种格式. 其它格式的视频仍需要通过Flash来操作. HTML5 <video> 元素同样拥有方法、属性和事件。  video元素的基本属性包括

 1>autoplay如果出现该属性，则视频在就绪后马上播放。

 2>controls 如果出现该属性，则向用户显示控件，比如播放按钮。

 3> height 设置视频播放器的高度。

 4> loop  如果出现该属性，则当媒介文件完成播放后再次开始播放。

 5> preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

 6> src            要播放的视频的 URL。

 7> width  设置视频播放器的宽度。

 

2.HTML5 规定了一种通过 audio 元素来包含音频的标准方法。目前只支持Ogg Vorbis,MP3,Wav三种格式. 其它格式的视频仍需要通过Flash来操作. HTML5 <video> 元素同样拥有方法、属性和事件。  video元素的基本属性包括

1>autoplay如果出现该属性，则视频在就绪后马上播放。

 2>controls 如果出现该属性，则向用户显示控件，比如播放按钮。

 3> loop  如果出现该属性，则当媒介文件完成播放后再次开始播放。

 4> preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

 5> src            要播放的视频的 URL。

3. 拖放（Drag 和 drop）是 HTML5 标准的组成部分。

首先，为了使元素可拖动，把 draggable 属性设置为 true.

ondragstart 属性调用了一个函数，drag( event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值.

ondragover 事件规定在何处放置被拖动的数据。

调用 ondragover 事件的 event.preventDefault() 方法.

当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop(event).

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
• 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id ("drag1")
• 把被拖元素追加到放置元素（目标元素）中

4.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

1>向 HTML5 页面添加 canvas 元素,规定元素的 id、宽度和高度. <canvas id="myCanvas" width="200" height="100"></canvas>

2>JavaScript 使用 id 来寻找 canvas 元素：var c=document.getElementById("myCanvas");

3>创建 context 对象：var cxt=c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    通过调用canvas对象的getContext()方法来获取绘图环境，其只需要一个参数：绘图环境的类型. 一般参数为"2d".

4>fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);

5.SVG 指可伸缩矢量图形 (Scalable Vector Graphics).

6.HTML5 Geolocation API 用于获得用户的地理位置。

6.1使用 getCurrentPosition() 方法来获得用户的位置。

coords.latitude

十进制数的纬度

coords.longitude

十进制数的经度

coords.accuracy

位置精度

coords.altitude

海拔，海平面以上以米计

coords.altitudeAccuracy

位置的海拔精度

coords.heading

方向，从正北开始以度计

coords.speed

速度，以米/每秒计

timestamp

响应的日期/时间

6.2watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

6.3clearWatch() - 停止 watchPosition() 方法

7.HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储; sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。

8.web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

9.Server-Sent 事件指的是网页自动获取来自服务器的更新。EventSource 对象用于接收服务器发送事件通知.

10.HTML5 拥有多个新的表单输入类型。email,url,number,range,Date pickers (date, month, week, time, datetime, datetime-local),search,color.

11.HTML5 拥有若干涉及表单的元素和属性。datalist,keygen,output.