• html中链接的使用方法及介绍


    html 超链接:

    HTML使用标签 <a>来设置超文本链接。

    超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

    当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

    在标签<a> 中使用了href属性来描述链接的地址。

    默认情况下,链接将以以下形式出现在浏览器中:

    • 一个未访问过的链接显示为蓝色字体并带有下划线
    • 访问过的链接显示为紫色并带上下划线
    • 点击链接时,链接显示为红色并带上下划线

    html语法:

    <a href="url">链接文本</a>

    href 表示链接的目标

    <a href="http://www.runoob.com/">访问菜鸟教程</a>

    表示这句可以带到菜鸟教程的网页,并且链接文本不一定是文字,可以是图片或者html元素

    *targt属性,可以使链接在任意窗口打开,

    <a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

    上面语法是链接在新窗口打开该网页

    ID属性

    id属性可用于创建在一个HTML文档书签标记。

    在HTML文档中插入ID:

    <a id="tips">有用的提示部分</a>

    在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

    <a href="#tips">访问有用的提示部分</a>

    或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

    <a href="http://www.runoob.com/html-links.htm#tips">
    访问有用的提示部分</a>
     
    图片链接

    在 HTML 中,图像由<img> 标签定义。

    <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

    要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

    语法

    <img src="url" alt="some_text">

    scr 是源属性

    URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

    浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

    alt 属性用来为图像定义一串预备的可替换的文本。

    替换文本属性的值是用户定义的。

    <img src="boat.gif" alt="Big Boat">

    alt  替换文本   在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

    当连接图片时分为绝对路径和相对路径;

    相对路径 即在同一个目录里;直接引用文件名即可,

    假设info.HTML路径是:d: omcatwebappshellolablainfo.HTML 
    假设index.HTML路径是:d: omcatwebappshellolablaindex.HTML 
    在info.HTML加入index.HTML超链接的代码应该这样写:

     
    代码如下:
     

    <a href = "index.HTML">index.HTML</a>  直接写出文件名即可


    如何表示上级目录 
    ../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。 

    假设info.HTML路径是:d: omcatwebappshellolablainfo.HTML 
    假设index.HTML路径是:d: omcatwebappshelloindex.HTML 
    在info.HTML加入index.HTML超链接的代码应该这样写:     如果被插入文件的目录要多一级时,插入文件时需要用../表示返回上一即目录。

     
    代码如下:

    <a href = "../index.HTML">index.HTML</a> 
     
    假设info.HTML路径是:d: omcatwebappshellolablawowstoryinfo.HTML 
    假设index.HTML路径是:d: omcatwebappshelloindex.HTML 
    在info.HTML加入index.HTML超链接的代码应该这样写: 

     
    代码如下:

    <a href = "../../index.HTML">index.HTML</a> 

    假设info.HTML路径是:d: omcatwebappshellolablainfo.HTML 
    假设index.HTML路径是:d: omcatwebappshellowowstoryindex.HTML 
    在info.HTML加入index.HTML超链接的代码应该这样写:   如果上一级目录不同则需要返回同一级后再表示出不同的目录

     
    代码如下:

    <a href = "../wowstory/index.HTML">index.HTML</a> 
     
    *引用下级目录的文件,直接写下级目录文件的路径即可。 

    假设info.HTML路径是:d: omcatwebappshellolablainfo.HTML 
    假设index.HTML路径是:d: omcatwebappshellolablaHTMLindex.HTML 
    在info.HTML加入index.HTML超链接的代码应该这样写: 

     
    代码如下:

    <a href = "HTML/index.HTML">index.HTML</a> 直接写出目录相同时的目录即可
     

    假设info.HTML路径是:d: omcatwebappshellolablainfo.HTML 
    假设index.HTML路径是:d: omcatwebappshellolablaHTML utorialsindex.HTML 
    在info.HTML加入index.HTML超链接的代码应该这样写: 

     
    代码如下:

    <a href = "HTML/tutorials/index.HTML">index.HTML</a> 
     
    绝对路径, 即从网页中通过域名找到的文件,即带域名的完整文件类型
                   当你注册域名时,并且申请一个虚拟主机,这时候便会给一个目录,则这个目录就是文件的根目录,再在这个根目录下放一个文件,则这个文件的路径就是域名加上文件名。
    例:
         假设在www根目录下放了一个文件index.HTML,这个文件的绝对路径就是: http://www.jb51.net/index.html. 

         假设在www根目录下建了一个目录叫HTML_tutorials,然后在该目录下放了一个文件index.HTML,这个文件的绝对路径就是http://www.jb51.net/article/32759.htm。

    *当存放图片时需要注意的格式:png,jpg,gif,svg,ico

    png:       
    PNG是目前保证最不失真的格式,它汲取了GIF和JPG二者的优点,存贮形式丰富,兼有GIF和JPG的色彩模式;它的另一个特点能把图像文件压缩到极限以利于网络传输,但又能保留所有与图像品质有关的信息,因为PNG是采用无损压缩方式来减少文件的大小,这一点与牺牲图像品质以换取高压缩率的JPG有所不同;它的第三个特点是显示速度很快,只需下载1/64的图像信息就可以显示出低分辨率的预览图像;第四,PNG同样支持透明图像的制作,透明图像在制作网页图像的时候很有用,我们可以把图象背景设为透明,用网页本身的颜色信息来代替设为透明的色彩,这样可让图像和网页背景很和谐地融合在一起。
    PNG的缺点是不支持动画应用效果,如果在这方面能有所加强,简直就可以完全替代GIF和JPEG了
     
    svg             
    SVG是矢量图形。它是基于XML(Extensible Markup Language),严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有互交功能,并可以随时插入到HTML中通过浏览器来观看。
    它提供了目前网络流行格式GIF和JPEG无法具备了优势:可以任意放大图形显示,但绝不会以牺牲图像质量为代价;字在SVG图像中保留可编辑和可搜寻的状态;平均来讲,SVG文件比JPEG和GIF格式的文件要小很多,因而下载也很快。

    ipg/jpng      最适合于使用真彩色或平滑过渡式的照片和图片。该格式使用有损压缩来减少图片的大小,因此用户将看到随着文件的减小,图片的质量也降低了,当图片转换成.jpg文件时,图片中的透明区域将转化为纯色。

    gif             

    GIF图形交换格式)最适合用于线条图(如最多含有256色)的剪贴画以及使用大块纯色的图片。该格式使用无损压缩来减少图片的大小,当用户要保存图片为.GIF时,可以自行决定是否保存透明区域或者转换为纯色。同时,通过多幅图片的转换,GIF格式还可以保存动画文件。但要注意的是,GIF最多只能支持256色
    目前,网页上较普遍使用的图片格式gif 和 jpg(jpeg)这两种图片压缩格式,因其在网上的装载速度很快,所有较新的图像软件都支持 GIF 、 JPG 格式,因此,要创建一张 GIF 或 JPG 图片,只需将图像软件中的图片保存为这两种格式即可。
     
    ico       
    图标有一套标准的大小和属性格式,且通常是小尺寸的。每个图标都含有多张相同显示内容的图片,每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片,每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性:它含有透明区域,在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。
    一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。
     
    一般静态图片可使用.png保存

    可设置高度和宽度

    height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

    属性值默认单位为像素:

    <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

    提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

      注意: 可根据align=“”来设置图片的位置,与文字顶对齐或是在文字中间,一般情况下默认为与文字底对齐。

                可根据style="float:right/left来设置图片浮动。若不设置浮动时一般在文字左边。

    例:

    <!DOCTYPE html>
    <html>
    <body>

    <p>
    <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
    </p>

    </body>
    </html>

    即,该所插图片就在A paragraph with an image. The image will float to the left of this text.这句话的左边

    创建图片超链接

    <!DOCTYPE html>
    <html>
    <body>

    <p>点击太阳或其他行星,注意变化:</p>

    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

    <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
      <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
      <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
    </map>

    </body>
    </html>

    即当你点击图片内容时,会在新窗口打开一张图片,利用map和area元素,

    <img>定义图片

    <map>定义图片地图

    <area>定义图片可点击的地方

        

  • 相关阅读:
    SEUOJ上几道水题
    项目计划
    软件工程03
    件工程个人作业02
    软件工程个人作业01
    学习进度条
    软件工程第一次博客
    异常分析
    多态
    Java覆盖
  • 原文地址:https://www.cnblogs.com/wenqingqing/p/5369052.html
Copyright © 2020-2023  润新知