一 基本概念
1.主页（Home Page）
主页（Home Page)它是一个网页，是进入一个网站的开始画面，就同“瘟酒吧”的蓝天白云一样。也就是说，主页是一个网站的门面，要想设计出一个优秀的网站，就必须有一个“要让浏览者想不看都难”的主页，它必须引人入胜，能吸引每一个来访者的注意力，引发人们的好奇心，能让人产生一种深入探索你的网站的冲动。优秀的主页是一个好的网站必须具备的第一要素。
2.超级链接（Hyperlink)
超级链接是WWW的神经系统，它也是向导，把你从一个网页带到另一个网页，或者从网页的某一部分引导到另一部分。超级链接是用特殊的文本或图象来实现链接的，单击它就可以实现它的功能。
3.网页（Web Page)
网页就是、、、、（很难懂的概念，极其抽象，看得见摸不着），你为什么到互联网去，你在WWW上看到的就是网页。它是由HTML编写的文件，上面有贴图，有音乐，有、、、、
4.超文本（HyperText)
超文本是一种新的文件形式，指一个文件的内容可以无限地与相关资料链接。超文本是自然语言文本与计算机交互、转移和动态显示等能力结合，超文本系统允许用户任意构造链接，通过Hyperlink来实现。
5 超文本语言（Hyper Text Markup Language）
超文本语言(HTML)是制作编写网页、包含超级链接的超文件的标准语言，它由文本和标记组成。超文本文件的扩展名一般为 .html或.htm。二，网站的组织结构上网的网虫一定觉得网络上内容丰富、信息繁杂，但你是否想过一个网站的组织结构。网页的组织结构有以下四种：1、线性结构
这是网站最简单的一种结构，它是以某种顺序组织的，可以是时间顺序，也可以是逻辑甚至是字母顺序。通过这些顺序呈线性地链接。如一般的索引就采用线性结构。线性结构是组织网页的基本结构，复杂的结构也可以看成是由线性结构组成的。
2、二维表结构
这种结构允许用户横向、纵向地浏览信息。它就好象一个二维表，如看课表一样。
3、等级结构
等级结构由一条等级主线构成索引，每一个等级点又由一条线性结构构成。如网站导航等就是这种结构。在构造等级之前，你必须完全彻底的理解你的网站内容，避免线性组织不严的错误，不方便浏览者。
4、网状结构
这是最复杂的组织结构，它完全没有限制，网页组织自由链接。这种结构允许访问者从一个信息栏目跳到另一个栏目去，其目的就是充分利用网络资源和充分享受超级链接。整个互联网就是一个超级大的“网”状结构。组织信息的最简单方式就是序列,在一个序列中你可以提供一种线性的叙述。作为一种有序的叙述或者处在一种逻辑秩序中的信息最适合组织成序列。这种序列可以是按时间排列的,也可以是从一般到特殊的一种逻辑主题的系列,甚至可以是按字母顺序排列的,比方说在索引、百科全书与词汇表中就是如此。然而,最简单的序列组织通常只用于较小的站点,一旦叙述较为复杂,就要求更复杂的结构了。较复杂的站点仍然可以作为一个序列来组织,但在主要序列中的每一页可以有一页或更多分支页面和插入信息,或者是作为通向其它站点信息的中间链接。分栏
程序手册、大学课程表、或者医院的个案描述,最好是按分栏的方式来组织,分栏一种连接各种变数的好方式,比方说,历史年表就可以分出诸如"事件"、"技术发展"、"文化"等等栏目。要做到成功地分栏,在这一分栏中的各个单位就应该共享一个高度统一的主题和次级主题的结构,这些主题常常并没有特别的重要性等级,例如"结核病"并不比"胸膜炎"重要或者次要,但在观念上这两种疾病的描述都共享着一个统一的次级主题结构这样用户就能够顺栏而下,阅读有关结核病的材料,或者穿栏而过,比较这两种病的"诊断图像"。当然,假如用户缺少对有关信息相互联系的知识,他们使用起这种分栏来就会感到困难。所以,我们要假定这类站点的读者是相对有经验的读者,他们对主题及其结构已经有一种基本的理解。在采用分栏的站点中,一种概观的图像是很有用的。等级
按等级划分信息,是组织复杂信息的最好方式之一,并且含有等级组织的结构特别适合于在站点上使用,原因是网上的站点一般都被组织得由一个单一的主页向下延伸。大多数用户都熟悉这种等级的图形结构,都会觉得这些结构能帮助他们一步步深入。一种等级组织也施加了一种有用的训练,它对你分析你自己站点的内容施加了一种有用的训练,因为只有当你彻底地理解了你的材料,你才能使这种等级秩序工作得最好。另外,等结在公司与人们日常生活中是如此地为人熟知,用户也容易建立这样一种进入站点的认知结构。网网状的组织结构对信息类型的使用几乎不施加什么限制,它的目的经常是模仿思想的连续和观念的自由流动。在这种结构中,用户可以按他的兴趣,以一种对每个访问者都是独特的、具有启发性的方式随意浏览。这种组织方式在互联网上得到了长足的发展,它可以把访问者带到一个站点的其他信息栏目中去,也可以把他带到其他的站点上去,其目的就是要充分地利用网上的资源和链接。但是,网状的组织结构也可能容易造成混乱和模糊观念,因为它们难于使用户理解和预测你的站点的内容。只有对于那些由链接列表控制的小站点,并且它的访问者主要是受过较高教育或较有经验的用户为寻求进一步的提高,它才工作得最好,而对理解你的基本主题却不是最适用的。
1）像<span>这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等，
3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系。
4）浮动是从网页布局的角度来定义元素的显示，而行内和块状属性主要是从元素自身的性质来定其显示的。
5）当元素没有定义边框时，可以把内边距作为外边距使用。有时候外边距会有重叠现象的。
6）当为元素定义背景图像时，内边距区域内可以显示背景图像，而对外边距区域来说，背景图像是达不到的，他永远都是透明状态
7）用div+css设计网页结构时，设计师满脑子都是网页内容，而非内容所呈现的效果。
8）块状元素：不管块状元素宽度是多少，他总会自动占据一行，因为在他末尾附加了一个换行符，而行内元素没有这个特点。块状元素有完整的盒模型结构，可以定义宽度和高度，而行内元素没有这个特性，无法通过高度来改变文本行的行高。
块元素的代表标记 div
行内元素的代表标记 span ，行内标记不具备组织结构框架
9）网页布局分为：自然布局，浮动布局， 定位布局
10）当一个元素被定义为浮动显示时，即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以，应该有个好的习惯即把浮动元素设置高和宽。如果没有设置，则元素会按照它所包含的内容大小来确定它的大小。
11）当元素浮动后，周边的对象会自动环绕浮动元素周围，形成一种环绕关系。
12）块状元素之间的外边距会有重叠现象，但是浮动元素之间的外边距不会发声重叠现象。
13）浮动元素移动，上移：margin-top:-**下移：margin-botom:-*px,其他以此类推。
14）一般定位元素（绝对或是相对元素）都会覆盖在文档流对象之上。但是，select元素的窗口控件还不完全支持z-index
15）在css定位布局中，一般遵循“外部相对定位，内部绝对定位”
16）在body中设置min-width:760px,可以避免布局重叠现象。
