本节学习内容
<a href="#1">HTML说明</a>
<a href="#2">HTML头部标记</a>
<a href="#3">标题字</a>
<a href="#4">段落标记</a>
<a href="#5">建立超链接</a>
<a href="#6">使用图像</a>
<a name="1">HTML说明</a>
- HTML是一款描述性标记语言,不是编程语言
- 一个完整的HTML文档必须包含3个部分:一个由
<html>
元素定义的文档版本信息;一个由<head>
定义各项声明的文档头部;一个由<body>
定义的文档主体部分
<a name="2">HTML头部标记</a>
-
<head>...</head>
头部标记,一般包括标题、基础信息、文档样式表定义、脚本和元信息,定义在头部的信息往往不会直接显示在网页上
-
<title>...</title>
标题标记,页面的标题只有一个
- 元信息标记
meta
,meta
元素提供的信息不显示在页面上,一般用来定义页面信息的说明、关键字和刷新等。一个HTML页面中可以有多个meta元素,该元素的属性有name
和http-equiv
,其中name
属性主要用于描述网页,以便于搜索引擎查找、分类,语法<meta name="keywords" content="输入具体的关键字">
-
name="keywords"
设置网页的关键字属性,在content
中定义具体的关键字
-
<meta name="description" content="设置页面说明">
,name
设置成description
页面说明,在content
中定义具体的描述语言
-
<meta name="generator" content="FrontPage">
,name
设置成generator
编辑工具,在content
中定义具体的编辑工具名称
-
<meta name="author" content="作者的姓名">
,name
设置成author
作者信息,在content
中定义具体的信息
-
<meta http-equiv="content-type" content="text/html; charset=字符集类型">
,网页中还可以设置语言的编码方式。http-equive
用于传送HTTP通信协议的标头,而在content
才是具体的属性值。charset
用于设置网页的内码语系,也就是字符集的类型。
-
<meta http-equiv="refresh" content="跳转的时间; URL=跳转到的地址">
,<meta/>
标记可以使网页在经过一定时间后自动刷新。refresh
表示网页的刷新,在content
中设置刷新的时间和刷新后的链接地址,时间和链接地址之间用分号隔断,默认情况系,跳转时间的单位是秒
<a name="3">标题字</a>
- 标题字标记
<h1>
到<h6>
- 标题字对其属性
<align=对齐方式>
,left、center、right。
<a name="4">段落标记</a>
- 段落标记
<p>段落文字</p>
,每一个新的段落标记开始的同时意味着上一个段落的结束
- 换行标记
<br>
,作用是在不另起一段的情况下强制当前文本换行,<br>
是唯一可以为文字分行的方法,标记<p>
可以为文字分段
- 不换行标记
<nobr>
,网页中某一行的文字过长,浏览器会自动对文字进行换行处理,可以使用<nobr>
标记来禁止自动换行
- 水平线标记
<hr>
,代表水平分割模式,并会在浏览器中显示一条线
- 其他标记-特殊符号的表示
特殊符号 |
符号的代码 |
特殊符号 |
符号的代码 |
一个半角空格 |
  ; |
