前端的学习-HTML（三）

银杏也要学习代码

已于 2024-07-21 21:02:04 修改

阅读量707

点赞数 16

文章标签：学习 html5 前端

于 2024-07-21 20:59:57 首次发布

本文链接：https://blog.csdn.net/m0_68823256/article/details/140591862

版权

一：表格标签

1：表格的作用

表格主要用于显示、展示数据。

2：表格的基本语法

<table>
	<tr>
		<td>单元格中的内容~~~~~</td>
		<td></td>
		<td></td>
	    <td></td>
	</tr>
</table>

1：<table></table>用于定义表格。

2：<tr></tr>表示表格中的行，必须嵌套在<table></table>中。

3：<td></td>表示表格中的列，必须嵌套在<tr></tr>中。

3：表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<table>
	<tr>
		<th>表头元素~~~~~</th>
		<th></th>
		<th></th>
		<th></th>
	</tr>
</table>

4：表格的标题标签-<caption>

<caption>用于定义表格的标题，在<table>标签之后就要使用，紧跟在<table>之后，居中于表格之上。


<table border="1">
			
	<caption>我的表格</caption>
			
	<tr>
		<td>1000</td>
		<td>2000</td>
		<td>3000</td>
	</tr>
	<tr>
		<td>4000</td>
		<td>5000</td>
		<td>6000</td>
	</tr>
</table>

5：表格的属性和表格结构标签

1：表格的属性

width：规定表格的宽度。

align：规定表格相对周围元素的对齐方式。

bgcolor：规定表格的背景颜色。

cellpadding：规定单元边沿与其内容之间的空白。

cellspacing：规定单元格之间的空白。

frame：规定外侧边框的哪个部分是可见的。

rules：规定内侧边框的哪个部分是可见的，none没有线条， groups 位于行组和列组之间的线条， rows位于行之间的线条，cols位于列之间的线条，all 位于行和列之间的线条。

2：表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

使用<thaed></thead>标签表示表格的头部区域。

使用<tbody></tbody>标签表示表格的主体区域，用于存放数据主体。

<table border="1">
			
	<caption>我的表格</caption>
			
	<thead>
		<tr>
			<td>第一列</td>
			<td>第二列</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>111</td>
			<td>222</td>
		</tr>
		<tr>
			<td>333</td>
			<td>444</td>
		</tr>
	</tbody>
</table>

6：合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"，用于指定一个单元格横跨的行数。它可以让一个单元格占据多行的宽度。

跨列合并：colspan="合并单元格的个数"，用于指定一个单元格横跨的列数。它可以让一个单元格占据多列的宽度。

<table border="1">

	<caption>合并单元格</caption>

	<thead>
		<tr>
			<td>第一列</td>
			<td>第二列</td>
			<td>第三列</td>
			<td>第四列</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="2">111</td>
			<td colspan="2">222</td>
   <!-- 	<td>333</td> -->
			<td rowspan="2">444</td>
		</tr>
		<tr>
			<td>555</td>
			<td>666</td>
			<!-- <td>777</td> -->
			<!-- <td>888</td> -->
				</tr>
	</tbody>
</table>

二：列表标签

1：无序列表-<ul>

使用<li>定义列表项。

基础语法：

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

无序列表会带有自己的样式属性，如type=“circle”，circle 空心圆，disc实心圆，square方块，但在实际使用时，会使用 CSS 来设置。

2：有序列表 -<ol>

使用<li>定义列表项。

基础语法：

<ol type="A"
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ol>

有序列表会带有自己样式属性，如type="A"，但在实际使用时，会使用 CSS 来设置。

<li>相当与一个容器，可以容纳所有元素。

3：自定义列表-<dl>

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>用于定义列表，与<dt>定义列表名和<dd>定义列表中的项目，一起使用。

dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
</dl>

<dl></dl>里面只能包含<dt></dt>和<dd></dd>。

三：表单标签

1：表单的组成

一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

2：表单域

表单域是一个包含表单元素的区域。标签用于定义表单域，以实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器。

<form action="">
	姓名：<input type="text"/><br />
	密码：<input type="password"/>
</form>

常用属性：

action：用于指定接收并处理表单数据的服务器程序的url地址。

method：用于设置表单数据的提交方式，其取值为get或post。

name：用于指定表单的名称，以区分同一个页面中的多个表单域。

enctype：指定表单数据的编码方式。注意：只有 method="post" 时才使用 enctype 属性。

<form>标签必须和其他标签一起使用。

3：表单控件

1：<input>标签

<input>标签用于收集用户的输入信息，有一个属性type=“根据不同的值，输入的字段拥有多种形式。

姓名：<input type="text"/><br />
密码：<input type="password"/>

type的属性值：

button：定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

checkbox：定义复选框。

file：定义输入字段和 "浏览"按钮，供文件上传。

hidden：定义隐藏的输入字段。

image：定义图像形式的提交按钮。

password：定义密码字段。该字段中的字符被掩码。

radio：定义单选按钮。

reset：定义重置按钮。重置按钮会清除表单中的所有数据。

submit：定义提交按钮。提交按钮会把表单数据发送到服务器。

text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<form action="">
			单行文本框：<input id="username" name="username" type="text"><br>
			密码框：<input id="password" name="password" type="password"><br>
			隐藏域：<input id="hidden" name="hidden" type="hidden"><br>
			单选框：<br>
			红：<input id="color" name="color" type="radio" value="red">
			绿：<input id="color2" name="color" type="radio" value="green">
			蓝：<input id="color3" name="color" type="radio" value="blue"><br>
			复选框：<br>
			<input id="website" name="website" type="checkbox" value="leeleo.org">
			<input id="website2" name="website" type="checkbox" value="leo.org" />
			<br>
			文件上传域：<input id="file" name="file" type="file"><br>
			图像域：<input type="image" src="" alt="图像域的图像" width="150"
			height="31"><br>
			四个按钮：<br>
			<input id="ok" name="ok" type="submit" value="提交" >
			<input id="dis" name="dis" type="submit" value="提交" disabled >
			<input id="cancel" name="cancel" type="reset" value="重填">
			<input id="no" name="no" type="button" value="无动作">
</form>

<input>的属性值：

accept：规定通过文件上传来提交的文件的类型。

align：规定图像输入的对齐方式。

alt：定义图像输入的替代文本。

autofocus：规定输入字段在页面加载时是否获得焦点。

checked：设置单选框、复选框初始状态是否处于选中状态。只

disabled：禁用此元素。

form：规定输入字段所属的一个或多个表单。

height：定义 input 字段的高度。

width：定义 input 字段的宽度。

type：规定 input 元素的类型。

src：定义以提交按钮形式显示的图像的 URL。

size：定义输入字段的宽度。

readonly：规定输入字段为只读。

placeholder：规定帮助用户填写输入字段的提示。

name：定义 input 元素的名称。

value：规定 input 元素的值。

还存在许多不常用的属性，这里就不记了。

2：<select>标签

在html页面中，如果有多个选项让用户选择，我们可以使用标签控件定义下拉列表。该元素必须和<option>元素结合使用，每个<option>元素代表一个列表项或菜单项。

	<select name="" id="">
		<option value="">1</option>
		<option value="">2</option>
		<option value="">3</option>
		<option value="">4</option>
	</select>

在中定义 selected ="selected" 时，当前项即为默认选中项。

3： <textarea>表单元素

用于用户输入的内容较多的情况，定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字。

<textarea name="" id="" cols="30" rows="10" placeholder="输入内容"></textarea>