HTML5新特性
HTML5引入了许多新特性，以下是一些常见的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）：
localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');- 语义化标签（如
<header>,<nav>,<section>,<article>,<footer>等）：
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<section>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>文章内容...</p>
</article>
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>- 多媒体标签（
<video>和<audio>）：
<!-- 视频 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>
<!-- 音频 -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
您的浏览器不支持音频元素。
</audio>- 输入类型（如
email,url,number,range,date等）：
<form>
<label for="email">邮箱:</label>
<input type="email" id="email" name="useremail">
<input type="submit">
</form>- 新的表单输入属性（如
required,pattern,min,max等）：
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>- 应用程序缓存（Application Cache）：
<!DOCTYPE html>
<html manifest="example.appcache">
...- 新的API（如Geolocation API, History API等）：
navigator.geolocation.getCurrentPosition(function(position) {
console.log("纬度: " + position.coords.latitude +
" 经度: " + position.coords.longitude);
});- 内联SVG：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>- 更好的错误处理机制：
<!DOCTYPE html>
<html>
<head>
<title>Error Handling</title>
</head>
<body>
<h1>网页无法显示</h1>
<p>出现了一个问题，无法加载网页。</p>
</body>
</html>以上是一些常见的HTML5新特性
评论已关闭