【精选】HTML5最全知识点集合
HTML5是HTML的最新版本,它在原有的基础上增加了很多新特性,如Canvas、SVG、地理位置、多任务等。下面是一些HTML5的常用知识点:
- 文档类型声明:HTML5的文档类型是非常宽松的,它只需要简单地声明
<!DOCTYPE html>
。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
- 语义化标签:HTML5引入了一些语义化的标签,如
<header>
,<nav>
,<section>
,<article>
,<aside>
,<footer>
等。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<header>
<h1>这是一个标题</h1>
</header>
<nav>
<ul>
<li>主页</li>
<li>关于我们</li>
</ul>
</nav>
<section>
<article>
<h2>文章标题</h2>
<p>这是一个段落。</p>
</article>
</section>
<aside>
侧边栏内容。
</aside>
<footer>
页脚内容。
</footer>
</body>
</html>
- 输入类型和表单属性:HTML5增加了很多新的输入类型和表单属性,如
email
,url
,number
,range
,date
,time
,search
,color
等。
<form>
姓名:<input type="text" name="username"><br>
密码:<input type="password" name="password"><br>
生日:<input type="date" name="birthday"><br>
颜色:<input type="color" name="favoritecolor"><br>
<input type="submit">
</form>
- 多媒体元素:HTML5增加了对视频和音频的支持。
<!-- 视频文件 -->
<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>
- Canvas绘图:HTML5提供了
<canvas>
元素,用于通过JavaScript进行绘图。
<canvas id="myCanvas" width="200" height="100">
您的浏览器不支持Canvas。
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>
- 本地存储:HTML5提供了本地存储功能,可以在客户端存储数据。
// 存储数据
localStorage.setItem('key', 'value');
// 读取数据
var data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();
7.
评论已关闭