网页制作教程第第1 1章章 HTMLHTML基础基础1 思考以下几个问题？1 1 1 1冯冯冯冯····罗依曼提出的计算机的五大部件是什么罗依曼提出的计算机的五大部件是什么罗依曼提出的计算机的五大部件是什么罗依曼提出的计算机的五大部件是什么？？？？2 2 2 2计算机是如何工作的？（工作的原理是什么计算机是如何工作的？（工作的原理是什么计算机是如何工作的？（工作的原理是什么计算机是如何工作的？（工作的原理是什么？）？）？）？）3 3 3 3硬件和软件的关系是什么？硬件和软件的关系是什么？硬件和软件的关系是什么？硬件和软件的关系是什么？4 4 4 4Internet=Internet=Internet=Internet=互联网？互联网？互联网？互联网？5 5 5 5计算机网络的概念是什么？计算机网络的概念是什么？计算机网络的概念是什么？计算机网络的概念是什么？6 6 6 6HTTPHTTPHTTPHTTP、、、、WWWWWWWWWWWW、、、、DNSDNSDNSDNS、、、、IPIPIPIP的概念是什么？的概念是什么？的概念是什么？的概念是什么？7 7 7 7计算机病毒是什么？黑客是什么？杀毒软件计算机病毒是什么？黑客是什么？杀毒软件计算机病毒是什么？黑客是什么？杀毒软件计算机病毒是什么？黑客是什么？杀毒软件和防火墙是一回事吗？和防火墙是一回事吗？和防火墙是一回事吗？和防火墙是一回事吗？2 一 冯·罗依曼计算机基本结构3 二 计算机的工作原理ØØ计算机是如何工作的？计算机是如何工作的？4 计算机如何工作？ØØ按照按照““程序存储，程序控制程序存储，程序控制””的方式工作。
的方式工作ØØ具体为将程序和数据存放在存储器中；计具体为将程序和数据存放在存储器中；计算机的控制器按照程序中指令序列，从存算机的控制器按照程序中指令序列，从存储器中取出指令，并分析指令的功能，进储器中取出指令，并分析指令的功能，进而发出各种控制信号，指挥计算机中的各而发出各种控制信号，指挥计算机中的各类部件来执行该指令这种通过取指令、类部件来执行该指令这种通过取指令、分析指令、执行指令的操作重复执行，直分析指令、执行指令的操作重复执行，直到完成程序中的全部指令操作为止到完成程序中的全部指令操作为止5 三 硬件和软件的关系 计算机、软件及用户之间的关系 6 四 Internet=互联网？ØØInternet——Internet——因特网因特网ØØinternet——internet——互联网互联网7 五 计算机网络的概念是什么？ØØ定义：两台及两台以上的计算机通过通信介质相互连接可以实现资源共享的集合体ØØ因特网(Internet)是“网络的网络”8 六 一些基本概念ØØHTTPHTTPØØWWWWWWØØDomain NameDomain Name（域名）（域名）ØØDNSDNSØØIPIP9 七 计算机病毒、黑客、杀毒、防火墙1 1 1 1计算机病毒计算机病毒计算机病毒计算机病毒2 2 2 2黑客黑客黑客黑客3 3 3 3杀毒软件杀毒软件杀毒软件杀毒软件4 4 4 4防火墙防火墙防火墙防火墙10 学习使用工具1.Dreamweaver 8.02.EditPlus3.Frontpage11 第1章 HTML基础1.11.1 什么是 什么是HTMLHTML1.2 1.2 创建创建 Web Web 页页 1.3 1.3 发布发布 Web Web 页页12 1.1 什么是HTML1.1.1 Web 页的基本概念1.1.1.1 Internet与WWWØØ计算机网络 ØØInternet ØØWWW ØØHTTP13 WWW示意图14 1.1.1.2 WWW 与浏览器15 1.1.1.3 网站与主页ØØ网站网站 通常我们把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个有共同主题的页面的集合。
ØØ主页主页 主页是网站中一个特殊页面，它是网站的入口页面，其中包含指向其他页面的超链接通常主页的名称是固定的，例如：index.html16 1.1.2 HTML的工作原理ØØHTMLHTML（（HyperTextHyperText Markup Language Markup Language，超，超文本标记语言）是表示网页的一种规范文本标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定（或者说是一种标准），它通过标记符定义了网页内容如何显示义了网页内容如何显示 ØØ超链接超链接ØØ超文本超文本ØØ超媒体超媒体17 ØØ如果在浏览器中任意打开一个网页，然后如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择在窗口中空白位置单击鼠标右键，选择““查看源文件查看源文件””命令（或者选择命令（或者选择““查看查看””菜菜单中的单中的““源文件源文件””命令），则系统会启动命令），则系统会启动““记事本记事本””，其中包含一些文本信息，如，其中包含一些文本信息，如图图 1-2 1-2 所示18 图1-2 网页的源文件19 网页的本质—HTML源代码Ø这些文本其实就是网页的本质这些文本其实就是网页的本质——HTML——HTML源源代码。
代码HTMLHTML是表示网页的一种规范（或者是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网说是一种标准），它通过标记符定义了网页内容的显示例如，用页内容的显示例如，用
标记标记符可以在网页上定义一个表格符可以在网页上定义一个表格 说明：超文本是相对普通文本而言的，说明：超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典与普通文本按顺序定位不同，超文本最典型的特点就是文本中包含指向其他位置的型的特点就是文本中包含指向其他位置的链接，通过这些链接使文档组织成了网状链接，通过这些链接使文档组织成了网状结构，如图结构，如图 1-3 1-3 所示所示. .20 图1-3 超文本示意图21 浏览器如何显示网页Ø在在 HTML HTML 文档中，通过使用标记符可以告文档中，通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显诉浏览器如何显示网页，即确定内容的显示格式浏览器按顺序读取示格式浏览器按顺序读取 HTML HTML 文件，文件，然后根据内容周围的然后根据内容周围的 HTML HTML 标记符解释和标记符解释和显示各种内容。
例如，如果为某段内容添显示各种内容例如，如果为某段内容添加加
标记符，则浏览器会以比标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如图一般文字大的粗体字显示该段内容，如图 1-41-4所示22 图1-4 浏览器解释HTML标记示意23 超文本功能ØHTML HTML 中的超文本功能，也就是超链接功中的超文本功能，也就是超链接功能，使网页之间可以链接起来网页与网能，使网页之间可以链接起来网页与网页的链接构成了网站，而网站与网站的链页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的接就构成了多姿多彩的 WWWWWWØHTMLHTML由国际组织由国际组织W3CW3C（万维网联盟）制定（万维网联盟）制定和维护，本书中的主要内容是以和维护，本书中的主要内容是以 HTTP4.0 HTTP4.0 为基础的为基础的24 W3C网站：http://www.w3.org25 1.1.3 创建和测试Web页（使用记事本作演示）（使用记事本作演示）26 1.1.4 网页编辑工具第一类：第一类：HTMLHTML编辑器编辑器EditPlusEditPlus、、HomeSiteHomeSite、、BBeditBBedit第二类：所见即所得编辑器第二类：所见即所得编辑器DreamweaverDreamweaver、、FrontPageFrontPage认识DreamweaverDreamweaver27 1.2 创建Web页1.2.1 1.2.1 标记符基础标记符基础 1.2.1.1 1.2.1.1 基本的基本的 HTML HTML 语法语法1.2.1.2 1.2.1.2 标记符的属性标记符的属性1.2.2 Web 1.2.2 Web 页的基本结构页的基本结构 1.2.2.1 HTML1.2.2.1 HTML标记标记1.2.2.2 1.2.2.2 首部标记首部标记28 1.2.1.1 基本的HTML语法ØØHTMLHTML是一种脚本语言，使用标记符，语法是一种脚本语言，使用标记符，语法简单。
简单ØØ标记符都用标记符都用< >< >括起来，一般成对出现，括起来，一般成对出现，分别称作分别称作开始标记符开始标记符和和结束标记符结束标记符例：
ØØ但有些标记符只要求单一标记号例：换但有些标记符只要求单一标记号例：换行标记符行标记符
ØØHTMLHTML标记符不区分大小写，但约定使用大标记符不区分大小写，但约定使用大写29 1.2.1.2 标记符的属性ØØ属性是用来描述对象特征的特性许多标属性是用来描述对象特征的特性许多标记符还包含一些属性，以便对标记符作用记符还包含一些属性，以便对标记符作用的内容进行更详细的控制的内容进行更详细的控制 ØØ属性放在开始标记符的属性放在开始标记符的< >< >中，属性与标中，属性与标记符之间用空格分隔，属性值用等号与属记符之间用空格分隔，属性值用等号与属性连接，属性之间也用空格分隔例：性连接，属性之间也用空格分隔例： ØØ属性通常不区分大小写，但习惯用小写。
属性通常不区分大小写，但习惯用小写30 1.2.2 Web页的基本结构
31 1.2.2.1 HTML标记ØØ和和是是WEBWEB页第一个和最后一页第一个和最后一个标记符，其他标记符和内容都位于这两个标记符，其他标记符和内容都位于这两个标记符之间个标记符之间ØØ这两个标记符都可以省略，保留可以使网这两个标记符都可以省略，保留可以使网页结构更完整页结构更完整32 1.2.2.2 首部标记ØØ和和位于位于WebWeb页的开头，其中页的开头，其中不包括不包括WebWeb页的任何实际内容，而是提供页的任何实际内容，而是提供一些与一些与WebWeb页有关的特定信息。
首标记的页有关的特定信息首标记的内容也用特定的标记括起来内容也用特定的标记括起来 33 TITLE标记符Ø
<TITLE> 和和 ，用于定义网页的，用于定义网页的标题网页标题可被浏览器用作书签和收标题网页标题可被浏览器用作书签和收藏清单当网页在浏览器中显示时，网页藏清单当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示标题将在浏览器窗口的标题栏中显示Ø例如，以下例如，以下 HTML HTML 代码在浏览器中的显示代码在浏览器中的显示如图如图 1-6 1-6 所示34 例子 <TITLE>这里是网页标题这里是网页标题 请看浏览器的标题栏请看浏览器的标题栏 35 图1-6 TITLE标记符的效果36 2．META标记ØMETAMETA，它用于说明与，它用于说明与 Web Web 页有关的信息页有关的信息META META 标记符的常用属性包括：标记符的常用属性包括：üname 属性给出特性名ücontent 属性给出特性值ühttp-equiv 属性指定 HTTP 响应名称，通常用于替换 name 属性，HTTP 服务器使用该属性值为 HTTP 响应消息头收集信息。
37 例子Ø例：例：”>设置客户端行内程序的语设置客户端行内程序的语言是言是JavaScriptJavaScriptØ例：例： "> 设置行内样设置行内样式的样式语言为式的样式语言为 CSSCSS38 设置自动转址功能 META META 标记符的一个常用功能是设置自动标记符的一个常用功能是设置自动转址功能，即使浏览器自动从一个地址跳转址功能，即使浏览器自动从一个地址跳转到另一个地址，如下所示转到另一个地址，如下所示39 例子
META <TITLE>META示例示例 URL=title(tu1-6).htm"> META META示例示例 在此例中，完成当前文档加载在此例中，完成当前文档加载 30 30 秒后将自动秒后将自动加载另一个文档（即加载另一个文档（即““URL =”URL =”后指定的后指定的 HTML HTML 文档），如图文档），如图 1-7 1-7 所示。
所示40 图1-7 利用META实现自动转址功能30秒后自动跳转41 Ø说明：要实现以上效果，必须使说明：要实现以上效果，必须使““URL URL =”=”后指定的后指定的 HTML HTML 文档存在在该例子文档存在在该例子中，我们指定跳转的目标为当前目录的某中，我们指定跳转的目标为当前目录的某个文件在实际使用此功能时，也可以直个文件在实际使用此功能时，也可以直接指定一个完整的接指定一个完整的 URL URL 地址（例如地址（例如 ）42 BGSOUND标记符ØØ指定网页的背景音乐只有开始标识符，指定网页的背景音乐只有开始标识符，没有结束标识符没有结束标识符ØØ语法格式：语法格式： > 音乐文件格式一般为音乐文件格式一般为.wav.wav、、.mid.mid、、.mp3.mp3等ØØ例：例：loop=“2 ”>43 1.2.2.3 正文标记符ØØ 和和 包含包含 Web Web 页的具体内页的具体内容，包括文字、图形、超链接以及其他各容，包括文字、图形、超链接以及其他各种种 HTML HTML 对象。
对象ØØ如果没有其他标记符修饰，正文标记符中如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示（如果浏览的文字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）器窗口显示不下，则自动换行）ØØ例如，以下例如，以下 HTML HTML 代码在浏览器中的显示代码在浏览器中的显示如图如图 1-8 1-8 所示44 例子
<TITLE> <TITLE> <TITLE>网页标题网页标题网页标题网页标题 正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文， 正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文，正文， 正文，正文正文，正文正文，正文正文，正文45 图 1-846 ØØ注意：空格、回车这些格式控制在显示时注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用都不起作用，如要使它们起作用，应使用预格式化标记符预格式化标记符 和和
将需将需要采用原始格式的内容包含起来。
要采用原始格式的内容包含起来47 1.2.3 设置页面属性1.2.3.1 1.2.3.1 1.2.3.1 1.2.3.1 设置页面背景颜色设置页面背景颜色设置页面背景颜色设置页面背景颜色ØØ在在在在
标记符中使用标记符中使用标记符中使用标记符中使用 bgcolorbgcolorbgcolorbgcolor 属性可以为属性可以为属性可以为属性可以为网页设置背景颜色例如，如果想为网页设置网页设置背景颜色例如，如果想为网页设置网页设置背景颜色例如，如果想为网页设置网页设置背景颜色例如，如果想为网页设置黑色背景，应使用以下黑色背景，应使用以下黑色背景，应使用以下黑色背景，应使用以下HTMLHTMLHTMLHTML语句：语句：语句：语句：="black">="black">="black">ØØ在指定背景颜色时，有在指定背景颜色时，有在指定背景颜色时，有在指定背景颜色时，有 16 16 16 16 种标准颜色可供选择，种标准颜色可供选择，种标准颜色可供选择，种标准颜色可供选择，ü通过颜色名表示颜色 ü通过设置RGB（Red Green Blue）值来表示颜色 ØØ如表如表如表如表 1-1 1-1 1-1 1-1 所示。
所示48 表1-1 16种标准颜色色彩名色彩名十六进制值十六进制值色彩名色彩名十六进制值十六进制值Aqua（水蓝色）#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Fuchsia（樱桃色）#FF00FFRed（红色）#FF0000Gray（灰色）#808080Silver（银色）#C0C0C0Green（绿色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐红色）#800000Yellow（黄色）#FFFF0049 50 1.2.3.2 设置页面背景图像ØØ单纯使用一种颜色作为背景显然有些单调，单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的网页设计者也可选择特定图案作为页面的背景背景————使用使用 BODY BODY 标记符的标记符的 background background 属性即可属性即可ØØHTMLHTML语句为：语句为：
">51 ØØ使用背景图案时，如果图案小于浏览器窗口的大使用背景图案时，如果图案小于浏览器窗口的大使用背景图案时，如果图案小于浏览器窗口的大使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景小，则浏览器会自动象铺地板砖一样平铺背景小，则浏览器会自动象铺地板砖一样平铺背景小，则浏览器会自动象铺地板砖一样平铺背景图案。
例如，以下代码显示了设置背景图案的图案例如，以下代码显示了设置背景图案的图案例如，以下代码显示了设置背景图案的图案例如，以下代码显示了设置背景图案的效果，如图效果，如图效果，如图效果，如图 1-9 1-9 1-9 1-9 所示
<HEAD> <TITLE><HEAD> <TITLE><HEAD> <TITLE>背景图案示例背景图案示例背景图案示例背景图案示例">">"> 背景图案示例背景图案示例背景图案示例背景图案示例52 图 1-9 背景图案示例53 ØØ注意：如果要使以上代码正确工作，必须注意：如果要使以上代码正确工作，必须在网页所在目录包含在网页所在目录包含 background.jpgbackground.jpg 文文件。
件ØØ用户也可以同时设置网页的背景图案和背用户也可以同时设置网页的背景图案和背景色，在这种情况下，只有在浏览器不能景色，在这种情况下，只有在浏览器不能显示图像时才显示背景色例如，如果用显示图像时才显示背景色例如，如果用户将浏览器设置为不显示图像（选择户将浏览器设置为不显示图像（选择““工工具具””菜单中的菜单中的““Internet Internet 选项选项””命令，命令，然后选择然后选择““高级高级””选项卡，在选项卡，在““多媒体多媒体””下设置），那么给网页设置的背景图案将下设置），那么给网页设置的背景图案将不显示，而是显示背景颜色不显示，而是显示背景颜色54 1.2.3.3 设置背景图像水印效果ØØ例：例：
=“fixed”>55 1.2.3.4 设置文字和超链接的颜色ØØtexttext属性用于设置正文的颜色属性用于设置正文的颜色ØØLinkLink属性用于设置未被访问的超链接颜色属性用于设置未被访问的超链接颜色ØØVlinkVlink属性用于设置已访问的超链接颜色属性用于设置已访问的超链接颜色ØØAlinkAlink属性用于活动超链接的颜色属性用于活动超链接的颜色例：例：=“#666666”>56 1.2.4 添加注释ØØ格式：格式：-->ØØ这两个标记符之间的任何内容都将被浏览这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。
器解释为注释，而不在浏览器中显示57 例：
<TITLE>网页标题网页标题 正文，正文，正文，正文正文，正文，正文，正文-->58 图1-10 注释不在网页中显示注意：注意：注释可插入在注释可插入在 Web 页的任何位置页的任何位置59 1.2.5 显示特殊字符ØØ如果用户需要在网页中显示某些特殊字符，如果用户需要在网页中显示某些特殊字符，例如：例如：< <、、> > 等与等与 HTML HTML 语法冲突的符号语法冲突的符号（浏览器会自动将（浏览器会自动将 < < 号后的内容解释为号后的内容解释为 HTML HTML 标记符），或者标记符），或者 ××、、∑∑、、± ± 等无等无法直接用键盘输入的符号，则需使用参考法直接用键盘输入的符号，则需使用参考字符来表示，而不能直接输入。
字符来表示，而不能直接输入60 ØØ参考字符以参考字符以““&”&”号开始，以号开始，以““；；””结束，结束，既可以使用数字代码，也可以使用代码名既可以使用数字代码，也可以使用代码名称最常见的参考字符为：称最常见的参考字符为：ü< 表示为 <ü> 表示为 >ü& 表示为 &ü空格表示为 ØØ有关参考字符完整的编码请参见附录有关参考字符完整的编码请参见附录 2 2ØØ注意：与注意：与HTMLHTML标记符不同，字符代码名称标记符不同，字符代码名称区分大小写区分大小写61 例如，要在例如，要在例如，要在例如，要在 Web Web Web Web 页中显示内容页中显示内容页中显示内容页中显示内容““““ is a popular VCD program.”is a popular VCD program.”is a popular VCD program.”is a popular VCD program.”，则需使用参考，则需使用参考，则需使用参考，则需使用参考字符。
字符HTML HTML HTML HTML 代码如下，在浏览器中的显示如图代码如下，在浏览器中的显示如图代码如下，在浏览器中的显示如图代码如下，在浏览器中的显示如图 1-11 1-11 1-11 1-11 所示
<TITLE> <TITLE> <TITLE> 参考字符示例参考字符示例参考字符示例参考字符示例 & & & <Tomlt;Tomlt;Tomlt;Tom & & & & Jerry>Jerry>Jerry>Jerry> is a ; is a ; is a ; is a popular VCD program. popular VCD program. popular VCD program. popular VCD program. 62 图 1-11 参考字符示例63 ØØ说明：对于说明：对于 & & 这样可以直接用键盘输入这样可以直接用键盘输入的特殊字符，如果不用参考字符，浏览器的特殊字符，如果不用参考字符，浏览器通常也能够正确显示。
例如，刚才的示例通常也能够正确显示例如，刚才的示例中，中，BODY BODY 部分的代码也可以写为：部分的代码也可以写为：
& <Tomlt;Tom & Jerry & & Jerry >gt; is a ; is a popular VCD program. popular VCD program. ØØ不过，如果要显示不过，如果要显示 < < 和和 > >，则一定要使，则一定要使用参考字符，否则会出现显示错误用参考字符，否则会出现显示错误64 1.3 发布Web页1.3.1 1.3.1 创建本地站点创建本地站点演示演示 网站的建立确定网站的风格网页色彩的搭配绘制设计草图65 1.3 发布Web页1.3.2 1.3.2 申请网页空间申请网页空间 1.3.3 1.3.3 用用 FTP FTP 上传网页上传网页 申请了免费网页空间之后，需要用申请了免费网页空间之后，需要用 FTP FTP 的方式将网页上传到服务器上，才能让别的方式将网页上传到服务器上，才能让别人通过人通过 Internet Internet 浏览自己的网站。
浏览自己的网站另外：展示学生作品另外：展示学生作品66 本章小结ØØ基本概念：基本概念：üWWW üHTTP üHTML ü超文本 ü超媒体ØØHTTPHTTP的工作原理的工作原理ØØWebWeb页的基本结构页的基本结构67 ØØ常用的常用的HTMLHTML标记：标记：ü ü
ü üü ü üØØ特殊符号的显示特殊符号的显示68 。
点击阅读更多内容
手机版 | 川公网安备 51140202000112号 | 经营许可证（蜀ICP备13022795号）
©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.
