HTML5 articles

Ten new features [HTML5]

---

(1) semantic tags

(2) enhanced form

(3) video and audio

(4) canvas graphics

(5) SVG drawing

(6) geopositioning

(7) drag and drop API

(8) Web Worker

(9) Web Storage

(10) WebSocket

 

---

 

Ten new features of HTML5

 

　　To better handle today's internet use, HTML5 adds many new elements and features, such as: graphics rendering, multimedia content, better page structure, better form processing, and several api drag and drop elements, positioning, including web application cache, storage, web workers, etc.

(1) semantic tags

　　Semantic tag makes structured content pages, see to know the name of justice

label	description
<hrader></header>	Defined in the head area of ​​a document
<footer></footer>	It defines the tail area of ​​the document
<nav></nav>	Navigation definition document
<section></section>	Defined in the document section (section, section)
<article></article>	Independent content area defined page
<aside></aside>	Sidebar content definitions page
<detailes></detailes>	Used to describe details of a part of the document or document
<summary></summary>	The title tag contains details of elements
<dialog></dialog>	Customize dialog box, such as the prompt box

(2) enhanced form

　　HTML5 has several new input types Input Form. These new features provide better input control and validation.

Input Type	description
color	Mainly used for selecting color
date	Selecting a date from a date picker
datetime	Select a date (UTC time)
datetime-local	Select a date and time (no time zone)
email	It contains input fields of the e-mail address
month	Select a month
number	Value input field
range	Input field within a range of digital values
search	Search for domain
tel	Enter the phone number field definitions
time	Select a time
url	Enter the URL address field
week	Select week and in

 　　HTML5 also added the following form elements

Form elements	description
<datalist>	Element specifies a list of options in the input field id binding using <input> element with the attribute list <datalist> element
<keygen>	Provide a reliable method for verifying the user's Predetermined key label field in the form of a generator.
<output>	For different types of output For example, calculations or script output

　　The new HTML5 form attributes

• • placehoder property, a brief reminder before the user input value is displayed on the input field. That is our common default prompt input box, disappear after user input.
  • required attribute is a boolean attribute. Fill in the required input field can not be empty
  • pattern attribute describes a regular expression to verify a value <input> element.
  • min and max attribute, set minimum and maximum elements.
  • step attribute, the input field specifies the legal number intervals.
  • height and width, height and width of the image for image type <input> tag.
  • The autofocus attribute is a boolean attribute. Provisions when the page loads, the domain automatically gets the focus.
  • multiple attribute is a boolean attribute. Predetermined <input> element in a plurality of selectable values.　　　

(3) video and audio

• HTML5 provides a standard play audio files that use the <audio> element

  1 2 3 4 5

  <audio controls>    <source src= "horse.ogg"  type= "audio/ogg" >    <source src= "horse.mp3"  type= "audio/mpeg" > 您的浏览器不支持 audio 元素。 </audio>

　control 属性供添加播放、暂停和音量控件。

　在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

　<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

 

　目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

 

• HTML5 规定了一种通过 video 元素来包含视频的标准方法。

  1 2 3 4 5

  <video width= "320"  height= "240"  controls>    <source src= "movie.mp4"  type= "video/mp4" >    <source src= "movie.ogg"  type= "video/ogg" > 您的浏览器不支持Video标签。 </video>

  control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。

  同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

  与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

  video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）

(4)Canvas绘图

　　标签只是图形容器，必须使用脚本来绘制图形。

• Canvas - 图形

1. 创建一个画布，一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制。默认情况下 元素没有边框和内容。

   1	<canvas id= "myCanvas"  width= "200"  height= "100"  style= "border:1px solid #000000;" ></canvas>

   　　标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小，使用 style 属性来添加边框。你可以在HTML页面中使用多个 <canvas> 元素

2. 使用Javascript来绘制图像，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

   1 2 3 4 5 6

   <script> 　　 var  c=document.getElementById( "myCanvas" ); 　　 var  ctx=c.getContext( "2d" ); 　　ctx.fillStyle= "#FF0000" ; 　　ctx.fillRect(0,0,150,75); </script>

   　　getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

   　　设置 fillStyle 属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。　

• Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke()。

1 2 3 4 5 6 7

<script>      var  c=document.getElementById( "myCanvas" );      var  ctx=c.getContext( "2d" );      ctx.moveTo(0,0);      ctx.lineTo(200,100);      ctx.stroke(); </script>

