HTML+CSS总结

HTML总结

Html（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面！

超级链接的target属性

target的取值有_blank、_self、_parent、_top，其中_parent和_top适合于超级链接位于框架页面的帧中。target属性值也可以取不同帧的name值。

1._blank

代表新打开窗口显示链接页面。

2._self

代表链接页面覆盖原来的页面。

3._parent

代表链接页面只覆盖帧所属的框架页面。

4._top

代表链接页面覆盖整个浏览器窗口。

CSS总结

div元素

默认情况下，一行只能容纳一个div标签。无论宽度多小，一行始终只有一个div标签。margin-left属性和margin-right属性分别设置div的左右边距，当设置div左外边距和右外边距的值为auto时，左外边距和右外边距将相等。

margin:0px auto; 0px和auto之间是空格，而不是逗号。

float属性

float属性也称为浮动属性，可以使多个块状元素并列于一行。对前面的div元素设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行。float属性的值有left、right、none和inherit。

注：使2个div并列于一行的前提是：这一行有足够的宽度容纳2个div宽度。

clear属性

clear属性的值有none、left、right和both，默认值是none。当多个块状元素由于第一个设置浮动属性而并列时，如果某个元素不需要被“流”上去，即可设置相应的clear属性。

line_height属性

表示行间距，line_height大于或等于div高度时，文本上下居中对齐。

border属性

设置边框样式，边框属性值有3种：边框尺寸（像素）、边框类型和边框颜色（16进制）。border:20px solid #333;表示边框尺寸是20px，边框类型是solid类型，边框颜色是#333；border:10px groove #ff0; //所有边框的属性

border-left:10px groove #ade; //左边框

border-right:10px solid #450; //右边框

border-bottom:10px dashed #f00; //下边框

border-top:10px dotted #ff0; //上边框

margin属性

用来设置外边距。设置外边距后在元素的周围会产生空白区域。margin属性也有margin-left、margin-right、margin-top和margin-bottom属性，分别用来设置左、右、上和下外边距。

设置div水平居中：margin:0px auto;

padding属性

用于设置内边距，类似于html中表格单元格的填充属性，即盒子边框和内容之间的距离。padding属性也有padding-left、padding-right、padding-top和padding-bottom属性，分别用来设置边界与内容区之间左、右、上和下的空白宽度。

postion属性

用于设置容器的定位。postion属性有4个值，分别是：static、absolute、fixed、relative。（1）absolute用于容器的绝对定位，使用绝对定位的容器浮于其它容器之上。定位的方法是在CSS中设置容器的top、bottom、left和right值，这4个值得参照对象是浏览器的4条边。同一位置只会显示最上面的容器，CSS绝对定位容器的z-index属性的值越大，容器越靠上。

（2）Fixed用于容器的固定定位，固定定位和绝对定位非常类似，不过被定位的容器不会随着滚动条的拖动而变化位置。不过IE6.0版本的浏览器不支持fixed值得postion属性，网上类似的效果都是采用javascript脚本编程完成的。

（3）reletive用于设置容器的相对定位，相对定位也是独立出来浮在上面，不过相对定位的容器的top、bottom、left、right属性参照的对象是其父容器的4条边，而不是浏览器窗口。

background-color属性

用于设置背景色。

background-image属性

设置背景图片，编写格式为：background-image:url(“图片路径”); 控制背景平铺的属性为background-repeat，其值有repeat（默认，平铺背景图片）、no-repeat（不平铺，只是显示一张图片）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）。

当背景图片设置为不平铺时，可以使用background-position定位背景图片的位置。有2种编写方法：

第一种方法：Background-postion:左右位置上下位置;