HTML超文本标记语言-列表标签、表单标签、区块元素和字符实体

来聊前端
201 阅读5分钟

HTML表格标签

学习目标

image-20230704232512985.png

表格标签的语法

表格的属性和描述
属性描述
th属性元素定义表头
tr属性元素定义表格行
td属性元素定义表格列
width属性设置表格宽度
height属性设置表格高度
border设置表格线的宽度
bordercolor属性设置表格边框颜色
bgcolor属性设置表格的背景颜色
align/valign属性设置表格对齐方式
cellspacing属性设置单元格间距
cellpadding属性设置单元格行距
colspan属性表示该单元格向右跨越的列数
rowspan属性表示该单元格向下跨越的列数

表格标签的使用方法

​ 在网页中定义了宽度为400像素的表格，边框粗细为1像素，颜色为蓝色，第一行第一个单元格的宽度为200像素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!--表格-->
		<table border="1"cellspacing="0" cellpadding="0" width="400" height="400" bordercolor="red" align="center">	
			<caption>
				<h4>学生信息表</h4>
			</caption>	
			<tr bgcolor="green">
				<td align="center" valign="top">姓名</td>
				<td align="right" valign="bottom">性别</td>
				<td align="right" valign="bottom">年龄</td>
			</tr>
			<tr>
				<td align="left" valign="middle">张三</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td align="left" valign="middle">李四</td>
				<td>25</td>
				<td>女</td>
			</tr>
			<tr>
				<td align="left" valign="middle">王五</td>
				<td>36</td>
				<td>男</td>
			</tr>
		</table>

表格合并演示：

<table border="1" cellspacing="0" cellpadding="0" width="400" height="400" align="center">
			<caption>
				<h1>表格合并</h1>
			</caption>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="3"></td>
				
			</tr>
		</table>

课程总结

image-20230704232512985.png

HTML列表标签

学习目标

image-20230704232628422.png

有序列表

在HTML文件中，除了使用标记对文字进行修饰以外，HTML还可以提供列表，可以对网页文字进行更好的布局和定义。

  1. 有序列表，就是有顺序的列表，即列表前面带个123或abc。标签为<ol>...</ol>。
  2. type属性修改有序列表序号样式。
  3. strat属性设置序号起始值。
type属性的具体取值及说明
属性描述
1数字1、2 ...
a小写字母a、b...
A大写字母A、B...
i小写罗马数字i、ii、iii...
I大写罗马数字I、II、III...

无序列表

  1. 无序列表需使用无序列表标记符<ul></ul>和列表项标记符<li></li>。

  2. type属性修改无序列表序号样式。

  3. strat属性设置序号起始值。

type属性的具体取值及说明
属性值描述
disc实心圆点（默认）
circle空心圆圈
Square方形

自定义列表

​ 自定义列表以<dl>标记开始，自定义列表项目以<dt>开始，自定义列表的解释以<dd>开始。自定义列表的语法格式如下。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<!--有序列表-->
		<ol type="1" start="3">
			<li>列表内容</li>
			<li>列表知识</li>
			<li>列表介绍</li>				
		</ol>
		<!--无序列表-->
		<ul type="square">
			<li>列表内容</li>
			<li>列表知识</li>
			<li>列表介绍</li>
		</ul>
		<!--自定义列表-->
		<dl>
			<dd>列表解释</dd>
			<dt>列表项目列表项目</dt>
			<dt>列表项目列表项目</dt>
			<dt>列表项目列表项目</dt>
		</dl>
	</body>
</html>

课程总结

image-20230704232624561.png

HTML表单标签

学习目标

image-20230704232928081.png

表单介绍

1620962340(1).png

表单是HTML中重要组成部分，是网页提供的一种交互式操作手段，主要用于采集和提交用户输入的信息。

表单语法

​ 在HTML中，只要在需要使用表单的地方插入成对的表单标记<form></form>，就可以完成表单的基本定义，基本语法如下。

