自定义列表:
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
在HTML标签中,<dl>
标签用于定义描述列表(或定义列表),该标签会与<dt>
(定义项目/名字)和<dd>(
描述每一个项目/名字)一起使用。
基本语法如下:
<body> <dl> <dt></dt> <dd></dd> <dd></dd> </dl> </body>
举例:
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl> </body> </html>
显示如下:
<1><dl></dl>
里面只能包含<dt>和<dd>
<2><dt>
和<dd>
个数没有限制,经常是一个<dt>
对应多个<dd>
表单标签:
现实中的表单:
网页中的表单:
使用表单的目的是为了手机用户信息。
在网页中,我们需要跟用户进行交互,收集用户资料,此时就需要表单。
表单的组成:
在HTML中,一个完整的表单通常由表单域,表单控件(也称为表单元素)和提示信息3个部分组成。
表单域:
表单域是一个包含表单元素的区域。
在HTML标签中,标签用于定义表单域,以实现用户信息的收集和传递。
<form>
会把它范围内的表单元素信息提交给服务器。
语法格式:
<form action="ul地址" method="提交方法" name="表单域名称"> 各种表单元素控件 </form>
input表单元素标签:
type属性的属性值及其描述如下:
type属性主要用于使表单元素呈现不同的状态
表单元素:
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
<input>表单元素:
在英文单词中,input是输入的意思,而在表单元素中<input>
标签用于收集用户信息。
举例:
<from> 用户名:<input type="text"></br> 密码:<input type="password"></br> 性别:男:<input type="radio">女:<input type="radio"></br> 爱好:吃饭:<input type="checkbox">睡觉:<input type="checkbox">打豆豆:<input type="checkbox"> </from>
显示效果:
在上文我们提到"radio"是单选框,那么为什么现在性别的两个选项都可以被选择呢?
解决方法为:给单选按钮命名相同的名字。
修改如下:
用户名:<input type="text" name="username"></br> 密码:<input type="password" name="password"></br> 性别:男:<input type="radio" name="sex">女:<input type="radio" name="sex"></br>
那么复选框是不是就不需要起相同的名字啦?
那当然不是,复选框也要给每个选项起相同的名字,但它的作用是为了将我们输入的数据提交给后台时分类能够明确。
除了type属性之外,<input>
标签还有其他很多属性,其常用的属性如下:
举例:
<from> 用户名:<input type="text" name="username" value="请在这里输入用户名"></br> 密码:<input type="password" name="password" ></br> 性别:男:<input type="radio" name="sex" value="男">女:<input type="radio" name="sex" value="女"></br> 爱好:吃饭:<input type="checkbox" name="hobby">睡觉:<input type="checkbox" name="hobby">打豆豆:<input type="checkbox" name="hobby"></br> <input type="checkbox" checked="checked">我已阅读用户协议 </from>
显示如下:
注:
name和value是每个表单元素都有的属性值,主要给后台人员使用,
name表单元素的名字,要求单选按钮和复选框要有相同的name值,name通常用于区分不同的表单元素。
checked主要针对于单选和复选按钮,主要作用是一打开页面就可以默认选中某个表单元素。
举例:
<input type="submit" name="submit" value="注册"> <br> <input type="reset" value="重置信息">//将已经填写的表单恢复到最初状态
显示如下:
注意button按钮和submit/reset/file按钮的区别,button按钮并不会提交顺序!
举例:
上传头像:<input type="file" name="选择文件"><br>//弹出资源管理器 <input type="button" value="获取短信验证码"><br>//网页不会发生任何变化
显示如下:
label标签:
<label>
标签为input元素定义标注标签,用于绑定一个表单元素,当点击<label>
标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上来增加用户体验。
举例:
<label for="nan">男:</label> <input type="radio" name="sex" value="男" id="nan">
注:<label>
标签的for属性应当与相关元素的id属性相同。
select表单元素:
使用场景:在页面中,如果有多个选项让用户进行选择,并且想要节约页面空间时,我们可以选择<select>
标签控件定义下拉列表。
举例:
<form > 省份: <select> <option selected="selected">陕西</option> <option>北京</option> <option>上海</option> <option>广东</option> <option>江西</option> <option>山西</option> <option>湖北</option> </select> </form>
显示效果:
注意:
1:<select>中至少包含一对<option>
2:在<option>中定义selected="selected"时,当前项即为默认选中项
textarea文本域元素:
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
在表单元素中,<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该空间常用于留言板,评论等。
举例:
<form > 自我介绍: <textarea rows="3" cols="20"> 介绍一下自己吧! </textarea> </form>
显示效果:
通过rows[每行中的字符数]和cols[显示的行数]
属性,我们可以设置文本框的大小,但是在实际开发中我们并不会使用该属性来设置,都是使用CSS来改变大小