web基础，用html元素制作web页面-优快云博客

本文通过实例展示了如何使用HTML的基本元素创建一个简单的登录页面，并演示了如何使用下拉列表选择框、无序列表、有序列表及定义列表等元素。

观察常用网页的HTML元素，在实际的应用场景中，用已学的标签模仿制作。

用div,form制作登录页面，尽可能做得漂亮。

练习使用下拉列表选择框，无序列表，有序列表，定义列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GZCC</title>
</head>
<body>
    <h1>MIS问答平台</h1>
    <h2 id="2015">2015</h2>
    <div id="container"style="width:400px ">
        <div id="header" style="background-color: cornflowerblue"><h2 align="center">登陆</h2> </div>
        <div id="content">
             <form>
                 用户名：<input type="text"name="username"placeholder="请输入用户名"><br>
                 密码：<input type="password"name="passwork"><br>
                 <input type="radio"name="role"value="stu">student
                 <input type="radio"name="role"value="tea">teacher
                 <br>
                 <input type="checkbox"value="true"><span>记住我</span> <a href="">登陆遇到问题</a><br>
                 <input type="button"value="login"onclick="alert('登陆验证')">

             </form>
         </div>
        <div id="footer" style="background-color: cornflowerblue;clear: both;text-align: center"><i>版权@mis</i></div>
    </div>
    <div>
        <select>
            <option>收藏</option>
            <option>点赞</option>
            <option>评论</option>
        </select>
        <ul>
            <li>python</li>
            <li>html</li>
        </ul>
        <ol>
            <li>python</li>
            <li>html</li>
        </ol>
         <h3 id="学校概况">学校概况</h3>
    <d1>
        <dt>1学校简介</dt>
            <dd><a href="http://www.gzcc.cn/html/xygk/xueyuanjianjie/">1学校简介</a> </dd>
        <dt>2校徽校训</dt>
            <dd><a href="http://www.gzcc.cn/html/xygk/xhxx/">2校徽校训</a> </dd>
    </d1>
    </div>
    <a href="#2">2</a>
    <hr><br>
    <hr>
            <p style="color:darkgreen;fent-size:x-small;margin-left: 20px;">友情链接</p>
            <a href="http://www.gzcc.cn/">
                <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"/>
                <br>广州商学院</a>
                <a id='2'></a>
</body>
</html>