资源预览内容
第1页 / 共45页
第2页 / 共45页
第3页 / 共45页
第4页 / 共45页
第5页 / 共45页
第6页 / 共45页
第7页 / 共45页
第8页 / 共45页
第9页 / 共45页
第10页 / 共45页
亲,该文档总共45页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
第二讲 HTML 语言,HTML语言是超文本标记语言(Hypertext Mark-up Language)的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言,而是一种描述性的标记语言。 所有网页软件都是以HTML为基础,学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中,常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码,此时就必须对HTML标记相当熟悉才行。 HTML文件是纯文本文件,能用任意的文本编辑器编辑,如:记事本、写字板、Word、Dreamweaver、Frontpage等。 本讲将对常用的HTML标记符进行介绍。,一、HTML网页的基本组成与特点,1、用HTML制作网页的简单实例 【例2.1】制作杜牧诗秋夕 制作过程: (1)用任何文本编辑器(如记事本、写字板、WORD等)输入下列文本(代码): 杜牧诗秋夕 秋夕 杜牧 银烛秋光冷画屏 轻罗小扇扑流萤 天阶夜色凉如水 卧看牵牛织女星 (2)以纯文本格式存为example2-1.htm文件(设位置为:E:网页制作example)。 (3)打开浏览器,在地址栏中输入E:网页制作exampleexample2-1.htm,就会看到所制作的网页。,一、HTML网页的基本组成与特点,2、HTML网页的基本组成 启动Dreamweaver后,切换到代码浏览窗口,此时看到的HTML代码,即是网页的基本组成部分,其代码为: example2-1 从中可见,一个最基本的网页一般由三个部分组成,分别是: (1) 标记用于定义网页文件的开始,对应的结束标记为则定义网页的结束。 (2) 该组标记用于定义网页的头,用来说明文件的一些基本信息,如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。 在这里,和标记定义网页的标题,该标题将显示在浏览器的标题栏中。 标记有很多用法,这里是用于指定网页所使用的字符集,是可选项。 (3) 用于定义网页的正文开始,用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间,bgcolor为标记的属性,用于指定网页的背景颜色,text也为标记的属性,用于指定网页正文的前景色。,一、HTML网页的基本组成与特点,3、HTML的特点 HTML文件是标准的文本文件,以纯文本形式存放,扩展名为“*.htm“或“*.html“。若系统为UNIX系统,则扩展名为“*.html“。HTML是由若干标记符和文本构成,标记符适用于组织网页的内容和控制输出格式,HTML具有以下几个特点: (1)HTML标记的一般格式 HTML标记均是用括起来的,大多数标记是成对出现的,有开始标记和对应的结束标记,结束标记多一根斜杠。许多标记还有属性,用于对标记进行详细设置。HTML标记的一般格式为: 例如: 但有的标记没有结束标记,称为单标记,如: (2)各属性项间用空格分隔,属性值可用双引号或单引号引起来,也可不引而直接表达。例如控制文本字体的标记为,该标记有face、size、color属性,分别用于控制字体名、字体大小和字体颜色,用法为: 字体属性测试 (3)HTML标记不区分大小写,与和是相同的。,一、HTML网页的基本组成与特点,3、HTML的特点 (4)HTML中一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。 例如: 2001年7月13日,北京申奥成功! 和 2001年7月13日, 北京申奥成功! 都是正确的,且显示效果相同,但HTML标记中的一个单词不能分两行书写,如: 2001年7月13日,北京申奥成功! 是不正确的。,一、HTML网页的基本组成与特点,3、HTML的特点 (5)HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用标记,换段用标记,表示段落开始,表示段落结束。如果源文件中有多个连续空格,显示时也只显示一个,若要显示多个空格,可以使用多个 。 例如: 2008北京奥运 与 2008 北京奥运 的浏览器显示效果均为 2008北京奥运 2008北京奥运 与 2008 北京奥运 的浏览器显示效果均为 2008 北京奥运 但是,我们注意到时:在源文件中加换行符,虽然显示效果不换行,但在原换行符处会加一个空格。,一、HTML网页的基本组成与特点,3、HTML的特点 (6)网页中所有的显示内容都应受限于一个或多个标记,不应有游离于标记之外的文字或图像等,以免产生错误。 (7)HTML标记可以嵌套使用,实现从不同角度对文本进行格式控制。嵌套使用时注意不要发生交叉嵌套。 比如若要以加粗、居中、红色显示“奥林匹克精神”文本,则实现的代码为: 奥林匹克精神 判断是否发生交叉嵌套的方法是:分别将标记符的开始标记和对应结束标记用线连接起来,只要这些连接彼此不相交,则嵌套就正确,否则嵌套错误。比如以下用法就发生了嵌套错误。 奥林匹克精神 各种标记符书写的先后顺序没有特别要求,只要不发生交叉嵌套就行。因此,以下三种用法等效。 奥林匹克精神 奥林匹克精神 奥林匹克精神 (8)可以为网页加上注释,如例2.1中即为网页的注释部分,注释可以放在网页开头部分用于说明网页的功能等,或放在某个标记之后对标记加以说明。注释用“!”标记,“”表示注释结束,中间的所有内容表示注释,且可以换行。注释不是必须的,注释的内容不在浏览器中显示出来,仅为设计人员阅读方便。,二、文本及版面风格控制标记,(一)文本控制 1、文本格式标记 文本控制主要是控制文本的字体、字体大小和颜色,这通过标记来实现。 格式: 文本 功能:设置网页中普通文字的显示效果。 属性: (1)Face属性用于指定文字字体,如“楷体_GB2312”、“宋体”、“黑体”等。但要注意,浏览器显示的字体与客户端安装的字体有关,如果网页文件中设置了客户端滑安装的字体,则以默认的宋体字显示。因此,在使用字体时,应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。 (2)color属性用于设置字体的颜色。在HTML中颜色通常用#RRGGBB来表达,RR、GG、BB分别代表红色、绿色、和蓝色的分量值,用十六进制数表示,取值范围为00FF。通过改变三基色的混合量,即可形成各种各样的颜色。另外,颜色也可以用英文单词来表示。下面是常用颜色的取值及英文单词表。 颜色 红色 绿色 蓝色 黄色 黑色 白色 紫色 浅蓝色 取值 #FF0000 #00FF00 #0000FF #FFFF00 #000000 #FFFFFF #FF00FF #00FFFF 单词 Red Green Blue Yellow Black White Purple Aqua,二、文本及版面风格控制标记,(一)文本控制 (3)size属性用于指定字体的大小。 字体大小的表达方法有两种,一是设置为绝对字号,此时的设置值可以是1号,1号最小,7号最大,默认字号为3,可利用设置或更改默认字号。 例如,若要以蓝色,宋体2号字输出“网页设计技术”,则实现的代码为: 网页设计技术 另一种是设置为相对字号大小,此时的用法为,其中n代表字号改变的量,+表示字体在默认字号的基础上增大几号,-表示在默认字号的基础上递减几号字。 例如: 网页设计技术,二、文本及版面风格控制标记,2、标题格式标记 标题格式使用Hn标记控制。 格式:标题文本 功能:用于定义文章内章节标题的显示格式,同时包括了标题的字体、大小、和段落间距。 说明:n表示标题字号,共六级,分别是1,2,3,4,5,6,数字越大,字号越小。 Align表示水平对齐方式,取值为left、right或center。 【例2.2】在网页中分别用六级标题标记符输出一个测试效果文本。 实现的代码为: 演示标题字体 这是第一级标题 这是第二级标题 这是第三级标题 这是第四级标题 这是第五级标题 这是第六级标题 ,二、文本及版面风格控制标记,运行效果如图2.1所示。,图2.1 标题字演示,注意:用该标记实现的文章标题效果有限,通常还是用FONT标记实现文章实际标题的丰富多彩效果。,二、文本及版面风格控制标记,3、字体效果(字型设置)标记 HTML中还定义了一些用于改变字体效果的标记符,常用的有加粗、斜体、加下划线等。各种标记的格式和具体功能如表2.1所示: 表2.1字体效果标记表 标记 格式 功能 受影响的文字 加粗 受影响的文字 斜体 受影响的文字 加下划线 受影响的文字 标准打印机字体 受影响的文字 加删除线 受影响的文字 产生下标 受影响的文字 产生上标 受影响的文字 大字体文本 受影响的文字 小字体文本 受影响的文字 闪烁字注意: 不要频繁使用各种效果,太花哨的网页反而会引起读者的反感。 一些浏览器不能正常显示某些效果,如加粗和斜体时却加了下划线或反向显示,或忽略。 可以将几种效果混用,如: 霜叶红于二月花,二、文本及版面风格控制标记,(二)版面风格控制 1、网页整体风格控制(文件主体)标记 对网页整体风格的控制主要通过文件主体标记及其相关属性来实现。 格式: 功能:设置文件主体。 属性: (1)background 设置网页背景图像,图像以平铺方式作为网页背景。image-url是图像文件的路径。 例如,若要用images/bg.gif作为网页的背景图像,则设置方法为: (2)bgcolor 设置网页的背景颜色,默认为白色。 (3)text 设置网页非可链接文字的色彩,默认为黑色。 (4)link 设置网页可链接文字的色彩,默认为蓝色。 alink 设置网页活动链接文字的色彩,默认为蓝色。 Vlink 设置网页已访问过链接的文字色彩,默认为蓝色。 (5)leftmargin 设置页面左边空白。 Topmargin 设置页面上边空白。 Value 是空白量,可以是数值,也可以是相对页面窗口宽度和高度的百分比。 (6)bgproperties 该属性只有一个取值,即为FIXED,用于锁定网页的背景图像。锁定后,当前滚动页面时,背景图片就不会跟着滚动了。例如: 说明: body标记说明文件的主体,可以省略,中间可以插入其他标记和文字。 其属性可以省略,也可以有一个或多个。,二、文本及版面风格控制标记,(二)版面风格控制 2、段落标记 格式: 功能:设置文章段落开始和结束。 属性:align是水平对齐方式,取值为left、right或center。 说明:段落结束标记可以省略,因为一个段落的开始表示上一个段落的结束。 例如: 白日依山尽黄河入海流 和 白日依山尽黄河入海流 都是合法的,显示效果一样。 注意:HTML中显示文字的分段不能通过源文件中的回车来实现。 3、换行标记 格式: 功能:另起一行显示文字。 说明: 该标记是单标记。 标记标记中在显示效果上都是另起一行书写。它们的不同之处是标记的行距较大,标记和行距较小。另外换行后的文本与前面的文本仍属同一段落,因此换行后字符和段落格式不会改变,这也与标记不同。 为保证某一单词的完整性,有时需要禁止在某处换行,此时可使用标记来实现。其用法为:文本该标记符作用的文本将在同一行显示,若一行显示不下,则超出部分
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号