HTML5简介及新增标签
HTML5是HTML的新标准,于2014年正式发布。相较于之前的HTML版本,HTML5提供了大量新的特性和功能,包括音频和视频支持、画布(Canvas)、本地存储、新的表单控件等。
以下是一些HTML5的新增标签:
canvas
- 用于绘图和图形处理。audio
- 用于音频内容的播放。video
- 用于视频内容的播放。nav
- 用于导航链接的组合。header
- 表示页面或区域的头部。footer
- 表示页面或区域的底部。section
- 表示文档或应用的一个区块。article
- 表示文章内容。aside
- 表示与页面主内容关联度较低的内容。input
类型为email
、url
、number
、range
、date
和datetime-local
等,提供了更加丰富的表单输入控件。
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 示例</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>文章标题</h1>
<p>这里是文章内容...</p>
</article>
<aside>
<p>这里是侧边内容...</p>
</aside>
</section>
<footer>
<p>版权信息</p>
</footer>
<audio src="music.mp3" controls></audio>
<video src="movie.mp4" controls></video>
<canvas id="myCanvas"></canvas>
<form>
<input type="email" name="userEmail" required>
<input type="submit">
</form>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>
</body>
</html>
在这个示例中,我们使用了新的语义化标签来构造页面结构,同时也展示了音频和视频的嵌入,画布的使用,以及一些新型的表单输入控件。
评论已关闭