02 常用的html元素

假设你已经安装好了开发环境，如果没有，请参考《01 认识html、css和javascript》：https://www.cnblogs.com/tengge/p/13519516.html

下面，我们介绍在网页上常用的元素。

首先，使用VSCode创建02.html，将下面的代码复制到该文件中。并在文件夹中放一个1.png、1.mp3和1.mp4，练习图片、音频、视频的使用。

<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>常用的html元素</title>
</head>

<body>
    <!-- 这是注释，不会对页面造成影响 -->
    <!-- 标题h1-h6 -->
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
    <!-- 容器div，可以嵌套，默认占一行 -->
    <div>
        这是div容器
    </div>
    <!-- 各种表单元素 -->
    <form>
        <div>
            <!-- 按钮 -->
            <button>按钮</button>
        </div>
        <div>
            单选框
            <input type="radio" />
        </div>
        <div>
            复选框
            <input type="checkbox" />
        </div>
        <div>
            下拉列表
            <select>
                <option>选项一</option>
                <option>选项二</option>
            </select>
        </div>
    </form>
    <!-- 表格，为了明显，加了个黑色边框 -->
    <table style="border: 1px solid #000;">
        <!-- 表头 -->
        <thead>
            <!-- 表示一行 -->
            <tr>
                <td>表头一</td>
                <td>表头二</td>
            </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
            <tr>
                <td>单元格一</td>
                <td>单元格二</td>
            </tr>
            <tr>
                <td>单元格三</td>
                <td>单元格四</td>
            </tr>
        </tbody>
    </table>
    <!-- 这是一个列表 -->
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
    </ul>
    <!-- 图片，请将1.png放到该文件夹下面，width和height分别设置宽度和高度 -->
    <img src="1.png" width="80" height="80" />
    <!-- 音乐，请将1.mp3放到该文件夹下面 -->
    <audio src="1.mp3" controls="controls"></audio>
    <!-- 视频，请将1.mp4放到该文件夹下面 -->
    <video src="1.mp4" controls="controls"></video>
</body>

</html>

启动Live Server，在浏览器中访问查看效果：http://localhost:5500/02.html

02 常用的html元素

是不是很简单？想学习更多html元素的用法，可以查看w3school中html和html5文档。

html5是html的一个新版本，就是在原来的基础上增加了一些内容。

w3school html教程：https://www.w3school.com.cn/html/index.asp

w3school html5教程：https://www.w3school.com.cn/html5/index.asp