<form name="formName" method="post/get" action="url" ></form>
属性描述
name表单名称
method表单发送的方式，可以是"post"或者"get"
action表单处理程序提交地址
enctype表单编码方式

​ enctype表单编码方式可选属性

enctype
application/x-www-form-urlencoded默认，但是在传文本和MP3，图片等时效率低下。
multipart/form-data指定传输的文件为二进制格式，可以用于传输图片、MP3等。
text/plain纯文体的传输，空格转换为“+”，但不对特殊字符编码。

​ 表单是网页提供的交互式操作手段，首先，用户必须在表单控件中输入必要的信息，发送服务器请求相应，然后服务器将结果返回给用户，这样就体现出交互。

input标记的type属性值及描述
属 性描述
text文本框
password密码框
file文件框
checkbox复选框
radio单选框
button普通按钮
reset重置按钮
submit提交按钮
select下拉框
option列表项
textarea文本域
hidden隐藏域
value默认值
size表单大小
readonly只读属性
disabled禁用属性
placeholderH5提示信息

  1. 文本框——text 将<input>标记中的type属性值设置为text，就可以在表单中插入文本框。

  2. 密码框——password 将<input>标记中的type属性值设置为password，就可以在表单中插入密码框。

  3. 复选框——checkbox 将<input>标记中的type属性设置为checkbox，就可以在表单中插入复选框。

  4. 单选按钮——radio 将<input>标记中的type属性设置为radio，就可以在表单中插入一个单选按钮。name的名称相同才能够有单选的效果。

  5. 标准按钮——button 将<input>标记中的type属性设置为button，就可以在表单中插入标准按钮。

  6. 重置/提交按钮——reset/submit 将<input>标记中的type属性设置为reset，就可以在表单中插入重置按钮。

  7. 将<input>标记中的type属性设置为submit，则插入提交按钮。

  8. 在HTML文件中，使用列表框标记<select>，同时嵌套列表项标记<option>,可以实现列表框效果，其语法格式如下：

    <select>
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
	<option>深圳</option>
</select>

  9. 有时网页中需要一个多行的文本域，用来输入更多的文字信息，定义文本域的语法格式如下:

    <textarea rows="5" cols="10">
				
</textarea>

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Form表单</title>
	</head>
	<body>
		<form method="post" action="index.php">
			文本框:<input type="text" name="text" />
			<br/>
			密码框:<input type="password" name="pass" />
			<br/>
			文件框:<input type="file" name="file" />
			<br/>
			复选框:篮球<input type="checkbox">足球<input type="checkbox">乒乓球<input type="checkbox">
			<br/>
			<!--name的名称相同才能够有单选的效果-->
			单选框:男<input type="radio" name="ra">女<input type="radio" name="ra">
			<br/>
			普通按钮:<input type="button" value="普通按钮">
			<br/>
			提交按钮:<input type="submit" value="注册">
			<br/>
			列表框：<select>
					<option>北京</option>
					<option>上海</option>
					<option>广州</option>
					<option>深圳</option>
				</select>
			<br/>
			文本域：<textarea rows="5" cols="10">
				
				</textarea>
			<br/>
			文本框：<input type="text" value="请输入！" readonly>
			文本框：<input type="text" value="请输入！" disabled>
			重置按钮:<input type="reset" value="重置">

		</form>
	</body>
</html>

课程总结

image-20230704232928081.png

HTML区块元素和字符实体

学习目标

image-20230704233028882.png

区块元素形式

常见的能够换行的标签都是块级元素例如:

<div></div>
<p></p>
<h1></h1>

常见的不能换行的标签都是行级元素例如:

<span></span>
<b></b>

字符实体使用

HTML 中的预留字符必须被替换为字符实体。

如：在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

显示结果描述实体名称
<小于号&lt;
大于号&gt;
空格&nbsp;
&和号&amp;
"引号&quot;
￠分（cent）&cent;
¥元（yen）&yen;
©版权（copyright）&copy;
®注册商标&reg;
×乘号&times;
÷除号&divide;

课程总结

image-20230704233028882.png

avatar
文章
阅读
粉丝