部分HTML设计基础.ppt

《部分HTML设计基础.ppt》由会员分享，可在线阅读，更多相关《部分HTML设计基础.ppt（119页珍藏版）》请在三一办公上搜索。

1、1,第2章 HTML设计的基础,本章学习目标 本章主要讲解HTML语言、CSS和xml语言。通过本章学习，读者应该掌握以下内容：HTML语言基本知识 CSS,2,2.1 HTML语言,2.1.1 HTML 语言的结构 HTML（超文本标记语言）是一种描述文档结构的标注语言它使用一些约定的标记对WWW上的各种信息进行标注。HTML的优点是其跨平台性。,3,2.1 HTML语言,2.1.1 HTML 语言的结构 HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。HTML文件看起来像是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。,4,2.1 HTML语言,2.1

2、.1 HTML 语言的结构 从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结束标记。中间叫元素体。每个元素都有名称和许多可选择的属性。,5,2.1 HTML语言,下面来看一个HTML文件结构实例，,武汉工业学院 这是一HTML的测试文件,7,HTML文件仅由一个HTML元素组成。即文件以开始，以结尾，文件其余部分都是 HTML的元素体。而HTML元素的元素体又由头元素、体元素和一些注释组成。头元素和体元素的元素体又由其它的元素、文本及注释组成。,2.1 HTML语言,8,链接

3、签的格式为：内容 例如：这是一HTML的测试文件,2.1 HTML语言,9,在HTML中有三个字符具有特殊的意义，即：表示一个标签的结束。”表示空格。,2.1 HTML语言,10,元素名也叫链接签名。需要注意的是：（1）和起始链接签之间不能有空格。（2）元素名称不区分大小写。（3）一个元素可以有多个属性，属性及其属性值不区分大小写，且各个属性用空格分开。,2.1 HTML语言,11,在头元素中的元素表示的是该HTML文件的一般信息，这些元素书写的次序是无关紧要的，它只表明该HTML有还是没有该属性。出现在体元素中的元素是次序敏感的，改变元素在HTML文件中的次序会改变该HTML文件的输出形式。

4、,2.1 HTML语言,12,1.标记标记用来给网页命名，显示在浏览器的标题栏中。例如，在图2-1中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”。,2.1.2 构成网页的基本元素,13,2.标记到标题元素有6种，用于表示文章中的各种题目。字体大小到顺序减小。下面这个例子中分别使用了到的标题。,2.1.2 构成网页的基本元素,这是一个测试网页 标题测试标题测试标题测试,标题测试标题测试标题测试,15,16,3.预格式化文本标记HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用通

5、知浏览器。下面是图2-3和图2-4的HTML源文件。,2.1.2 构成网页的基本元素,这是一个测试网页 HTML是一种描述文档结构的标注语言，它使用一些约定的标记对各种信息进行标注。,18,4.和标记用于强制换行。表示一个段落的开始。一般可不用。5.标记 这几个标记都是用来修饰所包含文档的。标记使文本加粗；标记使文本倾斜；标记给文本加下划线；标记给文本加删除线；标记使文本字体加重。下面给出一个这几个元素的HTML源文件。,2.1.2 构成网页的基本元素,这是一个测试网页 HTML是一种 描述文档结构的 标注语言，它使用一些 约定的标记对各种信息进行 标注。,20,6.标记用来修改字体和颜色。其

6、中COLOR属性：指定文字颜色，颜色的表示可以用6位十六进制代码，如；SIZE属性：指定相对尺寸。,2.1.2 构成网页的基本元素,这是一个测试网页 HTML是一种 描述文档结构的 标注语言，它使用一些 约定的标记对各种信息进行 标注。,22,如果用户想要设置网页的背景色和文字颜色，可以将标记扩充为：,2.1.2 构成网页的基本元素,表2-1 设置背景景色和文字颜色,表2-2 常见颜色RGB值,25,例如要将网页背景颜色设置为蓝色，,2.1.2 构成网页的基本元素,26,超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的

7、两段文字或两个文件联系起来。,2.1.3 超文本链接指针,27,1.统一资源定位器URL统一资源定位器（Uniform Resource Locator）是文件名的扩展。它的构成为：protocol:/machine.name:portdirectoryfilename,2.1.3 超文本链接指针,28,其中：protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：HTTP：超文本传输协议，该资源是HTML文件；FTP：文件传输协议，用ftp访问该资源；MAILTO：采用简单邮件管理传输协议SMTP，提供电子邮件服务。,2.1.3 超文本链接指针,29,machine.name

