第二讲：HTML语言――网页制作

第二讲HTML语言HTML语言是超文本标记语言（HypertextMark-upLanguage）的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言，而是一种描述性的标记语言。所有网页软件都是以HTML为基础，学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中，常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码，此时就必须对HTML标记相当熟悉才行。HTML文件是纯文本文件，能用任意的文本编辑器编辑，如：记事本、写字板、Word、Dreamweaver、Frontpage等。本讲将对常用的HTML标记符进行介绍。一、HTML网页的基本组成与特点1、用HTML制作网页的简单实例【例2.1】制作杜牧诗《秋夕》制作过程：（1）用任何文本编辑器（如记事本、写字板、WORD等）输入下列文本（代码）：!example2-1.htmhtmlheadmetahttp-equiv=Content-Typecontent=text/html;harset=gb2312title杜牧诗~秋夕/title/headbodybgcolor=#FFFFFFtext=#000000palign=centerfontsize=7color=#0000ff秋夕/font/ppalign=centerfontsize=5color=#0000ff杜牧/font/ppalign=centerfontsize=6color=#0000ff银烛秋光冷画屏/font/ppalign=centerfontsize=6color=#0000ff轻罗小扇扑流萤/font/ppalign=centerfontsize=6color=#0000ff天阶夜色凉如水/font/ppalign=centerfontsize=6color=#0000ff卧看牵牛织女星/font/p/body/html（2）以纯文本格式存为example2-1.htm文件（设位置为：E:\网页制作\example）。（3）打开浏览器，在地址栏中输入E:\网页制作\example\example2-1.htm，就会看到所制作的网页。一、HTML网页的基本组成与特点2、HTML网页的基本组成启动Dreamweaver后，切换到代码浏览窗口，此时看到的HTML代码，即是网页的基本组成部分，其代码为：htmlheadmetahttp-equiv=Content-Typecontent=text/html;harset=gb2312titleexample2-1/title/headbodybgcolor=#FFFFFFtext=#000000/body/html从中可见，一个最基本的网页一般由三个部分组成，分别是：（1）html/htmlhtml标记用于定义网页文件的开始，对应的结束标记为/html则定义网页的结束。（2）head/head该组标记用于定义网页的头，用来说明文件的一些基本信息，如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。在这里，title和/title标记定义网页的标题，该标题将显示在浏览器的标题栏中。meta标记有很多用法，这里是用于指定网页所使用的字符集，是可选项。（3）body/bodybody用于定义网页的正文开始，/body用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间，bgcolor为body标记的属性，用于指定网页的背景颜色，text也为body标记的属性，用于指定网页正文的前景色。一、HTML网页的基本组成与特点3、HTML的特点HTML文件是标准的文本文件，以纯文本形式存放，扩展名为*.htm或*.html。若系统为UNIX系统,则扩展名为*.html。HTML是由若干标记符和文本构成，标记符适用于组织网页的内容和控制输出格式，HTML具有以下几个特点：（1）HTML标记的一般格式HTML标记均是用括起来的，大多数标记是成对出现的，有开始标记和对应的结束标记，结束标记多一根斜杠。许多标记还有属性，用于对标记进行详细设置。HTML标记的一般格式为：标记（名称）属性1=属性值1属性2=属性值2属性3=属性值3……/标记（名称）例如：bodybgcolor=#FFFFFFtext=#000000/body但有的标记没有结束标记，称为单标记，如：BR（2）各属性项间用空格分隔，属性值可用双引号或单引号引起来，也可不引而直接表达。例如控制文本字体的标记为font，该标记有face、size、color属性，分别用于控制字体名、字体大小和字体颜色，用法为：fontface=宋体size=4color=#ff0000字体属性测试/font（3）HTML标记不区分大小写，HTML与html和Html是相同的。一、HTML网页的基本组成与特点3、HTML的特点（4）HTML中一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。例如：pfontcolor=#000000face=方正粗圆简体，方正黑体2001年7月13日，北京申奥成功！/font/p和pfontcolor=#000000face=方正粗圆简体，方正黑体2001年7月13日，北京申奥成功！/font/p都是正确的，且显示效果相同，但HTML标记中的一个单词不能分两行书写，如：pfontcolor=#000000face=方正粗圆简体，方正黑体2001年7月13日，北京申奥成功！/font/p是不正确的。一、HTML网页的基本组成与特点3、HTML的特点（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用BR标记，换段用P标记，P表示段落开始，/P表示段落结束。如果源文件中有多个连续空格，显示时也只显示一个，若要显示多个空格，可以使用多个 。例如：fontface=楷体_GB2312center2008北京奥运/center/font与fontface=楷体_GB2312center2008北京奥运/center/font的浏览器显示效果均为2008北京奥运fontface=楷体_GB2312center2008p北京奥运/center/font与fontface=楷体_GB2312center2008p北京奥运/center/font的浏览器显示效果均为2008北京奥运但是，我们注意到时：在源文件中加换行符，虽然显示效果不换行，但在原换行符处会加一个空格。一、HTML网页的基本组成与特点3、HTML的特点（6）网页中所有的显示内容都应受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。（7）HTML标记可以嵌套使用，实现从不同角度对文本进行格式控制。嵌套使用时注意不要发生交叉嵌套。比如若要以加粗、居中、红色显示“奥林匹克精神”文本，则实现的代码为：bdivalign=centerfontcolor=#ff0000奥林匹克精神/font/div/b判断是否发生交叉嵌套的方法是：分别将标记符的开始标记和对应结束标记用线连接起来，只要这些连接彼此不相交，则嵌套就正确，否则嵌套错误。比如以下用法就发生了嵌套错误。bdivalign=centerfontcolor=#ff0000奥林匹克精神/div/font/b各种标记符书写的先后顺序没有特别要求，只要不发生交叉嵌套就行。因此，以下三种用法等效。bdivalign=centerfontcolor=#ff0000奥林匹克精神/font/div/bdivalign=centerbfontcolor=#ff0000奥林匹克精神/font/b/divfontcolor=#ff0000divalign=centerb奥林匹克精神/b/div/font（8）可以为网页加上注释，如例2.1中!example2-1.htm即为网页的注释部分，注释可以放在网页开头部分用于说明网页的功能等，或放在某个标记之后对标记加以说明。注释用“！”标记，“!”表示注释开始，“”表示注释结束，中间的所有内容表示注释，且可以换行。注释不是必须的，注释的内容不在浏览器中显示出来，仅为设计人员阅读方便。二、文本及版面风格控制标记（一）文本控制1、文本格式标记文本控制主要是控制文本的字体、字体大小和颜色，这通过font标记来实现。格式：fontface=fontnamesize=fontsizecolor=#RRGGBB文本/font功能：设置网页中普通文字的显示效果。属性：(1)Face属性用于指定文字字体，如“楷体_GB2312”、“宋体”、“黑体”等。但要注意，浏览器显示的字体与客户端安装的字体有关，如果网页文件中设置了客户端滑安装的字体，则以默认的宋体字显示。因此，在使用字体时，应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。(2)color属性用于设置字体的颜色。在HTML中颜色通常用#RRGGBB来表达，RR、GG、BB分别代表红色、绿色、和蓝色的分量值，用十六进制数表示，取值范围为00～FF。通过改变三基色的混合量，即可形成各种各样的颜色。另外，颜色也可以用英文单词来表示。下面是常用颜色的取值及英文单词表。颜色红色绿色蓝色黄色黑色白色紫色浅蓝色取值#FF0000#00FF00#0000FF#FFFF00#000000#FFFFFF#FF00FF#00FFFF单词RedGreenBlueYellowBlackWhitePurpleAqua二、文本及版面风格控制标记（一）文本控制(3)size属性用于指定字体的大小。字体大小的表达方法有两种，一是设置为绝对字号，此时的设置值可以是1～７号，1号最小，7号最大，默认字号为3，可利用basefontsize=字号设置或更改默认字号。例如，若要以蓝色，宋体2号字输出“网页设计技术”，则实现的代码为：fontface=宋体size=2color=#0000FF网页设计技术/font另一种是设置为相对字号大小，此时的用法为fontsize=±n，其中n代表字号改变的量，+表示字体在默认字号的基础上增大几号，-表示在默认字号的基础上递减几号字。例如：basefontsize=4fontsize=+2网页设计技术/font二、文本及版面风格控制标记2、标题格式标记标题格式使用Hn标记控制。格式：Hnalign=对齐方式标题文本/Hn功能：用于定义文章内章节标题的显示格式，同时包括了标题的字体、大小、和段落间距。说明：n表示标题字号，共六级，分别是1，2，3，4，5，6，数字越大，字号越小。Align表示水平对齐方式，取值为left、right或center。【例2.2】在网页中分别用六级标题标记符输出一个测试效果文本。实现的代码为：htmlheadtitle演示标题字体/title/headbodybgcolor=#FFFFFFtext=#000000H1这是第一级标题/H1H2这是第二级标题/H2H3这是第三级标题/H3H4这是第四级标题/H4H5这是第五级标题/H5H6这是第六级标题/H6/body/html二、文本及版面风格控制标记运行效果如图2.1所示。图2.1标题字演示注意：用该标记实现的文章标题效果有限，通常还是