FCC—一个简单的Tribute Page

项目要求：

需求 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