《HTML讲义.doc》由会员分享,可在线阅读,更多相关《HTML讲义.doc(61页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、如有侵权,请联系网站删除,仅供学习与交流HTML讲义【精品文档】第 61 页第一部分 HTML基础网页的实质是什么?是图形?是文本?网页实际上是HTML标记语言程序,过去创建和管理网页是由训练有素的专业人员采用HTML语言手工编写程序来实现的。而现在有多种可视化程度很高的网页制作工具,无需掌握专业的网页制作技术就能够创作出富有特色、动感十足的网页来。我们平时上网看到的各个网站的网页都是用Dreamweaver、FrontPage或其他网页制作工具编辑的,然后再加入一些动态语句。这些网页都是由Html语言编写生成,而我们在使用Dreamweaver、FrontPage编辑网页的同时,这个软件就已
2、经自动生成这种语言了。一、关于HTML(Hypertext Markup language):Html是一种超文本标记语言,是创建网页时使用的语言。就其本质而言,是一个基于文本的编码标准,是对网上信息进行标记的一组规则,通过这些标记规则,告诉Web浏览器如何显示文本和图形等网页元素。l 标记:是一种功能的注释。由W3C组织定义。标记控制HTML文档的外观,浏览器可以将标记解释成具体的内容,如超级链接、标题、段落、列表等。l 超文本:是指含有超链接和多媒体文本。l 超链接:从一个资源可以瞬间跳转到另一个资源。Html语言是网页的基础,你可以通过浏览器的查看-源代码看到该页的HTML代码。大家不必
3、看到语言就感到害怕,HTML和C语言不一样,它只是一系列标记的组合。 在实际应用中,只需要掌握、记忆一些基本的、常用的Html标记即可。二、HTML文档编写方法HTML文档是以纯ASCII文件存在的,它看起来象是加入了许多被称为标记(tag)的特殊字符串的普遍文本文件,扩展名为.htm 或.html。 HTML语言利用标记(tag)来描述网页的字体、大小、颜色及页面布局的语言,使用任何的文本编辑器都可以对它进行编辑。1、手工直接编写:把标记写在记事本中,存盘时扩展名为.htm 或.html。保存类型为文本文档。在Internet exprorer中打开文件,查看源文件-修改-保存-刷新。2、使
4、用可视化HTML编辑器:如:Frontpage,Dreamweaver。3、由WEB服务器上的程序(ASP,PHP,JSP)动态的生成。三、HTML语法标记总是封装在由“”组成的一对尖括号之中,是一些定义网页内容格式和显示的命令,而标记属性用于进一步控制网页内容的显示效果。标记只改变网页的形式方式,本身不会显示在窗口中。例如:这是粗体,你好。 表示粗体开始,表示黑体结束,标记在浏览器里不显示。HTML标记是不区分大小写的,但为了便于阅读,通常采用一致的大小写,空格、TAB键和换行等可以出现在文件的任何位置,浏览器将不显示它们,除非附加特殊标记。另外,在HTML中没有语句的概念,也就是说,所有标
5、记和内容都可以位于一行中。浏览器会根据不同的标记进行解释显示。当然,通常情况下为了使HTML文档更容易阅读,建议采用合理的分段和缩进等格式(这些格式不影响网页的显示效果)。1、双标记:必须成对出现。语法:内容 其中:(1)“内容”就是被这对标记施加作用的部分。将文本内容(2)第二个标记结束标记,总是用反斜线“/”开始。例1:段落标记虽然为一行,但我是一个段落例2:突出对某段文字的显示标记text to emphasize(通常会以斜体显示)双标记元素提供了开始和结束标记,将文本包含在其中,故也称为容器(container)。2、单标记:只需单独使用。单标记都是进行一些特定的操作。语法:例:段落
6、未结束标记 表示在一个段落未结束时,让显示强制换行3、标记属性:属性在双标记的开始标记或单标记的尖括号内中指定。语法:如果一个标记有多个属性,那么不同属性之间应该用空格隔开。各属性之间无先后次序,也可不指定,直接使用浏览器的默认值。例1:双标记属性虽然为一行,但我是一个段落,并且在右边.例2:单标记表示在文档当前位置画一条水平线,此标记允许带一些属性:4、注释语句格式:作用:文字不会显示在网页上,实例:HTML实例06 如何在HTML中注释天才在于勤奋只有勤奋的人才能获得理想的成功!HTML不是编程语言,而只是一些标记的集合,这些标记嵌在文本文件中,可以被浏览器识别,使文本文件在浏览器中以一定
7、方式显示出来。由于多数标记成对地出现,所以HTML又被称为容器式的注释语言。在HTML文件中,不同标记的使用、搭配以及嵌套、链接,就构成了不同风格的网页。因此,正确地使用HTML中的代码标识即标记是建立HTML文件的关键。5、HTML其它(1)开始越早,关闭越晚。标记是嵌入的。例如:Your text 这样是不起作用的。正确的顺序是: Your text (2)一些标记有可选项-属性,使用值改变标记的行为。例如:的对齐属性让你改变段落的默认对齐方式。 段落的居中。 记住,HTML是一个随时变化的语言,老的浏览器不支持新的标记。当一个浏览器看到一个它不认识的标记时,它就会忽略。这样,你在页面里添
8、加最新的浏览器可以识别的标记,在旧的浏览器也不会引起问题。另一方面,如果你犯了一个错误,你就不会看到什么出错信息。所以,在你的浏览器里察看页面是否和你想象的相同,这很重要。实际上,应该用不同的浏览器检测你的页面,因为不是所有的浏览器都用同样的方式处理HTML。本书中所讲的标记、标记的属性及其输出样式是以IE5.0浏览器为准的。四、网页(HTML文档)的基本结构不管网页的内容多么丰富、版式多么复杂,网页的基本结构却都是一样的。网页的基本结构: (主题部分,一般来说是不可见的) (正文部分,在浏览器中是可见的) HTML文件的内容有三大部分:文件头、文件体和一些注释。1、版本信息:位于HTML网页
9、文件的第一行,并以开头,2、文档标志:用来标识HTML文档的开始;:用来标识HTML文档的结束。两个标志必须一块使用。之间的文本则表示为一个单一的HTML文件。虽然html标记可以省略(因为Web文件的后缀为.htm 或.html已经表明该文件是一个HTML文件),但为了使网页结构完整,建议包含该标记。3、文件头标志:,构成HTML文档的开头部分,在此标记之间可以使用、和等标记对,此部分内容是不会在浏览器窗口中显示出来的,只是提供一些与Web页面有关的特定信息。两个标志必须一块使用。4、文件体标志:.,构成HTML文档的主体部分,其内容是浏览器页面中显示的主体内容。Web页的所有内容,文字、图
10、形、链接以及其他页面元素都包含在该标记内。在此标志对之间可包含、等等众多的标志,它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。标记属性:.属性用途示例设置背景颜色。默认是白色。红色背景body Background=#设置背景图像。body Background=Cat059.jpg设置网页中不包含超链接文本的文本颜色。默认是黑色。蓝色文本设置网页中超链接文字的颜色。默认是蓝色。链接为蓝色设置已使用的链接的颜色。默认是紫色。设置正在被击中的链接的颜色。默认是红色。Leftmargin、Topmargin用于设置网页的左边距和上边框,单位为像素要点F颜色有两种表示方法
11、: 1)预定义的色彩名称:Black、Green等; 2)十六进制的RGB值(即红、绿、蓝三色的组合颜色),注意:在RGB值前要加#号例: 红色背景 蓝色文本 链接为蓝色颜色颜色实效英文名十六进制RGB值黑色Black#000000银灰色Silver#C0C0C0灰色Gray#808080白色White#FFFFFF绛紫色Maroon#800000红色Red#FF0000紫色Purple#800080紫红色Fuchsia#FF00FF绿色Green#008000草绿色Lime#00FF00橄榄色Olive#808000黄色Yellow#FFFF00藏蓝色Navy#000080蓝色Blue#00
12、00FF黑绿色Teal#008080海蓝色Cyan#00FFFF5、HEAD中的标识HEAD出现在HTML文档的起始处,用来标明当前文档的有关信息(如文档标题),检索引擎可用的关键词以及不属于文档内容的其他数据。HEAD元素的起始和结束标识都是可选的。在HEAD的起始标识和结束标识之间最重要的两个元素是TITLE和META。(1)文件标题标记:格式:文件标题作用:起始标记和结束标记之间的文字显示在游览器的标题栏上。是对整个文件内容的概括。要点F标志对只能放在标志对之间。TITLE元素通常不被视为文本的部分,其内容能够被显示,但会显示为文档标题或窗口标题。每个HTML只能有一个标题,也就是说,每
13、个HTML文档的HEAD部分只能有个TITLE元素。TITLE元素的起始标识和结束标识都是必需的。说明:1)title除了标识文件内容外,当某一主页存入书签或文件时,title还用作书签名或默认的文件名。2)title的长度没有限制,但过长的标题会导致折行,一般情况下它的长度不应超过64个字符。由于title的作用是标明文件内容,所以太短也是不可取的;3)一个好的标题应该能使读者从中判断出该文件的大概。例如:introduction这个题目,读者不可能根据它判断出文章介绍的是什么,但如果取“HTML教程”就会好理解得多。实例1:综合例子。 显示在浏览器最上边蓝色条中的文本 红色背景、蓝色文本
14、实例2:设置背景图片。 星空工作室 图片背景、白色文本 实例3:超链接的颜色。 星空工作室 大头!大头!下雨不愁!别人有伞!我有大头! (2)META元素META元素被用来描述HTML文档的元信息(Meta Information),即关于文档的自身信息。这些信息可以被Web检索引擎、Web服务器或其他程序利用。META元素是HTML 3.0以后版本中定义的元素。META元素需要标识,但不能有结束标识。meta标签用于网页的与中,meta标签的用处很多。 namemeta的属性有两种:http-equiv比较常用的有以下几个: 动态链接对于一个网页,可以设定其经过一定的时间自动链接到另一个网页
15、或者另一个站点,这个功能可以由动态链接标记来实现。格式:说明:1)HTTP-EQUIV=”refresh”:指定为动态链接到别的文件或网址;2)CONTENT:指定具体内容,其中,#号代表延迟的时间,单位是秒;3)URL:为要动态链接到的文件或网址。例如:浏览器浏览此网页时,经过2秒之后,自动切换到B.html网页中去。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。 如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。例如:作用:当前网页每隔5秒钟自动重新加载一次。主页制作所使用语言格式: 作用:描述本页使用的语言。浏览器根据此项,就可以选择
16、正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5。另外,此标记还有动态排列文件的作用,当浏览器窗口大小改变时,文字的排版也会随窗口大小的改变而改变,让文字都显示在窗口中。又例如: 强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。网页关键词在浩如烟海的主页中要找到与自己要找的内容相关的网站或个人主页,光靠从书籍报刊上知道的几个网址是远远不够的,我们可以通过各大搜索网站,通过输入关键词的方式查找
17、要找的网站。要想自己的主页被搜索引擎检查到,就必须在自己的主页中加入关键词,并将它提交给搜索引擎,这个功能可由META标记实现。META元素定义元信息时,可以用NAME属性指出信息的类型,用Content属性列出所设置的关键词,内容可以自行设定,其间用逗号分隔。例如:或:使用上述语句可以产生关于文档作者和关键词的元信息。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。 完全人工登录 搜索引擎分为两大类: 机器人自动搜索:机器人会搜索网页META标记中所设置的描述关键字,把它们加入到搜索数据库中,用来搜索你的网页。又如:可以重复某一个单词,以提高自
18、己网站的排列位置。利用文件头对象实现网页过渡例如:Duration=2表示网页过渡效果的延续时间为2秒,Transition表示过渡效果方式,值为2时表示圆形收缩。第二部分 页面格式标记在学习本小节之前,必须强调一下,我们这里所讲的格式标志统统都是用于标志对之间的。一、字符格式1、字体大小、字体、颜色标记标记: 作用:设置起始标记和结束标记之间的文本的颜色,字体,字号。* 属性解释:(1)size=n 用来设置文本的字号。n的取值为1,2,7,7 号字最大,它也可以取值:-1、1和+1;缺省时为3号字体。可以用改变基本字体的大小。还可以使用相对于基本字体的数值来表示大小。例如:如果,那么和的字
19、体大小是一样的。(2)face=# 用来设置文本的字体。#的取值为字体名称,在控制面板中字体项中可以找到字体名称。(3)color=# 用来设置文本的颜色。(4)title=”#” 用来设置文本的说明文字。实例: 欢迎大家学习网页设计 张英 电话:010-62563815 邮箱:zhangying64实例:HTML实例8 制作彩色的文字 你将得到一个有绿色文字和 红色 链接的页面,链接点击之后 红色 变 黑, 还有下一个链接时则变成 紫罗兰色。 注意:如果浏览者的计算机上没有安装你设置的字体,那么文字就不会按照这个字体显示,而是使用标准字体。因为你不可能知道浏览者的计算机上会不会有这种字体,F
20、ACE属性允许你列出多个字体,浏览器会根据顺序使用合适的字体显示。像这一句:你的机器有这个字体。,如果浏览者的计算机上有“隶书”,就用隶书显示,没有的话就用“幼圆”,再没有就用“宋体”。2、字符修饰元素HTML中规定了大量的字符修饰处理元素,它们能够在不改变字体、字号的基础上对字形进行改变。这些元素分为物理样式和逻辑样式两大类,它们一般不支持任何属性。可对字符进行粗体、斜体等修饰操作。(1)物理样式 B元素:指定一段文本,使浏览器将该段文本以粗体显示。.I元素:指定一段文本,使浏览器将该段文本以斜体显示。 . u元素:指定一段文本,使浏览器将其显示为带下划线的文字。.TT元素:指定一段文本,使
21、浏览器将它显示为固定大小的字体字符。(输出打字机风格字体的文本)SUP元素:.指定一段文本,使浏览器用较小的字体将其显示为上标,上端和正常文字对齐。SUB元素:.指定一段文本,使浏览器用较小的字体将其显示为下标,底端和正常文字对齐。例如:文字 上标 下标显示结果:文字 上标 下标S元素:指定段文本,使浏览器将它显示为带删除线的文字。.STRIKE元素:指定一段文本,使浏览器将它显示为带删除线的文字。例如: 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好!
22、 今天天气真好! 今天天气真好! 今天天气真好! 今天天气真好!(2)逻辑样式HTML作为一种用于展示文档的语言,包含了一些使用其功能而不是效果来命名的标记,这就是逻辑型字体标记。逻辑型字体标记一般适用于英文字体。另外,一般主页制作时很少使用这些标记,因为他们的显示结果,一般都可以使用、等这些标记达到。不过,稍微了解一下,可以帮助我们看懂别人的HTML代码。强调:EM中的文字是想要特别强调的部分。(通常会以斜体显示)例如:第三章是这本书的重点。特别强调: 用来表示特别强调,中间的文字用粗体显示。例如:一个也不能少引文: 用来表示一段引用的文字,也可以用来表示一个书名。(输出引用方式的字体,通常
23、会以斜体显示)例如:HTML新手上路 是一本讲述主页制作的书。大字 :.使文字相对于前面的文字增大一级小字: .例如:正常 大字 小字显示结果:正常 大字 小字CODE元素:CODE用来专门显示计算机代码(如JAVE、C+源程序等)。不过一般是比较短的代码。大量的代码,可以使用来保留原来的格式。CODE中文字的字体没有变化,而且是一种等间距(等宽)字体。 例如:response.write Hello, World! SAMP元素:指定一个样本名称,浏览器一般用等宽字体显示它。DFN(definition):表示对某个事物的定义。用斜体表示。例如:老虎是猫科动物。KBD(KEYBOAR)键盘:
24、用来显示表示用户输入的部分,使用等间距的打字机字体显示。例如:输入 your nameVAR(variable):用来表示计算机程序中提到的变量。使用斜体表示。例如:strSQL是一个字符串变量。实例:HTML实例7 文本格式 看看这里 再看看那里 这里是斜体的大字 那里是斜体的小字 硫酸的分子式是H2SO4 392=1521 3、文字闪烁标记:闪烁的字作用:包含的文字会不停地闪烁。注意:IE不支持此效果,而Netscape支持。4、标题文字虽然读者可以根据浏览器标题栏显示的TITLE里的内容,知道你的主页的标题。但是由于内容大多在浏览器窗口的客户区内,所以在BODY部分加上一个标题,可以让人
25、一目了然。 标题的字自然要大一些,就像MICROSOFT WORD里为标题专门定义了几个格式一样,HTML有几个标记是定义标题字体大小的,即,其中x的取值可以从1到6,总共有6级。标记:标记:. 作用:把文字作为标题显示在网页上,在文字前后各加一个空行。其中:“?”表示标题的级别,共有6级标题h1,h2,h3,h4,h5,h6 。h1(一级标题)显示最大, h6(6级标题)显示最小。即标记号n越小,标题字体越大,也就是标题越大。以下列出所有等级的标题:第一级标题第二级标题第三级标题第四级标题第五级标题第六级标题属性解释:#的取值: Center:文本内容居中对齐Right:文本内容右对齐Lef
26、t:文本内容左对齐。 实例: 制作网页的标题这是第一级标题这是第二级标题这是第三级标题这是第四级标题这是第五级标题这是第六级标题 说明:不必添加,里的文字都是自成一段。而且,Hx标记也有ALIGN属性,其设置和一样。二、段落格式1、段落标记还记得小学语文老师的话吗?“当文章的内容出现变化时,要另起一段;段落的开头空两格。”显然这篇用HTML作的文章要不及格的。怎么会这样?原来,HTML忽略源代码里面的回车和连续空格,而必须用专门的标记安排段落格式。空格是一个特殊字符。HTML用&加字符串表示一些特殊字符。空格是 。一个汉字要占2个英文字符的大小,空2个汉字的位置就需要加4个 
27、;。段落的标记是,中间是一段的内容。可以省略,因为HTML碰到下一个就知道另起一段了。在每一段的开头加上就行了。但不提倡这样做!标记:.作用:文字作为一个段落显示在网页上,在段前段后各加一个空行。 属性解释:#的取值:Center:段落居中对齐Right:段落右对齐Left:段落左对齐。实例:HTML实例3给文字分段落这段程序的源文件包括了很多行文字,但是会被浏览器忽略,看到的仅仅是一行。 这段 程序的 源文件包括了 很多 空格,但是有的会被浏览器忽略。而这里却不会。这段文字的显示行数将取决于用户浏览器的大小。如果用户改变浏览器的大小这段文字所显示的行数也会随之改变。实例:设置段落对齐左对齐段
28、落。居中段落。右对齐段落。2、换行标记在编写HTML文件时,不必理会段落过长的部分会被浏览器切掉。在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转折至下一行。所以,编写者对于自己需要断行的地方,应加上换行标签标签。 在有的地方,HTML空了一行的位置,然后再开始下一段。如果我想写一首诗或一段歌词,就要在一个段落里换行,用来实现。(1)标记: 作用:强迫文字换行,无结束标记。所显示的格式并不会因为浏览器窗口大小的改变而改变。实例:静夜思 床前明月光, 疑是地上霜。 举头望明月, 低头思故乡。(2)标记作用:关闭换行标记。把起始标记和结束标记之间的文本作为一行显示在网页上,
29、而不管浏览器的窗口的宽度是多少,标签中的内容都保持原有的长度,如果长度超过浏览器的宽度,在浏览器下方会出现横向滚动条,这和不加任何标签时内容在长度超过浏览器宽度则自动转折至下一行是不同的。也即关闭由浏览器依其窗口大小自动将文字换行的功能,改由滚动条控制。我们来考虑一下另外一个极端。有些歌词的一行可能要很长。当浏览器的宽度达不到时,就会自动换行。而我不想这样,我想保证这一行在同一行内显示,即使浏览器需要水平滚动条。只要把这一行用包含起来就行了。实例:静夜思床前明月光,疑是地上霜。举头望明月,低头思故乡。(3)标记 如果希望在对里几个固定的地方可以换行,可以用。床前明月光,疑是地上霜。举头望明月,
30、低头思故乡。 当窗口宽度足够宽时,这四句诗在一行里显示。如果不行,就会在有的地方换行,这样就可以保证每句诗在一行里。3、特殊段落居中标记CENTER格式:作用:对整段的文本进行居中。除了h、p标记外,我们还可以使用CENTER来使段落居中。即使没有标记,CENTER也会重起一个新的段落。而且,CENTER可以包含多个段落、图像等标记,使这些元素都居中排列。例如:验证居中标记的作用 第一段第二段第三段标题4、标记:. HTML文件在输出时都会根据窗口大小自动重新进行断行等排版操作,若不需要重新排版的内容,则用标记告诉浏览器。作用:使文本块以等宽字体显示,并保留预排版的格式。(保留文件中空格、制表
31、符和回车符的大小,即浏览器将该标记符之间的字符内容毫无变动地显示出来。)如果你有一段预先设置好格式的段落,要保持原来的空格、换行等效果,你可以把他们包含在对中。标记简单的保持原有效果,这在你需要显示一大段程序代码时特别有用。在中,一个制表符占据八个空格的位置。实例: 30 +45 75 实例: 华北 华东 华南 华中一季度 234 244 243 253二季度 345 355 354 364三季度 456 466 465 476四季度 567 577 576 587 实例:HTML实例395、插入水平线标记:作用:在网页上显示出一条水平线,属性解释:(1)size=n 设置线条的高度(2)width=# 设置线条的宽度(3)align=# 设置线条的对齐方式 #的取值有 left center right(4)noshade 在不设置color属性的情况下无阴影显示线条(5)color=# 设置线条的颜色
限制150内