web前端2020/1/20学习笔记

一,列表和表单 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属性还有别的属性
常用属性:

在这里插入图片描述

举例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 表单</title> </head> <body> 用户名: <input type="text"><br/> 密码: <input type="password"> </body> </html> 常用属性值介绍(重点)
(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> 运行结果:

在这里插入图片描述


在这里插入图片描述

小结:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzszzy.html