您的位置：首页 > 编程技术 > html  >  HTML网页超链接标记学习教程

HTML网页超链接标记学习教程

 更新时间：2016年9月20日 19:06  点击：1597

HTML网页超链接标记学习教程

链接标记的属性

 

链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址，在英文中被称作url(Uniform Resource Locator：通用资源标示符)。在地址栏输入然后回车，会打开网页教学网网站的主页面。可以看到，页面中有多个栏目，多条新闻等，最上方不同的栏目就是文字链接。

链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。本站介绍的链接应用都是基于<a>标记基础上的。

链接标记的属性见下表


属性 描述
href 指定链接地址
name 给链接命名
title 给链接提示文字
target 指定链接的目标窗口
accesskey 链接热键

 

关于路径

 

每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。url—统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址之下，但是当创建网页时，不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此链接可以分为以下3种：


绝对路径
如http://111cn.net

相对路径
如news/default.htm

 

根路径
如/website/news/default.htm


在了解这三种地址形式前先要理解另外两个概念：内部链接和外部链接

 

内部和外部都是相对于站点文件夹而言，如果链接指向的是站点文件夹之内的文件，就是内部链接。如果链接指向站点文件夹之外的，就被称做外部链接。在添加外部链接的时候，将用到下面所讲的绝对地址；而添加内部链接的时候，将用到下面所讲的根目录相对地址和文件相对地址。

下面分别介绍这3种链接：


绝对路径
绝对路径为文件提供完全的路径，包括适应的协议，如http,Ftp,rtsp等。一般常见的有：

http://www.sohu.com


ftp://202.136.254.1

 

当链接到其它网站中的文件时，必须使用绝对链接。

相对路径
相对链接最适合网站的内部链接。只要是同一网站之下的，即使不在同一个目录下，相对链接也非常合适。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是：站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。

相对链接的使用方法为：

如果链接到同一目录下，则只需输入要链接文档的名称。
要链接到下一级目录中的文件，只需先输入目录名，然后加" / "再输入文件名。
如链接到上一级目录中的文件，则先输入"…/ "，再输入目录名、文件名。
根路径
根目录相对地址同样适应于创建内部链接，但大多数情况下，不建议使用此种地址形式。它在下列情况下使用：

当站点的规模非常大，防置于几个服务器上时
当一个服务器上同时放置几个站点时
根目录相对地址的书写形式也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。根路径以" / "开始，然后是根目录下的目录名。

 

HTML网页列表标记学习教程.
在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。

所谓有序，指的是按照数字或字母等顺序排列列表项目。
所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。
关于列表的主要标记，如下表所示

 

标记 描述
<ul> 无序列表
<ol> 有序列表
<dir> 目录列表
<dl> 定义列表
<menu> 菜单列表
<dt>、<dd> 定义列表的标记
<li> 列表项目的标记


有序列表标记<OL>
有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和两个start属性。

基本语法
<ol>
   <li>项目一
   <li>项目二
   <li>项目三
      ……
</ol>
语法解释
在有序列表中，使用<ol>作为有序的声明，使用<li>作为每一个项目的起始。


文件范例：7-1.htm
通过<ol>和<li>标记建立有序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-1.htm -->
03 <!-- 文件说明：建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html>

 

 

1、表单文本输入的移动选择：在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中，一切就会变得简单多了，如：

以下为引用的内容：

 

<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">请填入你的姓名</textarea>

 


类似的，可以加入代码到<input>。

2、表单输入单元点击删除：本列同上则作用类似，只是使用鼠标上略有变化，需要点击而不像上则的只要鼠标覆盖。如：

以下为引用的内容：

<input type=text name="address" size=19 value="请填入你的邮箱"onFocus="this.value=''">
 


点击输入单元后，提示信息会删除，是不是很方便。

 

3、表单输入单元的边框设置：更改传统的表单单元边框，会让你的主页生色不少。如：

 

以下为引用的内容：

<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">
 

 


其中"style=***"为左右上下和背景色设置，适用于其它单元。


4、表单输入单元的文字设置：表单中单元的字体是可以修改的，如：


以下为引用的内容：

<input type=text name="address" size=19 value="请填入你的姓名" style=font-family:"verdana";font-size:10px >
 

 

其中"style=***"为字体和字大小设置。

5、修改表单属性为弹出窗口：大多数表单激活后，会在当前页面中打开，影响正常浏览。不如修改一下，如：

以下为引用的内容：
<form method=POST action=url target=_blank>

 

其中"target=_blank"为控制在弹出窗口打开。

 

[!--infotagslink--]

相关文章

  • jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考，具体如下：这里演示jQuery实现鼠标移动到链接上，滑动展开/隐藏图片效果，鼠标放在“上一页”“下一页”上，立即浮现出所对应的图...2015-10-30

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08

  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20

  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29

  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20

  • 如何获取百度搜索结果页中解密之后的真实链接

    大家用百度搜索的时候，可能会发现，结果链接用的还是百度的链接，点击之后才会跳转到另外一个页面，另外一个页面的真实链接如何获取到呢？？ 通过分析发现： 可以看出，返回...2016-05-19

  • ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容

    这篇文章主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码，感兴趣的小伙伴们可以参考一下...2021-09-22

  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • python docx的超链接网址和链接文本操作

    这篇文章主要介绍了python docx的超链接网址和链接文本操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-06

  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05

  • Python 实现自动获取种子磁力链接方式

    今天小编就为大家分享一篇Python 实现自动获取种子磁力链接方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27

  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程，抓取HTML，获取标题、描述、图片等信息，并去除HTML，希望对大家有所帮助。...2020-06-25

  • C++静态链接与动态链接详解

    下面小编就为大家介绍C++静态链接与动态链接。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-10-11

  • 浅谈CMake配置OpenCV 时静态链接与动态链接的选择

    下面小编就为大家带来一篇浅谈CMake配置OpenCV 时静态链接与动态链接的选择。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-04-25

  • C++获取文件哈希值(hash)和获取torrent(bt种子)磁力链接哈希值

    这二个代码一个是获取文件哈希值的，另外一个是获取torrent文件磁力链接的哈希值...2020-04-25

  • 分析网页的几种加密技术

    　　现在专业性的网站越来越多，许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事，所以大家都想保护自己独创的...2016-09-20

  • dotnet core链接mongodb代码实例

    这篇文章主要介绍了dotnet core链接mongodb代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-25

  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息，尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20

  • 如何在网页中制作虚线表格

    　　在制作网页的时候，常常要遇到制作虚线表格的问题，下面的文章就能解决这个问题。　　方法一：作一个1X2的图。 　　半黑半白，再利用表格作成线。这种方法虽然麻烦...2016-09-20

  • php清除html中超链接/JS脚本/回车

    在php中要过滤一些特殊字符或非法字符我们可以有很多的办法，像正则表达式str_replace就是一个不错的办法，像回车，空格，换行都可以用它来解决。 近负责的一个系统模块...2016-11-25