网页设计与制作

网页设计与制作 安庆职业技术学院 jpkc.aqvtc.cn

第5章网页设计的编程语言 安庆职业技术学院 jpkc.aqvtc.cn

1 2 3 HTML语言层叠样式表脚本语言JavaScript及编程安庆职业技术学院 jpkc.aqvtc.cn

第一节 HTML 安庆职业技术学院 jpkc.aqvtc.cn

1 2 3 4 HTML的由来 HTML的基本结构 HTML的语法 HTML的常用标识内容安庆职业技术学院 jpkc.aqvtc.cn

5.1.1 HTML语言的由来 超文本文件的格式早在1945年就由Vannevar Bush提出，他在理论上建立了一个超文本文件系统。1965年Ted Nelson第一次使用“超文本”一词来形容这种管理信息的系统。与Bush一样，他的超文本文件系统“Xanadu”，最终也未获得成功。1967年，在IBM资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由Andries Van Dam主持，在美国布朗大学最终完成。1969年，美国国防部高级研究计划署建立了ARPA网，该网络最成功的技术就是TCP/IP 协议。安庆职业技术学院 jpkc.aqvtc.cn

5.1.1 HTML语言的由来 HTML 语言起源于标准综合标记语言(Standard Generalized Markup Language 简称 SGML) ，是由 CERN (欧洲粒子物理实验室)首先提出来的。其最早版本起源于1992年，HTML 4.01版于1999年12月24日被推荐使用。HTML最初用于发布信息，并没有在网络上使用。但它那极容易使用的显著特点和随着网络带宽的逐渐增加，人们便将其作为在各种网络环境之间，不同文件格式之间进行交流的一种语言格式。它通过文件格式标准化，统一使用一些标记符号( TAG )，对文件的内容进行标注，指出内容的输出格式，如字体大小、颜色，背景颜色，表格形式，各部分之间逻辑上的组织等。使用支持 HTML 的浏览软件，其它用户就可以对文件进行自由的跳跃式的阅读，还可自行调整显示和阅读的形式。由于它简单易学，表现力强，适用广泛 , 所以深受用户喜爱，迅速得到了推广和普及。安庆职业技术学院 jpkc.aqvtc.cn

5.1.2 HTML语言的基本结构 超文本标识语言结构简单，语法较松散，易学易用。它是一种文字处理语言，而不是“程序”语言。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。序（HTML的版本声明）是超文本标识语言的附加标识，放在HTML文档的第一行。在一般的文档中也许没有，序只是用来告知浏览器所遵循的HTML版本，当前的浏览器一般不要求含有序，而且也不会处理序，因此该标识可以忽略。但是若想保持编写严格遵循标准通用标识语言（SGML）的HTML文档，那么就该保留序的位置。安庆职业技术学院 jpkc.aqvtc.cn

5.1.2 HTML语言的基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <!序> <HTML> 　　　<HEAD>头部信息　　　</HEAD> 　　　<BODY>文档主体，正文部分　　　</BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.2 HTML语言的基本结构 <HTML><HEAD><TITLE>一个简单的HTML示例</TITLE></HEAD><BODY><CENTER><H3>欢迎光临我的主页</H3><BR><HR><FONT SIZE=2>这是我第一次做主页，无论怎么样，我都会努力做好！</FONT></CENTER></BODY></HTML> ━┓　┃文件头━┛ ━┓　┃　┃　┃　┃文件体　┃　┃　┃　┃━┛ 安庆职业技术学院 jpkc.aqvtc.cn

例5.1 使用多种标识元素的超文本文档(L5-1.htm) <HTML> <HEAD> <TITLE>对文字、图片、文档作不同处理</TITLE> </HEAD> <BODY> <H2>链接图片、文档，改变字体、字号等</H2> <OL><LI><FONT face="隶书">划却君山好，平铺湘流水。</FONT> <LI><FONT face="华文行楷">巴陵无限酒，醉杀洞庭秋。</FONT> </OL> <IMG border="0" src="Js.gif" width="108" height="70"> <FONT size="5">湖光、山色</FONT><BR> <A href="http://www.yueyang.gov.cn">岳阳</A> </BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.3 HTML语言的语法 HTML是标准通用标识语言(Standard Generalized Markup Language，SGML)的一个子集，是标识的集合。一般标识是由一个起始标识(Opening Tag)和一个结束标识(Ending Tag)所组成，其语法为：<x>受控文字</x>其中，x代表标记名称。<x>和</x>就如同一组开关：起始标识<x>为开启(ON)的某种功能，而结束标识</x>(通常为起始标识加上一个斜线/)为关(OFF)功能，受控制的文字信息便放在两标识之间。例如：<i>这是斜体字</i>。标识之中还可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。例如：<x a1="v1",a2="v2",...,an="vn">受控文字</x> 标识(Tags)和属性(Attributes)构建了HTML的语法。安庆职业技术学院 jpkc.aqvtc.cn

