教学材料HTML DHTML教程-第一章

上传人：1*** IP属地：广东上传时间：2026-03-24 格式：PPT 页数：40 大小：861KB 积分：15 举报 版权申诉

已阅读5页，还剩35页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1章HTML基础本章介绍HTML的基本概念，主要内容如下:什么是HTML;HTML标记符基础;网页的基本结构;在网页中添加注释;在网页中插入特殊字符，如商标符号、空格等。返回1.1什么是HTML

HTML是HyperTextMarkupLanguage(超文本标记语言)的缩写，它是一种标记语言，通过各种标记元素(或者说标记符)来定义文档内容的格式。通过在网页中添加标记符，可以告诉浏览器如何显示网页。例如，如果为某一段文字添加<hl></hl>标记符，那么浏览器会用比一般字体大的粗体来显示该段的内容，如图1.1所示。

HTML中的超文本功能，也就是链接功能，使网页之间可以通过指针链接起来。HTML的这种超链接功能是其被用作Web页语言的卞要原因之一。例如，在图1.2中，当单击文档一中的“链接al”时，浏览者将从文档一跳转到文档三;在文档一中单击“链接b2”时，浏览者将从文档一跳转到文档二;同样，如果在文档三中单击“链接c1”，浏览者将从文档三跳转到文档一。下一页返回1.1什么是HTMLHTML由国际组织W3C(万维网联盟)维护，目前最新的标准是HTML4.01，它对HTML4.0作了一些小的修11，，本书中的卞要内容以4.0为基础。读者如果击要了解HTML更详细的情况，请访问W3C的站:,可以在该网站中获得最新的HTML规范。HTML语言作为一种在Internet上发布信息的语言，卞要有如下一些功能:与传统的出版方式一样，HTML语言能够在Internet发布信息，这些信息不仅包括人们熟悉的文字、表格、列表、图片等，而且还包括最近几年才有的视频剪辑、声音、动画等多媒体信息。建立超文本链接。读者可以通过这些超文本链接方便、自由地在各种信息之间切换。创建表单和留言板。作者不仅能够发布自己的信息，而且还可以很方便地收集读者的相关信息，可以实现作者与读者轻松的交流。上一页下一页返回1.1什么是HTML

目前，网上的Web文件都是以.htm或.html为文件名的后缀。很多的纯文本编辑软件都可以编辑这些Web文件，例如Windows系统自带的“记事本”(直接在“记事本”中输入HTML源代码，然后保存为.htm或.html后缀即)。上一页返回1.2HTML标记符基础

标记符是HTML语言中一些定义网页内容格式和显示的指令，而标记符的属性用于进一步控制网页内容的显示效果。1.2.1基本的HTML语法

HTML的语法比较简单，所有的标记符都用尖括号“<>”括起来的，例如:标记符。

HTML中绝大多数的标记符都是成对出现的，包括开始标记符和结束标记符。成对标记符之间的内容就是该标记符作用的区域。结束标记符和开始标记符的区别就是多了一条斜线。例如，和，其中为开始标记符，为结束标记符。但是也有一些标记符是单独的标记符，它们没有结束标记符。例如水平线标记符<hr>、断行标记符 等。下一页返回1.2HTML标记符基础

HTML标记符是不区分大小写的，但为了便于阅读，通常采用一致的大小写(本书中所有的标记符都用小写)。另外，在HTML中没有语句行的概念，也就是说，所有的标记符和内容都可以位于一行中。浏览器会根据不同的标记符进行解释显示。当然，通‘淞请况下为了使HTML文档更容易阅读，建议采用合理的分段和缩进等格式(这些格式不影响网页的显示效果)。上一页下一页返回1.2HTML标记符基础1.2.2标记符属性

所谓属性就是指用来描述对象特征的特性。例如，内存的大小、CPU的速度、硬盘的大小这些特性就是计算机这个对象的属性。

