<!-- DOCTYPE元素是一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器，当前应该使用HTML文档类型来解析该文档。 -->
<!DOCTYPE html>
<!-- html根元素：浏览器解析html文档的起点，lang属性表明当前文档是中文语言 -->
<html lang="zh-CN">
<!-- head头元素：为浏览器、搜索引擎提供相关信息 -->
<head>
<!-- meta：元标签可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，charset="utf-8" 告诉浏览器当前字符集是utf-8 -->
<meta charset="utf-8"/>
<!-- 设置IE浏览器的兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口设置：可视窗口宽度为设备屏幕宽度，并且无缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 文档标题 -->
<title>整个文档的标题</title>
</head>
<!-- 文档的主体，浏览器解析后用户可见 -->
<body>
<!-- 第二题演示布局元素 -->
<div class="container">
<div class="header">头部</div>
<div class="main">主体</div>
<div class="footer">底部</div>
</div>
<div class="container">
<header>头部</header>
<main>主体</main>
<footer>底部</footer>
</div>
<!-- 第三题演示图文的语义化解决方案 -->
<figure>
<!-- img 的 width height 属性只设置其中一个 -->
<img src="img.jpg" alt="图片标题" height="图片高度" />
<figcaption>这里添加图片说明文字</figcaption>
</figure>
<!-- 第四题演示图像,链接与列表元素 -->
<!-- 图像 -->
<img src="图片路径" alt="图片标题" height="图片高度"/>
<!-- 链接 -->
<a href="https://php.cn">LINK</a>
<!-- 无序列表 -->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<!-- 描述列表 -->
<dl>
<dt>描述标题1</dt>
<dd>描述内容1</dd>
<dt>描述标题2</dt>
<dd>描述内容2</dd>
<dt>描述标题3</dt>
<dd>描述内容3</dd>
</dl>
</body>
</html>