8、是存放该资源主机的IP 地址，通常以字符形式出现,如。port（端口号）是服务器在其主机所使用的端口号。一般情况下端口号不需要指定，只有当服务器所使用的端口号不是默认的端口号时才指定。directory和filename 是该资源的路径和文件名。,2.1.3 超文本链接指针,30,一个典型的URL为：http:/网络采用传输协议；主机的名字是；但它并没有指出访问的目录和哪个文件，其实这时表示访问的是根目录下的默认主页文件。,2.1.3 超文本链接指针,31,与单机系统绝对路径、相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。绝对URL、相对URL是相对于最近访问的URL而言。

9、,2.1.3 超文本链接指针,32,当协议（http:/）被省略时，就认为与当前页面的协议相同。当主机域名被省略时，就认是当前主机域名。当目录路径被省略时，就认是当前目录。当文件名被省略时，就认是当前文件。,2.1.3 超文本链接指针,33,2.建立一个链接,（1）链接到其它站点在HTML文件中用链接指针指向一个目标。其基本格式为：zzz 其中zzz可以是文字或图片并显示在网页中，href中的h表示超文本，而ref表示“访问”或“引用”的意思。,34,2.建立一个链接,例如：武汉工业学院在这个例子中，充当指针的是“武汉工业学院”。,35,在编写HTML文件时，需要知道目标的URL。那么如何才能

10、得到目标的URL呢？在编写HTML文件时，对能确定关系的一组资源（例如在同一个目录中）应采用相对URL。,2.建立一个链接,36,（2）同一个文件中的链接超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。对于同一文件的不同部分，我们怎样来标识呢？,2.建立一个链接,37,下面的内容将介绍链接指针元素的另外的一个用途，标识目标。标识一个目标的方法为：.NAME属性将放置该标记的地方标记为“KKK”，指针：转向下一处,2.建立一个链接,38,2.1.4 在HTML文件中使用图像,1.在HTML文件中显示图像在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG

11、格式的图像。在HTML网页中加图像是通过标记实现的.例如：,39,1.在HTML文件中显示图像,标记有几个较为重要的属性。其中：SRC属性：指明图形的URL地址；HEIGHT属性：决定图形的高度；WIDTH属性：决定图形的宽度；BORDER属性：决定边框线的宽度，0表示无边框；ALT属性：指明图像显示的备用文本；下面通过一个示例来说明标记的使用。,测试页,41,图2-6 HTML文件举例,42,2.在HTML文件中利用图像建立链接,如果在链接标记和的中间放置一个标记，这个图像将会成为一个可击点，产生一个链接。例如：,43,2.1.5 框架结构的使用,框架能够将页面分成多个独立变化的窗口，每个窗

12、口可以显示不同的Web页面，并可以不断更换显示的对象。有关框架内容的HTML语法为：,武汉工业学院,45,图2-7 框架结构示意图,46,2.1.5 框架结构的使用,说明：把浏览器窗口分成两列，其中“*”表示除了明确的值以外剩下的值。如果浏览器窗口的大小为640*480像素，那么框架中右面一列的宽度为 个像素，左面一列的宽度为 个像素。,47,2.1.5 框架结构的使用,该句的含义是。下面一行的高度为 像素；上面一行的高度为 像素。,48,2.1.5 框架结构的使用,标记有以下主要属性：SRC属性：指定框架单元的URL源，即在此框中显示“a.htm”的内容。NAME属性：为该框架单元起个标识名

13、，主要用来为以后改变框架内容提供入口。,49,2.1.5 框架结构的使用,SCROLLING属性:设置框架是否使用滚动条。有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。,50,2.1.5 框架结构的使用,target:_blank 打开新窗口。target:_self 在当前框架结构中打开，会覆盖当前内容。target:_top 在当前窗口打开，覆盖所有的框架内容。target:框架名 指定框架打开.例w7-1.asp,51,2.1.6 表单的应用,1.什么是表单HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。表单的操作是与服务器进

14、行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。,52,2.1.6 表单的应用,是在服务器端工作程序，通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。当用户输入信息（这个信息可以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，便激活了一个服务器端程序。该服务器程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成查询之后，便把查询结果传给服务器，通过服务器传给Web服务器。,图2-8 表单示例,54,2.表单的标记,表单就是为Internet网络用户在浏览器上建立

