HTML初学语法之列表、表格及表单（二）

最新推荐文章于 2023-12-11 17:02:02 发布

BetterShon

最新推荐文章于 2023-12-11 17:02:02 发布

阅读量829

点赞数 1

分类专栏： HTML 文章标签： HTML基本语法列表表单表格

本文链接：https://blog.csdn.net/weixin_42386014/article/details/81975094

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写完了第一章才发现自己好像漏了几个比较重要的东西。。。那就接着开个坑来说说这几个很重要的HTML标签吧

一、列表（<ul></ul>和<ol></ol>）

关于列表的定义就很简易了，列表就是有列的表格啊

常见的列表分为两种，无序列表<ul></ul>和有序列表<ol></ol>

1.无序列表<ul></ul>

无序列表顾名思义，就是其子标签<li></li>显示的内容是没有序号的

无序列表中的type取值有三种形式，即内容前显示的无序列表标志为何种样式

type取值	说明
disc	项目符号显示为实体圆（默认值）
square	项目符号显示为实体方形
circle	项目符号显示为空心圆形

2.有序列表<ol></ol>

有序列表，其子标签<li></li>显示的内容可以有多重表示序号的方式

有序列表中的type取值常用的也有三种类型，即显示排序的方式

type取值	说明
1	使用数字作为项目符号（默认值）
A/a	使用大小写字母来作为项目符号
I/i	使用大小写罗马数字作为项目符号

那么接下来就用代码来看看无序列表和有序列表在对内容显示时之间的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是网页标题名</title>
	</head>
	<body> 
		<ul type="square">             //用实心方块显示 
			<li>我是无序列表1</li>
			<li>我是无序列表2</li>
			<li>我是无序列表3</li>
		</ul>
		<ol type="A">                  //用大写字母A进行有序显示
			<li>我是有序列表1</li>
			<li>我是有序列表2</li>
			<li>我是有序列表3</li>
		</ol>
	</body>
</html>

不说了，继续搬砖

二.表格（<table></table>）

表格这个东西以后用到的可太多了，所以得好好的讲一讲

1）表格的基本语法

既然说到了表格的位置格式，那我们就把表格的对齐方式用表格详尽的阐述一下：

属性	值	说明
align 水平对齐方式	left	左对齐
	right	右对齐
	center	居中对齐
valign 垂直对齐方式	top	顶端对齐
	middle	居中对齐
	bottom	底端对齐
	baseline	基线对齐

重点中的重点！！！！表格的单元格合并！！！！

表格单元之：列合并（关键字：colspan）

列合并用到的关键字是 colspan = "要合并的列数量"

举个例子来讲，假设我们要合并下图中第一行中的第二格和第三格，让他们成为新的第一行的第二格

那我们只需要这么做就可以，仔细看代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是网页标题名</title>
	</head>
	<body>
		<table border="1" bordercolor="pink" align="center">
			<tr>
				<td>我是第一行第一格</td>
				<td colspan="2">我是新的第一行第二格</td>
			</tr>
			<tr>
				<td>我是第二行第一格</td>
				<td>我是第二行第二格</td>
				<td>我是第二行第三格</td>
			</tr>
			<tr>
				<td>我是第三行第一格</td>
				<td>我是第三行第二格</td>
				<td>我是第三行第三格</td>
			</tr>
		</table>
	</body>
</html>

合并完以后的效果就会成为这样

表格单元之：行合并（关键字：rowspan）

行合并用到的关键字是：rowspan = "要合并的列数量"

假设我们要将列合并之后的新表进行行合并，我们想把第三格第一格与第二行第一格进行合并，那我们只需要这么做即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是网页标题名</title>
	</head>
	<body>
		<table border="1" bordercolor="pink" align="center">
			<tr>
				<td>我是第一行第一格</td>
				<td colspan="2">我是新的第一行第二格</td>
			</tr>
			<tr>
				<td rowspan="2">我是第二行第一格</td>
				<td>我是第二行第二格</td>
				<td>我是第二行第三格</td>
			</tr>
			<tr>
				<td>我是第三行第二格</td>
				<td>我是第三行第三格</td>
			</tr>
		</table>
	</body>
</html>

合并以后的效果

rowspan和colspan是可以在一个表格中被使用多次的，具体其它细节看客们可以自己多做尝试，说不定会有惊喜

三、表单（<form></form>）

这个表单的重要性，那就不言而喻了，包括后期的数据提交等等都会用到它，它还可以和table一起嵌套使用，然后我想说最重要的一点，别和from弄混了！别和from弄混了！！别和from弄混了！！！！重要的事情撸三遍

然后那就开始吧，首先说说form标签的基本语法和基本格式

然后在td中有<input />标签，那现在就细讲一下这个标签

基本格式：

<input />标签中的各种属性：

属性	说明
type	指定元素的类型。常用的包括：text、password、checkbox、radio、submit、reset、file、hidden、image、和button，默认值为text
name	指定表单元素的名称（联想键值对中的key）
value	指定表单元素的初始值。当type为radio时必须指定一个
size	指定表单元素的初始宽度。当type为text或者password时，表单的元素大小以字符为计量单位，其它类型，以像素为计量单位
maxlength	type为text或者password时，输入的最大字符
checked	type为radio或checkbox时，用来指定是否初始就被选中