01.表单标签
02.表单标签(下拉和多行文本域)
03.空白标签
04.认识css
05.css选择器
06.伪类选择器
01.表单标签
表单标签
1.可以提交表单中收集的信息
- action属性：设置提交信息的位置
- method属性：提交方式 - post/get
input标签(单标签) --- text(文本输入框)
1.是表单标签
2.type属性
text -- 普通的文本输入框
3.name属性：必须设置(a.用于提交信息)
4.value属性：标签内容
5.placeholder属性：占位符(提示信息)
6.maxlenth：输入框最多能输入的字符个数
7.readonly：readonly - 输入框只读(不能往里面写内容)
<!--input标签 - 密码输入框
1.type属性：password --- 输入的值是密文显示
-->
<input type="password" name="password" value="" placeholder="密码"/>
<!--input标签：单选按钮
1.type属性：radio
2.name属性：同一类型对应的name值必须一样
3.value：设置选中按钮提交的值
4.checked：设置为checked，让按钮默认处于选中状态
-->
<input type="radio" name="sex" id="" value="boy" checked="checked"/><span id="">男</span>
<input type="radio" name="sex" id="" value="girl" /><span id="">女</span>
<!--
input标签：多选按钮
1.type：checkbox
2.name：同一类型 对应的name值必须一样
-->
<input type="checkbox" name="interest" id="" value="篮球" /><span id="">篮球</span>
<input type="checkbox" name="interest" id="" value="足球" /><span id="">足球</span>
<input type="checkbox" name="interest" id="" value="看电影" /><span id="">看电影</span>
<!--input标签：普通按钮-->
<input type="button" name="" id="" value="登录" />
<!--input标签：重置按钮
让当前所在的form中的所有表单相关标签对应的值，回到初始状态
-->
<input type="reset" name="" id="" value="重置" />
<!--input标签：文件域-->
<input type="file" name="icon" id="icon" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
02.表单标签(下拉和多行文本域)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="post">
<!--1.下拉菜单-->
<select name="city">
<option value="">成都</option>
<option value="">重庆</option>
<option value="">北京</option>
<option value="">大连</option>
<!--selected：设置默认选中-->
<option value="" selected="selected">青岛</option>
</select>
<!--2.多行文本域(多行文本输入框)-->
<textarea name="message" rows="5" cols="10" placeholder="请输入意见..." maxlength="200"></textarea>
</form>
</body>
</html>
03.空白标签
HTML中的标签分为两大类：
-
块级标签：一行只能有一个(不管标签的宽度是多少)
h1-h6，p，hr，列表标签，表格整体(table)，form -
行内标签：一行可以有多个
a，img，input，select(下拉列表),textarea -
1.div标签，是空白标签，没有任何特殊意义(无语义标签)
(块级标签) -
2.span标签，是空白标签，没有任何特殊的意义(无语义标签)
(行内标签)
04.认识css
1.什么是css
CSS是web标准中的表现标准，用设置网页上的标签的样式(长什么样，在哪儿)
css代码或者css文件，我们叫样式表
目前使用的是css3。
2.写在哪
内联样式表：将css代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签来关联
优先级：内联的优先级最高，内部和外部没有绝对的优先，主要看同一个属性谁最后赋值，谁就有效
3.怎么写
选择器{属性:属性值；属性：属性值}
选择器：用来选中需要设置样式的标签
属性：css属性(css2中的属性有两百多个)
属性值：如果属性值是数字，表示的是大小要在后面加一个px
注意：每个属性之间要使用分号隔开，否则属性无效
- 补充属性：color - 设置字体颜色 background-color：设置背景颜色 width：标签的宽度 height：标签的高度
05.css选择器
- 元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
- 元素选择器(标签选择器)：标签名
-
2.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一 -
3.class选择器：.class属性值
每个标签都有一个class属性， -
4.通配符：*
选中所有的标签 -
5.层级选择器：选择器1 选择器2...
-
6.群组选择器：选择器1，选择器，....
补充:
css中的颜色值：
1.颜色英语单词
2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)
3.rgb值：rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1
06.伪类选择器
选择器：状态
- link：超链接的初始状态 -- 一次都没有访问成功的时候的状态
- visited：超链接访问后的状态 -- 已经访问成功的状态
- hover：鼠标悬停在标签上对应的状态 --
- active：鼠标按住的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先有爱才有恨)
LoVe HAte
网友评论