列表、表格和表单的基本使用_创建列表除了使用lest-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60458199/article/details/120339742

1、列表分为三种：有序、无序和定义列表

1.1有序列表通常用<ol><li></li></ol>表示

1.2无序列表通常用<ul><li></li></ul>表示

1.3定义列表通常用<dl><dt></dt>

</dl>

下面展示效果

列表非常简单，就简单的介绍一下

2.表格一般用<table><tr><td></td></tr></table>这样表示

页面展示效果

框框、颜色、字体等等都是可以在heard里面设置的

3.表单，这个是重点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
       form {
          margin: 200px;
           text-align:center;
           background-color: greenyellow;
           padding: 30px;
        }
        span{
            border: 1px ;
        }
    </style>
</head>
<body>
<form action="#" method="post">
    <p>用户名：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="pwd"> </p>
    <p><input type="submit" value="提交">&nbsp;
        <input type="reset" value="在提交" > </p>
    <!--单项选择-->
    <p>请选择职业：<input type="radio" name="job" value="teacher">教师
        <input type="radio" name="job" value="student">学生
        <!--checked 默认-->
        <input type="radio" name="job" value="developer">程序员
        <input type="radio" name="job" value="other">其他</p>
    <!--多项选择-->
    <p>请选择爱好：<input type="checkbox" name="hobbies" value="football">足球
        <input type="checkbox" name="hobbies" value="soccer">橄榄球
        <input type="checkbox" name="hobbies" value="swimming">游泳
        <input type="checkbox" name="hobbies" value="running">跑步
    </p>
    <!--下拉菜单-->
    <p><select name="province">
            <option value="shenfen" selected>请选择省份</option>
            <option value="nanjing">南京</option>
            <option value="beijing">北京</option>
            <option value="guangzhou">广州</option>
            <option value="shanghai">上海</option>
        </select></p>
   <!--反馈信息,一个文本框-->
    <p> <textarea name="feedback" ID=""  COLS="30" ROWS="10"></textarea></p>
    <!--显示时间和日期-->
    <P><input type="datetime-local" name=""></P>
    <p><input type="number" name="num" value="20" max="40" min="10"></p>
    <p><input type="range" value="30" readonly="readonly"></p>
    <p><input type="file" name="a"></p>
    <p><input type="image" src="图库/1.jpg" width="200px" onclick="javascript:confirm('我是一个图片')"><img src=""/></p>
</form>
</body>
</html>

实现效果