BAT大佬推荐使用的HTML5的十个功能，web开发问题

HTML5 提供了许多强大的新功能，使得 Web 开发更加容易和富有表现力。以下是一些最常用的 HTML5 功能：

用于绘图的 <canvas> 元素




<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(0, 0, 150, 75);
</script>

本地存储（LocalStorage/SessionStorage）




localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');

音频和视频支持




<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

新的表单输入类型（如email, url, number, range, date, datetime, datetime-local, month, week, time, search, color）




<form>
  Email: <input type="email" name="user_email">
  URL: <input type="url" name="user_url">
  Number: <input type="number" name="user_number" min="1" max="5" step="1">
  Range: <input type="range" name="user_range" min="1" max="10">
  Search: <input type="search" name="user_search">
  Color: <input type="color" name="user_color">
  <input type="submit">
</form>

内置 SVG 支持




<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

新的通信API：WebSockets




var ws = new WebSocket('ws://localhost:80/');
ws.onopen = function() {
  ws.send('Hello Server');
};
ws.onmessage = function(evt) {
  console.log(evt.data);
};
ws.onclose = function(evt) {
  console.log('WebSocket closed');
};
ws.onerror = function(evt) {
  console.error('WebSocket error observed:', evt);
};

地理位置（Geolocation）API




navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude: " + position.coords.latitude + 
  " Longitude: " + position.coords.longitude);
});

应用程序缓存（Application Cache）




<!DOCTYPE html>
<html manifest="example.appcache">
  <!-- your web app content -->
</html>

内容可编辑（ContentEditable）




<div contenteditable="true">
  This is a editable area.
</div>

Drag and Drop API

\`\`

BAT大佬推荐使用的HTML5的十个功能，web开发问题

评论已关闭

推荐阅读