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