效果预览图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<h1>目录</h1>
<li><a href="#1">一、表单标签</a></li>
<p> </p>
<li><a href="#2">二、下拉菜单、多行文本框以及表单分组</a></li>
<p> </p>
<li><a href="#3">三、空白标签及标签分类</a></li>
<p> </p>
<li><a href="#4">四、CSS</a></li>
<p> </p>
<li><a href="#5">五、CSS选择器</a></li>
<p> </p>
<li><a href="#6">六、伪类选择器</a></li>
<p> </p>
</ul>
<article>
<h2 id='1'>一、表单标签</h2>
<p>用来收集信息的标签</p>
<p>1. 可以提交表单中收集到的信息</p>
<p> action属性: 设置提交信息的位置</p>
<p> method属性: 提交方式 -- post/get</p>
<h3>input标签</h3>
input标签 -- 文本输入框
<ol>
<li>是表单标签</li>
<li>type属性:text -- 普通文本输入框</li>
<li>name属性: 必须设置</li>
<li>value属性: 标签内容</li>
<li>placeholder属性: 站位符(提示信息)</li>
<li>maxlength: 输入框可以输入的最大长度</li>
<li>readonly: 输入框只读(不能输入)</li>
</ol>
input标签 -- 密码输入框
<ol>
<li>type属性:password -- 密码输入框(显示密文)</li>
<li>value属性: 标签内容</li>
<li>placeholder属性: 占位符(提示信息)</li>
<li>maxlength: 输入框可以输入的最大长度</li>
<li>readonly: 输入框只读(不能输入)</li>
</ol>
input标签: 多选按钮
<ol>
<li>type属性: checkbox</li>
<li>name属性: 同一类型name值必须一样</li>
<li>value属性: 设置提交的值</li>
<li>checked属性: 设置为checked, 让其处于选中状态</li>
</ol>
input标签: 普通按钮
<ol>
<li>type属性: button</li>
<li>disabled: 让按钮不能点击</li>
<li>value: 按钮上的内容</li>
</ol>
input标签: 重置标签
<ol>
<li>将当前所在的form中所有表单相关标签对应的值重置</li>
</ol>
<hr />
<h2 id="2">二、下拉菜单、多行文本框以及表单分组</h2>
<p> <b>下拉菜单</b></p>
<ul>
<li>用select标签创建下拉菜单</li>
<li>在select内用option标签设置下拉菜单选项</li>
<li>每个option标签对应一个选项</li>
<li>通过设置option标签的select的属性使对应选项为默认选中</li>
</ul>
<p> <b>多行文本框</b></p>
<ul>
<li>通过textarea标签设置多行文本框</li>
<li>通过设置textarea标签的rows属性设置多行文本框的行数</li>
<li>通过设置textarea标签的cols属性设置多行文本框的lie数</li>
<li>placeholder属性: 占位符(提示信息)</li>
</ul>
<hr />
<h2 id="3">三、空白标签及标签分类</h2>
<p> 空白标签又叫无语义标签, 一般用来作为某些内容的载体</p>
<p> span标签和div标签都是空白标签</p>
<h3>HTML中标签分为两大类: 块级标签和行内标签</h3>
<h4>块级标签: 每个标签独占一行</h4>
<p>常用块级标签有:</p>
<ul>
<li>标题标签: h1-h6</li>
<li>段落标签: p</li>
<li>水平分割线标签: hr</li>
<li>列表标签: ul、ol、dl</li>
<li>表格标签: table</li>
<li>表单标签: form</li>
</ul>
<h4>行内标签: 多个标签可以共处一行</h4>
<p>常用行内标签有:</p>
<ul>
<li>超链接标签: a</li>
<li>图片标签: img</li>
<li>下拉菜单标签: select</li>
<li>输入标签: input</li>
<li>文本域标签: textarea</li>
</ul>
<hr />
<h2 id="4">四、CSS</h2>
<h3>1. 什么是CSS</h3>
<p>  CSS是web中的表现标准,又叫层叠样式表,用于设置标签的样式(目前使用的是CSS3)</p>
<h3>2. 写的位置</h3>
<p>  内联样式表: 将CSS写在标签的style属性中</p>
<p>  内部样式表: 写在head标签的style标签内容中</p>
<p>  外部样式表: 写在一个CSS文件中, 通过head中的link标签关联</p>
<p> </p>
<p>  优先级: 内联的最高; 内部和外部没有绝对的优先级, 后写的覆盖先写的</p>
<h3>3. 写的方法</h3>
<p>  选择器{属性1:属性值; 属性2: 属性值}</p>
<p>  选择器: 用来选中需要设置样式的标签</p>
<p>  属性: CSS属性(CSS2中的属性有两百多个)</p>
<p>  属性值: 如果属性值是数字, 表示大小要在后面加px, 否则无效</p>
<p>  注意: 每个属性间用分号隔开, 否则属性无效</p>
  
<p>  补充属性: color: 设置字体颜色 background-color: 设置背景颜色 width: 标签的宽度 height: 标签的高度</p>
<hr />
<h2 id="5">五、CSS选择器</h2>
<h5>  1.元素选择器(标签选择器)：标签名</h5>
<p>     选中所有的标签名对应的标签</p>
<h5>  2.id选择器：#id属性值</h5>
<p>    每个标签都有一个id属性，整个html中，id的值必须唯一</p>
<h5>  3.class选择器：.class属性值</h5>
<p>    每个标签都有一个class属性</p>
<h5>  4.通配符：*</h3>
<p>    选中所有的标签</p>
<h5>  5.层级选择器：选择器1 选择器2，...</h5>
<h5>  6.群组选择器：选择器1，选择器，....</h5>
<b>补充:</b>
  css中的颜色值：
<ol>
<li>颜色英语单词</li>
<li>16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)</li>
<li>rgb值：rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1</li>
</ol>
<hr />
<h2 id="6">六、伪类选择器</h2>
<h5>  伪类选择器: 选择器: 状态</h5>
<ul>
<li>link: 超链接的初始状态</li>
<li>visited: 超链接访问后的状态</li>
<li>hover: 鼠标悬停的状态</li>
<li>active: 鼠标按住的状态</li>
</ul>
<p><b>  注意：</b>给同一个标签通过伪类选择器给不同状态设置不同的样式的时候, 要遵守爱恨原则(先爱LoVe才能恨HAte)</p>
</article>
</body>
</html>
网友评论