15、一个交互接口，使Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。表单的HTML格式如下,55,2.表单的标记,FORM标记有以下主要属性：（1）ACTION属性：是用来指出，当这个FORM提交后需要执行的驻留在Web服务器上的程序名（包括路径）是什么。例如：,56,2.表单的标记,（2）METHOD属性：用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。默认的方式是GET，这两者的区别是什么？,57,2.表单的标记,在与之间，可以使用除以外

16、的任何HTML标识，这将使FORM变得非常灵活。,58,3.HTML中的INPUT标记,下面是INPUT标记的标准格式：其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么。：TYPE=“TEXT”表示在表单中使用单行文本框=“PASSWORD”表示在表单中为用户提供密码输入框,59,=“RADIO”表示在表单中使用单选按钮=“CHECKBOX”表示在表单中使用多选按钮=“SUBMIT”表示在表单中使用提交按钮=“RESET”表示在表单中使用重置按钮,3.HTML中的INPUT标记,60,（1）文字输入和密码输入用一个例子说明文字输入和密码输入的制作。请看下例：,3.HTML中的INP

17、UT标记,这是个测试页 请输入您的真实姓名:您的主页的网址:密码:,62,图2-9 文字输入和密码输入的例子,63,请输入您的真实姓名:,3.HTML中的INPUT标记,64,（2）复选框（Checkbox）和单选框（Radio Button）单选框和复选框的格式如下：单选框：多选框：,3.HTML中的INPUT标记,下面来看一个例子，具体来体会一下。这是个测试页 选择一种你喜爱的水果:香蕉 草莓 橘子,这是个测试页 选择你所喜爱的运动:足球篮球排球,67,图2-10 单选框实例,68,（3）按钮的制作其实“发送”按钮真正的含义叫“提交”。即当Internet网络用户用鼠标单击这个按钮后，用户

18、输入的信息便提交给一个驻留在Web服务器上的程序，让服务器进行处理.其典型的格式：。VALUE属性：如果缺省出现“SUBMIT”的字样，改变按钮上的提示。例如：VALUE=“提交”。,3.HTML中的INPUT标记,69,另一种在浏览器常用的按钮叫“重置”按钮，当Internet网络用户用鼠标单击这个按钮后，网络用户输入的信息被清除，让网络用户重新输入信息。其典型的格式：，VALUE属性：缺省VALUE属性为“RESET”的字样。改变按钮上的提示，例如：VALUE=“重新输入”。,3.HTML中的INPUT标记,70,设置下拉式菜单或带有滚动条的菜单，下拉菜单的标准格式如下所示：选项一.,4.

19、HTML中的SELECT标记,71,NAME属性是当Internet网络用户将表单提交时作为输入信息的名字。SIZE属性控制在浏览器窗口中这个菜单选项的显示条数。MULTIPLE属性允许读者一次可选多个选项，如果缺省MULTIPLE，一次只能选一项，类似于单选。OPTION带有SELECTED属性，若在SELECT标记中设定MULTIPLE属性的话，可以在多个OPTION标记中带有SELECTED属性，表示这些选项已经预选。,4.HTML中的SELECT标记,武汉工业学院请从下面课程中选择几门选择课:网络技术书法音乐欣赏多媒体技术,73,图2-11 设置下拉菜单,74,2.1.7 HTML中的

20、表格,从这个例子可以看出一个表格有一个标题（Caption），它表明表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的单元叫做“表元”（Cell），它又分为表头（用TH标记来表示）和表数据（用TD标记来表示）；表格中分割表示的行列线称为“框线”（Border）。,75,一个表格的基本框架如下所示：,1.表格的标记,76,1.表格的标记,77,（1）TABLE标记,一个表格至少一个TABLE标记，由它来决定一个表格的开始和结束，而且TABLE标记可以嵌套。TABLE标记有以下五种属性：BORDER属性，指定围绕表格的框的宽度（只能用像素）。CELLSPACING属性，指定框线的宽度CE

21、LLPADDING属性，用于设置表元内容与边框线之间的间距。ALIGN属性用来控制表格本身在页面上的对齐方式。其取值可是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）。WIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占浏览器窗口的百分比来定义。,78,（2）CATION标记,CATION标记用来标注表格标题的。CATION标记必须紧接在TABLE开始标记之后放在第一个TR标记之前。通过该标记所定义的表格标题一般显示在表格的上方，而且其水平方向是居中对齐。另外，如需要对表格的标题突出显示，可以在CATION标记之间加入其它对字体进行加重显示的标记。如：,表格标题强

