搜索
第1章网页设计概述·19·1.4.1HTML概念当畅游Internet时，通过浏览器所看到的网站是由HTML语言所构成的。HTML是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等连接显示出来。这种标记性语言是因特网上网页的主要语言。HTML网页文件可以使用记事本、写字板或Dreamweaver等编辑工具来编写，以.htm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。1.4.2HTML基本语法HTML标记是由“”和“”所括住的指令标记，用于向浏览器发送标记指令。主要分为：单标记指令、双标记指令（由“起始标记”＋内容＋“/结束标记”构成）。ahref=”#”aaaaaHTML语言使用标志对的方法编写文件，既简单又方便。它通常使用“标志名内容/标志名”来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。为了便于理解，将HTML标记语言大致分为基本标记、格式标记、文本Dreamweaver网页制作与色彩搭配全攻略·20·标记、图像标记、表格标记、链接标记、表单标记等。1.4.3基本标记基本标记是用来定义页面属性的一些标记语言。通常一份HTML网页文件包含3个部分：标头区HEAD……/HEAD、内容区BODY……/BODY和网页区HTML……/HTML。1．html……/htmlhtml标志用于HTML文档的最前边，用来标识HTML文档的开始。而/html标志恰恰相反，它放在HTML文档的最后边，用来标识HTML文档的结束，两个标志必须一块使用。2．head……/headhead和/head构成HTML文档的开头部分，在此标志对之间可以使用title/title、script/script等标志对。这些标志对都是用来描述HTML文档相关信息的，head和/head标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。3．body……/bodybody和/body是HTML文档的主体部分，在此标志对之间可包含p……/p、h1……/h1、br、hr等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。body标志主要属性如表1-1所第1章网页设计概述·21·示。表1-1body标志主要属性属性用途范例bodybgcolor=#rrggbb设置背景颜色bodybgcolor=#red红色背景bodytext=#rrggbb设置文本颜色bodytext=#0000ff蓝色文本bodylink=#rrggbb设置链接颜色bodylink=blue链接为蓝色bodyvlink=#rrggbb设置已使用的链接的颜色bodyvlink=#ff0000链接为红色bodyalink=#rrggbb设置鼠标指向的链接的颜色bodyalink=yellow黄色以上各个属性可以结合使用，如bodybgcolor=redtext=#0000ff。引号内的rrggbb是用6个十六进制数表示的RGB（即红、绿、蓝3色的组合）颜色，如#ff0000对应的是红色。4．title……/title使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文Dreamweaver网页制作与色彩搭配全攻略·22·本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在title/title标志对之间加入需要显示的文本即可。下面是一个简单的网页实例。通过该实例，读者便可以了解以上各个标志对在一个HTML文档中的布局或所使用的位置。htmlheadtitle显示在浏览器窗口最顶端中的文本/title/headbodybgcolor=redtext=bluep红色背景、蓝色文本/p/body/html注意：title/title标志对只能放在head/head标志对之间。1.4.4格式标记这里所介绍的格式标记都是用于body/body标志对之间的。第1章网页设计概述·23·1．p……/pp/p标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。p标志还可以使用align属性，它用来说明对齐方式，语法如下所示。palign=参数/pAlign的参数可以是Left（左对齐）、Center（居中）和Right（右对齐）3个值中的任何一个。例如palign=center/p表示标志对中的文本使用居中的对齐方式。2．brbr是一个很简单的单标记指令，它没有结束标志，因为它用来创建一个回车换行，即标记文本换行。注意：如果把br加在p/p标志对的外边，将创建一个大的回车换行，即br前边和后边的文本的行与行之间的距离比较大。若放在p/p的里边则br前边和后边的文本的行与行之间的距离将比较小。3．blockquote……/blockquoteblockquote/blockquote标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。Dreamweaver网页制作与色彩搭配全攻略·24·4．dl……/dl、dt……/dt、dd……/dddl/dl用来创建一个普通的列表；dt/dt用来创建列表中的上层项目；dd/dd用来创建列表中最下层项目，dt/dt和dd/dd必须放在dl/dl标志对之间。通过下面的实例，读者可以更好地理解这几个相近的标记。htmlheadtitle一个普通列表/title/headbodytext=bluedldt中国城市/dtdd北京/dddd上海/dddd广州/dd第1章网页设计概述·25·dt美国城市/dtdd华盛顿/dddd芝加哥/dddd纽约/dd/dl/body/html该实例在网页中的效果，如图1-29所示。5．ol……/ol、ul……/ul、li……/liol/ol标志对用来创建一个标有数字的列表。ul/ul标志对用来创建一个标有圆点的列表。li/li标志对只能在ol/ol或ul/ul标志对之间使用，此标志对用来创建一个列表项，若li/li放在ol/ol之间，则每个列表项加上一个数字；若放在ul/ul之间，则每个列表项加上一个圆点。示例如下所示：Dreamweaver网页制作与色彩搭配全攻略·26·图1-29格式标记执行效果图htmlheadtitle/title/headbodytext=blueolp中国城市/pli北京/lili上海/lili广州/li/ol第1章网页设计概述·27·ulp美国城市/pli华盛顿/lili芝加哥/lili纽约/li/ul/body/html以上在IE中的运行效果如图1-30所示。图1-30格式标记执行效果图6．div……/divDreamweaver网页制作与色彩搭配全攻略·28·div/div标志对用来排版大块HTML段落，也用于格式化表，此标志对的用法与p/p标志对非常相似，同样有align对齐方式属性。1.4.5文本标记文本标记主要针对文本的属性设置进行标记说明，如斜体、黑体字、加下划线等。1．pre……/prepre/pre标志对用来对文本进行预处理操作。2．h1/h1……h6/h6HTML语言提供了一系列对文本中的标题进行操作的标志对：h1/h1、h2/h2、……、h6/h6。h1/h1是最大的标题，而h6/h6则是最小的标题。如果在HTML文档中需要输出标题文本，可以使用这6对标题标志对中的任何一对。3．b……/b、i……/i、u……/u经常使用Word的人对这3个标志对一定很快就能掌握。b/b用来使文本以黑体字的形式输出；i/i用来使文本以斜体字的形式输出；u/u用来使文本以下加一划线的形式输出。4．tt……/tt、cite……/cite、em……/em、strong……第1章网页设计概述·29·/strong这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。tt/tt用来输出打字机风格字体的文本；cite/cite用来输出引用方式的字体，通常是斜体；em/em用来输出需要强调的文本（通常是斜体加黑体）；strong/strong则用来输出加重文本（通常也是斜体加黑体）。5．font……/fontfont/font可以对输出文本的字体大小、颜色进行随意的改变。这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小，它可以取值为-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。文本标记的具体用法如以下代码所示：htmlheadtitle文本标记的综合示例/title/headbodytext=blueh1最大的标题/h1Dreamweaver网页制作与色彩搭配全攻略·30·h3使用h3的标题/h3h6最小的标题/h6pb黑体字文本/b/ppi斜体字文本/i/ppu下加一划线文本/u/pptt打字机风格的文本/tt/ppcite引用方式的文本/cite/ppem强调的文本/em/ppstrong加重的文本/strong/ppfontsize=+1color=redsize取值“+1”、color取值“red”时的文本/font/p/body/html图1-31文本标记执行效果图第1章网页设计概述·31·此例在浏览器中的显示如图1-31所示。1.4.6图像标记再简单朴素的网页如果只有文字而没有图像将失去许多活力，图像在网页制作中是非常重要的一个方面，HTML语言也专门提供了img标志来处理图像的输出。1．imgimg标志并不是真正地把图像加入到HTML文档中，而是将标志对的src属性赋值。这个值是图像文件的文件名，其中包括路径，这个路径可以是相对路径，也可以是网址。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。假如网站的HTML文件与图像文件（文件名假设是logo.gif）在同一个目录下，则可以将代码写成imgsrc=logo.gif。假如网站的图像文件放在当前的HTML文档所在目录的一个子目录（子目录名假设是images）下，则代码应为imgsrc=images/logo.gif。注意：通常图像文件都会放在网站中一个独立的目录里。必须注意一点，src属性在img标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，img标志还有alt、align、border、width和height属性。align是图像的对齐方式，在上边已经提到过。border属性是图像的边框，可以取Dreamweaver网页制作与色彩搭配全攻略·32·大于或者等于0的