一,列表和表单
1,列表标签(重点)
1.1无序列表ul(重点)
无序列表的各个列表项之间没有顺序级别之分,是并列的
其基本语法格式如下:
< ul>
< li>列表项1< /li>
< li>列表项2< /li>
< li>列表项3< /li>
< li>...< /li>
< /ul>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>水果</li>
<li>蔬菜</li>
<li>腊肉</li>
<li>干果</li>
</ul>
</body>
</html>
1.2有序列表ol(了解)
格式:< ol>
< li>列表项1< /li>
< li>列表项2< /li>
< li>列表项3< /li>
< li>列表项4< /li>
< li>...< /li>
< /ol>
例子:
<h1>有序列表</h1>
<ol>
<li>美国</li>
<li>中国</li>
<li>日本</li>
<li>德国</li>
</ol>
1.3自定义标签:
定义列表常常用于对术语或名词进行描述和解释,定义列表的列表项前没有任何项目符号,举例:
<h1>自定义列表</h1>
<dl>
<dt>城市</dt>
<dd>重庆</dd>
<dd>成都</dd>
<dd>北京</dd>
<dd>广州</dd>
<dd>杭州</dd>
</dl>
1.4列表总结
标签名
定义
说明
< ul>< /ul>
无序标签
里面只能包含li没有顺序,我们以后布局中最常用的列表
< ol>< /ol>
有序标签
里面只能包含li,有顺序,使用情况较少
< dl>< /dl>
自定义列表
里面有两个兄弟,dt和dd
2,表单标签(掌握)
2.1 input控件(重点)
语法:< input type="属性值" value="你好" >
(1)input输入的意思
(2)< input/>单标签
(3)type属性设置不同的属性值用来指定不同的控件类型
(4)除了type属性还有别的属性
常用属性:
(1)radio单选框,表示只能选择其中一个
(2)checkbox复选框,表示可以多选
(3)举例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 表单</title> </head> <body> 用户名: <input type="text"><br/> 密码: <input type="password"> 性别: 男<input type="radio" /> 女<input type="radio" /><br/> 爱好 打篮球<input type="checkbox" /> 玩耍<input type="checkbox" /> 打羽毛球<input type="checkbox" /> 踢足球<input type="checkbox" /> </body> </html> 运行结果: (4)举例(列出所用属性的用法) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单属性</title> </head> <body> 用户名: <input type="text" value="请输入用户名" /><br/> 密码: <input type="password" /><br/> 性别: 男<input type="radio" /> 女<input type="radio" /> 未知<input type="radio" checked="checked"><br/> 爱好: 打篮球<input type="checkbox" checked="checked"> 踢足球<input type="checkbox"> 玩泥巴<input type="checkbox"><br/> <input type="button" value="button"> <input type="submit" > <input type="reset" ><br/> <input type="image" src="http://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579522310728&di=5042e889c497070d55693fe057e3f270&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D2870245419%2C560778467%26fm%3D214%26gp%3D0.jpg"><br/> <input type="file"><br/> </body> </html> 运行结果:
小结: