网页编程基础第三章知识点总结——超链接和图像
知识点预览
网页中的超链接
网页中的图像
网页中的超链接
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> 指向本页