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