网页编程基础第三章知识点总结——超链接和图像

网页编程基础第三章知识点总结——超链接和图像

知识点预览

网页中的超链接

网页中的图像

 

网页中的超链接

 

1.超级链接和URL

a)超级链接的构成

<a href=”……”>Oracle</a>

                       i.可见部分：带下划线的文字

                     ii.不可见部分：URL（网络资源的地址）

b)超级链接的作用

使用HTTP协议激活一个URL，访问资源

c) URL统一资源定位

                       i.URL：统一资源定位器/符：用于唯一标识网络中的资源

                     ii.组成：协议、主机名、路径名、文件名

                   iii.URL举例

2.超级链接元素A

a) 语法：

                       i. <a>——必需

                           内容：内联元素（不能嵌套A元素）

                           文本

                         </a>——必需

                     ii.属性：

href：URL

target：打开链接的窗口

name：锚点名称

b) 锚点：

                       i.什么是锚点：文档中某行的一个记号

                     ii.作用：使用锚点可以让超链接到文档中的某一行

                   iii.定义：<a name=”anchorname1”>锚点1</a>

                    iv.链接到锚点：在锚点名前加上#号

<a href=”../index.html#anchorname1”>到锚点1</a>

3.相对路径和绝对路径

a)定义：

                       i.相对路径：指文件的位置是相对于当前文件的位置，它包括目录名

                     ii.绝对路径：完整路径

b)       相对路径还是绝对路径：

                       i.用相对路径：一般用于相同网站，网页存储在相同位置（或相对位置固定，不会改变）

                     ii.用绝对路径：一般用于不同网站，网页的相对位置经常变动

4.CSS和超链接

a)超链接的外观

b)浏览器对超链接的默认外观设置

例：IE浏览器

c) 修改默认外观的方法

使用body元素的link、alink、vlink属性

不提倡使用——为了保证结构和外观相分离

使用CSS

d)CSS：

                       i.a:link 未访问

                     ii.a:active 激活

                   iii.a:visited 已访问过

                    iv.a:hover 鼠标经过

网页中的图像

 

1.图像文件的格式

a)HTML支持三种格式的图像文件

JPEG

GIF

PNG

b) 图像格式

JPEG

GIF

PNG

2.IMG元素

a) 语法：

<IMG>——必须

内容：无

结束——禁用

b)主要属性：

                       i. id,class：样式表

                     ii.src：图像的URL

                   iii.alt：简短描述（鼠标放在图像上显示的文字）

                    iv.usemap：客户端图像映射的URL

                      v.width：宽度 改变本身图像的宽度

                    vi.height：高度 改变本身图像的高度

                  vii.hspace：水平间距 距离浏览器

                viii.vspace：垂直间距 距离浏览器

                    ix.border：边框 使用数字单位是像素

                      x.align：对齐方式

c)alt属性的作用

d)图像元素应用举例

3.图像的编排

图像与文本的关系

bottom top middle

4.热点区域

a) 图片不同部分使用不同超链接

b) 元素

                       i. <MAP>：映像元素 定义一个客户端元素

                     ii.<AREA>：热点元素 一个几何图像区域，可以加上A

c) map

                       i.语法

                        <map>——必需

                       内容：AREA元素

                      </map>—必需

                     ii.主要属性

title、id、class、style、lang、dir

name：映像名，需要和IMG的usemap属性相同

d)area

                       i.语法

                         <area>——必需

                         内容：无

                         </ area >—必需

                     ii.主要属性

id、class、lang、dir

coords：热点区域的坐标范围 左上角和右下角的坐标范围

href：URL

nohref：标志有无超链接的布尔型属性

shape：形状 可以取rect等

e) 图像映像热点举例

f)小技巧：<a href=”#”>XXX</a> 指向本页