HTML和CSS
2018-08-14 本文已影响0人
蘑菇plus
表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表单标签
1.可以提交表单中收集的信息
action属性:设置提交信息的位置
method属性:提交方式-post
-->
<form action="" method="post">
<!--input标签 --(文本输入框)
1.是表单标签
2.type属性:
text--普通的文本输入框
3.name属性必须设置(a.用于提交信息)
4.value属性:标签内容
5.placeholder属性:占位符(提示符)
6.maxlength:输入框最多能输入的字符个数
7.readonly:readonly-输入框只读(不能往里面输入内容)
-->
<input type="text" name="username" readonly="readonly" value="" placeholder="请输入手机号码" maxlength="11"/><br>
<!--
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="" value="boy" checked="checked"/><span>男</span>
<input type="radio" name"sex" id="" value="gril" /><span>女</span>
<!--
input标签:多选按钮
1.type:checkbox
2.name:同一类型对应的name值必须一样
3.value:设置选中按钮提交的值
4.checked:设置为checked，让按钮处于选中状态
-->
<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标签:普通按钮
disabled:disabled 让按钮不能点击
-->
<input type="button" name="" id="" disabled="disabled" value="登录" />
<!--input标签:重置按钮
让当前所在的form中所有表单相关标签对应的值，回到最初状态
-->
<input type="file" name="icon" id="icon" value="" />
<input type="reset" name="" id="" value="重置" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
表单标签(下拉菜单和多行文本域)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<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>
空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--div标签
html中的标签分为二大类，
块级标签:一行只能有一个(不管标签的宽度是多少)
h1-h6,p,hr,列表标签，table,form
行级标签:一行可以有多个
a,img,input,下拉列表(select),textarea
是空白标签，没有任何特殊的意义(无语义标签)
-->
<div></div>
</body>
</html>
认识css
<!--
1.什么是css
css是web标准中的表现标准，用设置网页上的标签的样式(长什么样，在哪儿)
css代码/css文件，我们叫样式表
目前我们使用的是css3
2.写在哪
内联样式表:将css代码写在标签的style属性中
内部样式表:写在head标签中的style标签内容中
外部样式表写在一个css文件中，通过head中的link标签来关联
优先级:内联的优先级最高;内部和外部没有绝对优先级，主要看同一个属性谁最后赋值，谁就有效
3.怎么写
选择器{属性:属性值;属性:属性值;}
选择器:用来选中需要设置样式的标签
属性: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/04css.css"/>
<!--style标签
专门用来设置样式的标签
-->
<style type="text/css">
div{
background-color: deepskyblue;width: 40%;
}
</style>
</head>
<body>
<div style="color: gold;">我是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">
*{
font-size: 20px;
}
#a1{
color:#00BFFF
}
div{
color: yellow;
}
.c1{
color: red;
}
#all_a a{
color: darkmagenta;
}
h1,span{
background-color:lightcoral;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<span id="">
我是span
</span>
<div id="">
<div id="">
<p></p>
</div>
<div id="all_a">
<a href="">a1</a>
<a href="">a2</a>
<a href="">a3</a>
</div>
</div>
<div id="" href="">
我是a2
</div>
<p class="c1">我是p</p>
<div id="a1" href="">我是a1</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:red;
}
a:hover{
color: blue;
font-size: 20px;
}
a:active{
color: pink;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn/html5/index.asp">百度一下</a>
</body>
</html>
