Do you know what are the new features of HTML5?

1. Canvas

A canvas is an area of a web page that can be drawn on using JavaScript. Next, let's create a canvas and draw a tank on it (later we will use HTML5 to make a tank battle game), the code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5-坦克大战</h1>
<!--坦克大战的战场-->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript">
  //得到画布
  var canvas1 = document.getElementById("tankMap");
 
  //定义一个位置变量
  var heroX = 80;
  var heroY = 80;
 
  //得到绘图上下文
  var cxt = canvas1.getContext("2d");
  //设置颜色
  cxt.fillStyle="#BA9658";
  //左边的矩形
  cxt.fillRect(heroX,heroY,5,30);
  //右边的矩形
  cxt.fillRect(heroX+17,heroY,5,30);
  //画中间的矩形
  cxt.fillRect(heroX+6,heroY+5,10,20);
  //画出坦克的盖子
  cxt.fillStyle="#FEF26E";
  cxt.arc(heroX+11,heroY+15,5,0,360,true);
  cxt.fill();
  //画出炮筒
  cxt.strokeStyle="#FEF26E";
  cxt.lineWidth=1.5;
  cxt.beginPath();
  cxt.moveTo(heroX+11,heroY+15);
  cxt.lineTo(heroX+11,heroY);
  cxt.closePath();
  cxt.stroke();
 
</script>
</body>
</html>

　Try it out

The running effect is as follows:

2. Address location

Html5's geographic location feature can return the geographic location of the page visitor

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第八基地菜鸟教程(noob.d8jd.com)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
 
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>

　Click Run to see the effect

3. Rich and powerful forms

HTML5 provides form enhancements, which are written in sophisticated JavaScript to work on all browsers.

4. Local storage

HTML5 local storage is similar to cookies, but it supports storing larger amounts of data and provides a local database engine, making it easier to persist and retrieve data. This feature can distribute data to users very well to relieve the connection pressure with the server. In addition, JavaScript can be used to access the local database from the local web page, which means that you can save the web page locally and open it when you return home from the company without connecting to the Internet.

5. Media

Perhaps the brightest part of the HTML5 specification is the built-in multimedia playback function of the HTML5 browser, which does not require plug-ins such as Flash and Microsoft Media Player

<!DOCTYPE HTML>
<html>
<body>
 
<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
 
</body>
</html>

　　The running effect is as follows:

6. Voice search function:

You can now see the voice search function on many websites. HTML5 provides a powerful voice search function attribute, which can be realized by adding only one attribute.

Note: x-webkit-speech is a private property of webkit kernel browsers (nonsense). But now it can only be used on Google's Chrome 11 and above.
The implementation process is probably after the voice is captured, the data is sent to Google's server for voice recognition, and then the result is returned. Therefore, without strong enough research and development capabilities and server resources, it is really impossible to support this service.
As a person whose Mandarin is not standard and is often complained by others, using voice search can still return keywords very accurately, and I was immediately moved. Click to see the effect:

<!DOCTYPE html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <h1>语音搜素功能</h1>
  <input type="text" name="yuyin" id="yuyin" x-webkit-speech/>
</body>

Do you know what are the new features of HTML5?

Guess you like