一 基本概念
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,可以避免布局重叠现象。
Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.
也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。
HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.
HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是<p>,块引用标签是<blockquote>。有些标签说明页面如何被格式化（例如，<p>开始一个新段落），其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。
关于标签，需要记住的是，它们是成双出现的。每当使用一个标签－－如<blockquote>,则必须以另一个标签</blockquote>将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。
基本HTML页面以<html>标签开始，以</html>结束。在它们之间，整个页面有两部分－－标题和正文。
标题词－－夹在<head>和</head>标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在<body>和</body>之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。
那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)
