今日所学:
列表标签
无序列表
<ul><li></li></ul>ul标签包含li标签
无序列表的各个列表项没有顺序级别之分,是并列关系
ul标签只能包含li标签,直接在ul标签加入文字和别的标签不允许
li标签相当于一个容器,里面可以存放所有元素
无序列表会带有自己的样式属性,实际应用中会将默认的样式用css清除掉
有序列表
<ol><li></li></ol>ol标签包含li标签
有序列表的各个列表项有顺序级别之分
ol签只能包含li标签,直接在ol标签加入文字和别的标签不允许
li标签相当于一个容器,里面可以存放所有元素
有序列表会带有自己的样式属性,实际应用中会将默认的样式用css清除掉
自定义列表
<dl><dt></dt><dd></dd></dl>dl标签包含dt和dd
dl标签只能包含dt和dd
一般一个dl里面只能包含一个dt,一个dt可以对应多个dd
表单标签
使用表单来收集用户信息
表单域
就是一个包含了表单元素的区域,在html中使用form标签来定义表单域,它可以将用户提交的信息提交给服务器
常用属性属性值
action=“url地址”(用于指定接受并且处理表单数据的服务器url地址)
method=“get/post”(用于设置表单数据提交方式)
name=“表单名称”(用于指定表单名字,区分同页面多个表单)
表单控件
表单元素就是允许用户在表单中输入或选择内容的控件
input输入表单元素
type
text文本输入框
button点击按钮
password输入密码,内容会被加密
radio单选按钮,后面要写内容,同一组按钮要有相同name值
checkbox复选框,后面要写内容
file提交文件
submit提交按钮
reset重置按钮
value默认值
checked首次加载默认选中
maxlength最多输入几个字符
name定义input名称
总结:
name和value是每个表单都有的属性,主要给后台人员使用
checked主要针对单选框和复选框,作用是打开页面后默认选择某个表单元素
name给表单元素起名,一般我们要求一组单选按钮或复选按钮name相同
label
label标签用于绑定一个表单元素,当点击label标签内的文本时,浏览器自动聚焦点转到对应表单元素上
label标签for属性要和相关元素id属性对应值相同
select下拉选择
select标签中应该至少包含一个option
在option中定义selected时,就可以将当前标签设置为默认选项
textarea表单元素
当用户输入内容较多时,就不能用文本框,需要使用文本域来让用户进行输入,常见于留言板、评论区
cols代表每行字符数,rows代表显示的行数,一般不在这里设置,在css统一调试
CSS基础选择器
标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按照标签名称进行分类,为页面中某一类标签来指定样式
能快速将页面中同类的标签统一设置
不能设计有差异化的样式,只能选中符合条件的所有同类标签
类选择器
使用“.”来进行定义,使用class进行调用
为了差异化选择不同的标签,选择一个或者多个标签都可以
类选择器使用“.”进行标识,后面紧跟类名
如果类名比较长,可以使用横线来将类名进行连接
不要使用纯数字、中文等内容进行类的命名,尽量使用英文字母表示
命名要有意义,一看就懂
多类名使用:将样式里面的多个类名同时放在class属性中调用即可,多个类名之间要用空格隔开
节省CSS代码,统一修改样式方便
给标签设置样式更加自由,想用那几个类就调用那几个类
id选择器
id是唯一标识,所以id选择器主要是为了唯一的html标签指定样式,虽然同一id可以调用多次,但是不允许这样使用
同一id选择器在一个页面只允许调用一次
id选择器经常和js一起使用
通配符选择器
在css,通配符选择器使用“*”来定义,它表示选择页面所有元素
通配符选择器不需要调用
只有特属情况才用,比如:给所有元素清楚本身所带样式
|