上午:
1无序列表 ul li
2有序列表 ol li
3定义列表 dl dt被定义的内容
dd对定义内容的描述
ul ol dl都可以互相嵌套
<table></table>表格标签,用于在效果中定义一个表格
border:设置表格的边框粗细
width:设置表格的宽度
<tr></tr>表格的行标签,用于定义一个表格行
<td></td>表格的单元格标签,用于定义一个表格行中的单元格
<th></th>表格的表头单元格标签,
用于在效果中定义一个表格行中的表头单元格
<th><td>唯一区别:<th>内容居中加粗
表格是为了更好的格式化显示数据
单元格合并
<td><th>都有两个单元格合并属性:
colspan:跨列合并单元格
rowspan:跨行合并单元格
合并步骤:
1.确定合并那几个单元格,确定是跨行合并还是跨列
2.在第一个出现的单元格
3、合并几个单元格,属性值就写几
4、被合并的单元格必须删掉
下午:
<span></span>内联标签,一行上定义多个元素,进行内容显示
有多少内容,就会占用多大空间
span不会自动换行
<div></div>块标签,一行上定义一个块,
默认占满一行,进行内容显示
适用于大量数据展示,或者用来布局
输入项标签
<input>标签
表单输入项标签之一,用户可以在该标签上
通过填写和选择,进行数据的输入
type:设置该标签的种类
text:文本框,默认
password:密码框,内容非明文
radio:单选框,在同一组内有单选效果
chechbox:复选框,在同一组有复选效果
submit:提交按钮,用于控制表单提交数据
reset:重置按钮,用于将表单数据项
恢复到默认状态
file:附件框,用于文件上传
hidden:隐藏域,一般用作提交服务器需要
拿到,但客户不需要看到的数据
button:普通按钮,需要和js事件一起用
name:单选框,复选框进行数据分组,设置该
标签对应的参数名。要提交数据给后台,必须写那么
value:设置该标签对应的参数值/作为按钮的名字
checked:设置单选框/复选框的默认选中状态
readonly:设置该标签的参数只读,用户无法手动更改
数据是可以正常提交的
disabled:设置该标签不可用,参数值无法更改
并且无法提交的
<select><select>定义一个下拉选择框
name:设置该标签对应的参数名
multiple:设置选项全部显示,并且可以进行
多选提交,不写此属性默认为单选
<option><option>选项标签,为一个选择框添加一个选项
value:设置需要提交的参数值
selected:设置选项的默认选中状态
注意事项:
option的内容体一般用来展示的
参数值应该是option的value属性值
文本域标签:
<textarea><textarea>
文本域,多行文本框
name:设置该标签对应的参数名
文本域和文本框区别:
1.文本框不能换行,文本域可以
2.文本框参数值是value属性,文本域参数值是在标签
的内容体
<form></form>用于在效果中定义一个表单
作用:用于提交用户填写的数据,提交给服务器的程序
文本框供用户输入。
action:将数据提交到何处
默认提交到本页
本机内网路径:
相对路径:常用
绝对路径:不建议使用
互联网路径:
method:将数据以何种方式提交
默认为get
提交方式可定义为:get或者post
get方式提交的特点:把数据拼接到地址栏上
post方式提交的特点:没有吧数据拼接到地址栏上
而是在请求体
get和post提交方式的区别:
1.get提交的参数列表拼接到地址栏后边的
post方式不会拼接到地址栏后面
2.get提交的数据,敏感信息不安全
post方式提交的数据相对安全
3.get方式提交的数据量是有限的,
post方式从理论上提交的数据是无限大的
尽量使用post方式去提交
<!DOCTYPE html>
<html>
<head>
<title>表单标签</title>
<meta charset="utf-8" />
</head>
<body>
<form action="下午3.html" method="post">
<left>
用户ID<input type="hidden" name="uid" value="123"><br><br>
头像<input type="file" name="photo"><br><br>
用户名<input type="text" name="username"
readonly="readonly" value="小汤源"><br>
<!-- 用户名<input type="text" name=
"username" placeholder="提示文字"><br>-->
密码<input type="password" name="userpass"
disabled="disabled" value="123123"><br>
手机号<input type="text" name="phone" placeholder="手机号"><br>
邮箱<input type="text" name="qq" placeholder="邮箱"><select name=".com">
<option value="fsy" selected="selected">@qq.com</option>
<option value="qxx">@163.com</option>
<option value="qzl">@139.com</option>
</select><br><br><br>
性别<input type="radio" name="gender"
value="male" checked="checked">男
<input type="radio" name="gender"
value="female">女<br><br>
年龄<select name="old">
<option value="小朋友" selected="selected">1~18</option>
<option value="大朋友">19~30</option>
<option value="老朋友">31~50</option>
</select><br><br>
爱好<input type="checkbox" name="hobby"
value="chiji" checked="checked">吃鸡
<input type="checkbox" name="hobby"
value="meinv" checked="checked">美女
<input type="checkbox" name="hobby"
value="dianying">电影
<input type="checkbox" name="hobby"
value="eat">吃<br><br>
你喜欢的明星<select name="star">
<option value="fsy">付思源</option>
<option value="qxx" selected="selected">秦霄贤</option>
<option value="qzl">权志龙</option>
</select><br><br>
所在省份<select name="from">
<option value="sheng" selected="selected">河南省</option>
<option value="sheng">北京</option>
<option value="sheng">河北</option>
<option value="sheng">黑龙江</option>
<option value="sheng">辽宁</option>
<option value="sheng">吉林</option>
<option value="sheng">湖北</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>
</left>
</form>
</body>
</html>