第二章 超文本标记语言概述.docx
- 文档编号:2643860
- 上传时间:2023-05-04
- 格式:DOCX
- 页数:27
- 大小:32.82KB
第二章 超文本标记语言概述.docx
《第二章 超文本标记语言概述.docx》由会员分享,可在线阅读,更多相关《第二章 超文本标记语言概述.docx(27页珍藏版)》请在冰点文库上搜索。
第二章超文本标记语言概述
超文本标记语言概述
一、HTML的定义
超文本标记语言,即HTML(HypertextMarkupLanguage),是用于描述网页文档的一种标记语言。
在WWW上的一个超媒体文档称之为一个页面(page)。
作为一个组织或个人在万维网上开始点的页面称为主页Homepage,或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。
Web页面也就是通常所说的网页,在本书中不作区分。
HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:
文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
所谓超级链接,就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。
这也是HTML获得广泛应用的最重要的原因之一。
由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如:
脚本语言、CGI、组件等),可以创造出功能强大的网页。
因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。
二、HTML文件的整体结构
一个网页对应于一个HTML文件,HTML文件以.htm或.html为扩展名。
可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。
标准的HTML文件都具有一个基本的整体结构,即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。
有3个双标记符用于页面整体结构的确认。
1)和双标记符
标记符说明该文件是用HTML来描述的。
它是文件的开头,而则表示该文件的结尾,它们是HTML文件的始标记和尾标记。
2)
和头部标记符这2个标记符分别表示头部信息的开始和结尾。
头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。
头部中最常用的标记符是标题标记符
3)
和正文标记符网页中显示的实际内容均包含在这2个正文标记符之间。
正文标记符又称为实体标记。
一个不包含任何内容的基本网页文件如下所示:
文档标题
页面主体内容描述
标记网页的开始
标记头部的开始
头部元素描述,如文档标题等
标记头部的结束
标记页面正文开始
页面实体部分
标记正文结束
标记该网页的结束
当然,如果不使用以上基本框架结构,而直接使用在实体部分中出现的标记符,在浏览器下也可以解释执行。
=三、正文标记的使用
每种HTML标记符在使用中可带有不同的属性项,用于描述该标记符说明的内容显示不同的效果。
正文标记符
中提供以下属性来改变文本的颜色及页面背景。BGCOLOR
用于定义网页的背景色
BACKGROND
用于定义网页背景图案的图像文件
TEXT
用于定义正文字符的颜色,默认为黑色
LINK
用于定义网页中超级链接字符的颜色,默认为蓝色
VLINK
用于定义网页中已被访问过的超接链接字符的颜色,默认为紫红色
ALINK
用于定义被鼠标选中,但未使用时超链字符的颜色,默认为红色
例如:
以上属性使用中,需要对颜色进行说明,在HTML中对颜色可使用2种方法说明颜色属性值,即颜色名称(英文名)和颜色值。
其中颜色值用6个十六进制数来分别描述红、绿、蓝三原色的配方法——称为RGB值,每2个十六进制数表示一种颜色。
使用颜色值时,应在值前冠以“#”号。
使用图案代替背景颜色,可以使页面更生动、美观。
例如:
可将图像文件image.gif所表示的一幅图像作为页面的背景,若图像幅面不够大,将会将图像重复平铺在窗口中。
四、HTML字符集
在网页中除了可显示常见的ASCII字符和汉字外,HTML还有许多特殊字符,它们一起构成了HTML字符集。
有2种情况需要使用特殊字符,一是网页中有其特殊意义的字符,如:
<和>;二是键盘上没有的字符。
HTML字符可以用一些代码来表示,代码可以有2种表示方式。
即字符代码(命名实体)和数字代码(编号实体)。
字符代码以&符开始,以分号结束,其间是字符名;数字代码也以&符开始,以分号结束,其间是#号加编号。
五、HTML的有关约定
在编辑HTML文件和使用有关标记符时有一些约定或默认的要求。
(1)文本标记语言源程序的文件扩展名默认使用htm或html。
在使用文本编辑器时,注意修改扩展名。
而常用的图像文件的扩展名为gif和jpg。
(2)HTML源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(
标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号“ ;”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。
(3)标记符中的标记元素用尖括号括起来,如:
、,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即与作用相同;许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
(4)标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。
(5)HTML注释由惊叹号表示,注释内容由
--至-->符结束。
注释内容可插入文本中任何位置。
任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。
HTML正文字体
在制作网页时,常要为字符设置不同的显示格式(如:
字体、字型、字号等)。
一、物理字符标记符
标记符
说明
标记符
说明
粗体
大字体
斜体
加删除线
小字体
加删除线
下标字符
上标字符
固定宽度字符
加下划线
二、逻辑字符样式
逻辑字符样式不但可以指定文本格式,还能反映文本的含义。
逻辑型标记符名
意义
用于强调(Emphasis)的文本,以区别于其他文本,一般显示斜体字
用于特别强调的文本,显示粗体字
用于引证(CITATION)、举例,通常是斜体字
用来指出这是一组代码
由用户所输入的文本,通常显示较粗的宽体字
用来表示变量(VARIABLE),通常显示斜体字
表示一个定义(DEFINITION)或说明,通常为斜体字
三、标题标记符
标题标记符用于在显示的正文中表示不同级别的标题,其中n为1~6的数字,
表示最大号的标题,
表示最小号的标题。
标题标记符应成对使用。
浏览器在解释标题标记符时,会自动改变文本的大小,同时换行并添加一定的行距。
四、字号标记符
字号标记符用于显示不同的字号,带有3个常用的属性,即SIZE、COLOR和FACE。
为结尾标记符,应注意成对使用。
SIZE为字号属性,用于控制文字的大小,设定的值越大,显示的文字越大,其值的绝对值为1~7。
也可以用+或者负号来说明相对值。
例如SIZE=+1表示设定值比当前值大1号。
一般3号为默认值。
例如
READ COLOR属性可用于改变文字的颜色。
例如
RED可将和之间的文字显示为红色。 FACE属性则用来指定文体样式。
如“timesNewRoman”字体、“Arial”字体、“宋体”“楷体”等。
在FACE属性中可同时指定几种字体,浏览器解释时优先使用列在前面的字体,如系统中没有前面的字体,便采用后一种字体。
正文布局
在正文布局中主要讨论段落、引文、预格式化和列表文本的处理等问题。
一、段落格式
1)段落标记符
标记符指出一个新段落的开始,其后内容从新的一行开始,并与上段之间有一个空行。
它可以有位置对齐属性ALIGN。
2)换行标志
单标记符用于使文本从新的一行显示,注意它不象会产生一个空行,但连续多个的
可以产生多个空行的效果。3)水平线标记符
单标记符
用于产生一条水平线,以分隔文档的不同部分。可以给
标记符设置一些属性,以设定其位置,改变其长短、粗细等特征。其属性有ALIGN、SIZE、WIDTH、NOSHADE和COLOR等。
ALIGN属性用来定义水平线的对齐方式,默认为center,表示居中。
此外可定义为left和right。
和
标记符的ALIGN属性也取这3个值,但默认值为left。 SIZE属性用于定义水平线的粗细,其值为一整数,取象素(prixel)值,默认值为2。
WIDTH属性用于定义水平线的长度。
长度值可以取绝对值或相对值。
绝对值即象素值,相对值取百分数(如80%)。
用象素值时,水平线的长度将不会随显示窗口的变化而变化,而用百分数时水平线的长度将随窗口宽度的大小变化而变长或变短。
NOSHADE属性则使水平线为一条黑线,不使用该属性时将默认产生一条加阴影的三维立体线条。
例如:
若要产生一条居中显示,粗细为5,长度占窗口宽度60%的实心红色水平线,则HTML标记为:
。 4)段落对齐标记符
段落对齐标记符有
和 。双标记符可使在 和 之间的内容居中显示。双标记符用于文档分节,以便为文档的不同部分应用不同的段落格式,标记符要使用属性ALIGN来控制段落对齐格式。其属性值为right、center、justify(两端对齐)。
在说明段落对齐时,可能会出现多种标记说明嵌套的情况。
当不同格式设置作用于同一内容时。
若所设置的格式是相容的,则采取叠加效果,如同时设置了粗体和斜体,则叠加效果为粗斜体;若所设置的格式是相冲突的,则取最靠近的标记说明。
二、预格式化标记符
双标记符
和可以使显示效果完全按照源文件中编排的格式输出。只要将预先编排好格式的信息安排在该双标记符之间即可实现。
这时用户打入的回车、换行、空格等符号在显示时将完全起作用。
三、引文标记符
引文双标记符
和可用于建立一个引文,引文常值于一段较长文本之前,显示时会将引文文字自动右移缩格,左右各空出几个空格,以示区别。四、列表格式
列表显示文字可使信息显示更清楚有序,在HTML中有3种常用的列表格式,即有序表、无序表和定义式列表。
1)有序列表
有序列表使用双标记符
和
,表项使用和 ,其语法格式如下:
- 表项1
- 表项2
有序列表在显示时使每个表项占一行,并在表项前自动加上顺序编号。
标记符的编号可由属性TYPE和START来改变。
TYPE表示编号的类型,START表示序号从何开始。
TYPE=1表示序号为阿拉伯数字(默认值),TYPE=A表示序号为大写字母,TYPE=a表示序号为小写字母,TYPE=I表示序号为大写的罗马数字,TYPE=i表示序号为小写罗马数字。
当位于
标记符说明中时,
- 标记符有2个常用属性,TYPE和VALUE。
TYPE用于设置数字样式,取值与
的TYPE相同,VALUE属性用于指定一个新的数字序列起始值,以获得非连续性数字序列,如下例:
才
2)无序列表
无序列表使用双标记符
和
标记符。标记符的属性项TYPE取值为disc(实心圆)、circle(空心圆)和square(方块)。
这些圆和方块作为列表项目前的项目符号。
有序表和无序表本身可以嵌套列表,2种列表也可以相互混合嵌套。
下列HTML代码为混合列表的嵌套示例,显示效果如图4.3.2所示:
混合嵌套列表
混合嵌套列表:
- 列表项1
- 子列表项1
- 子列表项2
- 列表项2
- 子列表项1
- 子列表项2
- 列表项3
- 子列表项1
- 子列表项2
插入图像
一、插入图像标记
用于表示在网页某位置插入一个图像。
图像来自它指定的某一图像文件。
它具有2个基本属性:
SRC和ALT。
SRC属性用于指定图像文件的URL;
ALT则是对图像简要说明的文字。
当图像不能显示时,则在指定的图像位置显示ALT所定义的文字。
另外,当鼠标移到图像上时,通常也会显示ALT属性的内容文字(延续约几秒钟)。
二、图像布局
标记符中还可使用其他属性用于控制图像的尺寸、位置等布局。
1)指定图像的高和宽
WIDTH和HEIGHT属性分别用于指定图像的高度和宽度,其值可为象素,也可取百分比。
当浏览器解释执行时,在实际下载图像文件之前会按指定尺寸预留出空间。
以便预先安排好页面布局。
从而加快网页展示的速度。
2)添加边框
用BORDER属性可以给图像添加边框,边框宽度的单位是象素。
BORDER=0表示无边框,省略该属性也表示无边框。
3)图像与文字对齐方式?
当图像与文字混排时,可使用ALIGN属性说明文字与图像的对齐方式,ALIGN的值可以是top表示顶部对齐、middle表示中央对齐、bottom表示底部对齐(默认值)、left表示图像居左、right表示图像居右。
4)设置图像与文本之间的空白?
属性HSPACE和VSPACE可用来设置图像和文本(或图像与图像)之间水平方向和垂直方向的空白象素点。
以下的HTML代码说明图片使用的实例
插入图像示例
下面插入一个图像,如果浏览器不能显示该图像,或找不到图像文件时,
将显示"thisisthewindowslogo"字样:
下面插入一个图像
下面插入同一个图像,但尺寸变大
创建超级链接
一、URL与
标记符 1)URL
URL称为统一资源定位器(UniversalResourceLocator),用于定位WWW上的文档位置。
一个URL通常包含3部分:
协议、服务器地址、文件地址和文件名。
协议表明应使用何种方法获取信息,常用协议有http(超文本传输协议)、ftp(文件传输协议)、mailto(电子邮件协议)、news(新闻组协议)、telnet(远程登录协议)等。
计算机及其服务器地址通常使用域名地址,也可使用IP地址。
在URL中使用斜杠“/”来分隔目录,如果是在主机根目录下寻找首页,则文件名常常省略,通常的默认文件名是index.html或default.html。
2)绝对URL与相对URL
绝对URL是指一个包括协议名、域名和包含路径的文档名的完整地址。
例如:
就表示一个绝对URL。
相对URL是指相对于当前页面的地址,通常是指从当前页面指向的主机目录开始的路径。
例如:
image_file/example.gif就是一个相对URL,它表示当前目录下的image_file目录下的example文件。
用户在制作自己的网页时,通常使用的是相对URL。
如果所访问的文档都在本地计算机(自己的计算机)上,则WWW在访问时使用file协议。
如:
file:
//D:
/example/index.html。
3)
标记符 与中使用,用于定义一个URL基准的地址头,这样在网页中出现的相对URL则自动使用该基准地址,以组合为一个引用地址。
标记符在头部标记符 例如:
。 二、建立超级链接
建立超级链接使用标记和并使用属性HREF。
根据超链所指向的地点不同,可分为指向本地网页的链接、指向其他网站网页的链接、指向本页面中特定部分的链接和指向Email地址的链接。
1)指向本地网页的链接
指向本地网页是指在同一台计算机上进行链接时的情况。
这时只要使用相对URL即可。
在标记符中的HREF属性中定义该地址,然后在和双标记符之间用文字或插入图片的方式说明在该处有一个超级链接的节点。
当文字被作为节点时,默认情况下,该文字被显示为蓝色并带下划线。
若将鼠标指向该文字或图片时,鼠标会变成一个手指形状,点击鼠标左键、则可激活该URL,此时在浏览器窗口左下方的状态栏中会显示出该URL。
例如:
小王的网页 或
2)指向其他网页的链接
如果超链是指向另外主页上的网页,则应使用绝对URL。
例如:
微软网站 3)指向页面中特定部分的链接
对于一个较长的页面,往往在一个窗口中不能全部显示,这可以使用指向页内的超级链接进行跳转,首先应在页面中特定部分设置一个目标点——锚点。
然后再设置超级链接节点。
设置锚点使用标记符的NAME属性。
例如:
第四章 设置了锚点之后,就可以用标记符的HREF属性指向该位置。
例如:
第四章超文本标记语言 当用户在显示的页面中点击链接文字“第四章超文本标记语言”时,则窗口将显示标记有“第四章”锚点开始的页面。
注意到,对于锚点的应用需使用符号“#”。
如果在另外主机中的某页面的某处也设置了锚点,则在超级链接使用时,也可以直接指向该锚点处显示,例如:
指向第二部分 4)指向电子邮件的链接
chen538@">单击此处与作者联系
当用户在页面上单击“单击此处与作者联系”超链节点的文字后,系统将自动启动邮件客户程序(例如OutlookExpress),并将设定的邮箱地址(例如chen538@)填入至“收件人”栏中,用户即可编辑并发送邮件了。
表格制作
一、创建表格
在HTML中可使用
、
、 、 、 等标记符来创建和设计表格。 1)
标记符
双标记符
和
用于定义表格,一个表格的所有内容都放在这2个标记符之间。它具有多个属性,具体内容在后面述叙。
2)创建表格标题
双标记符
和 用于建立表格的标题,并使用ALIGN属性定义标题的位置。ALIGN位置属性有4个值,即top(标题放在表格的上方)、bottom(标题放在表格的下方)、left(标题放在表格的左上方)、right(标题放在表格的右上方)。
一个表格只能有一个标题。
例如:
颜色与颜色值对应表,表示将表格标题放在表格的下面且居中。 3)建立表头?
表头是表格中行或列的标题,即表项的名称。
使用
可以在表的第一行或第一列加表头,表头内容写在 和 之间,显示时将采用粗体字以醒目。在表格的第一行加表头的格式为:
表头1 表头2 表头3 在表格的第一列加表头的格式为:
表头1 表项1 表项2 表项3 4)表格行与列的定义
表格的内容是由行定义标记符
和 以及列定义标记符与 来确定的。可以省略,即一个新的
开始,表示前一个 的结束。 一般的也可以省略。
在
、 、 标记符中可使用ROWSPAN和COLSPAN属性对行、列合并。 例如:
表项1表示在纵向上合并3行;而标记符 表项2表示在水平方向上合并的列数。 利用这一功能可制作出较为复杂的多层表头的表格。
下面的HTML代码产生一个具有多层表头的表格。
跨行跨列的表格例
平均 其他 类号
性能
数据1 数据2
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第二章 超文本标记语言概述 第二 超文本 标记 语言 概述
冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。关于本文