“ |
" ; |
& |
& ; |
< |
< ; |
> |
> ; |
× |
× ; |
§ |
§ ; |
© |
© ; |
® |
® ; |
™ |
&trade ; |
<a name="5">建立超链接</a>
- 超链接能够浏览者在各个独立的页面之间方便的跳转。网站都是有众多的网页组成,网页之间都是通过链接方式相互关联的。超链接的作用范围很广,可以将文档中的任何文字及任意位置的图片设置为超链接。
- 超链接分为外部链接、电子邮件链接、锚点链接、空链接、脚本链接。
- 每个网页都有一个唯一的地址,称为统一资源定位符(URL)。在网页中创建内部链接的时候,一般不会指定链接文档的完整URL,而是指定一个相对当前文档或站点根文件夹的相对路径。
- 绝对路径:是包括服务器规范在内的完全路径。好处是它同链接的源端点无关,只要网站的地址不变,无论文档在站点中如何移动都可以正常的而不会发生错误。另外,希望链接同站点上的其他内容,就必须使用绝对路径。缺点在于不利于测试,不利于站点的移植。
- 相对路径:可以表述源端点同目标端点之间的相互位置,它同源端点的位置密切相关。好处在于如果站点的结构和文档的位置不变,那么链接就不会出错。可以将整个网站移植到另一个地址的网站中,而不需要修改文档中的链接路径。
- 提示:插入图像时,如果使用图像的绝对路径,图像在远程服务器而不是在本地硬盘上,则将无法在文档窗口中查看该图像。对于图像尽量使用相对路径
- 内部链接是指链接的对象是在同一个网站中的资源
- 链接的目标窗口,在创建网页的过程中,默认情况下超链接在原来的浏览器窗口中打开,可以使用
target
属性来控制打开的目标窗口。语法为:<a href="目标文件" target="目标窗口的打开方式">
,target
参数的取值有四种:
-self
(在当前页面中打开链接)、
-blank
(在一个全新的空白窗口中打开链接)、
-top
(在顶层框架中打开链接,也可以理解为在根框架中打开链接)、
-parent
(在当前框架的上一层打开链接)
- 锚点链接:当页面中由于文本或者图像过多,导致页面过长,访问者需要不断拖动滚动条查看文档内容。为了方便文档中的内容,在文档中需要进行锚点链接。语法为
<a name="锚点的名称"></a>
,利用锚点的名称可以链接到相应的位置。这个名称可以是数字或英文,或者两者的混合。同一个网页中可以有无数个锚点,但是不能有相同名称的两个锚点
- 链接同一页面中的锚点,用
#
号以及锚点的名称作为href
的属性值,语法为<a href="#锚点的名称"></a>
- 提示:如果链接的锚点在屏幕上已经可见,那么浏览器可能不会再跳到那个锚点。如果链接的锚点正好在屏幕的底部,那么根据屏幕的大小,浏览器也不能跳到该锚点,因为已经到了底部,只能尽可能的接近锚点
- 链接到其他页面中的锚点:锚点不但可以链接到同一个页面,也可以在不同页面中设置。语法:
<a href-"链接的文件地址#锚点名称">...</a>
- 锚点链接常常用于那些内容庞大繁杂的网页。通过单击命名锚点,能够快速重定向网页特定的位置,如快速到页首、页尾或者网页中某段位置,便于浏览者查看网页内容。
- 外部链接是指跳转到当前网站之外的资源中。如:
(1)链接到外部网站<a href="http://.....">....</a>
(2)链接到E-mail<a href="mailto:邮件地址">...</a>
(3)链接到FTP<a href="ftp://ftp地址">...</a>
FTP代表文件传输协议,一个FTP站点通常包含一些上传和下载文件的文件目录
(4)链接到Telnet<a href="telnet://telnet地址">...</a>
Telent常用来登陆一些BBS网站,也是一种远程登录方式
(5)下载文件<a href="文件地址">...</a>
如果超链接指向的是一个文件,单击链接的时候就会下载文件
<a name="6">使用图像</a>
- 网页中常用的图像格式优3种:GIF JPEG和PNG
(1)GIF -- Graphic Interchange Format图像交换格式,优点:可制作动态图像、可以将图像以交错的方式在网页中呈现(如图像尚未下载,浏览器会先以马赛克的形式将图像慢慢显示,让浏览者可以大致猜出下载图像的雏形)
(2)JPEG -- Joint Photographic Exports Group它是一种图像压缩格式
(3)PNG -- Portable Network Graphics图像格式是一种非破坏性的网页图像文件格式
- 插入图像标记img
img元素的属性定义:
属性 |
描述 |
属性 |
描述 |
src |
图像的源文件 |
alt |
提示文字 |
width,height |
宽度和高度 |
border |
边框 |
vspace |
垂直间距 |
hspace |
水平间距 |
align |
排列 |
dynsrc |
设定avi文件的播放 |
loop |
设定avi文件循环播放次数 |
usemap |
映像地图 |
start |
设定avi文件播放方式 |
lowsrc |
设定低分辨率图片 |
loopdelay |
设定avi文件循环播放延迟 |
- 图像的提示文字alt。提示文字有两个作用,当浏览该网页时,如果图像下载完成,将鼠标指针放在该图像上,鼠标指针旁边会出现提示文字。也就是说,当鼠标指针指向图像上方时,稍等片刻,可以出现图像的提示性文字,用于说明说着描述图像。第二个作用是,如果图像没有被下载,在图像的位置上就会显示提示文字。
- 图像的超链接,除了文字可以添加超链接之外,图像也可以设置超链接。同一个图像的不同部分也可以链接到不同的文档,这就是热区链接。超链接也是用
<a>
标签来完成。
- 图像热区链接:在HTML中可以把图片划分为多个热点区域,每一个热点区域链接到不同的网页。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的热点区域进行超链接,这就是映射地图。
语法:
首先需要在文件中设置映射图像名,在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称如下:
![](图像地址)
然后需要定义热区图像以及热区的链接属性如下:
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>
说明:在该语法中需要先定义映射图片的名称,然后再引用这个映射图像