day22-HTML和CSS
2018-08-14 本文已影响0人
七一欧
1.表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--表单标签
1.可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式 -post/get
-->
<form action="" method="post">
<!--input标签 （单标签） ---text（文本输入框）
1.是表单标签
2.type属性：text - 普通的文本输入框
3.name属性：必须设置（用于提交信息）
4.value属性：标签内容
5.placeholder属性：占位符（提示信息）
6.maxlength属性：输入框最多能输入的字符个数
7.readonly属性：输入框只读（不能往里面输入内容）
-->
<input type="text" name="" id="" placeholder="请输入手机号"/>
<!--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="boy" value="" checked="checked"/><span >男</span>
<input type="radio" name="sex" id="girl" value="" /><span >女</span>
<!--input标签：多选按钮
1.type：checkbox
2.name：同一类型对应的name值必须一样
-->
<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
disabled：不能被点击
-->
<input type="button" name="" id="" value="登录" />
<!--input标签：重置按钮
type属性:reset
将当前所在的form中的所有表单相关的标签对应的值，回到最初的状态
-->
<input type="reset" name="" id="" value="重置" />
<!--input标签：文件选择器
type属性:file
-->
<input type="file" name="" id="" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
02-表单标签(下拉和多行文本域)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="post">
<!--fildset：
一个fildset标签对应一个表单分组
legend标签：设置分组名
-->
<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="username" id="username" value="" placeholder="用户信息"/>
<input type="password" name="password" id="password" value="" placeholder="密码"/>
<input type="reset" name="" id="" value="重置" />
</fieldset>
<fieldset id="">
<legend>其他信息</legend>
<!--下拉菜单-->
<select name="city">
<option value="">成都</option>
<!--selected：设置默认选中-->
<option value="" selected="selected">重庆</option>
<option value="">北京</option>
<option value="">大连</option>
<option value="">青岛</option>
</select>
<!--多行文本域(多行文本输入框)-->
<textarea name="message" rows="5" cols="30" placeholder="意见或建议" maxlength="200"></textarea>
</fieldset>
</form>
</body>
</html>
03-空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
html中标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度是多少）
h1-h6，p标签，hr标签，列表标签，table标签，form标签
2.行内标签：一行可以有多个
a标签，img标签，input标签，select标签，textarea标签
div标签：是空白标签，没有任何特殊意义（无语义标签）
-->
<div>
</div>
</body>
</html>
04-认识CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
html中标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度是多少）
h1-h6，p标签，hr标签，列表标签，table标签，form标签
2.行内标签：一行可以有多个
a标签，img标签，input标签，select标签，textarea标签
div标签：是空白标签，没有任何特殊意义（无语义标签）
-->
<div>
</div>
</body>
</html>
05-CSS选择器
<!--选择器
0.元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
1.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
2.class选择器：class属性值
每个标签都有一个class属性
3.通配符：*
选中所有的标签
4.层级选择器：选择器1 选择器2
5.群组选择器：选择器1，选择器2
补充：
css中的颜色值：
1.颜色英语单词
2.十六进制颜色值 0-255 -- 00-ff
3.rgb值：rgb(红、绿、蓝)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1{
color: red;
background-color: blue;
}
a{
background-color:yellow ;
}
#a1{
color: rgb(0,255,0);
}
/*层级选择器*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*群组选择器*/
/*同时选中所有的h1标签和所有的span标签*/
h1,span{
background-color: purple;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<span id="">
我是span
</span>
<div id="">
<p></p>
</div>
<div id="all_a">
<a href="">a1</a>
<a href="">a2</a>
<a href="">a3</a>
<a href="">a4</a>
<a href="">a5</a>
</div>
<a id="a1" href="">我是a1</a>
<a href="">我是a2</a>
<p class="c1">我是p</p>
<div id="" class="c1">
我是div
</div>
</body>
</html>
06-伪类选择器
<!--伪类选择器： 选择器:状态
link:超链接的初始状态 ---一次都没有访问成功的时候的状态
visited：超链接访问后的状态 ---已经访问成功后的状态
hover：鼠标悬停在标签上对应的状态
active：鼠标按住的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)
LoVe HAte
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同时设置a标签的所有状态*/
a{
color: black;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size:40px ;
}
a:active{
color: yellow;
}
#d1{
width: 300px;
height: 100px;
background: green;
}
#d1:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">百度一下</a>
<button id="d1">
</button>
</body>
</html>
