<!-- 作业1 -->
<!-- 1. 写出html文档结构,并解释每个成员的功能与作用 -->
<!DOCTYPE html><!-- 写在最前，解释文档类型，文档自我介绍 -->
<html lang="zh-CN"></html> <!-- 根元素：浏览器渲染html的起点，入口-- -->
<head>
<meta charset="uft-8" /> <!-- 设置通用语言 -->
<meta http-equiv="X-UA-Compatible content=IE-edge" /><!-- 设置兼容模式 -->
<title>1.写出html文档结构--GAO的作业网页标题</title>
<body>
<H1>1.写出html文档结构--GAO的作业网页正文H1</H1>
GAO的作业网页正文第一行
GAO的作业网页正文第一行
GAO的作业网页正文第一行
GAO的作业网页正文第一行
</body>
</head> <!-- 给浏览器看，将页面信息写到里面，比如给SEO搜索引擎 -->
<footer>
<h3>1.写出html文档结构--gao的作业网站结尾</h3>
</footer>
<!--作业2. 演示布局元素,重点是 tag+class -->
<div class="article header">2.演示布局元素--文章头部</div>
<div class="article main">2.演示布局元素--文章主体</div>
<div class="article footer">2.演示布局元素--文章底部</div>
<!--作业23. 演示图文的语义化解决方案 -->
<figure>
<!--文字-->
<figcaption>3.语义化解决方案--有道翻译</figcaption>
<!--图片--->
<img src="https://fanyi.youdao.com/img/logo.6ed1c44b.png" alt="有道翻译LOGO">
</figure>
<!--作业24. 演示图像,链接与列表元素
图像可以设置图文形式，也可以设置图像超链，可以设置图片的alt标签利于搜索引擎优化，还可以通过class设置图像大小，以及点击图像超链后的打开方式.
4.1 图文： -->
<img src="https://fanyi.youdao.com/img/logo.6ed1c44b.png" alt="有道翻译LOGO" width="200px">
<p class="title">4.1 图文--点击上方图片进行有道翻译</p>
<!-- 4.2链接
常用在设置超级链接,有图片链接，文字链接，按钮链接。 -->
<!-- 4.2.1 文字链接 -->
<a href="https://fanyi.youdao.com">4.2.1文字链接--点击进行有道搜索</a>
<!-- 4.2.2 图片链接 -->
<a href="https://fanyi.youdao.com">
<img src="https://fanyi.youdao.com/img/logo.6ed1c44b.png" width="200px">
</a>
<!-- 4.2.3 按钮链接 -->
<a href="https://fanyi.youdao.com">
<button>4.2.3按钮--点击这里打开有道搜索</button>
</a>
<!-- 4.3列表：有序、无序、自定义 -->
<!-- 4.3.1 无序列表
用emmet直接写-->
<ul>
<li>4.3.1无序列表1</li>
<li>4.3.1无序列表2</li>
<li>4.3.1无序列表3</li>
<li>4.3.1无序列表4</li>
</ul>
<!-- 4.3.2 有序列表
emmet有序 -->
<ol>
<li>4.3.2有序列表1</li>
<li>4.3.2有序列表2</li>
<li>4.3.2有序列表3</li>
<li>4.3.2有序列表4</li>
</ol>
<!-- 4.3.3 自定义dl+dt+dd
dl做框架，dt做标题,dd做内容 -->
<dl>
<dt> 4.3.3自定义列表--标题
</dt>
<dd>
4.3.3自定义列表--内容
</dd>
</dl>