当前位置：首页 > article >正文

列表(排列整齐),表格,表单(登录,注册)(HTML)

article 2024/11/5 13:11:48

列表(排列整齐),表格,表单(登录,注册)知识点:

列表:

表格:

表单:

练习:

列表(排列整齐),表格,表单(登录,注册)知识点:

列表:

无序列表 ul(无序列表) li(列表条目)独占一行, ul只能包含li标签,li标签方内容p段落,
有序列表 ol(有序列表)嵌套li(列表条目) ol只能包含li标签
定义列表 dl嵌套dt和dd dl是定义列表,dt是标题,dd是定义列表的描述/详情

表格:

table表格(没有边框线),嵌套tr行,tr嵌套th表头和td内容
thead表格头部,tbody表格主体,tfoot表格底部 (表格结构,对浏览器有变化)

合并单元格:合并同类信息(保留最左最上,不能跨结构合并) 跨行合并rowspan="合几个写几个,把其余的删除"( <td rowspan="2">100</td> )
跨列合并colspan ( <td colspan="3">全市第一</td> <!--保留最右--)

表单:

(收集用户信息:注册,登录,搜索)
input标签: <input type=""> text文本框,password密码框,radio单选框,checkbox多选框,file上传文件
input标签占位文本(placeholder) <input type="" placeholder="请输入用户名"> 用户输入的显示深色
radio单选框性别: 
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女 
多文件上传 <input type="file" multiple>
多选框checkbox 默认选中<input type="checkbox" checked>
下拉菜单:select嵌套option,select是整体,option是下拉菜单的每一项 selected默认选中
文本域:多行输入 textarea双标签
label标签也可增大点击范围 label的for属性值与表单的id属性相同
<input type="radio" id="man"> <label for="man">男</label>
<label ><input type="radio">女 </label>
按钮button <button type="">按钮</button> type属性:submit提交(默认),reset重置按钮,button普通按钮
布局网页:div(大盒子)独占一行 span(小盒子)不换行
  空格 , < 小于号 , > 大于号
键盘敲空格只显示一个

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h2>注册信息</h2>
    <form action="">
    <h3>个人信息</h3>
    <label >姓名:<input type="text" placeholder="请输入真实姓名"></label>
    <br><br>
    <label>密码:<input type="password" placeholder="请输入密码"></label>
    <br><br>
    <label>确认密码:<input type="password" placeholder="请再次输入密码"></label>
    <br><br>
    <label>性别: <label ><input type="radio" name="gender">男</label>
         <label ><input type="radio" name="gender">女</label></label>
    <br><br>
    <label>居住城市:</label>
    <select >
        <option >北京</option>
        <option >天津</option>
        <option >南京</option>
        <option >上海</option>
    </select>
    <br><br>
    <h3>教育经历</h3>
    <label>最高学历:</label>
    <select >
        <option >硕士</option>
        <option >高中</option>
        <option >本科</option>
        <option selected>博士</option>
    </select>
    <br><br>
    <label>学校名称:<input type="text"></label>
    <br><br>
    <label>所学专业:<input type="text"></label>
    <br><br>
    <label>在校时间:</label> <select>
        <option >2015</option>
        <option >2016</option>
        <option >2017</option>
        <option >2018</option>
    </select>...
    <select>
        <option >2019</option>
        <option >2020</option>
        <option >2021</option>
    </select>
    <br><br>
    <h3>工作经历</h3>
    <label>公司名称: <input type="text"></label>
    <br><br>
    <label>工作描述:</label>
    <textarea ></textarea>
    <br><br>
    <label><input type="checkbox" checked> 已阅读并同意以下协议:</label>
    <ul>
        <li ><a href="#"> <<用户服务协议>></a></li>
        <li><a href="#"><<隐私协议>></a></li>
    </ul>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
</form>
    
</body>
</html>

查看全文

http://www.kler.cn/a/380156.html