做网站收费,wordpress网站vip可看,管理系统界面设计,金融外贸是做什么的1 网页超链接的概念
1.1 什么是网页超链接 指的是从一个网页向一个目标的链接关系#xff0c;以特殊的编码的文本或者图形的形式来实现链接#xff0c;点击该链接#xff0c;会传送到某个位置#xff0c;或者打开新的网站。网页中的链接#xff0c;一般以蓝色字体#x…1 网页超链接的概念
1.1 什么是网页超链接 指的是从一个网页向一个目标的链接关系以特殊的编码的文本或者图形的形式来实现链接点击该链接会传送到某个位置或者打开新的网站。网页中的链接一般以蓝色字体文字下有下换线鼠标放在上面会出现小手的情况单击即可跳转。如果访问过该链接其文本则会变色(默认为紫色)。
1.2 超链接的URL URL是Uniform Resource Locator的缩写由以下四部分组成协议、主机名、文件夹名和文件名网页文件以.html或.htm为扩展名。
超文本传输协议主机名文件夹名文件名http://www.webDesign.com/pages/computer.html
1.3 超链接的URL类型
绝对URL超链接网络上站点的完整路径。相对URL超链接链接到其它网页的URL。书签超链接同一网页的超链接又称为书签。
2 建立网页超链接 建立超链接所用的标记为(a(锚)anchor)超链接是网页中的灵魂其中最重要的两个因素为网页元素(文字、图片)和超链接的目标地址。
a herfURl网页元素/a2.1 创建超文本链接 herf属性(文档外的链接)a herfURl文档外链接文本/a name/id属性(文档内的链接)a name“value”文档内链接文本/a与a id“value”文档内链接文本/a
!DOCTYPE html
html langen
headmeta charsetUTF-8title文本链接/title
/head
body
友情链接----
a hrefhttp://www.baidu.com百度/a
a hrefhttp://www.sina.com.cn新浪/a
a hrefhttp://www.163.com网易/a
/body
/html注链接前超文本传输协议不可省略若没有添加则默认为当前网页所在目录。 2.2 创建图片链接 浏览网页时当鼠标移至图片上鼠标指针变为手形时单击会打开一个网页即为图像链接。使用格式如下
a herf链接目标img src图片/a!DOCTYPE html
html langen
headmeta charsetUTF-8title图像链接/title
/head
body
音乐无限
a hrefmp3.htmlimg srchttps://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign05d233d2d258ccbf1be9bd3c29e89006/9213b07eca806538badb3e7394dda144ad348299.jpg width5%/a
br
br
br
哈哈哈
a href3.htmlimg srchttps://tse2-mm.cn.bing.net/th/id/OIP.S-JIvxFRXS5JN8tHjNvI_wHaHd?pidApirs1/a
/body
/html2.3 创建下载链接 链接目标为各种类型的文件若文件能被浏览器识别则会显示否则会弹出下载框。
!DOCTYPE html
html langen
headmeta charsetUTF-8title下载链接/title
/head
body
pa href1HTML简介.mdmd文档/a /p
/body
/html2.4 使用相对路径和绝对路径 绝对URL一般访问的是非同一台服务器上的资源相对路径则是访问同一台服务器上的文件夹或不同文件夹的资源。
!DOCTYPE html
html langen
headmeta charsetUTF-8title相对与绝对路径链接/title
/head
body
单击a hrefhttps://www.fabiaoqing.com/绝对URL/a链接到表情包网站首页br
单击a href1HTML简介.md相同文件夹的URL/a链接到md文件br
单击a href../WebGIS/百度地图.html不同文件夹的URl/a链接到不同文件夹的URL
/body
/html2.5 设置新窗口显示超链接页面 默认情况下单击超链接会在当前窗口显示替换到当前页面的内容。若想以新窗口打开连接则需要使用target属性用法如下
a targetvalue/avalue的参数及说明如下
参数说明_blank浏览器总在一个新打开未命名的窗口载入文档_self载入并显示在相同框架或者窗口作为源文档与默认相同打开百度。_top清除所有包含的框架并将文档整个载入浏览器窗口_parent载入父窗口或者包含在超链接应用的框架的框架集。若在窗口和顶级框架中作用同_self
!DOCTYPE html
html langen
headmeta charsetUTF-8title设置新窗口显示链接页面/title
/head
body
a hrefhttp://www.baidu.com target_blank新窗口打开百度/abr
a hrefhttp://www.baidu.com target_parent载入父窗口或者包含在超链接应用的框架的框架集。若在窗口和顶级框架中作用同_self/abr
a hrefhttp://www.baidu.com target_self载入并显示在相同框架或者窗口作为源文档与默认相同打开百度。/abr
a hrefhttp://www.baidu.com target_top清除所有包含的框架并将文档整个载入浏览器窗口/abr
/body
/html2.6 设置电子邮件地址 使用格式a href“mailto:电子邮件地址”
!DOCTYPE html
html langen
headmeta charsetUTF-8title电子邮件链接/title
/head
body
img srchttp://wx3.sinaimg.cn/large/bf976b12gy1gibjy1t86ng207s06waad.gif width119 height49【免费注册】【登录】
a hrefmailto:kfdzsj126.com邮箱/a
/body
/html3 浮动框架iframe的使用 可以自由控制窗口的大小配合表格随意在网页中任何位置插入窗口即在窗口中在窗一个窗口。使用格式如下
iframe src链接对象其链接对象可以是绝对路径也可以是相对路径。
!DOCTYPE html
html langen
headmeta charsetUTF-8title浮动架构/titlestyleiframe{width:1200px; /*宽度*/height:600px; /*高度*/border:none; /*无边框*/}/style
/head
body
iframe srchttp://www.baidu.com/iframe
/body
/html4 精确定位热点区域 当点击一张图片的不同区域时会显示不同的链接内容这就是图片的热点区域。即通过将图片划分为若干个链接区域访问者点击不同的区域会链接到不同的目标页面。热点区域类型有矩形、圆形和多边形。新建热点区域用和其使用格式如下
img src图片地址 usemap#名称
map id名称area shaperect coords10,10,100,100 herf#area shapecircle coords120,120,50 herf#area shapepoly coords120,120,50,20,30,30,30,40 herf#
/map建立热点区域时必须先插入图片且必须添加usemap属性其属性值以#开头如#pic。map属性只有一个属性id其作用是为区域命名其设置值必须与usemap的属性值相同。area标记主要是定义热点区域的形状及超链接他有3个必须的属性。
area属性值说明shaperect矩形、circle圆、poly多边形控件划分区域的形状coordsrect(矩形的左上角和右下角x与y的坐标)、circle(圆形的圆形坐标点x与y和半截子)、ploy(各个点x与y的坐标)控制划分坐标herfURL超链接目标为区域设置超链接当设置为#时表示为空链接
!DOCTYPE html
html langen
headmeta charsetUTF-8title设置热点区域/title
/head
body
img srchttp://img.51miz.com/Element/00/22/59/18/0c933276_E225918_60ee8865.png%21
/quality/90/unsharp/true/compress/true/format/png width1200 height800 border2 usemap#map
map namemaparea shaperect coords200,200,400,400 hrefhttp://www.baidu.comarea shapecircle coords500,500,100 href设置新窗口显示链接页面.htmlarea shapepoly coords600,600,700,1000,600,800,700,800 hrefhttps://www.zhihu.com/question/21949948
/map
/body
/html5 用锚制作电子阅读器
!DOCTYPE html
html langen
headmeta charsetUTF-8title电子书阅读器/title
/head
body
h1文学鉴赏/h1
ullia href#第一篇再别康桥/a /lilia href#第二篇雨emsp;emsp;巷/a /lilia href#第三篇荷塘月色/a /li
/ul
h3a name第一篇再别康桥/a /h3
hhh
ulli轻轻地我走了/lili正如我轻轻地来。/li
/ul
h3a name第二篇雨emsp;emsp;巷/a /h3
ulli轻轻地我走了/lili正如我轻轻地来。/li
/ul
h3a name第三篇荷塘月色/a /h3
ulli轻轻地我走了/lili正如我轻轻地来。/lili轻轻地我走了/lili正如我轻轻地来。/li
/ul
/body
/html
