web基础，用html元素制作web页面
用div,form制作登录页面，尽可能做得漂亮。
练习使用下拉列表选择框，无序列表，有序列表，定义列表。
观察常用网页的HTML元素，在实际的应用场景中，用已学的标签模仿制作。
<!DOCTYPE html> <html lang="en"> <head> <body bgcolor="#5f9ea0"> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Hello</h1> <h2>欢迎加入极限挑战</h2> <h3>无限精彩敬请期待</h3> <p></p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507723247150&di=5090a56eaf6868257edee9295813b943&imgtype=0&src=http%3A%2F%2F365jia.cn%2Fuploads%2Fnews%2Ffolder_1890088%2Fimages%2F4102ec499b570873d3cd46df47bb208f.png" width="450" height="250" > <div class="para" label-module="para">《极限挑战》每一期节目都围绕一个社会热点或时代背景而展开，节目中“极限男人帮”体验过出租车司机、家政服务等最平凡普通的职业；常走在城市街头，与普通百姓“亲密接触”，而路人们不再仅仅只是围观，也可能为节目的进展起到关键作用。<sup>[1]</sup><a class="sup-anchor" name="ref_[1]_17644937"> </a> </div> <p></p> <p>》会员登录可观看更多精彩视频《</p> <div id="container" style="width: 400px"> <div id="header" style="background-color:lightskyblue"><h2 align="center" style="margin-bottom: 0;">会员登录</h2></div> <div id="content" style="background-color:lightpink;height:200px;width:400px;float:left;"> <p></p> <form action=""> Username:<input type="text" name="username"placeholder="请输入用户名"><br> <p></p> Password:<input type="password" name="password"placeholder="请输入登录密码"><br> <p></p> <input type="radio">普通会员 <input type="radio">金牌会员 <input type="radio">钻石会员<br> <p></p> <input type="button" value="登录"style="margin-right:10px;font-size:14px";> <input type="button" value="取消" style="margin-right:10px;font-size:14px"> </form> </div> <div id="footer" style="background-color: gray;clear: both;text-align: center;">版权@duym</div> </div> <p></p> <div id="container" style="width:400px " > <div id="header" style="background-color:lightskyblue;"><h2 align="center" style="margin-bottom:0;">搜索列表</h2></div> <div id="head" style="background-color:lightpink;height:100px;width:400px;float:left;"align="center"> <select> <option>正片</option> <option>花絮</option> <option>每期看点</option> <option>番外篇</option> </select> </form> </div> <div id="footer" style="background-color:gray;clear:both;text-align:center;">版权@duym</div> <div id="container" style="width:400px " > <div id="header" style="background-color:darkseagreen;"><h2 align="center"style="margin-bottom:0;">相关信息</h2></div> <div id="xglm" style="background-color:lightskyblue;height:230px;width:400px;float:left;"> <ul> <li>张艺兴</li> <li>黄磊</li> <li>孙红雷</li> <li>罗志祥</li> <li>黄渤</li> <li>王迅</li> </ul> <ol> <li>男人帮上演烧脑商战</li> <li>重温继承者特辑</li> <li>极限挑战之特工潜伏记 </li> </ol></div> <div id="footer" style="background-color:yellowgreen;clear:both;text-align:center;">版权@duym</div> <div id="container" style="width:400px " > <div id="header" style="background-color:yellow;"><h2 align="center"style="margin-bottom:0;">节目列表</h2></div> <div id="content" style="background-color:mediumpurple;height:150px;width:400px;float:left;"> <dl> <dt>极限挑战</dt> <dd>极限挑战第一季</dd> <dd>极限挑战第二季</dd> <dd>极限挑战第三季</dd> </dl> </div> <div id="footer" style="background-color:blanchedalmond;clear:both;text-align:center;">版权@duym</div> <hr> <P>友情链接</P> <a href="https://baike.baidu.com/item/%E6%9E%81%E9%99%90%E6%8C%91%E6%88%98/17558221?fr=aladdin">极限挑战<br> <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=9750cc7bac64034f1bc0ca54ceaa1254/9f2f070828381f30358f8f0fae014c086f06f086.jpg"width="200" height="200" alt="/baike.baidu.com/item/%E6%9E%81%E9%99%90%E6%8C%91%E6%88%98/17558221?fr=aladdin" ></a> </body> </html>
浙公网安备 33010602011771号