HTML学习笔记（三）

最新推荐文章于 2022-03-23 21:19:31 发布

CSPsy

最新推荐文章于 2022-03-23 21:19:31 发布

阅读量818

点赞数 7

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/m0_51573433/article/details/119257918

版权

HTML 专栏收录该内容

3 篇文章 7 订阅

订阅专栏

文章目录

1. 表格

什么是表格？

表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。
它常被用来显示、展示表格式数据。

在HTML中，表格可以大致分为三个部分：

thead ---------表格的页眉
tbody ---------表格的主体
tfoot ---------表格的页脚

创建表格

每个表格由一个 <table> 标签开始。
每个表格行由 <tr> 标签开始。
每个表格数据由 <td> 标签开始。

<!DOCTYPE html>
<html>
<head> 
	<meta charset = "UTF-8"> 
	<title> 表格 </title> 
</head>
<body>

<!-- border = "1" 表示该表格的边框线宽度为 1 px-->
<table border = "1">
	<!--
		表格标题通常会被居中且显示于表格之上。				 
		<caption>标签必须紧随<table>标签之后。
		这个标签只存在 表格里面才有意义。
	-->
	<caption> title of the table </caption>
	<tr> 
		<td> (1, 1) </td>
		<td> (1, 2) </td>
		<td> (1, 3) </td> 
	</tr>
	<tr>
		<td> (2, 1) </td>
		<td> (2, 2) </td>
		<td> (2, 3) </td>
	</tr>
</table>

</body>
</html>

运行结果：

表格

title of the table
(1, 1)	(1, 2)	(1, 3)
(2, 1)	(2, 2)	(2, 3)

表头单元格标签 <th>
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签 <th> </th> 替代相应的单元格标签 <td> </td> 即可。

举个例子：

<!DOCTYPE html>
<html>
<head> 
	<meta charset = "UTF-8"> 
	<title> 表格 </title> 
</head>
<body>

<table border = "1">
	<thead>
	<tr> 
		<th> 书名 </th>
		<th> 价钱 </th> 
	</tr>
	</thead>
	<tbody>
	<tr>
		<td> C Primer Plus </td>
		<td> 108.00元 </td>
	</tr>
	<tr>
		<td> C++ Primer </td>
		<td> 128.00元 </td>
	</tr>
	</tbody>
</table>

</body>
</html>

运行结果：

表格

书名	价钱
C Primer Plus	108.00元
C++ Primer	128.00元

合并单元格
当我们想要合并单元格的时候，我们可以使用rowspan和colspan。
rowspan用来合并行； colspan用来合并列的。

<!DOCTYPE html>
<html>
<head> 
	<meta charset = "UTF-8"> 
	<title> 表格 </title> 
</head>
<body>

<table border = "1">
	<tr> 
		<td rowspan = 2> 合并第一列的两行 </td>
		<td> (1, 1) </td>
		<td> (1, 2) </td> 
	</tr>
	<tr>
		<td> (2, 1) </td>
		<td> (2, 2) </td>
	</tr>
</table>

</body>
</html>

运行结果：

表格

合并第一列的两行	(1, 1)	(1, 2)
合并第一列的两行	(2, 1)	(2, 2)

常用的表格属性

属性	属性值	描述
width	pixels	设置表格的宽度
height	pixels	设置表格的高度
align	left, center, right	设置表格在网页中的水平对齐方式
border	pixels	设置表格的边框
cellspacing	pixels	设置单元格与单元格边框之间的空白距离
cellpadding	pixels	设置单元格内容与单元格边框之间的空白距离

2. 列表

无序列表

无序列表标签为<ul>
<ul> </ul> 中只能嵌套 <li> </li>，但是可以在<li> </li>中放置所有元素。

<!DOCTYPE html>
<html>
<head> 
	<meta charset="UTF-8"> 
	<title> 无序列表 </title> 
</head> 
<body>

<h5> 饮品：</h5>
<ul>
	<li> Water </li>
	<li> Milk </li>
	<li> Tea </li>
</ul>

</body>
</html>

运行结果：

无序列表

饮品：

Water
Milk
Tea

有序列表

