观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。
用div,form制作登录页面,尽可能做得漂亮。
练习使用下拉列表选择框,无序列表,有序列表,定义列表。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HSIANG</title> </head> <body> <a> <h1 align="center">你好</h1> <h2>制作年份2017</h2> <a href="https://hao.360.cn/"target="_blank"><h2>网址推荐</h2></a> <hr> </a> <h1>网址推荐系统</h1> <div id="container" style=" 300px"> <div id="header" style="background-color:saddlebrown"><h2 align="center">登陆界面</h2></div> <div id="content"> <form> 用户名:<input type="text" placeholder="请输入账号"><br> 密码 :<input type="password" placeholder="请输入密码"> <br> <input type="radio" value="stu">开发者 <input type="radio" value="tea">用户 <br> <input type="checkbox" value="true">记住账号 <a href="">忘记密码</a> <br> <p align="center"> <input type="button" value="登陆"> </p> </form> </div> <div id="footer" style="background-color: darkmagenta"><h3 align="center">版权@003蒋宇翔</h3></div> <p align="center"> <select> <option>收藏</option> <option>点赞</option> <option>评论</option> </select> </p> <ul> <li>百度</li> <li>360</li> <li>搜狐</li> </ul> <ol> <li>百度</li> <li>360</li> <li>搜狐</li> </ol> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2539922263,2810970709&fm=200&gp=0.jpg" width="200" height="200" > </div> </body> </html>