HTML对页面内容的详细控制实际上是通过设置标记符的相关属性来完成的。所以说，学习HTML语法一方面是学习各种标记符，另一方面就是学习针对各种标记符的具体属性。在HTML中，标记符的所有属性都包含在开始标记符的尖括号中，用“属性=属性的值”的形式表示。在表示属性的值时，通常用双引号括起来(虽然不括起来也没有错，但为了显示请楚，建议还是括起来)。例如，可以用段落标记符的对齐属性来指定文字的对齐方式，HTML源代码如下:上一页下一页返回1.2HTML标记符基础<palign="center">本段文字显示为水平居中。有关段落标记符P的详细情况，请参见本书第一章。如果一个标记符有多个属性，那么不同属性之间应该用空格隔开，例如:<fontsize="1"color="red">本段文字将显示为红色小字体。有关字体标记符font的详细情况，请参见本书第二章。上一页返回1.3网页的基本结构

不管网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一样的。网页的基本结构如下所示：<html><head><title>文档标题</title></head><body>这是html文档的主体部分

</body></html>

读者不难发现，一个HTML文档卞要由两个部分组成:标记符<head>和</head>之间的内容构成文档的头部分，而标记符<body>和</body>之间的内容构成了文档的卞体部分，这两部分内容都包含在<html>和</html>之间。下一页返回1.3网页的基本结构

1.3.1html

语法

说明:<html>标记符标志着HTML文件的开始，而</html>标记符则标志着HTML文件的结束。Web页面中其他所有的页面内容都放在这两个标记符之间。html标记符没有任何属性。虽然html标记符可以省略(因为Web文件的后缀.htm或.html已经表明该文件是一个HTML文件)，但为了使网页结构完整，建议包含该标记符。上一页下一页返回1.3网页的基本结构

1.3.2head

语法

说明:我们一般将head称为头部标记符，或者首部标记符。该标记符中不包含Web的任何内容，只提供一些与Web页面有关的特定信息。例如，可以在头部标记符中定义样式表或插入脚本语言等。

head标记符中也可以包含其他标记符，例如标题标记符title、样式表标记符style、脚本语言标记符script等。上一页下一页返回1.3网页的基本结构

1.3.3title语法<title></title>

说明:title标记符是头部标记符中最常用、最基本的标记符之一，它用于设置网页的标题。标记符<title>和</title>之间的内容就是网页的标题。网页的标题一般显示在浏览器顶部的标题栏中，也可以被浏览器作为书签和收藏请单。例如，以下小例显示了title标记符的作用，效果如图1.3所示。<html><head>

<title>我是个好孩子<</title></head><body>

我爱学习、爱唱歌、爱好武术。

</body></html>上一页下一页返回1.3网页的基本结构

1.3.4body

语法

说明:标记符<body>和</body>构成了Web页的主体，Web页的所有内容，文字、图形、链接以及其他页面元素都包含在该标记符内。

body标记符中卞要包含与页面整体效果有关的一些属性，卞要的属性如下所示:background:定义网页的背景图案;bgcolor:定义网页的背景颜色，默认值是白色;text:定义网页中文字的颜色，默认值是黑色;link:定义网页中超链接的颜色，默认值是蓝色;clink:定义网页中当前被选中的超链接的颜色，默认值是红色;vlink:定义网页中已经被访问过的超链接的颜色，默认值是紫色。上一页下一页返回1.3网页的基本结构

击要注意的是，一般情况下，属性“bgcolor”和属性“text”应同时出现，而属性“link""vlink"和"clink”也应同时出现，以确保整体显小效果。在指定颜色时，口J一以用该颜色的代码(十六进制的数值)或者使用相应颜色的英文单词。例如，我们指定文档的背景色为绿色，那么就可以表小为:<bodybgcolor="008000">，或者表示为<bodybgcolor="green">。

表1.1列出了常用的16种标准颜色。注意:Aqua也称Cyan,Fuchsia也称Magenta。下而我们举例说明这些属性的作用。背景色与文字颜色要创建一个背景色为黑色、文字颜色为白色的网页，源代码如下，效果如图1.4所示。上一页下一页返回1.3网页的基本结构

<html><head><title>我是个好孩子</title></head><bodybgcolor="000000"text="ffffff">我爱学习、爱唱歌、爱好武术。