22、调.,80,定义表格的一行。TR标记中有两个属性:ALIGN属性，用来设置表行中的每个表元在水平方向的对齐方式，其取值可以是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）；VLIGN属性，用来设置表行中的每个表元在垂直方向的对齐方式，其取值可以是TOP（向上对齐）、CENTER（居中对齐）、BOTTOM（向下对齐）。,（3）TR标记,81,例如，要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐，可使用如下源代码：,（3）TR标记,82,（4）TH标记,TH标记用来表示一个表行中的各个单元。同样具有ALIGN和VALIGN属性，TH标记还有两个属性:WIDTH属性，用来

23、设置表元的宽度，HEIGHT属性，用来设置表元的高度。,83,2.表格使用实例在这个实例中，通过制作一个登记表格来给大家来说明如何制作一个比较复杂的表格。在表格中经常会出现跨多行、多列的表元，这就要利用TD标记另外两个属性，即COLSPAN和ROWSPAN属性。例如 登记照 表示这个表项标题将横跨三个表项的位置；,84,登记照 表示这个表项标题将纵跨三个表项的位置；另外每个表元还可以设置其背景颜色。例如 登记照还可以在表格中插入超级链接或在表格中插入图片，如果能对这个例子举一反三的话，那么仅需制作一个无框线的表格，就可以把各种数据按照自己所希望的形式在页面进行布置。下面就给出一个具体的实例（其

24、页面效果如图2-13所示）：,85,图2-13 综合表格实例,大奖赛登记表 报名号757性别女 姓名江小丽,推荐单位宇宙公司,87,2.2 级联式样式表（CSS）,级联式样式表（CSS）为 HTML 文档提供美观而一致的外观。使用CSS样式定义HTML页和Web窗体中元素和文本的外观和位置。可将style属性以内联方式添加到许多HTML元素上，还可将CSS样式嵌入到块中或存储在外部级联式样式表（.css）文件中。,88,2.2.1 定义CSS,CSS样式定义元素的显示方式以及在页中放置元素的位置。可以创建一个通用规则，只要Web浏览器遇到一个元素实例，或是一个分配给某个样式 CLASS的元素，

25、该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。,89,1.在 STYLE 块内定义 CSS 样式规则,每个 CSS 样式规则都有两个主要部分：选择器、声明（包括属性和属性的值）例如一条说明“将 标记内包含的所有文本设置为居中，并采用红色字体颜色”的简单 CSS 样式规则可以写成：H1 text-align:center;color:red;,90,1.在 STYLE 块内定义 CSS 样式规则,CSS 样式规则可以在 HTML 文档 部分的 块内定义。以下是一个示例（运行结果如图2-14所示），它定义了一条 CSS 样式规则，并将该规则应用到 Web 页上的所有 元素：,HTML

26、 4.0 CSS 举例 H1 text-align:center;color:red;This text is centered and red This text isnt centered and red,92,图2-14 CSS示例,93,2.CSS 样式规则的优先级,CSS 样式规则从一定意义上讲是“级联”的，即全局样式规则会一直应用于 HTML 元素，直到有局部样式规则将其取代为止。在局部样式应用于 HTML 元素之后，全局样式规则中不与局部 CSS 样式规则冲突的部分继续应用于这些元素。,94,3.将 HTML 元素分配给 CSS 样式 CLASS,每当文本出现在分配给特定 CLA

27、SS 的 HTML 标记中时，就会自动应用 CSS 样式。在 块中，CLASS 样式规则的选择器以一个句点开始。例如：.head2 font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;若要以内联方式应用这种类型的样式，请向支持内联样式的标记添加 CLASS 属性：作为 CLASS 属性值输入的字符串，应与该页所应用样式规则的选择器相匹配。以下是一个页示例，它定义和应用了名为 head2 的 CSS 样式 CLASS：,HTML 4.0 CSS Style Class Example BODY

28、 background:#FBFBFB;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;A:link color:blue;text-decoration:none A:active color:red;text-decoration:none A:visited color:green;text-decoration:none.head2 font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;This text is

29、centered,large,red and green,bold,and italic,96,4.外部 CSS 样式表,外部 CSS 样式表文档是只包含样式规则、以.css 为扩展名的纯文本文件。语句表示将外部 CSS 样式表“mystyles.css”中的样式规则应用到该页。下例中，“Mystyles.css”是一个外部 CSS 样式表文档，它包含 标记的样式规则。,调用外部CSS This text is red,98,4.外部 CSS 样式表,外部 CSS 样式表中列出的样式规则的写法与在 块中的写法一样，只是两边没有 标记：H1 text-align:center;color:red

