前端——HTML笔记2

表格

HTML 表格由

标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题。

• tr：tr 是 table row 的缩写，表示表格的一行。
• td：td 是 table data 的缩写，表示表格的数据单元格。
• th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

---

表格模板

<table>		<!--表格标签-->
    <tr>	<!--行标签-->
        <td>第1个单元格的内容</td>	<!--单元格标签-->
        <td>第2个单元格的内容</td>
        ...
    </tr>
    <tr>
        <td>第1个单元格的内容</td>
        <td>第2个单元格的内容</td>
        ...
    </tr>
</table>

---

对齐方式

• 表格对齐方式

  • 居中对齐
  • 左对齐
  • 右对齐

• 单元格对齐方式:

  • 水平对齐
  • 垂直对齐

属性	值	描述
align	left center right	HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
valign	top middle bottom baseline	HTML5 不支持。规定单元格内容的垂直排列方式。
border	1	HTML5 不支持。规定表格单元是否拥有边框。

---

列合并

<tr>
	<td colspan="3">学生成绩</td>
</tr>
<tr>
	<td rowspan=2">张三</td>
    <td>语文</td>
    <td>98</td>
</tr>

属性	值	描述
colspan	number	规定单元格可横跨的列数。
rowspan	number	设置单元格可纵跨的行数。

---

表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

• <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
• <label> 元素用于为表单元素添加标签，提高可访问性。
• <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
• <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

模板

<form method="post" action="result.html">
    <p> 名字: <input name="username type="text” /> </p>
    <p> 密码: <input name="pass type="password” /> </p>
    <p>
    	<input type="submit name="Button” value="提交” />
    	<input type="reset name="Reset" value="重填" />
    </p>
</form>

效果

input标签

<input type="text" name="fname" value="text" />

属性	值	描述
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 元素的类型。
name	text	name 属性规定 元素的名称。
value	text	指定 元素 value 的值。
size	number	size 属性规定以字符数计的 元素的可见宽度。
required	required	属性规定必需在提交表单之前填写输入字段。
maxlength	number	属性规定 元素中允许的最大字符数。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=“checkbox” 或者 type=“radio”)

表单常用组件