目录
列表(排列整齐),表格,表单(登录,注册)知识点:
列表:
表格:
表单:
练习:
列表(排列整齐),表格,表单(登录,注册)知识点:
列表:
无序列表 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单选框 性别: <!--name标为两者为同一属性单选功能-->
<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>
