HTML+CSS总结（终结HTML+CSS的学习和复习）

我们都是有经验的开发人员

HTML

-------------------------------------------------------------------------

一，你在网页中创建的所有的元素，如果塔有宽度，就为其设置，不能让浏览器出现水平滚动条，除非你需要它

auto是自适应内容的高度，100%是父级元素的高度

常用转义字符： 空格 < < > > " " ¥ ￥

1：超链接：

	<a href="#">超链接</a>:如果没有指定href属性，那就看不到超链接的效果 Target _blank (新容器打开) _self _parent _to
	2）超链接的三种类型： _blank
	A)页面间的超链接，从一个页跳转到另外一个页面 href="路径" 相对路径：只需要指定不同的目录（如果在同一个根目标下，那么相同的目录部分就可以省略） 问题：写上全路径经（带中文)超链接失效 B）：功能性链接----电子邮箱 C）锚记链接 1）***一个锚记 <a name="名称"></a> 指定超链接的href <a href="#名称"></a>

2.img:图片
<img src="图片的路径" width="宽度" height="高度"
title="图片可以正常显示提示" alt="图片不能显示时提示"
3<embed/>:它可以帮助我们加入多媒体文件但是需要注意，如果添加动画（swf）,它会给你自动的宽和高，这个时候你可以通过设置
width height来确定动画文件的显示大小
3)marquee direction top/bottom/left/right scrollamount="单位时间内的速度"scrollDelay="滚动延时"

4框架集：frameSet
1.不能合并也不能拆分,只能嵌套,当你发现某一行或者一列里有多个页面，不要犹豫，这一定又是一个框架集
2.框架集其实就是多个框架页面的集合
3.如何实现框架页面的效果：rows划分为多行
cols划分为多列

	1：创建框架集，为框架集中的框架命名
	2.将超链接的目标target指定为相应框架的名称 屏幕剪辑的捕获时间: 2013/4/2 15:35 最好设置宽和高,不然系统给你一个默认值,而这个默认值你不一定需要 <iframe src="top.html" width="960px" height="180px" scrolling="no" frameborder="0"></iframe>

4:form:作用就是收集用户填写的信息,将其提交给服务器做相应的处理.
<formaction="" method="post" name="form1"id="form1">
Action：提交给那个服务器，或者处理页
Method:提交方式 get/post ,post更安全，隐式提交，get是显式提交
post可以提交的数据更多
1.类型：
text:单行文本框 password:密码框 radio:单选按钮
checkBox:复选框 select:下拉列表
submit:提交 reset：重置 textarea:文本域
2.注意：radio必须设置name,且name需要一致
3.submit默认会提交 reset会清空表单元素的值恢复到原始值

复习:
标签: <br/>换行 p段落 hr水平线
<a href="#"></a>
1.页面间链接
2.功能性链接---打开电子邮箱
3.锚记链接
<ul type="circle disc square">/<li> <ol typw="a A I I1">/<li>
<img src="相对路径" alt="图片不能显示时的提示"title="图片可以正常显示的时候的提示"/>
<span>

表单：

	1.<form name="" id="" action="处理页面或者服务器地址" method="post/get"></form>
	2<input type="text" name="" id="" size="字符个数" maxLength="" value="里面显示默认值"/> ---没有name属性的表单元素的值不是会提交给服务器的
	<inpyt type="radio" name="" checked> --一定要设置name属性，况且应该设置为一样 <input type="checkbox"/>
	<input type="password/>
	<input type="submit"/>form自动提交按钮，拥有默认功能--提交
<	<input type="reset"/>会清空表单元素的值恢复到默认值
	<select> <option value="id">文本</option></select>
	<textarea>这里是默认值</textarea> <input type="image" src=""/>
	Readonly---只读 disabled----禁用

样式表：
1.文本样式
2.背景图片/背景颜色
3.结构---布局----DIV

