目录
一、概述
对于之前的一些标题标签,段落标签,文本格式话标签还有问题的可以看上一篇博文,链接为HTML基础(一),这次我们多的不聊,我们来聊一下html中列表、表格和表单的使用,以及一些关于它们的属性。
二、列表
在HTML中,列表(List)是一种非常重要的元素,用于组织和展示一系列的项目或数据。列表可以帮助用户更清晰地理解和浏览网页上的内容。接下来我们一起看一下列表的使用。
1、列表的分类
列表共有三类,分别为有序列表、无序列表和自定义列表,分别用<ol>、<ul>、<dl>定义标识。
2、列表的使用
(1)有序列表
在HTML中,有序列表(Ordered List)的主要作用是呈现一组具有顺序性的项目列表。每个列表项通常前面都有一个默认的序号(如数字或字母)来标记,以体现项目之间的顺序关系。
<ol type="0" start="3" reversed>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>
运行结果:
(2)有序列表中的属性
type:用于标识列表序号类型
start:用于标识开始的序号
reversed:其效果为使列表序号倒序显示在页面上
以上就是有序列表的结构和属性,接下来我们来看一下无序列表。
(1)无序列表
在HTML中,无序列表(Unordered List)的主要作用是呈现一组没有特定顺序的项目列表。每个项目通常前面会有一个默认的实心圆点或小方块来标记,以区分不同的列表项1。
<ul type="square">
<li>无序列表一</li>
<li>无序列表二</li>
<li>无序列表三</li>
</ul>
运行结果:
(2)无序列表的属性
type:用来更改文字前的列表图案
属性值:
disc:可以使列表图案改变为实心圆
注意:无需列表的图案默认为实心圆
square:可以使列表图案改变为实心方块
circle:可以使列表图案改变为空心圆
无序列表说完了,接下来就是最后一个自定义列表了。
(1)自定义列表
在HTML中,自定义列表(通常通过<dl>
, <dt>
, 和 <dd>
元素来实现)的主要作用是提供一个结构化的方式来显示项和它们的描述或定义。
<dl>
<dt>定义项</dt>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
</dl>
运行结果:
使用<dl>来定义自定义列表,<dt>来标识定义项,<dd>来标识描述项。
以上就是三种列表的结构和属性的介绍,接下来我们就来说一下表格。
三、表格
HTML表格在网页设计中扮演着重要的角色,用于组织和展示数据。下面是关于html中表格的一些描述。
1、表格的结构
<table border="1px" cellspacing="0" cellpadding="0" align="center" width="500px" height="200px">
<thead>
<tr bgcolor="#888888">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td width="150px" align="center">20247801</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="center">
<td>20247802</td>
<td>李四</td>
<td>女</td>
</tr>
<tr align="center">
<td>20247803</td>
<td>王五</td>
<td>男</td>
</tr>
<tr align="center">
<td>20247804</td>
<td>赵六</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td colspan="3">班级内共计4人</td>
</tr>
</tfoot>
</table>
运行结果:
2、属性
(1)表格的标签属性:
border:边框
width:宽度
height:高度
间距属性:cellspacing="0"
边距属性:cellpadding="20px"
边框颜色:bordercolor="red"
背景色:bgcolor="#f90"
水平对齐方式:align
背景图片: background="图片路劲"
<table border="1px" width="500px" height="150px" cellspacing="0" cellpadding="20px"
bordercolor="red" bgcolor="#f90" align="center">
<tr>
<td>01</td>
<td>王某某</td>
<td>21</td>
</tr>
<tr>
<td>02</td>
<td>张某某</td>
<td>22</td>
</tr>
<tr>
<td>03</td>
<td>代某某</td>
<td>23</td>
</tr>
</table>
运行结果:
(2)行标签属性:
bgcolor:行标签背景颜色属性
align:行标签水平对齐方式(left左||center中||right右)
valign:行标签垂直对齐方式(top上||middle中||bottom下)
<table border="1px" width="500px" height="150px" cellspacing="0" cellpadding="20px" bordercolor="pink"
bgcolor="#f90" align="center">
<tr bgcolor="red" align="center" valign="middle">
<td>01</td>
<td>王某某</td>
<td>21</td>
</tr>
<tr bgcolor="green" align="center" valign="middle">
<td>02</td>
<td>张某某</td>
<td>22</td>
</tr>
<tr bgcolor="blue" align="center" valign="middle">
<td>03</td>
<td>代某某</td>
<td>23</td>
</tr>
</table>
运行结果
(3)单元格标签属性:
width:宽度
height:高度
bgcolor:背景颜色
background:背景图片
插入图片:img
align:行标签水平对齐方式(left左||center中||right右)
valign:行标签垂直对齐方式(top上||middle中||bottom下)
合并单元格属性:
横向合并:colspan="合并单元格的数量"
纵向合并rowspan="合并单元格的数量"
<table border="1px" width="500px" height="150px" cellspacing="0" cellpadding="20px" bordercolor="pink"
bgcolor="#f90" align="center">
<tr>
<td rowspan="3"><img src="./../img/头像.jpg"></td>
<td rowspan="2">01</td>
<td colspan="2">王某某</td>
<!-- <td>21</td> -->
</tr>
<tr>
<td>张某某</td>
<td>22</td>
</tr>
<tr>
<td>02</td>
<td>代某某</td>
<td>23</td>
</tr>
</table>
四、表单
HTML表单是网页上用于收集用户输入的一种方式。它们可以包含各种不同类型的字段,如文本框、复选框、单选按钮、下拉列表等,以便用户输入或选择数据。一旦用户填写完表单并提交,数据通常会被发送到服务器进行处理。
1、form表单结构
<form action="提交表单的路径">
<input type="">
</form>
在HTML中,<input> 标签的 type 属性用于定义输入字段的类型。下面是一些常见的 type 属性值:
2、type属性值
text:单行文本输入字段。
<input type="text" name="username">
password:密码输入字段。
输入的内容会被遮盖显示(通常是显示为点或星号)
<input type="password" name="pwd">
submit:提交按钮。
当点击此按钮时,会提交表单
<input type="submit" value="Submit">
reset:重置按钮。
当点击此按钮时,表单的所有输入字段会被重置为初始值
<input type="reset" value="Reset">
button:可点击的按钮。
默认情况下,点击此按钮不会提交表单,但可以通过JavaScript为其添加功能
<input type="button" value="Click Me" onclick="alert('Hello!')">
radio:单选按钮。
用户可以从一组选项中选择一个。
<input type="radio" id="option1" name="options" value="option1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>
checkbox:复选框。
用户可以选择多个选项
html
<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>
file:文件上传字段。
允许用户选择一个或多个文件,然后提交到服务器
<input type="file" name="myfile">
hidden:隐藏输入字段。
此字段对用户不可见,但可以在表单提交时携带固定的数据并发送数据。
<input type="hidden" name="token" value="some_token_value">
image:图像形式的提交按钮。
点击图像时,会提交表单
<input type="image" src="submit.png" alt="Submit">
color:颜色选择器。允许用户从调色板中选择颜色。
<input type="color" name="favoriteColor">
date、datetime-local、month、time、week:这些类型提供了不同的日期和时间选择器,方便用户输入日期和时间。
除了上述常见的 type 值,HTML5 还引入了一些其他类型,如 email、number、range、search、tel 和 url,它们提供了更具体和有用的输入验证和格式化功能。
3、下拉列表标签
球类运动:
<select name="ball" id="ball">
<option value="basketball" selected>篮球</option>
<option value="football">足球</option>
<option value="pingpang">乒乓球</option>
<option value="yumaoqiu">羽毛球</option>
</select>
4、type属性中按钮属性值
<!-- 按钮 -->
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮">
五、总结
此文章描述了html的列表,表格,表单,等基础的html实现,后续还会有其他的基础知识持续更新,本文章如果有侵权现象,请立即告知作者,谢谢