HTML5实用大全(Part.1)

HTML5实用大全(Part.1)主要是针对HTML5的一些常用标签和特性进行介绍，以下是一些基本的示例代码：

定义文档类型和字符编码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

使用<header>, <nav>, <section>, <article>, <footer>等语义化标签：




<header>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
</section>
<footer>
    <p>版权所有 &copy; 2023</p>
</footer>

使用<video>和<audio>标签嵌入视频和音频：




<!-- 视频 -->
<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>标签绘图：




<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>

使用<form>和输入元素进行表单操作：




<form action="/submit" method="post">
    <label for="fname">名字:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">姓:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="提交">
</form>

使用<progress>和<meter>标签显示进度和度量：




<progress value="22" max="100">
  进度为 22%。
</progress>
<meter value="75" min="0" max="100">
  75%
</meter>

使用<details>和<summary>标签创建可折叠的内容：




<details>
  <summary>点击查看详情</summary>
  <p>这是一些隐藏的内容...</p>
</details>

使用<datalist>和<keygen>标签提升表单功能：




<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<!-- 注意：<keyge

HTML5实用大全(Part.1)

评论已关闭

推荐阅读