HTML列表标签
学习目标
image-20230704232624561.png
有序列表
在HTML文件中，除了使用标记对文字进行修饰以外，HTML还可以提供列表，可以对网页文字进行更好的布局和定义。
- 有序列表，就是有顺序的列表，即列表前面带个123或abc。标签为
<ol>...</ol>。 - type属性修改有序列表序号样式。
- strat属性设置序号起始值。
<div align="center">type属性的具体取值及说明</div>
| 属性 | 描述 |
|---|---|
| 1 | 数字1、2 ... |
| a | 小写字母a、b... |
| A | 大写字母A、B... |
| i | 小写罗马数字i、ii、iii... |
| I | 大写罗马数字I、II、III... |
无序列表
无序列表需使用无序列表标记符
<ul></ul>和列表项标记符<li></li>。type属性修改无序列表序号样式。
strat属性设置序号起始值。
<div align="center">type属性的具体取值及说明</div>
| 属性值 | 描述 |
|---|---|
| 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 | 纯文体的传输，空格转换为“+”，但不对特殊字符编码。 |
表单是网页提供的交互式操作手段，首先，用户必须在表单控件中输入必要的信息，发送服务器请求相应，然后服务器将结果返回给用户，这样就体现出交互。
<div align="center">input标记的type属性值及描述</div>
| 属 性 | 描述 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| file | 文件框 |
| checkbox | 复选框 |
| radio | 单选框 |
| button | 普通按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| select | 下拉框 |
| option | 列表项 |
| textarea | 文本域 |
| hidden | 隐藏域 |
| value | 默认值 |
| size | 表单大小 |
| readonly | 只读属性 |
| disabled | 禁用属性 |
| placeholder | H5提示信息 |
- 文本框——text
将<input>标记中的type属性值设置为text，就可以在表单中插入文本框。 - 密码框——password
将<input>标记中的type属性值设置为password，就可以在表单中插入密码框。 - 复选框——checkbox
将<input>标记中的type属性设置为checkbox，就可以在表单中插入复选框。 - 单选按钮——radio
将<input>标记中的type属性设置为radio，就可以在表单中插入一个单选按钮。name的名称相同才能够有单选的效果。 - 标准按钮——button
将<input>标记中的type属性设置为button，就可以在表单中插入标准按钮。 - 重置/提交按钮——reset/submit
将<input>标记中的type属性设置为reset，就可以在表单中插入重置按钮。
将
<input>标记中的type属性设置为submit，则插入提交按钮。-
在HTML文件中，使用列表框标记
<select>，同时嵌套列表项标记<option>,可以实现列表框效果，其语法格式如下：<select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> -
有时网页中需要一个多行的文本域，用来输入更多的文字信息，定义文本域的语法格式如下:
<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 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| < | 小于号 |
< |
| > | 大于号 |
> |
| 空格 | |
|
| & | 和号 | & |
| " | 引号 | " |
| ￠ | 分（cent） | ¢ |
| ¥ | 元（yen） | ¥ |
| © | 版权（copyright） | © |
| ® | 注册商标 | ® |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
课程总结
image-20230704233028882.png
