<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<!--標題，里面填寫的內容將在瀏覽器頂部小框中顯示--> <title></title>
</head> <body>
<!--將網頁分成三個部分，頭部-->
<header> <h1><a href="#"><img src="../img/163logo.gif" alt="logo"/></a></h1> <p> <a href="#">免費郵</a> <a href="#"> 企業郵</a> <a href="#">VIP郵箱</a> <a href="#">幫助</a> </p> </header>
<!--中部-->
<section> <div> <img src="../img/imap.jpg" alt=""/> <ul> <li>163/126/yeah三大免費郵箱均默認開放</li> <li>全面支持iPhone/iPad及Android等系統</li> <li>客戶端、手機與網頁，實現發送、閱讀郵件</li> </ul> <a href="#"><img src="../img/loginIcon.gif">普通登錄 </a> </div> <form action="#" method="get"> <p> 用戶名： <input type="text" name="userName"/> @163.com </p> <p> 密碼： <input type="password" name="psw"/> </p> <p> 版本： <select name=""version id=""> <option value="">默認</option> <option value="2018">2018</option> <option value="2017">2017</option> <option value="2016">2016</option> <option value="2015">2015</option> </select> </p> <p> <input type="checkbox" value="autoLogin"/>自動登錄 <input type="checkbox" value="ssl" checked/>SSL </p> <input type="submit" value="登錄"/> <input type="submit" value="注冊"/> </form> </section>
<!--尾部-->
<footer> <img src="../img/netease_logo.gif" alt=""/> <a href="#">關於網易</a> <a href="#">免費郵 </a> <a href="#">官方博客</a> <a href="#">客戶服務 </a> <a href="#">隱私政策</a>| <a href="#">網易公司版權所有 © 2015-2018</a> </footer> </body> </html>
上面是效果展示圖，圖片保存位置：右擊當前web項目的img文件夾，打開文件所在目錄（p）
將這四張圖存入其中。<!--*******-->為注釋 <ul></ul>為無序列表。