<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>笔记</title>
<link rel="stylesheet" type="text/css" href=""/>
<style type="text/css">
.c2{
color: #FF0000;align-content: center;
}
.c3{
color: #ADFF2F;align-content: center;
}
.c4{
color: #FFFF00;align-content: center;
}
.c5{
color: aquamarine;align-content: center;
}
a:hover{color: red;}
</style>
</head>
<body>
<div id="">
<h2>目录</h2>
</div>
<div id=""><a href="#aaa1"><h4>表单标签</h4></a></div>
<div id=""><a href="#bbb1"><h4>空白标签</h4></a></div>
<div id=""><a href="#ccc1"><h4>认识CSS</h4></a></div>
<div id=""><a href="#ddd1"><h4>css选择器</h4></a></div>
<div id=""><a href="#eee1"><h4>伪类选择器</h4></a></div>
<div id="aaa1" class="c2">
<form action="" method="post">
<fieldset id="">
<legend><h1>表单标签</h1></legend>
<h3>
<p>专门用来收集信息</p>
<p>可以提交表单中收集的信息 网页上的账号密码搜索</p>
<br> action属性：设置提交信息的位置
<br>msthod属性：提交方式-post/get
<br>text普通文本输入框
<br>name属性：必须设置 用于提交信息
<br>value属性：标签内容
</h3>
</fieldset>
</form>
</div>
<div id="bbb1" class="c3">
<form action="" method="">
<fieldset id="">
<legend><h1>空白标签</h1></legend>
<br>div标签是空白标签，没有任何特殊的意义（无语义标签）
<br>HTML标签分为两大类，块级标签：一行只能有一个，行内标签：不管标签的宽度是多少
<br>h1-h6 hr p 列表相关的，表格整体都是块标签
<br>行可以有多个 eg: img input
</fieldset>
</form>
</div>
<div id="ccc1" class="c4">
<form action="" method="">
<fieldset id="">
<legend><h1>认识css</h1></legend>
<br>web标准里的表现标准
<br>是用来设计网页上的标签的样式，长什么样，在哪（布局）
<br>css代码或者css文件，我们叫样式表
<br>布局：
<br>内联样式表：将CSS代码写在标签的style属性中
<br>内部样式表：写在head标签中的style标签的内容中
<br>外部样式表: 写在一个css文件中，通过head中的link标签关联
<br>内联的优先级最高
<br>怎么写
<br>选择器：｛属性：属性值；属性：属性值｝
<br>选择器的作用：用来选中需要设置样式的标签
<br>属性：必须是css属性
<br>属性值：如果属性值是数字，表示大小后面加px否则无效
<br>注意：每个属性之间用分号隔开否则无效
</fieldset>
</form>
</div>
<div id="ddd1" class="c5">
<form action="" method="">
<fieldset id="">
<legend><h1>css选择器</h1></legend>
<br>选择器
<br>0.元素选择器（标签选择器）：标签名
<br> 选中所有的标签名对应的标签
<br>1.ID选择器：#ID值
<br> 每个标签都有一个ID属性，整个HTML中，ID值必须唯一
<br>css中的颜色值：
<br> 颜色的英语单词
<br> 16进制颜色
<br> rgb()
<br>2. class选择器
<br> .class属性值
<br> 每个标签都有一个class属性
<br> 3.通配符：*
<br> 选中所有标签
<br> 4.层级选择器：选择器1 选择器2。。。
<br>5.群组选择器：选择器1，选择器2，。。。
</fieldset>
</form>
</div>
<div id="eee1" class="c1">
<form action="" method="">
<fieldset id="">
<legend><h1>伪类选择器</h1></legend>
<br>伪类选择器：选择器状态
<br>1.link:超链接初始状态
<br>2.visited:超链接访问后的状态
<br>3.hover:鼠标悬停的状态
<br>4.active:鼠标按住没松开的状态
<br>给同一个标签通过伪类选择器给不同状态设置不同的样式的时候要遵守爱恨原则
<br>Love HAte
</fieldset>
</form>
</div>
</body>
</html>
网友评论