代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>陈鹏第二阶段day2常用标签和CSS笔记整理</title>
<style type="text/css">
li a{
color: #000000;
}
</style>
</head>
<body>
<h1 align="center">HTML常用标签和CSS</h1>
<div style="background-color: darksalmon;">
<h2 align="center" style="background-color: crimson;">目录</h2>
<ol>
<li><a href="#表单标签">表单标签</a></li>
<li><a href="#表单标签（下拉菜单和多行文本域)" >表单标签（下拉菜单和多行文本域）</a></li>
<li><a href="#空白标签">空白标签</a></li>
<li><a href="#认识CSS">认识CSS</a></li>
<li><a href="#CSS选择器">CSS选择器</a></li>
<li><a href="#伪类选择器">伪类选择器</a></li>
</ol>
</div>
<div id="1" style="background-color: darksalmon;">
<h3 style="background-color: darkorange;"><a name="表单标签">表单标签</a></a></h3>
<xmp>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单</title>
</head>
<body>
<!--表单标签
1.可以提交表单中收集的信息
action属性：设置提交的位置
method属性：提交方式 post/get
-->
<form action="" method="">
<!-- input标签（单标签） --text（文本输入框）
1.是表单标签
2.type属性
text:普通的文本输入框
3.name属性：必须设置（用来提交信息）
4.value属性：标签内容
5.placeholder：占位符（提示信息）
6.maxlength:输入框最多能输入的最大长度
7.readonly:readonly- 输入框只读(不能修改)
-->
<input type="text" name="uername" value="" rplaceholder="请输入信息" maxlength="11" />
<!-- input标签- 密码输入框
1.type属性：password --输入的值是密文显示的
-->
<input type="password" name="password" id="" value="" placeholder="密码" maxlength="11"/><br>
<!-- input标签:单选按钮
1.type属性：radio
2.name：同一类型对应的name值必须一样
3.value:设置选中按钮提交的值（提交时name对应的值对应什么）
4.span空格标签
5.checked属性：设置为checked，让按钮默认处于选中状态
-->
<input type="radio" name="sex" id="" value="boy" checked="checked"/><span>男</span>
<input type="radio" name="sex" id="" value="girl" /><span>女</span>
<!-- input标签：多选按钮
1.type属性：chekbox
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>
<input type="checkbox" name="interest" id="" value="音乐" /><span>音乐</span>
<input type="checkbox" name="interest" id="" value="旅游" /><span>旅游</span>
<!-- input标签：普通按钮
1.type属性：button
disabled:disabled让按钮不能执行，执行的时候就直接删了
-->
<input type="button" name="" id="" value="登录" disabled="disabled"/>
<!-- input标签：重置按钮
让当前所在的from中的所有表单相关标签对应的值，回到最初的状态
-->
<input type="reset" name="" id="" value="重置全部" />
<input type="file" name="" id="" value="" />
<!-- input标签：文件选择器-->
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
</xmp>
</div>
<div id="2" style="background-color: darksalmon;">
<h3 style="background-color: darkorange;"><a name="表单标签（下拉菜单和多行文本域">表单标签（下拉菜单和多行文本域</a></a></h3>
<xmp>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="">
<!--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>
<!--一个fieldset对应一个表单分组
legend：分组名
-->
<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="uername" value="" rplaceholder="请输入信息" maxlength="11" />
<input type="password" name="password" id="" value="" placeholder="密码" maxlength="11"/>
</fieldset>
<fieldset id="">
<legend>反馈信息</legend>
<textarea name=message"" rows="2" cols="100" placeholder="请输入意见" maxlength="200"></textarea>
</fieldset>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
</xmp>
</div>
<div id="3" style="background-color: darksalmon;">
<h3 style="background-color: darkorange;"><a name="空白标签">空白标签</a></a></h3>
<xmp>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--
html中的标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度是多少）
h1-h6,p,hr,列表标签，表格标签（table）,form
行内标签：一行可以有多个
2.a,image,input,下拉列表（select），textarea
div标签：空白标签，没有任何特殊的意义（无语意标签）
-->
<div></div>
<textarea rows="23" cols="23">
</textarea>
<span>
</span>
</body>
</html>
</xmp>
</div>
<div id="4" style="background-color: darksalmon;">
<h3 style="background-color: darkorange;"><a name="认识CSS">认识CSS</a></a></h3>
<xmp>
<!--CSS
1.什么是CSS
CSS是web标准中的表现标准，用来设置网页上标签的样式（长什么样，在哪儿）
CSS代码/文件，我们叫样式表
目前我们使用的是CSS3
2.写在哪
内联样式表: 将CSS代码写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表写在一个CSS文件中，通过head中的link标签来关联
优先级：内联的优先级最高；内部和外部没有绝对的优先级，主要看同一个属性谁最后赋值，谁就有效。
3.怎么写（css语法）
选择器{属性：属性值；属性：属性值}
选择器：用来选中需要设置样式的标签
属性：CSS属性（CSS2中有两百多个，CSS3接着加了一百多个）
属性值：如果属性值是数字，表示的是大小要在后面加px或者%
注意：每个属性之间要用分号隔开，否则属性无效
补充属性：color - 设置字体颜色 backgr-color：设置背景颜色 width：标签宽度 height：标签高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--关联外部样式表 -->
<link rel="stylesheet" type="text/css" href="css/04-css1.css"/>
<!--style标签
专门用来设置样式的标签
-->
<style type="text/css">
div{
background: deepskyblue;
}
</style>
</head>
<body>
<!--style属性：每一个标签都有 -->
<div style="color: aquamarine;">
我是div
</div>
</body>
</html>
</xmp>
</div>
<div id="5" style="background-color: darksalmon;">
<h3 style="background-color: darkorange;"><a name="CSS选择器">CSS选择器</a></a></h3>
<xmp>
<!--选择器
0.元素选择器（标签选择器：标签名）{}
选中所有的标签名对应的标签
1.ID选择器：#id属性值{}
每一个标签都有一个id属性，整个HTML中，id的值必须唯一。
2.class选择器：.class属性{}
每个标签都有一个class属性
3.通配符： *{}
选中所有的标签
4.层级选择器：选择器1 选择器2
5.群主选择器：选择器1，选择器2
补充：
css中的颜色值：
1.颜色英语单词
2.16进制的颜色值 0-255 --0-ff(#ff0000-红色)
3.rgb值：rgb(红，黄，蓝) rgba(红，黄，蓝,透明度)-透明度0-1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/*通配符 */
*{
font-size: 50px;
}
/*元素选择器 */
a{
background-color: yellow;
}
/*ID选择器 */
#a1{
/* color:#ff0000 ; */
/* color: red; */
color: rgba(100,0,0,0.4);
}
/*class选择器 */
.c1{
background-color: red;
}
/*层级选择器 */
#all_a a{
color: pink;
}
div div a{
/* text-decoration: none; */
h1,span{
background-color: #FFC0CB;
}
}
</style>
<title></title>
</head>
<body>
<h1>lalal</span</h1>
<span>owowowow</span>
<div>
</div>
<a href="">a</a>
<p></p>
</div>
<div id="all_a">
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
</div>
</div>
<a id="a1" >我是a1</a>
<a id="a2" href="" class="c1">我是a2</a>
<div id="" class="c1">
我是p
</div>
</body>
</html>
</xmp>
</div>
<div id="6" style="background-color:darksalmon;">
<h3 style="background-color: darkorange;"><a name="伪类选择器">伪类选择器</a></a></h3>
<xmp data-type = "text">
<!--伪类选择器的语法：选择器：状态
1. link:超链接的初始状态; -- 一次都没有访问成功的状态
2. visited:超链接访问后的状态; -- 已经访问成功后的状态
3. hover:鼠标悬停在标签上的时候对应的状态
4. active:鼠标按住的状态
给一个标签通过伪类选择器给不同状态设置不同 的样式的时候，要遵守爱恨原则（先爱才能恨）
LoVe HAte
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/*同时设置a标签的所有状态 */
a{
color: black;
}
a:link{
color: green;
}
a:visited{
color: #FFC0CB;
}
a:hover{
color: #FF0000;
font-size: 20px;
}
a:active{
color: #FFFF00;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
</xmp>
</div>
</body>
</html>
网页地址
http://127.0.0.1:8848/day2-%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE%E5%92%8CCSS/homework.html
网页界面
image.png
网友评论