知识总结:
1.table属性
Width 宽
height 高
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格和单元格的距离 (一般情况写0)
Cellpadding 表格边框与内容的距离 (一般情况写0)
2.tr属性:
Align 水平对齐
left/center/ right
valign 垂直对齐
Top(上)/middle(中)/bottom(下)
bgcolor 背景色
3.td的基本属性
Width、height 宽高(单位是像素或%)
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并 合并多列
rowspan 垂直合并 合并多行
4.表头th标签
<th>是特殊的单元格,文字会自动加粗、居中。它的用法是取代<td>的位置即可
<table border="1" width="300">
<tr>
<th>餐饮类型</th>
<th>主要菜系</th>
<th>价格</th>
</tr>
<tr>
<td>中餐厅</td>
<td>生猛海鲜</td>
<td>1000元</td>
</tr>
</table>
餐饮类型 | 主要菜系 | 价格 |
---|---|---|
中餐厅 | 生猛海鲜 | 1000元 |
5.表格主体tbody标签
T head 表格页眉(头部)只能出现一次
T body 表格主体可以出现多次
T foot 表格页脚(结尾)只能出现一次
以上三个标签结合使用,可将表格中的一行或几行合成一组
6.表单 <form></form>
表单主要负责数据采集功能
7.表单的属性
action属性:设置表单的提交地址(表单提交的url)指定表单提交后由服务器上的哪个处理程序进行处理
method属性:设置表单的提交方法, 属性值为get、post提交方式
name属性:设置表单的名称
target属性:设置表单的打开方式, 属性值可以是_blank、_self。_self在原窗口中打开为默认值,_blank在新窗口打开。
8.method的值
method的值为get:它是通过URL来传递表单数据的,表单元素的数据在地址栏可见,而且有大小限制,传数据量小一般不大于2KB
method的值为post:它是通过请求正文传递表单数据的,URL不可见表单元素数据,比较安全,而且没有大小限制,但往往服务器会控制
9.输入标记
表单元素中输入标签是,常用属性有type(类型)、name(名称)、value(值)、checked(默认选中)
10.HTML常用表单控件
文本框 <input type="text" />
密码框 <input type="password"/>
单选框
<input type="radio" name="sex" checked />男
<input type="radio" name="sex" />女
(name必须相同)
复选框 <input type="checkbox" />
隐藏域 <input type="hidden" /><br />
图像域:<input type="image" src="链接" /><br />
文件域<input type="file"/>
提交按钮 <input type="submit" value="提交" />
重置按钮 <input type="reset"value=“重置”/>
普通按钮 <input type="button" value="普通按钮" onclick="alert('hello')"/><br />
下拉列表
<select>
<option></option>
<option></option>
…
</select>
提示文字属性 <input type="text" placeholder="请输入提示文字"/>
文本域 <textarea cols="30" rows="5">默认文字</textarea>
电话号码文本框 <input type="tel" pattern="[0-9]{11}"/>
url类型的input (如果所输入的内容是url地址格式的文本,则会提交数据到服务器)
<input type="url"/>
<input type="submit" value="提交">
Email邮件 (输入邮箱地址必须包含@符号)
<input type="email"/>
<input type="submit" value="提交">
日期
<input type="date"/>
<input type="submit" value="提交">