<!DOCTYPE html>
<html>
<head>
<title>HTML5+ 示例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>HTML5+ 示例代码</h1>
<p>这是一个简单的 HTML5+ 示例,结合了 HTML5 的新特性。</p>
<!-- 使用 HTML5 的语义化标签 -->
<article>
<header>
<h2>文章标题</h2>
<p>发布日期: 2023-10-01</p>
</header>
<section>
<p>这是文章的内容部分。HTML5 提供了许多新的语义化标签,如 <code>article</code>, <code>section</code>, <code>aside</code>, <code>footer</code> 等,使页面结构更加清晰。</p>
</section>
<footer>
<p>作者: 张三</p>
</footer>
</article>
<!-- 使用 HTML5 的多媒体元素 -->
<video controls width="400">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<!-- 使用 HTML5 的表单新特性 -->
<form action="/submit" method="post">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="url">网址:</label>
<input type="url" id="url" name="url" required>
<br>
<input type="submit" value="提交">
</form>
<!-- 使用 HTML5 的本地存储 -->
<script>
// 检查浏览器是否支持 localStorage
if (typeof(Storage) !== "undefined") {
// 存储数据
localStorage.setItem("username", "JohnDoe");
// 检索数据
document.write("欢迎回来, " + localStorage.getItem("username"));
} else {
document.write("抱歉,您的浏览器不支持 Web Storage...");
}
</script>
</body>
</html>
语义化标签:使用 <article>
、<section>
、<header>
和 <footer>
等 HTML5 新增的语义化标签来组织内容,使页面结构更清晰,便于搜索引擎和屏幕阅读器解析。
多媒体元素:通过 <video>
标签嵌入视频,支持多种格式,并提供播放控制。
表单新特性:HTML5 表单新增了 type="email"
和 type="url"
等输入类型,增强了表单验证功能,确保用户输入符合预期格式。
本地存储:通过 localStorage
API 实现客户端数据存储,可以在用户的浏览器中保存数据,即使关闭浏览器后再次访问时依然可以读取。
上一篇:html5 canvas
下一篇:html实体编码
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站