一、标杆标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单标签
专门来收集用户信息
1. 可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式 --POST/get
-->
<form action="" method="get">
<!--input标签
1.是表单标签
2.type属性：
text值：普通的文本输入框
password值：密码文字输入框
3.name属性：传值时很重要，
4.value属性：标签内容
5.placeholder属性：提示信息，占位符
6.maxlength:输入框中输入字符的个数
7.readonly属性:值为readonly只读内容，不能编辑。
-->
用户名：<input type="text" name="username" id="" readonly="readonly" value="输入用户名" maxlength="20" placeholder="请输入用户名" /><br />
<!--type属性：password----输入的值是密文显示-->
密 码：<input type="password" name="password" placeholder="输入密码"/><br />
<!--单选按钮
type属性：radio
name属性：统一类型的对应的name值必须一样
value属性：
checke属性：设置按钮默认处于选中状态。
-->
<input type="radio" name="sex" id="" value="女" checked="checked"/><span >女</span>
<input type="radio" name="sex" id="" value="男" /><span >男</span>
<!--type属性：submit提交按钮值-->
<input type="submit" name="" id="" value="提交" />
<!--input标签：多选按钮
1.type属性：checkbox
2.name：同一类型对应的name值必须一样
3.value:设置选中按钮提交的值
4.checked：设置checked,让按钮处于默认选中
-->
<input type="checkbox" name="interest" id="" value="篮球" /><span >篮球</span>
<input type="checkbox" name="interest" id="" value="乒乓球" /><span >乒乓球</span>
<input type="checkbox" name="interest" id="" value="羽毛球" /><span >羽毛球</span>
<input type="checkbox" name="interest" id="" value="游泳" /><span >游泳</span>
<input type="checkbox" name="interest" id="" value="爬山" /><span >爬山</span>
<!--input标签：type属性：值为button，普通按钮-->
<input type="button" name="" id="" value="登录" /><br />
<!--input标签：重置标签
将当前所在的from中的所有表单相关标签对应的值，回到最初的状态-->
<input type="reset" name="" id="" value="重置" />
<!--input标签：type属性;file值，文件选择器-->
<input type="file" name="" id="" value="文件上传" />
</form>
</body>
</html>
二、下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="get">
<!--1.下拉菜单-->
<select name="city" size="3">
<option value="">成都</option>
<option value="">重庆</option>
<option value="" selected="selected">北京</option> <!--selected="selected"默认选中-->
<option value="">大连</option>
<option value="">青岛</option>
</select>
<!--2.多行文本输入域（多行文本输入框）-->
<textarea name="textarea" rows="20" cols="30" placeholder="请输入你申请的理由500字内" maxlength="300"></textarea>
<!--3.表单分组：fieldset：
一个fieldset标签对应一个分组
legend标签：设置分组名-->
<fieldset>
<form action="" method="get">
<input type="text" value="username"/>
<input type="reset" value="重置2" />
</form>
</fieldset>
<fieldset>
<form action="" method="get">
<input type="text" value="username"/>
<input type="reset" value="重置2" />
</form>
</fieldset>
</form>
</body>
</html>
三、空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>空白标签</title>
</head>
<body>
<!--html中的标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度什么样的）
div，h1-h6,p,hr,dl,dd,li,列表相关的标签都是块标签。
table，form，
2.行内标签：一行可以有多个标签，没有任何特殊的意义（无语义标签）
a,img,input，select（下拉列表），textarea（多行输入）
-->
<div style="background-color: red;">哈哈哈</div>
<span style="background-color: yellow;">
一生所爱
</span>
</body>
</html>
四、认识CSS
<!--
1.什么是CSS
CSS是web标准中的表现标准，用来设置网页上的标签的样式（长什么样，位置）
CSS代码或者CSS文件，我们叫样式表。
目前使用CSS3版本
2.写在哪儿
a.内联样式表：将代码写标签内部的style属性中。（优先级最高）
b.内部样式表：写在head标签中，用style标签来装CSS代码。
c.外部样式表：新建一个CSS文件，通过head中的link标签来关联
优先级：
内联：优先级最高
内部和外部：是那个最后赋值那个就优先
3.怎么写
选择器{属性：属性值；属性：属性值}
选择器：用来选择中需要设置样式的标签
属性：CSS属性（CSS2中的属性有两百多个属性）
属性值：如果是数字，表示的大小要在后面加px.否则无效。
注意：没事属性之间用分号隔开，否则属性无效。
补充属性：color：设置字体颜色，background-color：设置背景颜色 whith：标签宽度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>认识CSS</title>
<style type="text/css">
/*写样式的地方*/
</style>
<!--关联外部文件样式表-->
<link rel="stylesheet" type="text/css" href="css/CSS.css"/>
</head>
<body>
<!--style 属性：每个标签都有
内联的写法
-->
<div style="color: red;">
我是div
</div>
</body>
</html>
五、CSS选择器
<!--
0.元素选择器（标签选择器）：标签名
选中所有的标签名对应的标签
1.Id选择器：#id属性值
每个标签都有一个id属性，整个HTML中，id是唯一的。
CSS中的颜色值：
1.颜色英语单词
2.十六进制颜色值；0-255,00-ff(#ff0000-红色)
3.rgb值：rgb(红，绿，蓝) rgba(红，绿，蓝，透明度)-透明度0-1
2.class选择器：.class属性值
每个标签都有一个class，但是class的值不用是唯一的
3.通配符 *
选中所有的标签
4.层级选择器：
选择器1 选择器2...
5.群组选择器：同时选中所有,用逗号隔开。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器学习</title>
<style type="text/css">
*{
font-size:20px ;
}
#a2,#a1{width: 200px;
background-color: #FFFF00;
}
/*层级选择器*/
all_a a{
color: pink;
}
div div a{
text-decoration: underline;
}
/*群组选择器*/
h1,span{
}
</style>
</head>
<body>
<div>
<div id="">
<p>一会就走</p>
</div>
<div id="all_a">
<a href="">a1</a>
<a href="">A@</a>
<a href="">A#</a>
</div>
</div>
<a id="a1">我是a1</a>
<p id="a2">我是p标签</p>
<div id="">
我是div
</div>
</body>
</html>
六、伪类选择器
<!--
伪类选择器的语法：
1. 选择器：状态
link：超链接对应的是初始状态
visited：超链接访问后的状态
hover：鼠标悬停在标签上的时候对应的状态
active：鼠标按住时的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，
要遵守爱恨原则（先爱后恨）
LOVe HAte
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*同时设置a标签的所有状态*/
a{
color:red;
}
a:link{
color: greenyellow;
}
a:visited{
color: yellow;
}
a:hover{
color: blue;
font-size: 50px;
}
#b2{
width: 200px;
height: 30px;
background-color: chartreuse;
}
#b2:hover{
width: 600px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<a href="http://taobao.com">百度一下</a>
<div id="b2">
</div>
</body>
</html>
网友评论