自定义列表（重点）

自定义列表的使用场景：

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

自定义列表（重点）

在HTML标签中，<dl＞标签用于定义描述列表（或定义列表），该标签会与<dt＞（定义项目/名字）和<dd＞(描述每一不项目/名字）一起使用。

其基本语法如下：＞

<dl＞

<dt＞名词1</dt＞

<dd＞名词1解释1</dd＞

<dd＞名词1解释2</dd＞

</dl＞

<body＞

<dl＞

​ <dt＞新浪微博</dt＞

​ <dd＞微信</dd＞

​ <dd＞dl里面只能出现dt和dd，不允许出现其他的</dd＞

</dl＞

</body＞

1.<dl＞ </dl＞里面只能包含<dt＞和<dd＞

2<dt＞和 <dd＞个数没有限制，经常是一个<dt＞对应多个<dd＞

列表总结

标签名	定义	说明
<ul＞</ul＞	无序标签	里面只能包含li 没有顺序，使用较多。li 里面可以包含任何标签
<ol＞</ol＞	有序标签	里面只能包含li 有顺序，使用相对较少。 li 里面可以包含任何标签
<dI＞</dI＞	自定义列表	里面只能包含dt 和 dd，dt和dd里面可以放任何标签

注意：

1.学会什么时候用无序列表，什么时候用自定义列表

2.无序列表和自定义列表代码怎么写

3.列表布局在学习完 CSS 后再来完成

表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（ 也称为表单元素）和提示信息3个部分构成

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，**<form＞** 标签用于定义表单域，以实现用户信息的收集和传递。

<form＞ 会把它范国内的表单元素信息提交给服务器

名种表单元素控件

</form＞

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单域

基础班来说，我们暂时不用表单域提交数据，只需要写上 form 标签即可。就业班等学习服务器编程阶段会重新讲解

这里只需要记住两点：

1.在我们写表单元素之前，应该有个表单域把他们进行包含

2.表单域是 form 标签

<body＞

form action=”python” method=”POST” name=”1”＞</form＞

</body＞

<input＞表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input＞标签用于收集用户信息

在<input＞标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本

字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input type=“属性值” /＞

<input/＞标签为单标签

type 属性设置不同的属性值用来指定不同的控件类型

<input＞表单元素

type 属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
checkbox	定义复选框
file	定义输入字段和 “浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符

<body＞

​ 使用text 文本框<br＞

​ 用户名：<input type=”text”＞ <br＞

​ <br＞

​ 使用password 密码框，用户看不见<br＞

​ 密码：<input type=”password”＞<br＞

​ <br＞

​ 使用radio，实现多选一<br＞

​ 性别：男 <input type=”radio” name=”sex”＞ 女 <input type=”radio” name=”sex”＞<br＞

​ <br＞

​ 使用checkbox 复选框<br＞

​ 爱好：吃饭 <input type=”checkbox”＞ 睡觉 <input type=”checkbox”＞<br＞

</form＞

</body＞

<input＞表单元素

除 type 属性外，<input＞标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1.name 和 value 是每个表单元素都有的属性值，主要给后台人员使用

2.name 表单元素的名字，要求 单选按钮和复选框要有相同的name值

3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

4.maxlength 是用户可以在表单元素输入的最大字符数,一般较少使用

<body＞

​ <!– name是每个文本框独立的名字 –＞

​ <!– value是显示在文本框里面的字 –＞

​ <!– checked是一进入页面就默认勾选的 –＞

​ <!– maxlength是最大输入的长度，可用于用户名 –＞

​ <!– 使用text 文本框<br＞ –＞

​ 用户名：<input type=”text” name=”username” maxlength=”6”＞ <br＞

​ <br＞

​ <!– 使用password 密码框，用户看不见<br＞ –＞

​ 密码：<input type=”password” name=”password”＞<br＞

​ <br＞

​ <!– 使用radio，实现多选一<br＞ –＞

​ 性别：男 <input type=”radio” name=”sex” value=”男”＞ 女 <input type=”radio” name=”sex” value=”女”＞<br＞

​ <br＞

​ <!– 使用checkbox 复选框<br＞ –＞

​ 爱好：吃饭 <input type=”checkbox” name=”hobby” value=”吃饭” checked=’checked’＞ 睡觉 <input type=”checkbox” name=”hobby” value=”睡觉”＞<br＞

​ <br＞

​ <!– 点了提交元素就会提交这个值给你写的后台服务器 –＞

​ <input type=”submit” value=”免费注册”＞

​ <!– reset就是重新填写，这样就会重置表格 –＞

​ <input type=”reset”＞

​ <!– button不会提交数据，可以用于给手机发短信结合js搭配使用–＞

​ <input type=”button” value=”获取短信验证码”＞<br＞

​ <!– file是上传文件所使用的 –＞

​ 上传头像：<input type=”file”＞

</form＞

</body＞

<label＞标签

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

<label＞ 标签用于绑定

个表单元素 当点击<label＞标签内的文本时 ，浏览器就会自动将焦点(光标转到或者

选择对应的表单元素上用来增加用户体验。

语法：

<label for=”sex”＞男</label＞

<input type=”radio” name=”sex” id=”sex” /＞

核心：<label＞标签的 for 属性应当与相关元素的 id 属性相同

</body＞

<label for=”username”＞ 用户名：</label＞<input type=”text” name=”username” maxlength=”6” id=”username”＞ <br＞

</body＞

表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件：

1.input 输入表单元素

2.select 下拉表单元素

3.textarea 文本域元素

<select＞表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用**<select＞标签控件定义下拉列表**

语法：

<select＞

<option＞选项1</option＞

<option＞选项2</option＞

<option＞选项3</option＞

</select＞

1. <select＞中至少包含一对<option＞

2. 在<option＞中定义 selected = “selected“ 时，当前项即为默认选中项

</body＞

籍贯：

<select name=”” id=””＞

​ <option＞武汉</option＞

​ <option＞新疆</option＞

​ <option＞天津</option＞

​ <option selected=’selected’＞北京</option＞

​ <option＞湖南</option＞

</select＞

<br＞<br＞

</body＞

<textarea＞表单元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea＞标签。

在表单元素中，**<textarea＞** 标签是用于定义多行文本输入的控件

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论

textarea rows=”3” cols=”20”＞

文本内容

</textarea＞

1.通过 <textarea＞ 标签可以轻松地创建多行文本输入框

2.cols = “每行中的字符数”, rows = “显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小

表单元素几个总结点

1. 表单元素我们学习了三大组 input输入表单元素 select 下拉表单元素 textarea 文本域表单元素

2. 这三组表单元素都应该包含在form表单域里面，并且有name 厲性.

<form＞

<input type=”text “ name=”username”＞

<select name=”jiguan”＞

<option＞北京</option＞

</select＞

textarea name= “message” ＞</textarea＞

</form＞

表单元素几个总结点

3.有三个名字非常相似的标签：

1.表单域 form 使用场景：提交区域内表单元素给后台服务器

2.文件域 file 是input type属性值，使用场景：上传文件

3.文本域 textarea 使用场景：可以输入多行文字，比如留言板 网站介绍等…

4.我们当前阶段不需要提交表单元素所以我们只负责表单元素的外观形态即可

经常查阅文档是一个非常好的学习习惯。