zoukankan      html  css  js  c++  java
  • 页面链接

    在html文档中,使用<a>标签指引页面中链接的目标点。
    <a href="链接对象的路径">链接锚点对象</a>
    a是anchor href属性是超文本引用,该属性的值指定了链接的目标路径。

    链接的地址指的是链接到锚点对象的路径,这个路径不仅仅是一个页面的地址,也可能是一个文件地址或一个邮箱地址。

    <a herf="mailto:huizhao@foxmail.com?subject=联系我&body=告诉我们你对网页设计的看法">
    <!--subject代表邮件的主题-->
    <!--body代表邮件的内容,如果想在BODY进行换行,只需要在行与行之间加入%0d%0a-->
    <!--如果要使用mailto同时实现多个功能的话,第一个功能必须以“?”开头,后面的每一个功能都以 “&”开头-->

    要有反应的前提是你的电脑要安装有:foxmail或outlook等电子邮件发送软件,并设置为默认为首选.


    页面中除了页面之外的文件或者程序链接之外,还可以和同一页面中的内容进行链接。这种情况通常用于导航。这个时候要在HTML语言中使用<a>标签的属性id来确定路径的位置。
    1.确定链接的锚点对象
    <a href=#……>

    </a>
    2.在页面中设定链接目标,使用的是id属性
    <a id=……> (id也可以写成name,name是HTML中的标准,而id是xhtml中的标准)
    <a href=#1-10>1-10</a>


    <a id="1-10">

    美观链接的状态:
    链接的标准形式都是紫色字体加下划线。
    一个链接的状态可以分解成以下四个步骤:
    1.链接还未被访问。
    2.链接被选中时
    3.鼠标指针滑过链接
    4.链接被访问后

    关于链接颜色,可以通过添加link,alink,vlink来修改
    Link属性修改链接未被访问时的文本颜色
    Alink属性修改链接被选中时文本的颜色
    Vlink属性修改链接被访问后的文本颜色
    但其实用html标签来实现并不是很推荐,更好的方法是用css。在表现性的作用上应该习惯于避免使用标签属性的方法。而且CSS可以包含更多的属性修改。实现自由度更大的修饰: a:link{.…}链接未被访问
    a:atcive{…}链接被选中
    a:hover{…}鼠标指针滑过链接
    a:visited{…}链接被访问后

    {}中通常添加两个基本属性:color属性修改文本颜色;text-decoration属性选择是否显示下划线

    热点图像区域的超链接:
    就是指图像中的某个区域,就像是地图一样 代码中也用到一个形象的标签<map>
    <map>标签下,嵌入使用<area>标签表明某一区域。 其中有三个属性值来确定这个区域,分别是shape,coords,href属性
    shape: 确定选区的形状分别是rect,circle,poly(多边形)
    Coords:横纵坐标的意思,用来控制形状的位置一般来说借助可视化的编辑页面的软件来实现这一功能。
    href:超链接
    <img src="sfsa.html/usemap="#Map"">//这个Map名字可以自定义喔
    <map id="Map">
    <area shape=".." coords=".." href=".."/>
    </map>

    在新窗口中显示链接窗口: 之前的所有链接中都是在同一页面中跳转的,有时设计者希望链接的页面在新的窗口中打开。这时只需要在<a>标签中添加"target=_blank"即可。

    _blank -- 在新窗口中打开链接
    _parent -- 在父窗体中打开链接
    _self -- 在当前窗体打开链接,此为默认值
    _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)

  • 相关阅读:
    Dockerfile + Nginx.conf文件记录(用于前端项目部署)
    Dockerfile文件记录(用于后端项目部署)
    结合docker发布后端项目(基于gradle包管理)的shell脚本
    结合docker发布前端项目(基于npm包管理)的shell脚本
    Docker+Nginx使用流程(笔记)
    AntDesign getFieldDecorator 获取自定义组件的值
    c++ primer 第五版第七章
    c++ primer 第五版第六章
    c++ primer 第五版第五章
    c++ Primer 第五版习题答案第四章
  • 原文地址:https://www.cnblogs.com/wangshen31/p/7911520.html
Copyright © 2011-2022 走看看