网页设计与制作教程Web前端开发（第7版）课件：HTML5的行级元素-超链接元素a.pptx

本章介绍HTML的行级元素和属性。HTML5的行级元素超链接元素a《网页设计与制作教程Web前端开发第7版》

目录行级元素3.1格式化元素3.2图像元素img3.3超链接元素a3.4图像热区链接map、area3.5范围元素span3.6多媒体元素 3.7用HBuilderX编辑HTML文档3.8实训—制作广告板块习题3

3.3.1锚点标签a…/aa标签的格式为：ahref=URLtarget=打开窗口方式热点/a1）href：规定链接指向的页面的URL。2）target：指定链接被单击后会产生网页跳转动作，打开目标页面的方式的属性值如下：_self：默认值是在超链接所在的窗口中打开目标页面。_blank：在新浏览器窗口中打开目标页面。_parent：将目标页面载入含有该链接的父窗口中。_top：在当前的整个浏览器窗口中打开目标页面。3.3超链接元素a

3.3.2用图像作为超链接热点格式为：ahref=URLtarget=打开窗口方式imgsrc=图像文件名/a【例3-4】文本链接热点和图片链接热点示例。本例文件3-4.html在浏览器中显示的效果如图3-5所示。3.3超链接元素a

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title超链接元素示例/title/headbodyh3友情链接/h3pahref=/target=_blank微软公司/anbsp;nbsp;nbsp;nbsp;ahref=/哔哩哔哩/anbsp;nbsp;nbsp;nbsp;ahref=/什么值得买/a/ppahref=/icbc/imgsrc=images/icbc.jpgalt=中国工商银行/aahref=/imgsrc=images/boc.jpgalt=中国银行/aahref=/target=_blankimgsrc=images/baidu.jpgalt=百度/a/p/body/html3.3超链接元素a

3.3.3指向其他页面的链接1.链接到同一目录内的网页文件格式为：ahref=目标文件名.html热点文本/a2.链接到下一级目录中的网页文件格式为：ahref=子目录名/目标文件名.html热点文本/a3.3超链接元素a

3.链接到上一级目录中的网页文件格式为：ahref=../目标文件名.html热点文本/a4.链接到同级目录中的网页文件格式为：ahref=../子目录名/目标文件名.html热点文本/a3.3超链接元素a

【例3-5】指向其他页面的超链接示例。当前页3-5.html中包含两个链接分别指向友情连接页3-4.html和图像元素示例3-3.html，如图3-6所示，单击链接热点将分别打开如图3-4和图3-5所示。!DOCTYPEhtmlhtmlheadmetacharset=utf-8title指向其他页面的超链接示例/title/headbodypahref=3-4.html友情链接/anbsp;nbsp;nbsp;nbsp;ahref=3-3.htmltarget=_blank图像元素示例/a/p/body/html3.3超链接元素a

3.3.4指向书签的链接格式为：aname=记号名目标文本附近的字符串/a1.指向页面内书签的链接超链接标签的格式为：ahref=#记号名热点文本/a即单击“热点文本”，将跳转到“记号名”开始的网页元素。3.3超链接元素a

【例3-6】制作指向页面内书签的超链接。在当前页3-6.html的上部单击“[什么是超文本？]”链接时，将跳转到页面下方的“什么是超文本？”位置处，如图3-7所示。3.3超链接元素a

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title创建链接至页面内的书签示例/title/headbodypahref=3-4.html友情链接/anbsp;nbsp;nbsp;nbsp;ahref=3-3.htmltarget=_blank图像元素示例/a/ppahref=#about[什么是超文本？]/a/p