1.表格:
<table> 表格的根标签
<tr> 行
<th>...</th> 标题列
<td>...</td> 内容列
</tr>
</table>
属性:
- border=”1”:设置表格的表格为1像素
- width=”整数(百分比)”:设置表格的宽度
- cellspacing=”0”:设置单元格之间的空白距离,一般为0像素
td上的属性:
- colspan:跨行
- rowspan:跨列
4.align=”center” : 设置对齐方式若在表格上则表格会居中显示
5.height=”整数”:设置单元格的高度。可以放在tr、td上。
6.bgcolor=”颜色”:设置表格的背景颜色
快速生成:
table>tr行数>td列数
2、表单:
1、定义:表单是一个将用户填写的内容组织起来的容器,可以将用户数据统一发送给服务器。
2、语法:
<form method="" action="">
......
</form>
1、method:提交方式 post比get更安全,提交的数据量大。建议使用post方式
2、action:提交地址。将表单的数据提交给谁处理。
3、表单元素:
1、文本框:
<input type="text" name="元素的名字" value="元素初始值" size="文本框显示的长度" maxlength="限制文本框输入数据的最大字符数"/>
2、密码框:
<input type="password" name="元素的名字" />
3、单选按钮:
<input type="radio" name="元素的名字" value="给服务器的值" /> 页面上的值
属性: checked="checked" 默认选中
4、复选框:
<input type="checkbox" name="元素的名字" value="给服务器的值"/> 页面上的值
属性: checked="checked" 默认选中
5、下拉列表框:
<select name="元素的名字">
<option value="给服务器的值">页面上的值</option>
</select>
属性: selected="selected" 默认选中
style="pointer-events: none"下拉框禁止使用
6、文本域:
<textarea name="元素的名字" cols="列数(以字符为单位)" rows="行数">
文本内容
</textarea>
7、按钮:<br /> 1、提交按钮: <input type="submit" value="按钮上的文字"/><br /> 2、重置按钮: <input type="reset" value="按钮上的文字"/><br /> 3、图片按钮: <input type="image" src="图片的路径"/><br /> 4、普通按钮: <input type="button" value="按钮上的文字"/><br /> 8、邮箱:<br /> <input type="email" name="元素的名字"/> <br /> 9、数字:<br /> <input type="number" name="元素的名字" min="允许输入的最小值" max="允许输入的最大值" step="数字间隔"/><br /> 10、滑块:<br /> <input type="range" name="元素的名字" min="允许输入的最小值" max="允许输入的最大值"/><br /> 11、搜索框:<br /> <input type="search" name="元素的名字"/><br /> 12、隐藏域:<br /> <input type="hidden" name="元素的名字" value="传给服务器的数据"/><br /> 13、<label>标签:<br /> <label for="useremail">邮箱:</label><br /> <input type="email" name="useremail" id="useremail"/><br /> 4、特殊属性:<br /> 只读属性:readonly="readonly"<br /> 禁用属性:disabled="disabled" <br /> 区别:只读属性会发送数据到服务器,禁用属性不会。<br /> 5、表单验证:<br /> 1、required="required":文本框填写内容不能为空,否则不能提交表单<br /> 2、placeholder="提示语言":在文本框中显示提示语言,当文本框输入内容是提示消失<br /> 3、pattern="正则表达式":输入的内容必须符合正则表达式的要求,否则不能提交表单