一、表单标签
1.表单标签：form标签
- 表单标签是用来收集用户信息的。是一个容器，用来获取这个标签中相应的其他标签(input标签)属性
- 可以将收集到的数据，通过method对应的方式，去发送请求(发送给action对应的接口)
2.input标签，单标签
- type属性:决定input标签的样式
text(默认)：文本输入框
password：密码输入框
radio：单项选择框
注意：input标签放在form外边同样可以使用，只是不能直接使用重置和提交功能
a.文本输入框(text)
- 1.name属性：区分不同的input对应值，对标签的显示没有影响
- 2.value属性：input标签中的值
提交input中的数据给服务器的时候，是以name值=value值来提交的 - 3.placeholder属性：占位符(输入框的提升信息)
- 4.maxlength属性：约束输入框能输入的字符的最大个数
b.密码输入框(password)
注意：value值是输入框中输入的内容
c.单选按钮(radio)
- 1.value值：设置为这个按钮选中提交对应的值
- 2.name值：如果多个按钮只能选中一个，那么这些按钮对应的name值必须一致
- 3.一组(name值一样)单选按钮在提交的时候只提交被选中的按钮的name和value值
- 4.checked属性：设置默认选中
d.复选按钮(checkbox)
- 可以多项选择
e.普通按钮(button)
- value值：按钮上显示的内容
f.提交按钮(submit)
- 自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的借口
g.重置按钮(reset)
- 将当前form标签中的input标签的值回到出生状态
h.文件域(file)
- 可以选择打开文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表单标签：form标签
表单标签是用来收集用户信息的。是一个容器，用来获取这个标签中相应的其他标签(input标签)属性
可以将收集到的数据，通过method对应的方式，去发送请求(发送给action对应的接口)
-->
<!--
2.input标签
单标签
a.type属性：决定input标签的样式
text(默认)：文本输入框
password：密码输入框
radio：单项选择框
注意：input标签放在form外边同样可以使用，只是不能直接使用重置和提交功能
-->
<form method="get" action="">
<!--a.文本输入框
1.name属性：区分不同的input对应值，对标签的显示没有影响
2.value属性：input标签中的值
提交input中的数据给服务器的时候，是以name值=value值来提交的
3.placeholder属性：占位符(输入框的提升信息)
4.maxlength属性：约束输入框能输入的字符的最大个数
-->
<!--<span>账号:</span>-->
<input type="text" name="username" value="" placeholder="账号" />
<!--<span>手机号:</span>-->
<input type="text" name="tel" value="" placeholder="手机号" />
<!--b.密码输入框：(password)
注意：value值是输入框中输入的内容
-->
<input type="password" name="password" id="" value="" placeholder="密码" />
<br />
<!--c.单选按钮：(radio)
注意：
1.value值：设置为这个按钮选中提交对应的值
2.name值：如果多个按钮只能选中一个，那么这些按钮对应的name值必须一致
3.一组(name值一样)单选按钮在提交的时候只提交被选中的按钮的name和value值
4.checked属性：设置默认选中
-->
<input type="radio" name="sex" value="boy" checked=""/ <span>男</span>
<input type="radio" name="sex" value="girl" /><span>女</span>
<br />
<input type="radio" name="marry" value="已婚" /><span>已婚</span>
<input type="radio" name="marry" value="未婚" /><span>未婚</span>
<br />
<!--d.复选按钮:(checkbox)
可以多项选择
-->
<input type="checkbox" / name="hobby" value="basketball"><span>篮球</span>
<input type="checkbox" / name="hobby" value="pingpong"><span>乒乓球</span>
<input type="checkbox" / name="hobby" value="volleyball"><span>排球</span>
<input type="checkbox" / name="hobby" value="soccer"><span>足球</span>
<br />
<!--e.普通按钮:(button)
value值：按钮上显示的内容
-->
<input type="button" name="" id="" value="登陆" />
<!--f.提交按钮:(submit
自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的借口
)-->
<input type="submit" name="" id="" value="提交" />
<!--g.重置按钮
将当前form标签中的input标签的值回到出生状态
-->
<input type="reset" name="" id="" value="重置" />
<!--h.文件域:(file)
可以选择打开文件
-->
<input type="file" name="icon" value="" />
</form>
</body>
</html>
二、下拉菜单、多行文本、按钮
下拉和多行文本域可以放在form标签中用于收集信息
1.下拉菜单：select标签
- 一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举
- selected属性：设置默认被选中的选项
2.对下拉菜单进行分组
- 可以通过optgroup标签对下拉菜单进行分组，通过label属性对分组进行命名
3.多行文本域(textarea)标签
- name：提交的数据对应的名字
- rows：默认一屏的行数
- cols：默认的列数
- placeholder：设置占位符
- disable：禁用
- maxlength：约束能输入的最大字符个数
4.按钮(button标签)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
下拉和多行文本域可以放在form标签中用于收集信息
1.下拉菜单:select标签
一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举
a.selected属性：设置默认被选中的选项
-->
<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="德阳">德阳</option>
<option value="乐山">乐山</option>
<option value="眉山">眉山</option>
<option value="自贡">自贡</option>
<option value="南充">南充</option>
</optgroup>
<optgroup label="广东省">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="中山">中山</option>
<option value="汕头">汕头</option>
</optgroup>
</select>
<!--2.多行文本域:textrarea标签
name：提交的数据对应的名字
rows：默认一屏的行数
cols：默认的列数
placeholder：设置占位符
disable：禁用
maxlength：约束能输入的最大字符个数
-->
<textarea name="message" rows="8" cols="10" placeholder="消息" disabled="disabled" maxlength="200"></textarea>
<!--3.按钮：button标签-->
<!--文字按钮-->
<button>注册</button>
<!--图片按钮-->
<button><img src="img/1234.jpg"/></button>
</body>
三、div和span
- div和span标签是空白标签，没有语义。
- 一般弄来做分组(将网页分块)
- div：块级标签(一行只能放一个标签)
- span：行内标签(一行可以放多个标签)
1.块级标签和行内标签
块级标签：一个标签占一行
- h1 - h6, p , 列表标签(ul\ol\dl), table , hr 等
行内标签：一行可以放多个行内标签
- img, a , input, select ,textarea等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span标签是空白标签，没有语义。
一般弄来做分组(将网页分块)
div：块级标签(一行只能放一个标签)
span：行内标签(一行可以放多个标签)
2.块级标签和行内标签
块级标签：一个标签占一行
h1 - h6, p, 列表标签(ul\ol\dl), table, hr等
行内标签：一行可以放多个行内标签
img, a, input, select, textarea等
-->
<span id="">
abc
</span>
<span id="">
abd
</span>
<div id="">
<a target="_self" href="http://www.baidu.com">百度</a>
<a target="_self" href="http://www.sina.com">新浪</a>
</div>
<div id="">
<a href="http://www.google.com">谷歌</a>
<a href="http://www.qq.com">腾讯</a>
</div>
</body>
</html>
四、CSS基础
- CSS(样式表)是web标准中的表现标准，用来规定网页内容的布局和样式
- 目前广泛使用的是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) R,G,B的取值范围是0-255 a-透明度
3.常见的属性
- color：设置字体颜色
- background-color：背景颜色
- width：宽度
- height：高度
- font-size：字体大小
<!--
CSS(样式表)是web标准中的表现标准，用来规定网页内容的布局和样式
目前广泛使用的是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) R,G,B的取值范围是0-255
3.常见的属性
color：设置字体颜色
background-color：背景颜色
width：宽度
height：高度
font-size：字体大小
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--外联样式表-->
<link rel="stylesheet" type="text/css" href="css/04CSS基础.css"/>
<!--内部样式表-->
<style type="text/css">
h1{
background-color: skyblue;
color: saddlebrown;
}
a{
font-size: 20px;
}
</style>
</head>
<body>
<!--内联样式表-->
<p style="background-color: cornflowerblue ; color: yellow;">样式表的内容</p>
<p style="font-size: 30px;">样式表的语法</p>
<h1>我是标题1</h1>
<h1>我是标题2</h1>
<a href="">百度一下</a>
<img src="img/1234.jpg"/>
</body>
</html>
五、选择器
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.通配符：直接将作为选择器。选中当前页面中所有的标签
7.选择器的优先级
通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁优先级高谁有效，看谁的优先级高就看谁的权重大
权重值是一样的情况下，谁后写，谁的优先级高
- 伪类选择器：0001
- 元素：0001
- class：0010
- id: 0100
- 群组：直接看单独每一个权重
- 包含：多个选择器的权重和
- 通配符：0001
注意：不管选择器的权重有多高，内联样式的优先级都是最高的！
<!--常用的选择器
一、选择器
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
注意：不管选择器的权重有多高，内联样式的优先级都是最高的！
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：在这个标签中写的代码是CSS代码*/
/*1.元素选择器*/
a{
color: salmon;
}
/*id选择器*/
#a1{
background-color: yellow;
}
/*class选择器*/
.c1{
color: skyblue;
}
/*群组选择器*/
a,p{
font-size: 50px;
}
</style>
</head>
<body>
<a class="c1" href="">百度一下</a>
<div id="">
<a id="a1" href="">百度</a>
<div id="">
<div id="">
<a id="a1" href="">百度云</a>
</div>
</div>
</div>
<p id="a1">腾讯一下</p>
<h1 class="c1">我是标题1</h1>
</body>
</html>
六、伪类选择器
- 前面的元素选择器、id选择器、class选择器选中的都是标签。
- 伪类选择器是选中标签的某个状态
- 伪类选择器：选中某个标签的不同状态(一般使用于超链接和按钮)
1语法：
- 标签：状态{}
说明：
- a.状态：
link：初始状态(a标签对应的初始状态是没有访问成功过对应状态)
visited：访问后的状态(使用a标签)
hover：鼠标悬停在标签上对应的状态
active：被激活对应的状态(一般用于超链接) --- 鼠标按下的时候对应的状态
focus：成为焦点(在输入框中用的比较多) - b.标签：可以是通过不同的选择器去选中
2.爱恨原则：LoVeHAte - 先爱后很
如果想要给你一个标签同时给link\visited\hover\active中的两个或者两个以上的状态设置样式，必须遵守爱恨原则
(如果不按照规则可能会出现问题，如果按照肯定不会出问题)
<!--
前面的元素选择器、id选择器、class选择器选中的都是标签。
伪类选择器是选中标签的某个状态
伪类选择器：选中某个标签的不同状态(一般使用于超链接和按钮)
1语法：
标签：状态{}
说明：
a.状态：
link：初始状态(a标签对应的初始状态是没有访问成功过对应状态)
visited：访问后的状态(使用a标签)
hover：鼠标悬停在标签上对应的状态
active：被激活对应的状态(一般用于超链接) --- 鼠标按下的时候对应的状态
focus：成为焦点(在输入框中用的比较多)
b.标签：可以是通过不同的选择器去选中
2.爱恨原则：LoVeHAte - 先爱后很
如果想要给你一个标签同时给link\visited\hover\active中的两个或者两个以上的状态设置样式，必须遵守爱恨原则
(如果不按照规则可能会出现问题，如果按照肯定不会出问题)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color:gray;
}
a:visited{
color: seagreen;
}
a:hover{
color: red;
font-size: 30px;
}
a:active{
color:yellow;
}
input:focus{
outline: none;
}
</style>
</head>
<body>
<a href="http://www.qq.com">腾讯</a>
<input type="text" name="" id="" value="" width=""/>
</body>
</html>
网友评论