　　　　定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条

• Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

　　font - 定义字体

　　fillText(text,x,y) - 在 canvas 上绘制实心的文本

　　strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

1 2 3 4

var  c=document.getElementById( "myCanvas" ); var  ctx=c.getContext( "2d" ); ctx.font= "30px Arial" ; ctx.fillText( "Hello World" ,10,50);

　　使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）

• Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

　　createLinearGradient(x,y,x1,y1) - 创建线条渐变

　　createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

1 2 3 4 5 6 7 8 9 10 11

var  c=document.getElementById( "myCanvas" ); var  ctx=c.getContext( "2d" );   // Create gradient var  grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0, "red" ); grd.addColorStop(1, "white" );   // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

　　创建了一个线性渐变，使用渐变填充矩形

• Canvas - 图像

　　把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法

1 2 3 4

var  c=document.getElementById( "myCanvas" ); var  ctx=c.getContext( "2d" ); var  img=document.getElementById( "scream" ); ctx.drawImage(img,10,10);

　　把一幅图像放置到了画布上

(5)SVG绘图

　　SVG是指可伸缩的矢量图形

SVG 与 Canvas两者间的区别

　　SVG 是一种使用 XML 描述 2D 图形的语言。

　　Canvas 通过 JavaScript 来绘制 2D 图形。

　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

　　Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

(6)地理定位

　　HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　　　

　　获取用户定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){

　　　　console.log('用户定位数据获取成功')
　　　　//console.log(arguments);
　　　　console.log('定位时间：',pos.timestamp)
　　　　console.log('经度：',pos.coords.longitude)
　　　　console.log('纬度：',pos.coords.latitude)
　　　　console.log('海拔：',pos.coords.altitude)
　　　　console.log('速度：',pos.coords.speed)

},    //定位成功的回调
function(err){ 

　　　　console.log('用户定位数据获取失败')
　　　　//console.log(arguments);

}        //定位失败的回调
)

 

(7)拖放API

　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

　　拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

拖放的源对象(可能发生移动的)可以触发的事件——3个：

dragstart：拖动开始

drag：拖动中

dragend：拖动结束

整个拖动过程的组成： dragstart*1 + drag*n + dragend*1

 

拖放的目标对象(不会发生移动)可以触发的事件——4个：

dragenter：拖动着进入

dragover：拖动着悬停

dragleave：拖动着离开

drop：释放

整个拖动过程的组成1： dragenter*1 + dragover*n + dragleave*1

整个拖动过程的组成2： dragenter*1 + dragover*n + drop*1

 

dataTransfer：用于数据传递的“拖拉机”对象；

  在拖动源对象事件中使用e.dataTransfer属性保存数据：

e.dataTransfer.setData( k,  v )

  在拖动目标对象事件中使用e.dataTransfer属性读取数据：

var value = e.dataTransfer.getData( k )

(8)Web Worker

　　当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

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

　　首先检测浏览器是否支持 Web Worker

1 2 3 4 5 6

if ( typeof (Worker)!== "undefined" ){    // 是的! Web worker 支持!    // 一些代码.....    } else {    // //抱歉! Web Worker 不支持    }

　　下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码

1 2 3 4

if ( typeof (w)== "undefined" )    {    w= new  Worker( "demo_workers.js" );    }

 

　　然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 "onmessage" 事件监听器：

1 2 3

w.onmessage= function (event){ document.getElementById( "result" ).innerHTML=event.data; };

　　当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法。

　完整的 Web Worker 实例代码

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{ 
w.terminate();
}
</script>

</body>
</html>

 

 

　　创建的计数脚本，该脚本存储于 "demo_workers.js" 文件中

var i=0;

 function timedCount()
 {
 i=i+1;
 postMessage(i);
 setTimeout("timedCount()",500);
 }

 timedCount(); 

 

(9)Web Storage

　　使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

• • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

　　在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage

if(typeof(Storage)!=="undefined")
   {
   // 是的! 支持 localStorage  sessionStorage 对象!
   // 一些代码.....
   }
 else
   {
   // 抱歉! 不支持 web 存储。
   }

 

　　不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

(10)WebSocket

　　WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

 

 

 

 

参考：HTML5的十大新特性

转载于:https://www.cnblogs.com/still1/p/10997401.html