![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="zh"><head></head><body></body></html>
<!-- 设置字符集 --><meta charset="UTF-8"><!-- http-equiv,浏览器行为 --><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"><!-- 视口属性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 标题和描述 --><title>Document</title><meta name="description" content=""><!-- link,两个文档的连接关系 --><link rel="stylesheet" href="style.css"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 5秒后自身刷新 --><meta http-equiv="refresh" content="5"><!-- 5秒后跳转新url --><meta http-equiv="refresh" content="5; url=http://example.com"><!-- 视口属性，初始化页面放大两倍，用户禁止缩放 --><meta name="viewport" content="initial-scale=2.0, user-scalable=no"><!-- 视口属性，初始化页面设备宽度，页面最多放大设备宽度2倍，最小缩小设备宽度1半 --><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.5"><!-- 内链样式和脚本 --><style></style><script src=""></script><script></script>
<!-- 头部标签 --><header><!-- 导航标签 --><nav>导航</nav></header><!-- div标签 --><div id="container"><!-- 主体标签 --><main><!-- 内容标签 --><article><p>一段内容<span>测试</span></p></article><!-- 区块标签 --><section></section></main><!-- 侧栏标签 --><aside>侧栏</aside></div><!-- 底部标签 --><footer><!-- 地址标签 --><address>xxx路xx号</address></footer>
<!-- strong 强调, b 加粗em 突出, i 倾斜del 删除线u 下划线mark 标记，为显示的文本添加背景色--><p><strong>T</strong>his <b>text</b> is <i>only</i> for <em>test</em>. <u>you</u> can <del>delete</del><mark>it</mark>.</p><!-- sub 下标 sup 上标 --><p>E=mc<sup>2</sup></p><p>a<sub>n+1</sub>=a<sub>n</sub>+a<sub>n-1</sub>;(n>1;a<sub>1</sub>=1;a<sub>2</sub>=1)</p><!-- bdo 覆盖默认文本的方向ltr: left to right, rtl: right to left --><p><bdo dir="ltr">default</bdo> <bdo dir="rtl">text</bdo> direction</p><!-- 详情隐藏细节 --><details><summary>click show detail</summary>This text is hidden detail, click to show.</details><!-- 对话框，open 开启，去掉隐藏 --><dialog open>hello world!</dialog><pre><p>hello world!</p></pre><!-- 组合标签 --><figure><figcaption>组合标签标题</figcaption><p><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="baidu"></p></figure>
无序列表
<ul><li>ul-li-01</li><li>ul-li-02</li><li>ul-li-03</li></ul>
有序列表
<ol><li>ol-li-01</li><li>ol-li-02</li><li>ol-li-03</li></ol>
定义列表
<dl><dt>dl-dt</dt><dd>dl-dd-01</dd><dd>dl-dd-02</dd><dd>dl-dd-03</dd></dl>
<p><a href="https://www.php.cn" target="_blank">open in new window</a></p><p><a href="https://www.php.cn" title="self">open in self window</a></p>
图像
<p><img src="https://www.php.cn/static/images/PHPlogo.png" alt="logo" width="120"></p>
音频和媒体源
<p><audio src="https://www.w3school.com.cn/i/horse.mp3" controls="controls"></audio></p><p><!-- 载入时静音 --><audio controls="controls" muted><source src="https://www.w3school.com.cn/i/horse.ogg"><source src="https://www.w3school.com.cn/i/horse.mp3"></audio></p>
autoplay 自动播放，loop循环播放，muted 载入时静音
视频和媒体源
<p><video src="https://www.w3school.com.cn/i/movie.mp4" controls="controls" width="240" height="180"></video></p><p><!-- 显示封面 --><video controls poster="https://www.php.cn/static/images/PHPlogo.png" width="240" height="180"><source src="https://www.w3school.com.cn/i/movie.ogg"><source src="https://www.w3school.com.cn/i/movie.mp4"></video></p>
autoplay 自动播放，loop循环播放，muted 载入时静音，preload=”url” 预加载视频，poster=”url” 视频显示封面
