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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简书</title>
</head>
<body>
<div style=" 400px">
    <div id="header"style="background-color: orange"><h2 align="center">登陆</h2></div>
    <div id="content"></div>
    <form>
        Usrename:<input type="text" name="firstname" placeholder="请输入用户名"><br>
        Passwore:<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 id="footer" style="background-color: orange"><p align="center"><i>版权@lin</i></p></div>
</div>
<div>
    <select>
        <option>收藏</option>
        <option selected="selected">点赞</option>
        <option>评论</option>
    </select>
    <ul>
        <li>python</li>
        <li>html</li>
    </ul>
    <ol>
        <li>python</li>
        <li>html</li>
    </ol>
</div>
<h1>致我们单纯的小美好</h1>
<p>作者:赵乾乾</p>
<a href="https://baike.baidu.com/item/%E8%87%B4%E6%88%91%E4%BB%AC%E5%8D%95%E7%BA%AF%E7%9A%84%E5%B0%8F%E7%BE%8E%E5%A5%BD/18813769?fr=aladdin"><img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=44c70673dd88d43ff0a996f44525b526/359b033b5bb5c9eaad0aa2e5de39b6003af3b33f.jpg"></a>

</body>
</html>

原文地址:https://www.cnblogs.com/lintingting/p/7680148.html