<!DOCTYPE html>
<!-- 1.根元素，浏览器渲染的起点，入口 -->
<html lang="zh-CN">
<!-- 2.lang为language的意思，是识别语言的标签，zh-CN表示中文 -->
<!-- head部分为头元素，负责浏览器和搜索引擎SEO -->
<head>
<!-- 编码类型为utf8 -->
<meta charset="UTF-8">
<!-- 兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 负责窗口设置，一般为控制可视化窗口，375px -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title为页面标题 -->
<title>html页面理解</title>
</head>
<body>
<!-- 3.以下为页面主题 -->
<!-- 3.1布局元素演示 -->
<h1 class="title">我的第一个网页</h1>
<p class="passage">我的第一个页面，很激动...</p>
<!-- 4.图文解决方案（语义化） -->
<figure>
<img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="PHP中文网" height="150px">
<figcaption>PHP中文网培训</figcaption>
</figure>
<!-- 5.图像，链接，列表演示 -->
<!-- 5.1.图像 -->
<img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="">
<!-- 5.2 链接 -->
<a href="https://www.php.cn/">PHP中文网</a>
<!-- 5.3 列表 -->
<!-- 5.3.1无序列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 5.3.2有序列表 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- 5.3.3自定义列表 -->
<dl>
<dt>PHP中文网:</dt>
<dd>www.php.cn</dd>
</dl>
</body>
<!-- 反斜杠加tag为标签结束语 -->
</html>