一、表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单标签
可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式--post /get
-->
<form action="">
<!--input标签(单标签)---text(文本输入框)
1.是表单标签
2.type属性：
text----普通的文本输入框
3.name属性：必须设置(a.用于提交信息)
4.value属性：标签内容
5.placeholder属性：占位符(提示信息)
6.maxlength属性：输入框最多能输入的字符数
7.readonly属性：readonly---只读(不能输入内容)
-->
<input type="" name="username" value="" placeholder="请输入手机号"/>
<!--input标签--密码输入框
1.type属性：password--输入的值是密文显示
-->
<input type="password" name="password" id="" value="" maxlength="11" placeholder="密码"/>
<!--input标签：单选按钮
1.type属性：radio
2.name属性：同一类型对应上午name值必须一样
3.value属性：设置选中按钮提交的值
4.checked属性：设置为checked，让按钮默认处于选中状态
-->
<input type="radio" name="sex" id="" value="boy" checked="checked"/>男
<input type="radio" name="sex" id="" value="girl" />女
<!--input标签：多选按钮
type属性：checkbox
2.name属性：同一类型对应的name值必须一样
-->
<input type="checkbox" name="hobby" id="" value="basekeball" /><span>篮球</span>
<input type="checkbox" name="hobby" id="" value="football" /><span>足球</span>
<input type="checkbox" name="hobby" id="" value="swimming" /><span>游泳</span>
<!--input标签：普通按钮
disabled属性：disabled--让按钮不能被点击
-->
<input type="button" name="" id="" value="登录" />
<!--input标签：重置按钮
让将当前所在的form中的所有表单相关标签对应的值，回到最初的状态
-->
<input type="reset" name="" id="" value="重置" />
<!--input标签：文件选择器-->
<input type="file" name="" id="" value="" />
<!--input标签：提交按钮-->
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
二、表单标签-下拉和多行文本域
<!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="" />
<input type="password" name="password" id="password" 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>
三、空白标签
html中的标签分为两大类
块级标签：一行只能有一个(不管标签的宽度是多少)
h1-h6标签
p标签
hr标签
列表标签都是
table标签
form标签
行内标签：一行可以有多个
a标签
img标签
input标签
下拉列表(select)
多行输入框(textarea)
div标签，是空白标签，没有任何特殊的意义(无语义标签)
四、认识css
1.什么是CSS：
CSS是web标准中的表现标准，用来设置网页上的标签的样式(长什么样，在哪儿)
CSS代码或者是CSS文件，我们叫样式表
目前我们使用的是CSS3。
2.写在哪儿
内联样式表:将css代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签来关联
优先级：内联的优先级最高；内部和外部没有绝对的优先，主要是看同一个属性谁最后赋值谁就有效
3.怎么写(css语法)
选择器(属性：属性值；属性：属性值；
选择器：用来选中需要设置样式的标签
属性：css属性(css2中属性有两百多个)
属性值：如果属性值是数字，如果表示大小，要在后面加一个px
注意：每个属性之间要用分号隔开，否则属性无效
)
补充属性：color-设置字体颜色 background-color--设置背景颜色 width-标签宽度 height--标签高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/test.css"/>
<!--style标签
专门用来设置样式的标签
-->
<style type="text/css">
div{
background-color: black;
}
</style>
</head>
<body>
<div style="color:red">
床前明月光
</div>
</body>
</html>
五、css选择器
0.元素选择器(标签选择器)：标签名
选中当前所有的标签名对应的标签
1.id选择器：#id属性值
每个标签都有一个id属性，整个html中id的值必须唯一
补充：css中的颜色值：
a.颜色英语单词
b.十六进制颜色 0-255--00-ff(#ff0000-红色)
c.rgb值：rgb(红，绿，蓝) rgba(红，绿，蓝，透明度) -透明度0-1
2.class选择器： .class属性值
每个标签都有一个class属性
3.通配符：*
选中所有的标签
4.层级选择器：选择器1 选择器2...
5.群组选择器： 选择器1，选择器2...
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*层级选择器*/
#all a{
color: yellow;
}
p{
background-color: blue;
}
#a1{
color:red;
}
.c1{
width:200px ;
}
/*群组选择器*/
/*同时选中所有的h1标签和span标签*/
h1,span{
color: darkgreen;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<span>我是span</span>
<div id="">
<p>p111</p>
<div id="all">
<a href="">11</a>
<a href="">22</a>
<a href="">33</a>
<a href="">44</a>
<a href="">55</a>
<a href="">66</a>
</div>
</div>
<a id="a1" href="">我是a</a>
<a href="">我是a2</a>
<p>我是p</p>
<p class="c1">我是p2</p>
<div id="" class="c1">
我是div
</div>
</body>
</html>
六、伪类选择器
伪类选择器： 选择器：状态
- ：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: blue;
}
a:hover{
color: red;
}
a:active{
font-size: 20px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
网友评论