web基础,用html元素制作web页面

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>
</head>
<body>
<h1>广州商学院</h1>
<h2 id="2015">2015</h2>

<div id="container" style="width: 400px ">
    <div id="header" style="background-color: aqua"><h2 align="center">登录</h2></div>
    <div id="content" style="background-color: burlywood">
        <form>
            Username: <input type="text" name="user" placeholder="用户名"><br>
            Password: <input type="password" name="password">
            <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: aqua"><i>版权</i></div>
    <p align="center">
        <select>
            <option>收藏</option>
            <option>点赞</option>
            <option>评论</option>

        </select>
    </p>
    <ul>
        <li>python</li>
        <li>css</li>
        <li>html</li>

    </ul>
    <ol>
        <li>python</li>
        <li>css</li>
        <li>html</li>
    </ol>
</div>
</body>
</html>

 

 web基础,用html元素制作web页面