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