1.表单标签
1.表单标签:form标签
(1)表单标签是用来收集用户信息的,是一个容器.用来获取这个标签中相应的其他标签(input标签)的数据
(2)可以将收集到的数据,通过method对应的方式,去发送请求(发送给action对应的接口)
2.input标签:
单标签
a.type属性:决定input标签的样式
text(默认):文本输入框
password:密码输入框
radio:单选按钮
注意:input标签放在form外面同样可以使用,只是不能直接使用重置和提交功能
3.文本输入框
a.文本输入框
1.name属性:区分不同的input对应值
2.value属性:input标签中的值,相当于内容(文本输入框中输入的内容就是value的值)
提交input的数据给服务器的时候,是以name值=value值来提交的
3.placeholder属性:占位符(输入框的提示信息)
4.maxlength属性:约束输入框能输入的字符的最大个数
b.密码输入框(password):
注意:value值是输入框中输入的内容
c.单选按钮:(radio)
注意:
1.value值:设置为这个按钮选中提交对应的值
2.name值:如果多个按钮只能选中一个,那么这些按钮对应name值必须一致
3.checked属性:设置默认选中
4.一组(name值一样)单选按钮在提交的时候只提交被选中的按钮的name和value值
d.复选按钮:(checkbox)
注意:
1.name值:同一组的数据对应name值一样
e.普通按钮:(button)
value值:按钮上提示的内容
f.提交按钮(submit)
自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的接口
g.重置按钮
将当前form标签中的input标签的值回到初始状态
h.文件域:(file)
2.下拉,多行文本,按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
下拉和多行文本域可以放在form标签中用于收集信息
1.下拉菜单:select标签
一个select标签对应一个下拉菜单,菜单中的选项要通过option来列举
a.select属性:设置默认被选中的选项
2.多行文本域
-->
<select name="city">
<option value="成都">成都</option>
<option value="北京" selected="selected">北京</option>
<option value="南京">南京</option>
<option value="长沙">长沙</option>
</select>
<!--
2.对下拉菜单进行分组
可以通过optgroup标签对下拉菜单进行分组,通过label属性对分组进行命名
-->
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="德阳" selected="selected">德阳</option>
<option value="绵阳">绵阳</option>
<option value="广元">广元</option>
</optgroup>
<optgroup label="广东省">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="佛山">佛山</option>
<option value="中山">中山</option>
</optgroup>
</select>
<br />
<!--2.多行文本域:textarea标签
name:提交的数据对应的名字
rows:默认一屏的行数
cols:默认的列数
placeolder;设置占位符
disable:禁用
maxlength:约束能输入的最大的字符个数
-->
<textarea name="message" rows="10" cols="20" placeholder="消息"></textarea>
<!--3.按钮:button标签-->
<!--文字按钮-->
<button>注册</button>
<br />
<!--图片按钮-->
<button><img width="100" height="150" src="img/cat.jpg"/></button>
</body>
</html>
3.div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#aaa{
background: red;
margin-left: 100px;
}
</style>
</head>
<body>
<!--
1.div和span
div标签和span标签是空白标签,没有语义.
一般用来做分组(将网页分块)
div:块级标签(一行只能放一个标签)
span:行内标签(一行可以放多个标签)
2.块级标签和行内标签
块级标签:一个标签占一行
h1-h6,p,列表标签:(ul,dl,ol),table,hr
行内标签:一行可以放多个
img,a,input,select,textarea等
-->
<span id="">
abc
</span>
<span id="">
add
</span>
<div id="aaa">
<a href="">百度</a>
<a href="">谷歌</a>
</div>
<div id="">
<a href="">新浪</a>
</div>
</body>
</html>
4.css基础
CSS是web标准中的表现标准,用来规定网页上内容的布局和样式(CSS又叫样式表)
目前广泛使用的是CSS3
1.怎么写样式表(CSS),写在哪儿
a.内联样式表:
将样式写在标签的style属性中(每个可见标签都有style属性)
b.内部样式表
将样式表写在head标签中的style标签里面
c.外部样式表
将样式表写在一个CSS文件中,然后再head标签中通过link标签导入
注意:不管在什么情况下,内联样式表的优先级最高;内部和外部的优先级看谁后写,谁的优先级高
2.固定语法
选择器{属性1:属性值1;属性2:属性2..}
说明:
a.选择器:选择器的作用是用来确定后面样式到底是给哪个/哪几个标签写的
b.属性:属性是CSS中本来就支持和拥有的属性,属性的顺序可以随意写.
属性和属性值之间使用冒号连接
属性后面必须写分号
c.属性值:
(1)数值:如果数值是用来表示大小,后面必须跟单位px或者%
px--像素 %--百分比(前提是父标签对应的宽度或者高度确定的)
(2)颜色:
颜色对应的英语单词,
#加RGB对应的16进制值(一个颜色值对应2位16 进制),
直接RGB值:rgb(R,G,B),rgba(R,G,B,Alpha) Alpha:0-1
3.常见的属性
color:设置字体颜色
background-color:背景颜色
width:宽度
height:高度
font-size:字体大小
5.选择器
常用的选择器
一.选择器
1.标签/元素选择器:将标签名作为选择器,同时选中网页中所有同类型的标签
a{} --选中所有的a标签
2.id选择器:通过在id属性值前加#,就构成了id选择器.选中id等于对应的值的标签
id属性:所有的标签都有id属性,并且设置的值必须唯一
#p1{}--选中id值是p1的标签
3.class选择器:通过在class属性值钱加.,就构成了类选择器.选中class等于对应的值的标签
.c1{} --选中所有class值是c1的标签
4.群组选择器:多个选择器中间使用逗号隔开.选中所有的单独的选择器
a,p,#p1,c1{}--选中所有的a标签,p标签和所有id值是p1以及所有class值是c1的标签
5.包含选择器:多个选择器之间使用空格隔开.从前往后找,找到最后一个选择器
div .c1 p{}---选中div中class是c1的标签中的p标签
6.通配符:直接将作为选择器,选中当前页面中所有的标签
二.选择器的优先级:
通过不同的选择器选中了同一个标签,并且设置了同一个属性,谁的优先级高就谁有效.看谁的优先级高就看谁的权重值大
权重值是一样的情况下,谁后写,谁的优先级高
伪类选择器:0001
元素选择器:0001
class选择器:0010
id选择器:0100
群组选择器:直接看单独每一个权重
包含选择器:多个选择器的权重和
通配符:0001
注意:不管选择器的权重有多高,内联样式的优先级都是最高的
6.伪类选择器
前面的元素选择器,id选择器,class选择器,选中的都是标签.
伪类选择器是选中标签的某个状态
伪类选择器:选中某个标签的不同状态(一般使用与超链接和按钮等)
1.语法:-----标签:状态
标签:状态{}
说明:
a.状态:
link:初始状态(a标签对应的初始状态是没有访问成功过对应状态)
visited:访问后的状态(使用a标签)
hover:鼠标悬停在标签上对应的状态
active:被激活对应的状态(一般用于超链接)
focus:成为焦点(在输入框中用得比较多)
b.标签:可以是通过不同的选择器去选中
2.爱恨原则:LoVeHAte
如果想要给一个标签同时给link\visit\hover\active中的两个或者两个以上的状态设置样式,必须遵守爱恨原则
(如果不按爱恨原则可能会出现问题,如果按照爱恨原则肯定不会出现问题)
