代码：
<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title></title>
</head>
<body style="background-color: lightgoldenrodyellow;">
<h1>DAY2:HTML和CSS</h4>
<h3>学习目标</h3>
<hr />
<div id="">
<a href="#a1" style="text-decoration:none">1.表单标签</a><br />
<a href="#a2" style="text-decoration:none">2.表单标签(下拉和多行文本域)</a><br />
<a href="#a3" style="text-decoration:none">3.空白标签</a><br />
<a href="#a4" style="text-decoration:none">4.认识CSS</a><br />
<a href="#a5" style="text-decoration:none">5.CSS选择器</a><br />
<a href="#a6" style="text-decoration:none">6.伪类选择器</a><br />
</div>
<div id="a1">
<p style="background-color: lightseagreen;font-size:20px ;" >一、表单标签</p>
<p>form标签：可以提交表单中收集的信息</br>
1.action属性：设置提交信息的位置</br>
2.method属性：提交方式 -post/get</br>
input标签 ： 文本输入框</br>
1.type属性：text</br>
2.name属性：必须设置（用于提交信息）</br>
3.value属性：标签内容</br>
4.placeholder属性：占位符（提示信息）</br>
5.maxlength属性：输入框最多能输入的字符个数</br>
6.readonly属性：输入框只读（不能往里面输入内容）</br>
input标签 ：密码输入框</br>
1.type属性：password ---输入的值是密文显示</br>
input标签：单选按钮</br>
1.type属性：radio</br>
2.name：同一类型对应的name值必须一样</br>
3.value：设置选中按钮提交的值</br>
4.checked:设置为checked，让按钮默认处于选中状态</br>
input标签：多选按钮</br>
1.type：checkbox</br>
2.name：同一类型对应的name值必须一样</br>
input标签：普通按钮</br>
1.type属性:button</br>
2.disabled：不能被点击</br>
input标签：重置按钮，将当前所在的form中的所有表单相关的标签对应的值，回到最初的状态</br>
1.type属性:reset</br>
input标签：文件选择器</br>
1.type属性:file</br>
</p>
</div>
<div id="a2">
<p style="background-color: lightseagreen;font-size:20px ;">二、表单标签(下拉菜单和多行文本域)</p>
<p>fieldset标签：一个fieldset标签对应一个表单分组</br>
legend标签：设置分组名</br>
selected标签:设置默认选中</br>
textarea标签：多行文本域(多行文本输入框)</br>
</p>
</div>
<div id="a3">
<p style="background-color: lightseagreen;font-size:20px ;">三、空白标签</p>
<p>html中标签分为两大类：</br>
1.块级标签：一行只能有一个（不管标签的宽度是多少）</br>
h1-h6，p标签，hr标签，列表标签，table标签，form标签</br>
</br>
2.行内标签：一行可以有多个</br>
a标签，img标签，input标签，select标签，textarea标签</br>
div标签：是空白标签，没有任何特殊意义（无语义标签）</p>
</div>
<div id="a4">
<p style="background-color: lightseagreen;font-size:20px ;">四、认识CSS</p>
<p>1.什么是CSS</br>
a.CSS是web标准中的表现标准，用来设置网页上的标签的样式（长什么样，在哪儿）</br>
b.CSS代码/CSS文件，我们叫样式表</br>
c.目前我们使用的是CSS3</br>
2.写在哪儿</br>
a.内联样式表:将CSS代码写在标签的style属性中</br>
b.内部样式表：写在head标签中的style标签的内容中</br>
c.外部样式表：写在一个css文件中，通过head中的link标签来关联</br>
3.怎么写(CSS语法)</br>
a.选择器{属性：属性值；属性：属性值}</br>
b.选择器：用来选中需要设置样式的标签</br>
c.属性：css属性（css2中的属性有两百多个）</br>
d.属性值：如果属性值是数字，表示的是大小要在后面加px</br>
e.注意：每个属性之间要用分号隔开，否则属性无效</br>
4.优先级：内联的优先级最高；内部和外部没有绝对的优先级，主要看同一个属性谁最后赋值，谁就有效</br>
</p>
</div>
<div id="a5">
<p style="background-color: lightseagreen;font-size:20px ;">五、CSS选择器</p>
<p>
1.元素选择器(标签选择器)：标签名,选中所有的标签名对应的标签</br>
2.id选择器：#id属性值,每个标签都有一个id属性，整个html中，id的值必须唯一</br>
3.class选择器：class属性值,每个标签都有一个class属性 </br>
4.通配符：*;选中所有的标签</br>
5.层级选择器：选择器1 选择器2 </br>
6.群组选择器：选择器1，选择器2</br>
补充：</br>
css中的颜色值：</br>
1.颜色英语单词</br>
2.十六进制颜色值 0-255 -- 00-ff</br>
3.rgb值：rgb(红、绿、蓝)</br>
</p>
</div>
<div id="a6">
<p style="background-color: lightseagreen;font-size:20px ;" >六、伪类选择器</p>
<p>
1.link:超链接的初始状态 ---一次都没有访问成功的时候的状态</br>
2.visited：超链接访问后的状态 ---已经访问成功后的状态</br>
3.hover：鼠标悬停在标签上对应的状态 </br>
4.active：鼠标按住的状态</br>
5.给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)</br>
LoVe HAte</br>
</p>
</div>
<a href="#" style="text-decoration: none;" >回顶部</a>
</body>
</html>
效果图
网友评论