前置知识:HTML,CSS
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first html</title> </head> <body> <div>占一整行的盒子</div><!--多用于表示一个区块--> <span>多个小盒子占同一行</span> <span>2号小盒子</span> <p> <!-- 这是一个不换行的段落 --> <strong>加粗</strong> <em>倾斜</em> <del>删除线</del> <ins>下划线</ins> </p> <!-- 这是6级标题大小字号 --> <h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3> <h4>这是一个标题</h4> <h5>这是一个标题</h5> <h6><em>这是一个倾斜的标题</em></h6> <!-- 这是一个新的段落 --> <p>abaaba</p> <!-- 换行 --> <br> <!-- 超链接 可以从一个页面跳转到其他页面 或者当前页面其他位置 --> <a href="http://www.baidu.com" target="_blank">百度一下</a> <!--href为链接地址(自己的页面的话就输入相对地址), target为弹出方式,如果是_self就是当前窗口打开(默认值) _blank 就是新开一个窗口打开--> <br> <a href="#img1">跳到图片</a> <!-- 列表 list 1.有序列表 2.无序列表 3.定义列表 无序 ul建立列表 li为列表项 有序 ol建立列表 定义 dl 建立列表 dt表示定义的内同 dd表示内容的解释说明 列表可互相嵌套 --> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <dl> <dt>名词</dt> <dd>名词的解释</dd> <dt>名词2</dt> <dd>名词的解释</dd> </dl> <!-- src处也可放链接地址 alt 图片无法加载时显示 --> <img id="img1" loading="lazy" src="images/xyjy.jpg" width="258" height="180" alt="老婆" /> <!-- audio 音频 video 视频 默认是用户不可以控制的 controls可以出现暂停开始选项,autoplay可以让视频自动播放 --> <video src="./source/test.mp4" controls autoplay>test</video> </body> </html>