【精选】HTML5最全知识点集合

这篇文章距离上次修改已过436天，其中的内容可能已经有所变动。

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();

【精选】HTML5最全知识点集合

评论已关闭

推荐阅读