表格:
1.表格在body里的结构
<table border=“1" width="500" height="200" cellspacing="0" cellpadding="10">
<thead></thead>不用了
<tbody>可以不写,浏览器会自动添加
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tbody>可以不写,浏览器会自动添加
<tfoot></tfoot>不用了
</table>
解释:
border:是table的属性,可以设置表格和每个单元格的边框,和css样式里的border是不一样的
width和height可以设置表格整体宽高
cellspacing每一个单元格的间距
cellpadding给每一个单元格加内边距
tr代表一行
th是每列的标题,存在于第一行
td代表每一行有多少单元格
2.table的高度和宽度
1⃣️
宽度
可以设置td的宽度,当td的
总宽度超过整个表格的宽度之后,会按
比例分配;
单独设置某几个td宽度的时候,宽度有效,没有设置宽度的td分配剩余的宽度
2⃣️
高度
可以设置td的高度,
总高度超过table的高度之后,会把
table的高度 撑开
3.合并单元格
1⃣️<th
colspan="2"></th>跨列、合并的列数,横向
2⃣️<th
rowspan="2"></th>跨行、合并的行数,竖向
4.table在head里面的内部样式设置
table{
border:5px solid red;
empty-cells:show;
隐藏空的单元格:show展示、hide隐藏;
border-collapse:collapse;
合并相邻单元格边框
}
表单
1
.form标签
表单的所有标签都写在form标签内部
<
form action="服务器链接地址“ method=”提交方式(常用POST保险、默认GET无密,不常用)“></form>
其属性与属性之间用空格隔开
2
.<label for="username">用户名</label>
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的for 属性应当与相关元素的id 属性相同。
3.
文本输入框
<input id="username"
type="text" name="username" placeholder="请输入用户名" value="最帅">
1⃣name属性用来告诉服务器这个输入框的内容是哪个字段;
2⃣placeholder用来提示输入内容。
4.
密码输入框<input
type="password"/>
5.
单选框
;checked已选中
<input
type="radio" name="gender" value="man/woman/children/adult..." checked/>
6.
复选框<input
type="checkbox"/>
7.
文件上传
;multiple上传多个文件
<input
type="file" multiple=""/>
8.
能点击的按钮<input
type="button" value="按钮名称"/>
9.
设置隐藏字段
,用于提交一些不需要用户填写的信息,比如:注册时间
<input
type="hidden" name="jointime" value="20170602"/>
10.
重置按钮
,清空用户写入的内容
<input
type="reset" value="按钮名称"/>
11.
文本区域
,发表意见什么的其他文本
<textarea style="
resize:none;"
cols="100"
rows="5"></textarea>
cols:控制行数(宽度)
rows:控制列数(高度)
行宽列高
resize可否由用户调整元素的尺寸,none用户无法调整元素的尺寸;both可调整高度和宽度;horizontal可调整宽度;vertical可调整高度
12.
下拉选项框
,selected已选择
<select>
<option>男</option>
<option selected>女</option>
</select>
13.
提交按钮
<input
type="submit" value="名称"/>
14.
图片类型的提交按钮,也有提交功能
<input
type="image" src="图片路径" style="图片大小设置">
15.
value的定义和用法
value 属性为 input 元素设定值。
对于不同的输入类型,value 属性的用法也不同:
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
表单的新属性
1.<input
type="tel"/>,电话号码输入框
2.
number,用于输入数字
3.
search,用于提示用户要搜索的文字,search和text之间的区别主要在于样式
text是方框,search是带有圆角的框
4.
url,用于输入单个网址
5.
email,用于输入单个电子邮件地址,如果指定了multiple属性,就可以输入多个电子邮件地址,以逗号隔开
6.
datetime,慎用!用于输入时区设置为UTC的日期和时间
7.
date,用于输入不含时区的日期
8.
month,用于输入含年份但不含时区的日期
9.
week,用于输入含年份和周数但不含时区的日期,列如:此格式的日期2011-W05表示2011年的第5周
10.
time,用于输入含小时、分钟、秒和秒的小数点部分但不含时区的时间值
11.
datetime-local,用于输入不含时区的日期和时间
12.
range,用于输入数字,但与number的区别在于无需输入具体数字,在大部分支持该类型的浏览器中,范围控件的实施形式为滑块
13.
color,用于通过颜色池控件选择颜色
14.
datalist
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars">
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>
15.
autofocus:
规定输入字段在页面加载时是否获得焦点,
取值:autofocus
16.placeholder:
规定帮助用户填写输入字段的提示
取值:text
17.
required
规定输入字段的值是必须的
取值:required
18.
autocomplete
规定是否使用输入字段的自动完成功能
取值:on、off
19.
form
规定输入字段所属的一个或多个表单
取值:formname
20.
pattern
规定输入字段的值的模式或格式
例如:pattern=[0-9]表示输入值必须是0与9之间的数字
取值:regexp_pattern