列表
无序列表
无序列表的列表项是没有顺序的。
默认情况下,无序列表的列表项符号是●,不过可以通过type属性来改变其样式。
语法:
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
ul,即unordered list(无序列表)。
li,即list(列表项)。
在该语法中,使用<ul></ul>标签表示一个无序列表的开始和结束,<li>表示这是一个列表项。一个无序列表可以包含多个列表项。ul标签和li标签也是配合一起使用,不可以单独使用,而且ul标签的子标签也只能是li标签,不能是其他标签。
type属性:
有序列表
有序列表中的各个列表项是有顺序的。有序列表从<ol>开始,到</ol>结束。
有序列表的列表项是有先后顺序的,一般采用数字或字母作为顺序,默认是采用数字顺序。
语法:
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
ol,即ordered list(有序列表);
li,即list(列表项);
type属性:
自定义列表:
自定义列表由两部分组成:名词和描述。
语法:
<dl>
<dt>名词</dt>
<dd>描述</dd>
……
</dl>
dl即definition list(定义列表);dt即definition term(定义名词);dd即definition description(定义描述)。
在该语法中,<dl>标记和</dl>标记分别定义了定义列表的开始和结束,dt标签用于添加要解释的名词,而dd标签用于添加该名词的具体解释。
表单标签:
HTML 表单用于收集不同类型的用户输入。
由表单域(<form> )表单控件(元素),提示信息组成。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
1.表单使用表单标签 <form> 来设置:
<form action="url地址" method="提交方式" name="表单域名称">
input 元素.
</form>
2.表单元素:
允许用户在表单中输入或选择的控件。
<1>.input(单表签)
输入类型是由类型属性(type)定义的。
text属性:
语法:
<input type="text" />
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
姓名:<input type="text" />
</form>
</body>
</html>
属性:
三个属性没有顺序之分。
value:默认文本框内显示内容,如果没有设置则为空。
size:用来设置单行文本框的长度,不过在实际开发中,我们一般不会用到这个属性,而是使用 CSS来控制。
maxlength:可限制最多输入的字符。超出则无法再输入。
密码文本框:
语法:
<input type="password" />
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
姓名:<input type="text" /><br>
密码:<input type="password" />
</form>
</body>
</html>
会有字符遮掩的效果。
属性与text一致,有,size,maxlength,value。用法类似。
单选框:
语法:
<input type="radio" name="组名" value="取值" />
name属性表示单选按钮所在的组名(同一种类型组名最好一致,否则达不到单选的效果),而value表示单选按钮的取值,这两个属性必须要设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
性别:
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</form>
</body>
</html>
可实现单选效果。
若要默认为第一个,只需增加checked属性,则会默认选择第一个。
<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女" />女
以下两种写法效果一致。
<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="男" checked="checked" />男
另外:
若要点击文本就可以选择选项,可以增加<label>标签。
<label><input type="radio" name="sex" value="男" />男</label>
<label><input type="radio" name="sex" value="女" />女</label>
复选框:
复选框也是使用input标签来实现的,其中type属性取值为“checkbox”。
单选框只能选择一项,而复选框可以选择多项。
语法:
<input type="checkbox" name="组名" value="取值" />
name属性表示复选框所在的组名,而value表示复选框的取值。
跟单选框一样,这两个属性也必须要设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form >
你喜欢的水果:<br/>
<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜
<input type="checkbox" name="fruit" value="李子"/>李子
</form>
</body>
</html>
可同时选择多个;
同样的,checked="checked"为浏览器默认选项。
按钮:
·button:普通按钮一般情况下都是配合JavaScript来进行各种操作的。
语法:
<input type="button" value="取值" />
value的取值就是按钮上的文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form >
<input type="button" value="你好"/>
</form>
</body>
</html>
提交按钮(submit):
提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。
语法:
<input type="submit" value="取值" />
value的取值就是按钮上的文字。
重置按钮(reset):
<input type="reset" value="取值" />
当我们在文本框中输入内容,然后按下重置按钮,会发现内容被清空了。这就是重置按钮的功能。
不过要注意一点:重置按钮只能清空它“所在form标签”内表单中的内容,对于当前所在form标签之外的表单清除是无效的。
文件上传(file):
文件上传也是使用input标签来实现的,其中type属性取值为file。
<input type="file" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form ">
<input type="file"/>
</form>
</body>
</html>
<2>.textarea
单行文本框只能输入一行文本,而多行文本框却可以输入多行文本。
在HTML中,多行文本框使用的是textarea标签,而不是input标签。
语法:
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form ">
个人简介:<br/>
<textarea rows="5" cols="20">请介绍一下你自己</textarea>
</form>
</body>
</html>
<3>.select 下拉表单元素
语法:
select>
<option>选项内容</option>
……
<option>选项内容</option>
</select>
select属性:
size:设置下拉列表显示几个列表项,取值为整数(将size取值为1、2、3时,对Chrome浏览器无效。这是因为Chrome浏览器最低是4个选项,我们只能选取4及以上数字。)
option属性:
value用来配合js使用;
selected:定义selected="selected"时,选中极为默认项。