5.1.3 HTML语言的语法 • 标识标识就是给文档中某些具有特殊含义的部分作标记的过程，标识的符号(如：<BR>、<LI>、<H2>等等，常简称标识或标记)是该过程的具体实现。HTML标识通常可分为两类，一类用来识别网页上的组件或描述组件的样式，如网页的标题(<TITLE>)、网页的主体(<BODY>)、标题（<H1>）、标题（<H2>）、粗体（<B>）、斜体（<I>）、段落（<P>）、分项符号清单（<UL>）和编号清单(<OL>) 等；另一类用来指向其他资源，如<A>用来识别网页内的位置或超链接、<IMG>用来插入图片、<EMBED>用来插入声音等。HTML的标识嵌于文本格式的文档中，用来控制文字、图片等在浏览器中的表现，以及如何建立图片、文件之间的链接。使用超文本标识语言“修饰”过的文档一般都应该满足，无论在什么操作系统下，使用什么浏览器，读起来或看上去其“模样”都不会改变。安庆职业技术学院 jpkc.aqvtc.cn

5.1.3 HTML语言的语法 • 属性属性是存储属性值的变量。HTML中的许多标识都可以提供相关信息的属性设置。如设置文档的第2级标题文字，位置居中，文字为蓝色。其例句如下： <FONT SIZE="3" COLOR="#FF0000">设置字符的尺寸和颜色</FONT> │ │ │ │ │ │ │ │ │ 起空属属空属属内结始格性性格性性容束标值值标识识安庆职业技术学院 jpkc.aqvtc.cn

