网页设计资料.doc

HTML标签是HTML语言中最基本的单位,HTML标签是HTML语言最重要的组成部分. 通常要用两个角括号括起来:. 都是闭合的(闭合就是标签的最后要有一个/,来标示结束.),但不一定是成对出现的,比如和一对标签.(是开始标签,是结束标签,在开始和结束标签中可以有内容),比如就是单独的.(注意要在最后加上/,以标示其是独立的) 标签是大小写无关的,跟表示的意思是一样的.标准推荐使用小写.HTML属性 - 一般都出现在HTML标签中,HTML属性是HTML标签的一部分 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中 标签可以拥有多个属性 属性由属性名和值成对出现 HTML元素是构建网页的一种单位,是由HTML标签和HTML属性组成的,HTML元素也是网页中的一种基本单位.HTML文档就是HTML页面,也就是网页,是由HTML元素组成的HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.HTML注释的开始使用 段落 段落是用标签定义的。This is another paragraph HTML自动在一个段落前后各添加一个空行。 换行 当需要结束一行，并且不想开始新段落时，使用标签。标签不管放在什么位置，都能够强制换行。This is a paragraph with line breaks 注意：标签是一个空标签，它没有结束标记 HTML中的注释 注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。可以使用注释来解释代码，这可以在以后编辑代码时候提供帮助。 注意： 需要在左括号“”后面跟一个感叹号，右括号不用。 HTML实体 有些字符，比如说“”字符，在HTML中有特殊的含义，因此不能在文本中使用。想要在HTML中显示一个小于号“”，需要用到字符实体。 字符实体 一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;） 想要在HTML文档中显示一个小于号，必须这样写：<或者 注意：实体名是大小写敏感的 框架 使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。 frameset标签： 标签定义了如何将窗口拆分成框架。 每个frameset标签定义了一组行rows或者列cols。 行/列的值指明了每个行/列在屏幕上所占的大小。 frame标签 标签定义了每个框架中放入哪个文件。 导航框架 创建一个导航框架。导航框架包含了一系列链接，它们的目标页面在第二个框架中。文件“frame_links.htm”包含了三个链接，链接的代码如下： Frame a Frame b Frame c 第二个框架将显示链接到的页面。 内联框架 创建一个内联框架（包含在HTML页面里的框架） Some older browsers dont support iframes. If they dont, the iframe will not be visible. 说明： frameborder属性：用来设置frame的边框宽度 name属性：可以作为超级链接的目标地址标志 表格 表格用标签定义。 表格被划分为行（使用标签）。 每行又被划分为数据单元格（使用或者标签）。 首行通常使用标签代表表头单元格。 其余行使用表示“表格数据”（Table Data），即数据单元格的内容。 数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。 表单 表单元素是能够让用户在表单中输入信息的元素 例如： 文本框 密码框 下拉菜单 单选框 复选框 表单是用元素定义的HTML表格和表单(2007-01-24 20:54:47) 转载分类： 读NET 定义表格 表格是用元素来定义的，如下所示： . 属性border用于定义表格边框的宽度，n可以是从0开始的整数，如果设置border=0，那么表格边框没有宽度，如果忽略border属性，浏览器将不会显示边框，这和设置border=0是一样的效果。 属性align用于设定表格的对齐方式，alignment可以是left、center或right。 属性bgcolor用于指定表格的背景色。 元素用于定义表格的标题， 元素在表格中添加一个新行，如下所示： . 属性align用于指定这一行在水平方向的对齐方式，alignment可以是left、center、right，属性valign用于指定这一行在屏幕方向上的对齐方式，alignment可以是top、middle、bottom。 元素用于定义表头 元素用于定义单元格 表单的创建浏览器提交表单与服务器的交互过程 使用元素，以及在其嵌入的相关元素（称为控件），就可以创建作为HTML文档的一部分的表单。 表单的基本语法如下： . 属性method用于指定向服务器发送表单数据时使用的HTTP方法，可以是get或者post这两种方法中的一种。get是缺省方法。当采用get方法提交表单时，提交的数据被附加到URL（在属性action中指定)的末端，作为URL的一部分发送到服务器端。例如：我们制定action=reg.jsp,当提交表单后，在浏览器的地址栏中，我们会看到下面的信息： Http:/localhost:8080/reg.jsp?user=zhangsan&pwd=1234 而post方法是将表单中的信息作为一个数据块发送到服务器端。无论采用哪一种方法，数据的编码都是相同的，格式为：name1=value1&name2=value2. 属性action指定对表单进行处理的脚本的地址，也就是说，表单提交到服务器后，交由谁来处理，在action属性中指定处理者的URL。 元素用于接受用户输入的信息，是一个带有属性的空元素，用来创建表单中的控件，其语法是： 属性type用来指定要创建的控件的类型，属性name用来指定空间的名称，处理表单的服务器端脚本可以获得以名称-值对所表示的表单数据，利用名称，可以取出对应的值。name属性在表单中并不显示。属性size用来指定表单中控件的初始宽度。属性value指定控件的初始值。 单行文本输入控件（tyoe=text) 提交按钮（type=submit) 重置按钮（type=reset) 口令输入控件（type=password) 单选按钮（type=radio) 复选框（type=checkbox) 隐藏控件（type=hidden) 多行文本输入控件 创建多行输入控件的语法为： . 属性rows用于指定文本输入控件可视区域显示的文本行数，属性cols用于指定文本输入控件可视区域显示的宽度，在开始标签和结束标签之间出现的文本，将作为文本输入控件中的初始文本而显示。 列表框列表框由元素创建，列表框中的各个选项用元素提供。 Css网址：/topic/582923 CSS:Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。 网页设计最初是用HTML标记来定义页面文档及格式，例如标题、段落、表格、链接等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1。 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现： 脚本语言(包括JavaScript、Vbscript等)、 支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等) CSS样式表。td, ul, ol, ul, li, dl, dt, dd font-family: Verdana, sans-serif; p font-family: Times, Times New Roman, serif; 派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，他们被称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：li strong font-style: italic;font-weight: normal;请注意标记为 的红色代码的上下文关系：我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用我是斜体字。这是因为strong元素位于li元素内。我是正常的字体。在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。再看看下面的 CSS 规则：strong color: red; h2 color: red; h2 strong color: blue; 下面是它施加影响的 HTML：The strongly emphasized word in this paragraph isred.This subhead is also red.The strongly emphasized word in this subhead isblue.id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 # 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:green;下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。这个段落是红色。这个段落是绿色。注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。id 选择器和派生选择器在现代布局中，id 选择器常常被用来建立派生选择器。#sidebar p font-style: italic;text-align: right;margin-top: 0.5em;上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 或者 ，不过这样的用法是非法的，因为不可以在内联元素 中嵌入 （如果你忘记了原因，请参阅 XHTML:网站重构）。一个选择器，多种用法即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：#sidebar p font-style: italic;text-align: right;margin-top: 0.5em;/PCSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一1.2 CSS语法 CSS 语法由三部分构成：选择器、属性和值： selector property: value 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： Java代码 1. bodycolor:bluebody color: blue上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。 值的不同写法和单位 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000： Java代码 1. pcolor:#ff0000;p color: #ff0000; 为了节约字节，我们可以使用 CSS 的缩写形式： Java代码 1. pcolor:#f00;p color: #f00; 我们还可以通过两种方法使用 RGB 值： Java代码 1. pcolor:rgb(255,0,0); 2. pcolor:rgb(100%,0%,0%);p color: rgb(255,0,0); p color: rgb(100%,0%,0%); 请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。 记得写引号 提示：如果值为若干单词，则要给值加引号： Java代码 1. pfont-family:sansserif;p font-family: sans serif;多重声明： 提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样： Java代码 1. ptext-align:center;color:red;p text-align:center; color:red;你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样： Java代码 1. p 2. text-align:center; 3. color:black; 4. font-family:arial; 5. p text-align: center; color: black; font-family: arial;空格和大小写敏感 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑： Java代码 1. body 2. color:#000; 3. background:#fff; 4. margin:0; 5. padding:0; 6. font-family:Georgia,Palatino,serif; 7. body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。1.4 CSS派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： Java代码 1. listrong 2. font-style:italic; 3. font-weight:normal; 4. li strong font-style: italic; font-weight: normal; 请注意标记为 的蓝色代码的上下文关系： Html代码 1. 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用2. 3. 4. 我是斜体字。这是因为strong元素位于li元素内。5. 我是正常的字体。6. 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用我是斜体字。这是因为 strong 元素位于 li 元素内。我是正常的字体。在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。 再看看下面的 CSS 规则： Java代码 1. strong 2. color:red; 3. 4. 5. h2 6. color:red; 7. 8. 9. h2strong 10. color:blue; 11. strong color: red; h2 color: red; h2 strong color: blue; 下面是它施加影响的 HTML： Html代码 1. Thestronglyemphasizedwordinthisparagraphisred.2. Thissubheadisalsored.3. Thestronglyemphasizedwordinthissubheadisblue.The strongly emphasized word in this paragraph isred.This subhead is also red.The strongly emphasized word in this subhead isblue.1.5 CSS id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： Java代码 1. #redcolor:red; 2. #greencolor:green;#red color:red;#green color:green;下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 Html代码 1. 这个段落是红色。2. 这个段落是绿色。这个段落是红色。这个段落是绿色。注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。 id 选择器和派生选择器 在现代布局中，id 选择器常常用于建立派生选择器。 Java代码 1. #sidebarp 2. font-style:italic; 3. text-align:right; 4. margin-top:0.5em; 5. #sidebar p font-style: italic;text-align: right;margin-top: 0.5em;上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 或者 ，不过这样的用法是非法的，因为不可以在内联元素 中嵌入 （如果你忘记了原因，请参阅 XHTML:网站重构）。 一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，