项目要求：
需求 1： 此 app 中应存在一个 id="main" 的元素，页面上的所有元素都应置于这个元素中。
需求 2： 此 app 中应存在一个 id="title" 的元素，其中包含描述致敬页主题的字符串文本，如 "Dr. Norman Borlaug"。
需求 3： 此 app 中应存在一个 id="img-div" 的 div 元素。
需求 4： 在 img-div 元素内，应存在一个 id="image" 的 img 元素。
需求 5： 在 img-div 元素内，应存在一个相应的 id="img-caption" 的元素，其中包含对 img-div 中图像的描述文本。
需求 6： 此 app 中应存在一个 id="tribute-info" 的元素，其中应包含描述致敬页主题的内容文本。
需求 7： 此 app 中应存在一个 id="tribute-link" 的 a 元素，它应链接到一个包含有关致敬页主题额外信息的外部网页。 提示：你必须为 a 元素提供 target 属性，并将其属性值设置为 _blank（即 target="_blank"），这样才可以在新选项卡中打开链接。
需求 8： img 元素应相对于其父元素的宽度自动调整大小，但不超过图片的原始大小。
需求 9： img 应在其父元素内居中。
实验内容：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charest="utf-8">
<title>FirstTry</title>
<style>
#main {
padding: 0;
margin: 0;
background-color:#ddd;
}
#title {
text-align: center;
}
#img-div {
}
#image{
display: block;
max-width: 100%;
height:auto;
margin: 0 auto;
}
#img-caption{
text-align: center;
}
#tribute-info{
margin: 70px;
text-indent:50px;
}
#tribute-link{
}
footer{
text-align: center;
}
</style>
</head>
<body id="main">
<header id="title">
<h1>比尔盖茨</h1>
<p>一个在计算机等众多领域有着巨大成就的科学家</p>
<hr />
</header>
<div id="img-div">
<img id="image" src="https://img0.baidu.com/it/u=670417459,2486530009&fm=26&fmt=auto" alt="比尔盖茨的成功" width="300" height="200">
<p id="img-caption">比尔盖茨的凡尔赛</p>
<div id="tribute-info">
<p>
比尔·盖茨（Bill Gates），全名威廉·亨利·盖茨三世，简称比尔或盖茨。1955年10月28日出生于美国华盛顿州西雅图，企业家、软件工程师、慈善家、微软公司创始人、中国工程院院士（外籍）。曾任微软董事长、CEO和首席软件设计师。</p>
<p>比尔·盖茨13岁开始计算机编程设计，18岁考入哈佛大学，1975年与好友保罗·艾伦一起创办了微软公司，比尔盖茨担任微软公司董事长、CEO和首席软件设计师。
比尔·盖茨1995-2007年连续13年成为《福布斯》全球富翁榜首富，连续20年成为《福布斯》美国富翁榜首富。2000年，比尔·盖茨成立比尔和梅琳达·盖茨基金会，2008年比尔盖茨宣布将580亿美元个人财产捐给慈善基金会 ，2014年比尔·盖茨辞去董事长一职 并重回世界首富。2015年9月29日，微软公司创始人盖茨凭借760亿美元净资产，连续第22年高居《福布斯》榜首 2017年11月，比尔·盖茨当选中国工程院外籍院士。2019年1月，入选美国杂志评选出“过去十年影响世界最深的十位思想家”。2020年2月26日，以7400亿元财富位列《2020胡润全球富豪榜》第3位。2020年3月13日，比尔·盖茨退出微软董事会。
北京时间2021年5月4日凌晨，比尔·盖茨与梅琳达·盖茨宣布结束长达27年的婚姻关系。5月17日，微软董事会决定，比尔·盖茨应当离开董事会 。8月2日，华盛顿金县高级法院的一份文件显示，比尔盖茨夫妇正式离婚 。2021年10月，以1,340亿美元财富位列《2021年度美国富豪榜》第4名。</p>
</div>
</div>
<footer>
<p>点击<a id="tribute-link" href="https://baike.baidu.com/item/%E6%AF%94%E5%B0%94%C2%B7%E7%9B%96%E8%8C%A8/83241?fromtitle=%E6%AF%94%E5%B0%94%E7%9B%96%E8%8C%A8&fromid=145939&fr=aladdin" target="_blank">此处</a> ，了解更多。</p>
</footer>
</body>
</html>
小Tip:
对于需求8:
img属于可替换元素（可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。注：<img /> 标签属于可替换元素，但它具有内置的宽高属性，所以可以设置独立的宽高。）
而这里要相对于父元素自动调整大小，无法用进行CSS直接处理。因此，要想实现图片对应父元素的宽度来自适应大小，需要先将img转化成块元素进行处理。
对于需求9：
块元素的水平居中往往这样自适应水平居中：margin:0px auto; (与 margin:auto; 效果相同)，而不用width描述。
参考博客：
https://www.cnblogs.com/telnetzhang/p/5565364.html