5.1.3 HTML语言的语法 • 值标识的属性通常含有一个值(Value)，该值应在规定的范围内选取。例如，<FONT>标识中的SIZE属性，其值为1～7，小于1或大于7均无效 • 嵌套标识在网页的设计中，不同页面有不同的要求，常常需用一个以上的标识来表示页面的数据，例如设置一串字符为：标题3、斜体、粗体，可以使用标识<H3>、<I>和<B>，例句如下： <H3><I><B>蓬莱阁</B></I></H3> 注意标识嵌套时的顺序不应交叉，下句则不对： <B><H3><I>蓬莱阁</H3></B></I> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.3 HTML语言的语法 • 空格符 HTML标识间多余的空格符或回车符浏览器是不理会的。程序员通常利用该特点在HTML文档上加空格、空行或回车，将HTML源代码排列整齐，以利阅读。 • 特殊字符特殊字符通常不能直接用于HTML文档在浏览器中显示，如：字符（&）、双引号(“”) 、小于(<)、大于(>)、空格符等。安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 1.基本标识(Basic Tags) (1) <HTML></HTML> 定义超文本文档，用于标记HTML 文档的开始和结束。 (2) <HEAD></HEAD> 设置页面的头标部分，用来包含当前文档的一些相关信息（如定义样式、网页的标题、网页中使用的脚本语言等）。 (3) <TITLE></TITLE> HTML文档均应该包含<TITLE>标识，用来指明文件的标题。其内容将显示在浏览器的标题栏内。 (4) <BODY></BODY> 放置Web页面的正文内容，包含文件内的文字、超级链接文字的颜色、背景色彩、图片、动画、影像、音效等，几乎所有对网页的展示功能。安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 (5) <META> 用来介绍与文件内容相关的信息。每一个<META>标识用于指明一个名称或数值对，常常放在头标识<HEAD>中。如： <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> (6) <BASE href=“URL”> 设置连接的基准路径，该标识可以大大简化网页内部超链接的全路径，这里只要给出相对于Base原指定的基准地址的相对路径即可。<BASE>为单标识，通常放在<HEAD>区内。若文档中写有<BASE href=“http://www.999.com”>，且站内有文件File1.htm，这样可以在<BODY>中简单地写<A href=“File1.htm”>…</A>来链接文件“File1.htm”。安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 2. 文本、字符格式(Text & Char Format) (1) <Hn> 标题文字(n=1～6),用于指定不同级别的标题从<H1>到<H6>共有六种标题标识供标识标题文。 <HTML> <HEAD> <TITLE>HTML 简介</TITLE> </HEAD> <BODY> <H1>HTML 简介</H1> <H2>HTML 简介</H2> <H3>HTML 简介</H3> <H4>HTML 简介</H4> <H5>HTML 简介</H5> <H6>HTML 简介</H6> </BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 (2) <BR> 换行标识，单标识。 (3) <P></P>定义段落（分段），常用双标识，也可以用单个标识。 <HTML> <HEAD> <TITLE>欢迎进入HTML</TITLE> </HEAD> <BODY BGCOLOR= lavender> <P>我的第一个HTML 文档</P> </BODY> </HTML> <P>…</P> 标记用于标记段落。 <P> 元素有一个 ALIGN 属性，用于对齐网页上的HTML 元素。安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 (4) <PRE></PRE>在<PRE></PRE>之间的内容将以预格式化的文本方式显示，包括回车换行以及跳格等。 <HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY> <P> PRE 标记用于以预定义的格式显示文本。 <PRE>轻轻的我走了，正如我轻轻的来。我轻轻的招手，作别西天的云彩。 </PRE> </BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 注：如有： <HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY bgcolor="LightGreen"> 春随香草千年艳；人与梅花一样清。 </BODY> </HTML> 则在浏览器窗口内<BODY>中的文字排在一行，不会分行显示。安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 (5) <HR>作为文本与文本之间的分界标识，通常是一个全宽的水平线，还可以用它来画竖线。 (6) 字符格式: <SUP></SUP> 定义上标 <SUB></SUB> 定义下标 <B></B> 粗体 <I></I> 斜体 <U></U> 显示文字加下划线 <EM></EM> 　强调（通常用斜体） <STRONG></STRONG> 着重强调（通常用粗体） <TT></TT> 定义等宽字体（打字机字体）安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 <HTML> <HEAD> <TITLE>HTML 学习</TITLE> </HEAD> <BODY> <P> <B>这很有趣</B> <BR> <BR> 水的分子式是 H<SUB>2</SUB>O。 <BR> <BR> 求圆的面积的公式为：pi*r<SUP>2</SUP> <BR> <BR> <I>足球是人们最喜爱的比赛。</I> <BR> <BR> <U>信息技术是发展的关键。</U> <BR> <BR> <EM>我们玩得很开心</EM> </P> </BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 (7) 字体: <BASEFONT> 变更网页默认字体、尺寸与颜色 <FONT></FONT> 改变字符串的字体、尺寸与颜色 <FONT> 元素和其相关的属性如 SIZE、COLOR 和 FACE 可以用来控制网页中文本的显示。 <HTML> <HEAD> <TITLE>欢迎进入 HTML</TITLE> <BODY> <H3><FONT SIZE = 3 COLOR = BLUE FACE = Times New Roman> 我的第一个 HTML 文档 </FONT></H3> <P>这 <FONT COLOR = BLUE SIZE = 6>将</FONT>成为真正的乐趣 </BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 3.列表标识(Lists) (1) 定义列表(Definition List) <DL></DL> 设定定义列表的标识 <DT> 设定定义列表的项目 <DD> 设定定义列表的项目说明 <DL compact> 设定紧密排列的定义列表安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 (2) 有序号列表(Ordered List) (如图5-6所示) 例如：<OL type="A"> <LI>项目一 <LI>项目二 <OL type="a"> <LI>子项目A <LI>子项目B </OL> <LI>项目三 </OL> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 (3)无序号列表(Unordered List) 例如：<UL type="square"> <LI>第一章 <LI>第二章 <P>下篇 <LI>第一章 </UL> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 5.表格(Tables) 可以用表格来精确定义页面文本或图片等的排版格式，这是一种常用的页面内容组织形式，许多网站的页面采用表格来布局网页内容。 <TH></TH> 表头单元。 <TD></TD> 表格单元。 <TR></TR> 表格行。 <TABLE></TABLE> 用来定义一个表格。 <CAPTION></CAPTION> 给出表格的标题。安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 列单元格行在 HTML 中，广泛使用表格控制文本和图像的位置安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 例：创建一个有三个单元格的表格：第一个单元格的内容是“足球”，第二个单元格的内容是“篮球”，第三个单元格的内容是“武术”；表的边框不可见 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>足球</TD> <TD>篮球</TD> <TD>武术</TD> </TR> </TABLE> </BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 表格由行组成（<TR> 标记包含在 <TABLE> 和</TABLE>标记里面），每一行由单元格组成（<TD> 标记包含在 <TR>和</TR> 标记里面) 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 <HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>Beckham</TD> <TD>MichaelJordan</TD> <TD>BruceLee</TD> </TR> <TR> <TD>Ronaldo</TD> <TD>KobeBryant</TD> <TD>JackieChan</TD> </TR> </TABLE> </BODY> </HTML> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 • 表格边框 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <TR> <TD>Beckham</TD> <TD>MichaelJordan</TD> <TD>BruceLee</TD> <TR> <TD>Ronaldo</TD> <TD>KobeBryant</TD> <TD>JackieChan</TD> </TABLE> </BODY> </HTML> <TABLE> 标记的 BORDER 属性用于指定表格的边框。如果将值设置为 0，则不会显示边框安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 • 表格的标题 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <CAPTION>体育项目</CAPTION> <TR> <TH>足球</TH> <TH>篮球</TH> <TH>武术</TH> </TR> <TR> <TD>Beckham</TD> <TD>Michael Jordan</TD> <TD>Bruce Lee</TD> <TR> <TD>Ronaldo</TD> <TD>KobeBryant</TD> <TD>JackieChan</TD> </TABLE> </BODY> </HTML> <CAPTION> 标记紧跟在 <TABLE> 标记后面，该标记用于指定表格的标题(简要说明)。 <TH> 标记用于指定每一列的标题安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <TR> <TD>Beckham</TD> <TD>MichaelJordan</TD> <TD>BruceLee</TD> <TD>RichardGere</TD> <TR> <TD>Ronaldo</TD> <TD>KobeBryant</TD> <TD>JackieChan</TD> <TD>Jack</TD> <TR> <TD>Zidane</TD> <TD>Rose</TD> <TD>Mary</TD> <TD>Richard</TD> </TR> </TABLE> </BODY> </HTML> • 插入行和列可以使用<TD> 和 <TR>标记在表中插入行和列安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <CAPTION>创建表格</CAPTION> <TR> <TH COLSPAN = 3>第一学期 </TH> <TH COLSPAN = 3>第二学期 </TH> </TR> <TR> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> </TR> <TR> <TD>98</TD> <TD>95</TD> <TD>80</TD> <TD>95</TD> <TD>87</TD> <TD>88</TD> </TR> </TABLE> </BODY> </HTML> • 合并单元格（列） COLSPAN 属性用于创建跨多列的单元格。安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 • 合并单元格（行） <TR> <TD ROWSPAN = 3>第一季度</TD> <TD>一月份</TD> <TD>2500</TD> <TD>1000</TD> <TD>1240</TD> </TR> <TR> <TD>二月份</TD> <TD>3000</TD> <TD>2500</TD> <TD>4000</TD> </TR> <TR> <TD>三月份</TD> <TD>3200</TD> <TD>1000</TD> <TD>2400</TD> </TR> </TABLE> </BODY> </HTML> ROWSPAN属性用于创建跨多行的单元格。 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <CAPTION>创建表格</CAPTION> <TR> <TH></TH> <TH></TH> <TH>螺母</TH> <TH>螺铨</TH> <TH>锤子</TH> </TR> 安庆职业技术学院 jpkc.aqvtc.cn

5.1.4 HTML语言的常用标识 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 WIDTH = 50% BGCOLOR = lavender> <TR BORDERCOLOR = "blue"> <TD ALIGN = left VALIGN = bottom>Beckham</TD> <TD>MichaelJordan</TD> <TD>Bruce Lee</TD> <TR BORDERCOLOR = "blue"> <TD ALIGN = left VALIGN = top>Ronaldo</TD> <TD>KobeBryant</TD> <TD>JackieChan</TD> </TABLE> </BODY> </HTML> • 格式化表格安庆职业技术学院 jpkc.aqvtc.cn

网 页 设 计 与 制 作