欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web 前端 html小案例

程序员文章站 2024-02-29 21:39:16
...

Web 前端学习(一)

html小案例

题目:实现如下效果
Web 前端 html小案例
经过简单的观察,题目中包括了input标签,textarea标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<form action="" method="post">
    用户名: <input type="text" placeholder="请输入用户名"> <br>
    密码: <input type="password" placeholder="请输入密码"> <br>
    <!--radio代表单选框 checked 表示默认勾选值-->
    性别: <input type="radio" name="sex" value="man" checked>男
    <input type="radio" name="sex" value="woman">女
    <input type="radio" name="sex" value="none">保密 <br>
    <!--checkbox为多选框-->
    爱好: <input type="checkbox" name="爱好">跳舞
    <input type="checkbox" name="爱好">唱歌
    <input type="checkbox" name="爱好">画画 <br>
    <!--b 加粗-->
    <b>上传头像:</b>
    <!--file为选择文件功能-->
    <input type="file"><br>
    <!--select 下拉框,通过option标签添加下拉栏里的值-->
    地址: <select name="" id="">
            <option value="浙江省">浙江省</option>
            <option value="上海市">上海市</option>
            <option value="北京市">北京市</option>
            <option value="福建省">福建省</option>
            <option value="广州省">广州省</option>
        </select> <br>
     <b>个人简介:</b>
    <!--textarea 代表输入多行文本 -->
        <textarea cols="20" rows="10"></textarea> <br>
    <!--按钮 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
</form>
</body>
</html>

通过以上代码大致实现了功能
Web 前端 html小案例
但是各个标签之间的排列还存在一定的问题,所以接下来将学习css与js来修改外观 … … … … … …

相关标签： web前段学习 web

上一篇： HashMap实现原理+源码分析+问题总结

下一篇： Spring3.1.0实现原理分析(十四).MVC之处理器映射

推荐阅读