</body></html>2.超链接的颜色下面是一个设置超链接颜色的例子，源代码如下，效果如图1.5所示。上一页下一页返回1.3网页的基本结构

<html><head><title>body_link实例</title></head><bodylink="red"alink="blue"vlink="green"><ahref="self.htm">大头!大头!</a>下雨不愁!别人有伞!我有大头!</body></html>注意:如果要获得此效果，应在当前网页所在的目录下包含self.htm文件。有关创建超链接的内容，请参见第3章。上一页返回1.4添加注释

由于Web站点击要经常更新，而且制作时往往是几个人合作，所以创建的Web页面必须要易于维护，而添加注释是增强文件可读性的重要手段。

HTML中的注释是由开始标记符<!一和结束标记符一>组成的。这两个标记符中间的内容就是注释的内容，它们不会在浏览器中显示。下面是一个使用注释的例子，源代码如下，效果如图1.6所示。<html><head><title>body_note实例</title></head><body><!一这是几时的首童谣，很有意思。一>大头!大头!下雨不愁!别人有伞!我有大头!</body></html>返回1.5插入特殊符号

在制作网页的过程中，除了需要输入文字以外，有时还需要插入一些特殊的符号，如版权、注册商标、货币符号等。表1.2中列出了常用的一些符号和相应的符号代码。下面是一个使用特殊符号的例子，效果如图1.7所示。其中，>被显小为>;©被显示为@; 被显小为空格;而°被显小为o。另外，p标记符用于为文本分段，具体请参见第2章。<html><head><title>插入特殊符号实例</title></head><body>x+y>z© 版权所有上一页下一页返回1.5插入特殊符号

小得翻版人体的止常温度是37°。

</body></html>

注意:之所以用

来显示空格，是因为在html中文本默认都是没有空格的。像空格、回车这样的符号都会被浏览器忽略(多个空格被视作一个空格，回车不起作用)。例如，以下代码的显示效果如图1.8所示。<html><head><title>空格、回车将被忽略实例</title></head>上一页下一页返回1.5插入特殊符号<body>在html中文本默认是没有格式的。空格

必须使用特殊的标记符才能表示。</body></html>上一页返回1.6网页实例本节我们创建一个简单的包含有文字和图片的网页，步骤如下:(1)选择“开始”→“程序”→“附件”→“记事本”命令，打开记事本程序。首先输入网页的基本结构，如下所示<html>

<head><title></title></head><body></body></html>(2)在标记符<title>和</title>之间输入网页的标题“我是大头”。下一页返回1.6网页实例

(3)在标记符<body>中，将网页的背景图像设置为“scene.jpg(注意此图像必须放置到网页文件所在的文件夹中)，文字设置为蓝色。

(4)在标记符<body>和</body>之间输入标记符和(有关p标记符的详细情况请参见本书5第2章)，并在这两个标记符中间输入一段文字，此时的代码如下所示:<html><head><title>我是大头</title></head><bodybackground="scene.jpg"text="#OOOOff">大头!大头!下雨不愁!别人有伞!我有大头!</body></html>上一页下一页返回1.6网页实例(5}选择“文件”菜单下的“保存”命令，打开“保存”对话框，在“文件名”框中输入文件名和文件扩展名(.htm)，选择合适的日录，然后单击“保存”按钮。

(6)在浏览器中打开该文件(.htm)，如图1.9所示。

(7)切换到记事本中的html源代码，在文字后面另起一行。输入标记符和再输入图像标记符<img>(有关该标记符的详细情况请参见本书5第3章)，插入一幅图像(该图像己经由其他图像处理软件制作完成，并且和刚才的html保存在同一个目录下)，此时源代码如下所示:上一页下一页返回1.6网页实例<html><head><title>我是大头</title></head><bodybackground="scene.jpg"text="#0000ff">

大头!大头!下雨不愁!别人有伞!我有大头!

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

教学材料HTML DHTML教程-第一章

文档简介

温馨提示

最新文档

评论

教学材料HTML DHTML教程-第一章

文档简介

温馨提示

最新文档

评论

相关文档