HTML5简介

什么是HTML5？

HTML5是HTML最新的一个版本，它不仅仅是HTML标准的最新版本，还包括了诸多前端技术，如CSS3、JavaScript等。HTML5的出现，使得构建更丰富、更多样的Web内容变得更加容易。

HTML5的新特性

新语义元素

HTML5引入新的语义元素，可以更加清晰的描述Web内容的结构，例如：

<header>：定义页面的页眉
<footer>：定义页面的页脚
<nav>：定义页面的导航

新的表单控件

HTML5中新增了很多表单控件，例如：

<date>：日期选择器
<time>：时间选择器
<email>：电子邮件输入框
<range>：范围输入控件

Canvas

HTML5中引入的canvas标签，可以通过JavaScript脚本来绘制各种图形，例如：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

视频和音频

HTML5支持原生的视频和音频播放，例如：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

总结

HTML5是HTML标准的最新版本，引入了很多新特性，使得构建更丰富、更多样的Web内容变得更加容易。

示例1，使用语义元素：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5语义元素示例</title>
</head>
<body>
    <header>
        <h1>这是页面的主标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>这是文章的标题</h2>
        <p>这是文章的内容...</p>
    </section>
    <footer>
        <p>版权所有&copy; 2021</p>
    </footer>
</body>
</html>

示例2，使用Canvas绘制图形：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html5简介_动力节点Java学院整理 - Python技术站

html5简介_动力节点Java学院整理