30、;.head2 font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;一个外部 CSS 样式表可链接到许多 HTML 页，从而在整个 Web 站点内应用一致的样式。CSS 样式表将格式设置规则与内容分开，从而大大方便了样式规则的定位和编辑。块还可以用于公开文档，以通过可扩展标记语言（XML）对该文档进行处理。,99,5.CSS的注释,注释的好处?CSS用C/C+的标记进行注释的，“/*”放在注释的开始处，“*/”在结束处。下例说明如何进行注释：,CSS例子 H1 font-size:x-lar

31、ge;color:red/*这是一个CSS的定义*/H2 font-size:large;color:blue,101,2.2.2 CSS属性分类,CSS属性分为包括字体、颜色和背景、文本、边框、用户界面、表和视觉效果。,102,1.字体,字体格式属性确定格式化文本在 Web 浏览器中将如何显示。可设置首选字体系列、字体大小和颜色，以及文本是否显示为粗体、斜体或带下划线。可将字体格式设置属性添加到在外部 CSS 样式表中定义的 CSS 样式规则，或添加到 Web 页HEAD部分的STYLE块中定义的 CSS 样式规则。,103,1.字体,若要将样式规则应用于 Web 页的BODY节中的某个特定

32、 HTML 元素，需要将 CLASS 或 ID 属性添加到其值为所需 CSS 样式规则选择器的元素的开始标记中。也可将 CSS 字体属性直接添加到支持 STYLE 属性的 HTML 元素中。注意：如果定义了BODY样式，则该页上所有未由内联样式格式化的文本都将以指定样式显示。,表2-3字体属性,字体样式测试,107,2.颜色和背景,背景属性通过更改颜色或包含图像来控制背景。如果采用图像作为 Web 页的背景，也可指定其位置和平铺属性。通过组合使用这两种属性，可确定背景图像在页面上的位置以及图像显示的频率。表2-4中列出了CSS的颜色和背景属性。,表2-4CSS的颜色和背景属性,3.文本CSS文

33、本属性用以改变页面文本的显示方式，这些属性可以细化页面的排版，生成特殊的文本效果。表2-5中列出了CSS的文本属性。表2-5 CSS的文本属性,110,3.文本,说明：在垂直对齐的属性值的说明如下：baseline（使元素和上级元素的基线对齐）middle（纵向对齐元素基线加上上级元素的x-高度字母 x 的高度的一半的中点）sub（下标）super（上标）text-top（使元素和上级元素的字体向上对齐）text-bottom（使元素和上级元素的字体向下对齐）影响相对于元素行的位置的关键字有 top（使元素和行中最高的元素向上对齐）bottom（使元素和行中最低的元素向下对齐）,111,文本样

34、式测试武汉工业学院WEB服务器的域名为：；武汉工业学院FTP服务器的域名为：；,113,4.鼠标属性,当把鼠标移动到不同的地方时；当鼠标需要执行不同的功能时；当系统处于不同的状态时，都会使鼠标的形状发生改变。用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。,在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，详细列表如下：,下面来看一段鼠标指针在不同文字对象对应于不同显示的代码：changemouse鼠标效果 请把鼠标移到相应的位置观看效果。手的形状 移动 反方向 等待 求助,116,2.2.3 CSS的单位,

35、1.长度单位一个长度的值由可选的正号“”或负号“”、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位：em（em，元素的字体的高度)ex（x-height，字母“x”的高度）,117,2.2.3 CSS的单位,px（像素，相对于屏幕的分辨率）绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位:

36、in（英寸，1英寸=2.54厘米）cm（厘米，1厘米=10毫米）mm（米）pt（点，1点=1/72英寸）pc（帕，1帕=12点）,118,2.2.3 CSS的单位,2.百分比单位一个百分比值由可选的正号“”或负号“”、接着的一个数字，还有百分号“%”。在一个百分比值之中是没有空格的。百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。3.颜色单位颜色值是一个关键字或一个RGB格式的数字。Windows VGA(视频图像阵列)形成了16个关键字:aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。,119,2.2.3 CSS的单位,RGB颜色可以有四种形式：#rrggbb（如，#00cc00）#rgb（如，#0c0）rgb（x,x,x），其中x是一个介乎0到255之间的整数（如，rgb（0,204,0）rgb（y%,y%,y%）y是一个介乎0.0到100.0之间的整数（如，rgb（0%,80%,0%）上述的例子指定同一颜色。,