day02-html和css
1.表单标签
可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式 -- post/get
<form action="" method="post">
</form>
1.1.text
input标签（单标签） -- text（文本输入框）
1.是表单标签
2.type属性
text -- 普通的文本输入框
3.name属性必须设置（a.用于提交信息）
4.value属性：标签内容
5.placeholder属性：输入框提示信息
6.maxlength:输入框最多能输入的字符个数
7.readnoly:readonly -- 输入框只读（不能往里面输入内容
<input type="text" name="username" value="" placeholder="请输入用户名" maxlength="11"/>
1.2.password
input标签 -- password(密文输入)
1.type属性：password --- 输入的值是密文显示
<input type="password" name="password" value="" />
1.3.radio
input标签：单选按钮
1.type属性：radio ---单选
2.name属性：同一类型对应的name值必须一样
3.value属性：设置选中按钮提交的值
4.checked:设置为checked，让按钮默认处于选中状态
<input type="radio" name="sex" id="" value="男" checked="checked"/><span id="">男</span>
<input type="radio" name="sex" id="" value="女" /><span id="">女</span>
1.4.checkbox
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>
1.5.button
input标签：普通按钮
1.type属性：button
2.disabled:disabled -- 按钮不能点击
<input type="button" value="登录" />
1.6.reset
input标签：重置按钮
1.type:reset -- 将当前所在form中的所有表单相关标签对应的值，回到最初的状态
<input type="reset" name="" id="" value="重置" />
1.7.file
input标签：文件域
1.type:file
<input type="file" name="icon" id="" value="" />
1.8.submit
提交
<input type="submit" name="" id="" value="提交" />
1.9.下拉菜单
select - option
select:select -- 默认选中
<select name="city">
<option value="成都">成都</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
</select>
1.10.多行文本域
<textarea name="message" rows="5" cols="4" placeholder="意见" maxlength="200"></textarea>
1.11.分组
fieldset:
一个fieldset标签对应一个表单分组
legend标签：设置分组名
<fieldset id="">
<legend>用户名</legend>
<input type="text" name="username" id="username" value="" />
<input type="reset" name="" id="" value="重置" />
</fieldset>
<fieldset id="">
<legend>密码</legend>
<input type="password" name="" id="" value="" />
<input type="reset" name="" id="" value="重置" />
</fieldset>
2.空白标签
html中的标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度是多少）
h1-h6, p, hr, 列表标签, table, form,
2.行内标签：一行可以有多个
a, img, input, 下拉列表, textarea
div标签：是空白标签，没有任何特殊的意义(无语义标签)
span标签：是空白标签
<div id="demo">
</div>
<span id="demo">
</span>
3.认识css
1.什么是CSS
css是web标准中的表现标准，用来设置网页上标签的样式（什么样，在哪）
css代码/css文件，我们叫样式表
目前我们使用的是css3。还是标记语言
2.写在那
内联样式表：将css代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中 的link标签来关联
优先级：内联的优先级最高，内部和外部没有绝对的优先，主要看同一属性那个最后赋值，那个就优先级高
3.怎么写
选择器{属性：属性值；属性：属性值；}
选择器：用来选中需要设置样式的标签
属性：css属性
属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间用分号隔开，否则属性无效
补充属性：color：设置字体颜色 background-color:设置背景颜色 width：标签宽度 height：标签的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
<!--内部样式表-->
<style type="text/css">
div{
background-color: chartreuse;
width: 600px;
height: 100px;
}
</style>
</head>
<body>
<!--内联样式表-->
<div id="" style="color:#00BFFF;">
我是div
</div>
</body>
</html>
4.css选择器
1.元素选择器（标签选择器）：标签名{}
选中所有的标签名对应的标签
2.id选择器：#id{}
每个标签都有一个id属性，整个html中id的值必须唯一
3.class选择器：.class属性值
每个标签都有一个class属性，
4.通配符：*{}
选中所有的标签
5.层级选择器：选择器1 选择器2,...{}
6.群组选择器：选择器1，选择器2,...{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*元素选择器*/
p{
color: aquamarine;
}
/*id选择器*/
#a1{
/*color: #7FFF00;*/
color: rgba(0, 255, 0, 0.5);
}
/*class选择器*/
.c1{
color: gold;
background-color: blueviolet;
}
/*通配符选择器*/
*{
font-size: 50px;
}
/*层级选中器*/
#all_a a{
text-decoration: none;
}
/*群组选择器*/
/*同时选中列出的所有标签*/
h1,span{
background-color: #7FFFD4;
}
</style>
</head>
<body>
<p id="p1">我是p1</p>
<p id="p2">我是p2</p>
<a href="" id="a1">我是a1</a>
<a href="" class="c1">我是a2</a>
<div class="c1">
我是div1
</div>
<div id="all_a">
<a href="">666</a>
<a href="">666</a>
<a href="">666</a>
</div>
<h1>我是标题</h1>
<span id="">
我是span
</span>
</body>
</html>
5.伪类选择器
伪类选择器：选择器：状态
link：超链接的初始状态； -- 一次都没有访问成功的时候的状态
visited：超链接的访问后的状态； -- 已经访问成功后的状态
hover：鼠标悬停在标签上的时候对应的状态
active：鼠标按住时的状态
给同一个标签通过伪类选择器给不同状态设置不同样式的时候，要遵守爱恨原则
LoVe HAte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同时设置所有a标签的所有状态*/
a{
color: black;
text-decoration: none;
}
a:link{
color: greenyellow;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size: 30px;
}
a:active{
color: yellow;
font-size: 40px;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">淘宝</a>
</body>
</html>
