web前端--HTML--傻瓜笔记--0927(表格——表单)

Web前端—HTML

6.表格

表格和标题一样，也是独占一行的标签。

①基本框架

<table> 
<caption></caption>
 <tr>

	<th></th>

 </tr>

 <tr>

	<td></td>

 </tr>

</table>

<caption></caption>标签是表格的标题标签。

<tr></tr>标签是表格中的行标签，t表示table，r表示row(行)。

<th></th>标签是表格中的表头标签，是一种特殊的单元格标签，它的作用是使内容加粗居中。

<td></td>标签是普通的单元格标签。并且表格的内容必须写在单元格中。

<table></table>标签的属性： border=“number”这个属性修饰表格的边框宽度。

​ width=”200“，height=”100“，在表格标签使用这两个属性时，将会平分所分配空间。

​ 外边距 cellspacing=“number”修饰表格中边框与边框的距离。

​ 内边框 cellpadding=“number”修饰表格中内容与边框的距离。

​ align=“left(默认)，center，right”修饰表格的水平位置。

​ bgcolor=“red”修饰背景颜色，且遵循就近原则。

​ background=”“背景图片，一般位于表格标签中。

在调整表格的宽高上，优化程序时应遵循行高列宽规则

<tr></tr>标签的属性：height=“number”修饰行的高度。

​ align=“”修饰行中内容的水平位置。

​ valign=“top，middle(默认)，bottom(底部)”

<td></td>标签的属性：width=“number”修饰单元格的宽度。

②表格的合并

colspan=“number”跨列合并，col(列)。

rowspan=“number”跨行合并，row(行)。

7.表单

①表单的概念：在表单中用户可以使用选择或者按钮组件将信息输入，最终被发送到服务器。

②基本框架

<form>
    action="服务器端地址"，method="get/post(发送数据的方式)"
    <label></label><input />
</form>

<form></form> 标签是表单标签，表单的所有内容都必须写在这里。表示一个表单，不显示但存在。

<label></label>标签是修饰选择框的，通过<label for="id">for这个属性将选择框的名称与选择框关联起来。

<input type="text(默认)" id="ID" name="NAME" value="VALUE"/>

<input type="file" name="文件选择框名" accept=".png,jpg"/>

其中type属性表示选择框的类型，分别有text(文本)、radio(单选框)、password(密码框)、checkbox(复选框)。单选框name一致时，实现单选框功能。复选框name一致时，复选框信息传输到服务器时，将以组为单位。

placeholder="提示信息"属性表示该选择框的提示信息。

id、name、value属性都是可以自定义值的属性，其中name是向服务器端发送的键，value既是表单中的默认值，也是向服务器提交的值。id这个属性的值必须唯一。

accept=".png,.jpg"属性可以过滤文件类型。

size属性修饰的是文本大小。

checked=“checked”属性表示默认选项。

readonly=”readonly“属性表示只读属性。

③下拉框

<select name="button">
	<option value="100">上海</option>
	<option value="101" selected="selected">西安</option>
	<option value="102">北京</option>
</select>

其中selected=“”属性表示的是默认选项。

④多行文本域

<textarea name="NAME" rows="6" cols="40">
表示6行40个字符的多行文字域
</textarea>

⑤按钮

<input type="reset" name="NEME" value="重置表单信息"/>

这是重置按钮，value表示的既是真值又是按钮上显示的信息。

<input type="submit" name="NAME" value="提交" disabled="disabled"/>

这是提交按钮，value表示的既是真值又是按钮上显示的信息。其中disabled属性表示的是禁用功能。able(能力)。

<input type="button" name="NAME" value="VALUE"/>

这个是普通按钮，没有特殊作用，只能被点击触发事件按钮用。

若有错误，欢迎私信指正。