表单标签
表单标签
专门用来收集用户信息的标签
action属性：设置提交信息的位置
method：提交方式---post/get
input标签
1.是表单标签
type属性：
text-普通的文本输入框普通的文本输入框
3.name属性：必须设置
4.value：标签能让
placeholder：占位符
maxlength：输入框最多输入的字数
readonly：readonly只读按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="get">
<input type="text" name="username" value="" placeholder="请输入手机号码" maxlength="11"/>
<!--input标签
type属性：radio
-->
<input type="password" name="password" value="" placeholder="请输入密码" />
<!--input
type：
-->
<input type="radio" name="sex" id="" value="boy" checked="checked"/><span>男</span>
<input type="radio" name="sex" id="" value="girl" /><span>女</span>
<!--input多选按钮
type：checkbox
-->
<input type="checkbox" name="intrest" id="" value="篮球" /><span>篮球</span>
<input type="checkbox" name="intrest" id="" value="乒乓球" /><span>乒乓球</span>
<input type="checkbox" name="intrest" id="" value="看电影" /><span>看电影</span>
<input type="checkbox" name="intrest" id="" value="旅游" /><span>旅游</span>
<input type="checkbox" name="intrest" id="" value="游泳" /><span>游泳</span>
<input type="button" name="" id="" value="登录" />
<!--input按钮
重置按钮
将当前所在的form中的所有表单相关标签对应的值，让其回到初始状态
disabled：使按钮不能使用
-->
<input type="reset" name="" id="" value="重置" disabled="disabled"/>
<input type="submit" name="" id="" value="提交" />
<!--input文件选择器-->
<input type="file" name="icon" id="icon" value="提交" />
</form>
</body>
</html>
表单标签中的下拉的多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="post">
<!--1.下拉菜单
-->
<select name="city">
<option value="">成都</option>
<option value="">重庆</option>
<option value="">上海</option>
<option value=""selected="selected">北京</option>
</select>
<!--2.多行文本域 （多行文本输入框）-->
<textarea name="message" rows="5" cols="10" placeholder="请输入意见...." maxlength="200"></textarea>
</form>
</body>
</html>
结果图
image.png
空白标签
htlm中的标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度是多少）
h1-h6，p，hr，列表标签，table，form
2.行内标签：一行可以有多个
a，img，input，下拉列表（select），textarea
div标签是空白标签，没有任何特殊的意义（无语义标签）
格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div></div>
</body>
</html>
认识CSS
1.什么是CSS
CSS是web标准中的表现标准，用来设置网页上的标签的样式（长什么样，在哪儿）
CSS代码或者是CSS文件，我们叫样式表
目前我们使用的是CSS3。
2.写在哪儿
内联样式表：将CSS代码写在标签的style属性中
内部样式表：写在head标签中的style标签来关联
外部样式表：写在一个CSS文件中，通过head中的link标签来关联
属性优先级：优先级最高为内联，内部和外部的优先级没法确定，谁写在后面就会覆盖前面的属性
3.怎么写
选择器{属性：属性值；属性：属性值；}
选择器：用来选中需要设置样式的标签（）
属性：CSS属性（css2中的属性有200多个）
属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间要用分号去隔开，否者属性无效
补充属性：color-设置字体颜色 background-color：设置背景颜色 width：标签宽度 height：标签的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--style标签
专门来设置样式的标签
-->
<style type="text/css">
div{background-color:blueviolet ;}
</style>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/123.css"/>
</head>
<body>
<!--style属性：每个标签都有-->
<div style="color: red;">
我是div
</div>
</body>
</html>
CSS选择器
选择器
0.元素选择器（标签选择器）：标签名
选择所有的标签名对应的标签
1.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
2.class选择器：。class属性值
每个标签都有一个class属性
3.通配符
*：运用到所有的标签
4.层级选择器：选择器1 选择器2......
5.群组选择器：选择器1，选择器2.....
补充：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">
/*层级选择器用法*/
#all_a{}
*{
font-size: 50px;
}
.c1{
color: rgb(144,242,0);
background-color:rgba(0,0,155,0.4) ;
}
a{
background-color:rgb(255,0,0) ;
}
#a1{
/*color: #ff0000;*/
color: rgba(0,0,255,0.5);
}
</style>
</head>
<body>
<a id="a1" href="">我是a1</a>
<a href="">我是a2</a>
<p class="c1">我是哈哈</p>
<div class="c1" id="">
我似鸽刺客，<a href="">我么的伤害</a>
</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:red;
}
a:visited{
color: blue;
}
a:hover{
color: chartreuse;
font-size: 50px;
}
a:active{
color: yellow;
}
#d1:hover{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.jd.com">京东</a>
</body>
</html>
网友评论