有序列表标签为<ol>
不添加type 的时候默认从数字1开始排序。

<!DOCTYPE html>
<html>
<head> 
	<meta charset="UTF-8"> 
	<title> 有序列表 </title> 
</head> 
<body>

<ol>
	<li> Water </li>
	<li> Milk </li>
	<li> Tea </li>
</ol>

<ol type = "A">
	<li> Water </li>
	<li> Milk </li>
	<li> Tea </li>
</ol>

<!-- reversed属性能够让有序列表中的序列倒序排列。-->
<ol reversed = "reversed">
	<li> Water </li>
	<li> Milk </li>
	<li> Tea </li>
</ol>

<!-- start属性值为6，有序列表中的第一个序列号将从6开始排列。-->
<ol start = "6">
	<li> Water </li>
	<li> Milk </li>
	<li> Tea </li>
</ol>

</body>
</html>

运行结果：
在这里插入图片描述

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。

<!DOCTYPE html>
<html>
<head> 
	<meta charset="UTF-8"> 
	<title> 自定义列表 </title> 
</head> 
<body>

<dl>
	<dt> 项目一 </dt>
	<dd> 项目一的注释 </dd>
	<dt> 项目二 </dt>
	<dd> 项目二的注释 </dd>
</dl>

</body>
</html>

运行结果：

自定义列表

项目一

项目一的注释

项目二

项目二的注释

3. 表单

表单用于收集用户信息
表单使用表单标签 <form> 来设置:

在HTML中，一个完整的表单通常由以下三部分组成：

表单元素（也称为表单控件）

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息

一些说明性的文字，提示用户进行填写和操作。

表单域

相当于一个容器，用来容纳所有的表单元素和提示信息。
可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。
如果不定义表单域，表单中的数据就无法传送到后台服务器。

<input> 元素

输入类型是由类型属性 type 定义的。

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	sumbit	提交按钮
	reset	重置按钮
	image	带图像的 submit 按钮
	file	让用户选择文件的控件
name	自定义	表单控件的名称
value	自定义	表单控件的值
size	正整数	表单控件的大小
maxlength	正整数	value 的最大长度（最多字符数目）
minlength	正整数	value 的最小长度（最少字符数目）
checked	--------	定义选择控件默认被选中的项

<label> 标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<textarea> 标签

<textarea> 标签定义多行的文本输入控件，所以也称为文本域。（也可以理解为多行文本框）

举个例子，结合列表的知识，做一个简单的表单：

<!DOCTYPE html>
<html>
<head> 
	<meta charset = "UTF-8"> 
	<title> 表单 </title> 
</head> 
<body>

	<h2> 饮品订单 </h2>
	<li> 用户名：<input type = "text" /></li>
    <li> 密码：<input type = "password" /> </li>
    
	<form method="post" action="" enctype = "text/plain">  
	<fieldset>
		<legend> 用户订单 </legend>
		<ol>
	        <li> 收货人姓名：<input type = "text" name = "username" /> </li>
	        <li> 所选饮品: 
	        <select size = "1" name = "drinking">
	         	<option>
	            	牛奶
	          	</option>
	         	<option>
		            咖啡
	          	</option>
	          	<option>
	            	可乐
	          	</option>
	          	<option>
	            	红茶
	          	</option>
	          	<option>
	            	绿茶
	          	</option>
	        </select>
	        </li>
	        <li> 地址：<input type = "text" name = "address" /></li>
		</ol>
    </fieldset>

    <fieldset>
    	<legend> 备注 </legend>
    	<textarea rows = "4" name = "remark" cols = "70"></textarea>
    </fieldset>

    <input type = "submit" value = "提交订单" />
    <input type = "reset" value = "重置" />
    </form>

</body>
</html>

运行结果：
在这里插入图片描述

CSPsy

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记（三）

文章目录1. 表格2. 对文字4. 链接标签 <a>1. 表格什么是表格？表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。它常见被用来显示、展示表格式数据。创建表格每个表格由一个 <table> 标签开始。每个表格行由 <tr> 标签开始。每个表格数据由 <td> 标签开始。 <!DOCTYPE html><html><h
复制链接

扫一扫