假设你已经安装好了开发环境,如果没有,请参考《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
是不是很简单?想学习更多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