4.ul/li
一：样式的特点：
1)样式没有简写，多个英语单词用-连接
2)多个样式用;间隔
二：常用的文本样式：
Color:颜色
Font-size:以后做网页的时候如果没有特别需要，文本的大小都是12px
Font-family:字体
Text-align:水平方向对齐：left/center /right
Text-indent:字符左缩进
Letter-spacing:字符间距
Font-weight:bold 加粗
Line-height:行高---做单行文字的垂直居中（如果是多行：display:table-cell;vertical-align:top/middle/bottom）
text-decoration：underline --下划线
三：背景：
Background-color:背景色

Background-image:背景图片

Background-repeat:repeat no-repeat repeat-x repeat -y
Background-position:X Y，left/center/right top /center/bottom,如果你只设置第一个值，那么Y方向默认是垂直居中(前提你为BODY添加了高度)--以后你可以将你需要使用的图片放在一个位图上,通过偏移来实现不同的图片需要
四：UL/LI -----当你看到网页的内容是有规则的排列..新闻列表
List-style:none:去掉列表前面的项图标
Float:left/right/none:因为LI是块级元素，会单独占据一行，所以为了他能够多个LI放置到同一行，就需要设置float
五：div---做网页主体结构---一个块级元素，单独占据一行,不要轻易为外层容器添加bordermargin
padding值，因为它会影响到其它的块。
Width:宽度
Height:高度
Border:边框 border-top border-right border-bottom border-left 边框一定要添加style
(solid dashed dotted) 它会改变原始层的宽和高
Border-width :边框宽度px为单位
Border-style: solid dashed dotted -----一定要添加这个属性
Border-color:颜色
简写：border:1px solid red
Margin:外边距:它会改变原始层的宽和高，可能造成其它元素的错位，所以没有特别需要不要为其添加这个值，它是层外面的距离。
Padding:内间距它会改变原始层的宽和高，可能造成其它元素的错位，所以没有特别需要不要为其添加这个值，它是层内部的距离。
Margin,padding:一个值：代表四个方法
二个值：上下/左右
三个值：上/左右/下
四个值：上/右/下/左

div的宽度===div本身的width宽度+2*border+2*margin+2*padding
六：关于float:
1:当你为一个层设置高度是auto的时候默认情况下高度会根据内容的高度自动变化，但是如果里面有浮动元素，它会清除高度自动变化属性。解决方案如下：

<div style="clear:both;line-height:0px"> </div>
七：CSS---cascading style sheet ---层叠样式表：相同的属性会根据某一些规则覆盖。如果不同样式就会层叠---累加
1样式的书写位置：
1.行内：最不常用的 ,在标签里面写 <p style="color:red">
2.内嵌：写在head里面
<styletype="text/css">

</style>
3.外部样式表。将CSS写一个单独的文件。可以重用，同时实现的W3C标准所建议的内容和样式分离。分式合作，可以使我们不用太关心前台界面是如何生成的。它也可以节省流量---钱。
2.如果书写样式（样式的三个类型）
标签样式：相当于修改了标签的默认原始属性,使用的时候不需要调用
类样式：以.开头，后面是样式的名称（建议不要使用纯数字，不要使用已经存在的标签名称），调用的时候使用class="名称"
ID选择器：如果ID是标识元素，那么它应该是唯一的，如果ID做为样式，那么可以重用，定义的时候使用#修饰，调用的时候用id="名称"

js:document.getElementById("")
优先级：ID>CLASS>标签，但是不管什么情况，style=""行内样式是最高的。

3.实现样式的嵌套：

1.传统的样式有以下不好：
/*
1.如果你需要某个元素有效果，就必须显示调用
2.有时候我无法从类的名称猜到这个类样式到底是为那个元素来书写的同，因为从类样式不能体会到网页的结构层次。
3.命名真是大问题啊。有可能你上面写了，但是你忘记了，下面再写一个。
*/

2。解决方法：使用嵌套






3.调用多个类：



<p class="a1 a2 a3"></p>

伪类样式：本质是一个标签，但是可以扩展为一个类。

a:link:添加了超链接但是没有做任何处理时的状态

a:hover:鼠标上移时候的状态

a:active:鼠标点击还没释放时的状态

a:visited:访问过后的状态