HTML5基础（三）零基础入门备份

来源：互联网发布：it运维管理软件编辑：程序博客网时间：2024/06/10 20:17

上一篇我的笔记记录的是：文本元素： http://blog.csdn.net/flytosky_l/article/details/70225280

这里，接着做HTML5的基础知识-超链接，(新建一个文件名为index3.html，在文件目录 code下)

超链接<a>,属于文本元素，有一些私有属性（或称之为局部属性），不理解的可以略过，相对应的还有通用属性（或称之为全局属性），这个我看到时是似懂非懂，暂时略过

超链接的属性：

属性名称：href ,说明：指定<a>元素所指资源的URL

属性名称：hreflang ,说明：指向资源所使用的语言

属性名称：media ,说明：说明所连接的资源属于哪种设备

属性名称：rel ,说明：说明文档与所链接资源的关系类型

属性名称：target ,说明：指定用以打开链接资源的浏览器环境

属性名称：type ,说明：说明所链接资源的MIME类型（比如 text/heml）

以上有不理解的就暂时略过，这个我看资料的一贯偷懒方法，等用到的时候，发现不明白再去查阅资料。

以上属性，较为常用 href 和 target 。

href 属性为必须属性，如果属性值是http://开头的URL，意味着跳转到指定的外部网站。

代码：

<a href="http://www.baidu.com">百度的链接</a>

界面：

target 属性，告诉浏览器希望将链接的资源显示在哪里。

属性名称： _blank 说明：在新窗口或是标签中打开文档，相当于新建一个窗口

属性名称： _parent 说明：在父窗框组（frameset）中打开文档，基于框架页面的

属性名称： _self 说明：在当前窗口打开文档，默认的

属性名称： _blank 说明：在顶层窗口打开文档，基于框架页面的

代码：

<a href="http://www.haosou.com" target="_blank">好搜的链接</a>

界面如图：

点击百度链接，百度的网页显示在当前的窗口，点击好搜的链接，好搜的网页将显示在新的界面。

相对路径和绝对路径

相对路径

相对于当前文档，链接页面的所纸箱资源文档的路径。

条件：必须文件都在一个磁盘或是目录下，如果在同一目录下，直接属性值就是被链接文件名.后缀名。如果在同一主目录下，有多个子层目录，那就需要使用目录结构语法。

代码：（此时新建index.html 路径在code文件夹下，和index3.html同处一个文件夹）

<a href="./index.html">相对路径1 index.html</a><br><a href="index.html">相对路径2 index.html</a>

绝对路径

从file:///磁盘符开始的完整路径。代码：

<a href="/Users/zzcz/Documents/HTML/code/index.html">绝对路径 index.html</a>

目录结构语法：

文档在同一个目录：index.html 或是 ./index.html

文档在子目录： xxx/index.html

文档在子目录的下一级目录： xxx/xxx/index.html

文档在父目录： ../index.html

文档在父目录的下一级目录： ../../index.html
相对路径的代码示例：

新建文件夹命名为child在code文件夹下，新建index1.html界面在child文件夹

新建index2.html界面在code文件夹的父级目录下（和code在同一级文件夹），

目录结构：

index.html代码：

<!DOCTYPE><html lang="ch-zn"><head><meta charset="utf-8"><title>超链接</title></head><body>超链接学习<br>这个是 index.html<br>我是在同级目录下</body></html>

index1.html代码：

<!DOCTYPE><html lang="ch-zn"><head><meta charset="utf-8"><title>超链接</title></head><body>超链接学习<br>这个是 index1.html<br>我是在code文件夹的子级目录下</body></html>

index2.html代码：

<!DOCTYPE><html lang="ch-zn"><head><meta charset="utf-8"><title>超链接</title></head><body>超链接学习<br>这个是 index2.html<br>我是在code文件夹的父级目录下</body></html>

index3.html代码：

<!DOCTYPE><html lang="ch-zn"><head><meta charset="utf-8"><title>超链接</title></head><body>超链接学习<br><a href="http://www.baidu.com">百度的链接</a><br><a href="http://www.haosou.com" target="_blank">好搜的链接</a></body><br>绝对路径 和 相对路径<br><a href="/Users/zzcz/Documents/HTML/code/index.html">绝对路径 index.html</a><br><a href="./index.html">相对路径1 index.html</a><br><a href="index.html">相对路径2 index.html</a><br>相对路径的代码示例：<br><a href="index.html">指向同级目录的文件 index.html</a><br><a href="child/index1.html">指向子级目录的文件 index1.html</a><br><a href="../index2.html">指向父级目录的文件 index2.html</a></html>

运行index3.html，如图：

点击超链接文本标签，跳转到指定界面。

锚点学习

超链接也可以用来将同一个文档中的另一个元素移入视野，通过 id 或是 name 实现锚点定位。

链接代码：

<a href="#1">属性名称：href </a>

锚点代码：标记使用 id 或是 name

<a name="1">href</a>

<a id="3">media</a>

示例：先新建立一个命名为index4.html的文档，代码：

<!DOCTYPE><html lang="ch-zn"><head><meta charset="utf-8"><title>锚点学习</title></head><body>锚点学习<br>超链接的属性：<a href="#1">属性名称：href </a> <a href="#2">属性名称：hreflang </a> <a href="#3">属性名称：media </a><a href="#4">属性名称：rel </a> <a name="1">href</a><br>属性名称：href ,说明： 指定<a>元素所指资源的URL<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="2">hreflang</a><br>属性名称：hreflang ,说明：指向资源所使用的语言<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a id="3">media</a><br>属性名称：media ,说明：说明所连接的资源属于哪种设备<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a id="4">rel</a><br>属性名称：rel ,说明：说明文档与所链接资源的关系类型<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>属性名称：target ,说明：指定用以打开链接资源的浏览器环境<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>属性名称：type ,说明：说明所链接资源的MIME类型（比如 text/heml）<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body></html>

上文中代码（换行符用于占位，显示效果），有锚点标记，可以快速跳到标记位置，没有标记的内容，通过滑动界面，也可以查看到。

0 0

HTML5基础（三）零基础入门 备份

超链接的属性：

相对路径和绝对路径

目录结构语法：

锚点学习

HTML5基础（三）零基础入门备份