一 列表
1 无序列表 ul li
2 有序列表 ol li
3 定义列表 dl dt表示被定义的内容 dd表示对定义内容的描述
dl ul ol 之间可以互相嵌套
二 表格标签
<table></table>
表格标签,用于在效果中定义一个表格
<tr></tr>
表格的行标签,用于定义一个表格行
<td></td>
表格的单元个标签,用于定义一个表格行中的单元格
<th></th>
表格的表头单元格标签,用于在效果中定义一个表格红中的单元格
<th><td>唯一区别:<th>居中加粗
单元格合并
<td>或者<th>都有两个单元格合并属性:
colspan:跨列合并单元格
rowspan:跨行合并合单元格
合并步骤:
1 确定合并哪几个单元格,确定是跨行合并还是跨列合并
2 在第一个出现的单元格上书写合并单元格属性
3 合并几个单元格,属性就写几
4 被合并的单元格必须删掉
行 列 单元格 表头 数据
表格是为了更好的格式化显示数据
三 内联与块标签
<span></span>
内联标签,一行上定义多个元素,进行内容显示
有多少个内容,就会占用多大空间
span不会自动换行
<div></div>
块标签,一行上定义一个块,默认沾满一行,进行内容显示
适用于大量数据展示,或者用来布局
四表单标签
<from></from>
用于在效果中定义一个表单
作用:用于提交用户填写的数据,提交给服务器的程序
文本框供用户输入,类是Java的Scanner
action 将数据提交到何处
默认提交到本页
本机内网路径
相对路径:常用
绝对路径:不建议使用
互联网路径:https://www.12306.com/xxx
method 将数据一何种方式提交
默认为get
提交方式课定义为get或者post
get方式提交特点:把数据拼接到地址栏上
post方式提交特点:没有把数据拼接到地址栏上而是在请求体
get和post提交方式区别:
1 get提交的参数列表拼接到地址栏后面;post方式不会拼接到地址栏后面
2 get提交数据,敏感信息不安全,post方式提交的数据相对安全
3 get方式提交的数据是有限的,post方式从理论上提交的数据是无限大的
尽量使用post方式提交表单
五 输入项标签
<input></input>
表单输入项标签,用户可以在该标签上,通过填写和选择,进行数据的输入
type设置该标签的种类
text密码框,内容非明文
password单选框,在同一组内有单选效果
chechbox复选框,在同一组内有复选效果
submit提交按钮,用于控制表单提交数据
reset 充值按钮,用于表单输入项恢复到默认状态
file附件框,用于文件上传
hidden隐藏于,一般用作提交服务器需要拿到,单用户不需要看到的数据
button普通按钮,需要和js时间一起用
name 单选框,复选框进行数据的分组,设置该标签对应的参数名,要提交数据给后台,必须写name
value设置该标签对应的参数值/作为按钮的名字
checked设置单选框/复选框的默认选中状态
readonly设置该标签的参数值只读,用户无法手动更改,数据是可以正常提交的
disabled设置该标签不可用,参数值无法更改,并且无法提交
六 表单点击提交按钮,提交数据时
url?参数列表
参数列表格式:参数1=参数值&参数2=参数值&参数3=参数值......
?gender=on on表示选中
?gender=male&age=18......
单选框,用户只能选择,不能输入,需要制定value属性
文本框,用户可以自由输入,不一定指value属性,指定的话表示默认值,placeholder表示提示文字
七选择框标签
<select></select>标签,定义一个下拉选择框
name设置该标签对应的参数名
multiple设置选项全部显示,并且可以进行多选提交,不屑此属性默认为单选
<option></option>标签,选项标签,为一个选择框添加一个选项
value设置需要提交的参数值
selected设置选项的默认选中状态
注意事项:
option的内容体一般是用来展示的
参数值应该时option的value属性值
八文本域标签
<textarea></textarea>标签
文本域,多行文本框
name设置该标签对应的参数名
文本与和文本框区别
1 文本框不能换行,文本域可以
2 文本框参数值是value属性,文本域参数值是标签的内容体
九 提交表单注意事项
正常提交?pwd=123&uname=zhangsan
非正常?pwd=123#asd&qwe&sdf&uname=zhangsan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册网站</title>
</head><body>
<form action="NewFile1.html">
<!--用户名ID? -->
<input type="hidden" name="uid" vlaue="123">
照片<input type="file" name="photo"><br><br>
用户名<input type="text" name="username" value="李玉贤"><br><br>
密码<input type="password" name="password" placeholder="提示数字"><br><br>
性别<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女<br><br>
年龄<input type="radio" name="age" value="wcn">未成年
<input type="radio" name="age" value="cn" checked="checked">成年<br><br>
所在省份<select name="sf">
<option value="hn">河南省</option>
<option value="hb">河北省</option>
<option value="sx">山西省</option>
<option value="jl">吉林省</option>
<option value="hlj">黑龙江省</option>
<option value="js">江苏省</option>
<option value="zj">浙江省</option>
<option value="ah">安徽省</option>
<option value="ln">辽宁省</option>
</select><br><br>
手机号<input type="phone" name="phone">
<input type="button" value="获取验证码"><br><br>
输入验证码<input type="yzm" name="yzm"><br><br>
爱好<input type="checkbox" name="hobby" value="yx" checked="checked">游戏
<input type="checkbox" name="hobby" value="mn" checked="checked">美女
<input type="checkbox" name="hobby" value="dy">电影
<input type="checkbox" name="hobby" value="eat">吃<br><br>
你喜欢的明星
<select name="star">
<option value="cwt">陈伟霆</option>
<option value="qbl">乔碧萝</option>
<option value="cxk">蔡徐坤</option>
<option value="ch" selected="selected">陈赫</option>
</select><br><br>
自我介绍<textarea name="info"></textarea><br><br>
<input type="submit" value="注册">
<input? type="reset" name="">
<input type="button" value="按钮"><br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>