目录
<a href="#1">1.表单标签</a><br />
<a href="#2">2.下拉和多行文本域</a><br />
<a href="#3">3.空白标签</a><br />
<a href="#4">4.认识CSS</a><br />
<a href="#5">5.css选择器</a><br />
<a href="#6">6.伪类选择器</a><br />
1. 表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1 id="1">1.表单标签</h1>
-
表单标签
专门用来收集信息的标签
action属性:设置提交信息的位置
method属性:提交方式 - post/get -
input标签（单标签）---text（文本输入框）
a. 是表单标签
b. type属性：
text - 普通的文本输入框
password - 密码输入框(密文显示)
c. name属性：必须设置（a.用于提交信息）
d. value属性：标签内容
e. placeholder属性：占位符（提示信息）
f. 单选按钮：
1.type属性：radio
2.name：同一类型对应的name值必须是一样
3.value：设置选中按钮提交的值
4.checked="checked",按钮默认选中状态
g. maxlength：输入框最多能输入的字符个数
h. readonly="readonly":输入框只读（不能输入）
i. disabled="disabled":按钮不可点
<form action="" method="post">
<input type="text" name="username" id="" readonly="readonly" placeholder="娃哈哈" />
<input type="password" name="password" id="" value="" placeholder="密码" /><br />
<input type="radio" name="sex" id="" value="男" checked="checked" /><span>男</span>
<input type="radio" name="sex" id="" value="女" /><span>女</span><br />
多选按钮：
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><br />
<!--普通按钮-->
<input type="button" name="" id="" value="登录" disabled="disabled" />
<!--重置按钮
将当前所在的表单里的所有的值恢复到最初的状态
-->
<input type="reset" name="" id="" value="重置" />
<!--选择文件-->
<input type="file" name="icon" id="icon" value="" />
<!--提交按钮-->
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
网页效果：
1.png
2. 下拉和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<h1 id="2">2.下拉和多行文本域</h1>
<form action="" method="get">
<!--fieldset：
一个fieldset标签对应一个表单分组
legend标签：设置分组名
-->
<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="username" id="username" value="" placeholder="用户名" />
<input type="password" name="username" id="username" value="" placeholder="密码" />
<input type="reset" name="" id="" value="重置1" />
</fieldset>
<fieldset id="">
<legend>反馈信息</legend>
<!--1.下拉菜单-->
<select name="city">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="大连">大连</option>
<!--selected:设置默认选中-->
<option value="青岛" selected="selected">青岛</option>
</select>
<!--2.多行文本域(多行文本输入框)
-->
<textarea name="message" rows="2" cols="100" placeholder="请输入..." maxlength="200">这是一段话</textarea>
<input type="reset" name="" id="" value="重置2" />
</fieldset>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
网页效果：
2.png
3. 空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="3">3.空白标签</h1>
<div id="">
<a href="">百度一哈</a>
</div>
<div id="">
<a href="">淘宝</a>
</div>
html中标签分为两大类：
1.块级标签：一行只能有一个(不管标签的宽度是多少)
h1-h6, p, hr, 列表标签，table, form,
2.行内标签：一行可以有多个
a, img, input,下拉列表(select), textarea
div标签，是空白标签，没有任何特殊的意义(无语义标签)
<div style="background-color: red; width: 100px;">
我是div1 <br />
我是div111
</div>
<span style="background-color: royalblue;">
我是span4
</span>
<div style="background-color: yellow; width: 90px;">
我是div2
</div>
<div style="background-color: palevioletred; width: 120px;">
我是div3
</div>
<span style="background-color: green;">
我是span
</span>
<span style="background-color: gold;">
我是span2
</span>
<span style="background-color: greenyellow;">
我是span3
</span>
<span style="background-color: royalblue;">
我是span4
</span>
</body>
</html>
网页效果：
3.png
4. 认识CSS
CSS
- 什么是CSS
CSS是web标准中的表现标准，用设置网页上的标签的样式（长什么样，在哪儿）
CSS代码/CSS文件，我们叫样式表
目前我们使用的是CSS3。
-
写在哪儿
内联样式表：将css代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签来关联优先级: 内联的优先级最高；内部和外部没有绝对优先，主要看同一个属性谁最后赋值，谁就有效
-
怎么写(CSS语法)
选择器{属性:属性值; 属性：属性值;}
选择器： 用来选中需要设置样式的标签
属性：css属性（css2中的属性有两百多个）
属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间要使用分号隔开，否则属性无效
补充属性: color: 设置字体颜色 background-color:设置背景颜色 width：标签的宽度 height：标签的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--style标签
专门用来设置样式的标签
-->
<style type="text/css">
div{
background-color: yellowgreen;
color: red;
}
</style>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
</head>
<body>
<h1 id="4">4.认识CSS</h1>
<!--style属性：每个标签都有-->
<div style="">
我是div
</div>
</body>
</html>
5. css选择器
选择器
-
元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签 -
id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一 -
class选择器：.class属性值
每个标签都有一个class属性， -
通配符：*
选中所有的标签 -
层级选择器：选择器1 选择器2...
-
群组选择器：选择器1，选择器，....
补充:
css中的颜色值：
1.颜色英语单词
2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)
3.rgb值：rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 50px;
}
/*id选择器*/
.c1{
color: brown;
background-color: olive;
}
/*元素选择器*/
a{
background-color: yellow;
}
/*class选择器*/
#a1{
/*color:#ff0000;*/
color:rgba(0,0,255,0.4)
}
/*层级选择器*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*群组选择器*/
/*同时选中所有h1标签和所有的span标签*/
h1,span{
background-color: #FFC0CB;
}
</style>
</head>
<body>
<h1 id="5">5.css选择器</h1>
<h1>我是标题</h1>
<span id="">
我是span
</span>
<div >
<div id="">
<a href="">aaa</a>
<p></p>
</div>
<div id="all_a">
<a href="">a1</a>
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
</div>
</div>
<a id="a1" href="">我是a</a>
<a href="">我是a2</a>
<p class="c1">我是p</p>
<div id="" class="c1">
我是div
<a href="">我是a3</a>
</div>
<a href="">我是a4</a>
</body>
</html>
网页效果：
5.png
6. 伪类选择器
伪类选择器: 选择器:状态
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>
<h1 id="6">6.伪类选择器</h1>
<a href="http://taobao.com">百度一下</a>
<button id="d1">
</button>
</body>
</html>
网页效果：
6.png
作业：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录框</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background: url(img/background.jpg) no-repeat;
background-position: center;
background-attachment: fixed;
}
.login{
height: 500px;
width: 500px;
background-color: rgb(233,233,242);
position: absolute;
left: 50%;
margin-left:200px ;
top: 50%;
margin-top:-250px ;
}
h2{
margin-left: 30px;
margin-top: 40px;
float: left;
}
.img1{
float: right;
}
.users{
position: absolute;
float: left;
left: 50%;
margin-left: -182px;
margin-top: 110px;
}
.img2{
float: left;
}
#user{
height: 60px;
width: 300px;
font-size: 20px;
border: none;
}
.pwd{
position: absolute;
left: 50%;
margin-left: -182px;
margin-top: 210px;
}
.img3{
float: left;
}
#password{
height: 58px;
width: 300px;
font-size: 20px;
border: none;
}
.logbutton{
position: absolute;
left: 50%;
margin-left: -182px;
margin-top: 310px;
}
#log{
width: 360px;
height: 55px;
border: none;
cursor: pointer;
color: white;
font-size: 20px;
background-color: red;
}
#log:hover{
background-color: royalblue;
}
.icon{
position: absolute;
left: 50%;
margin-left: -182px;
margin-top: 410px;
width: 200px;
}
.img5{
float: right;
}
.bottom{
position: absolute;
left: 50%;
margin-left: -32px;
margin-top: 450px;
width: 300px;
}
.bottom a{
float: left;
padding-right: 20px;
font-size: 13px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="login">
<h2>密码登录</h2>
<img src="img/1.png" class="img1" />
<div class="users">
<img src="img/2.png" class="img2" />
<input type="text" name="user" id="user" value="" placeholder="请输入用户名" />
</div>
<div class="pwd">
<img src="img/3.png" class="img3" />
<input type="password" name="password" id="password" value="" placeholder="请输入密码" />
</div>
<div class="logbutton">
<input type="submit" name="log" id="log" value="登 录" />
</div>
<div class="icon">
<a href=""><img src="img/weibo.png" class="img4" /></a>
<a href=""><img src="img/zhifubao.png" class="img5" /></a>
</div>
<div class="bottom">
<a href="">忘记密码</a>
<a href="">忘记会员名</a>
<a href="">免费注册</a>
</div>
</div>
</body>
</html>
网页效果：
7.png
网友评论