zoukankan      html  css  js  c++  java
  • img图像标签和超链接标签a

    图像标签
    语法:
    <img src="" alt="".../>

    img属性:
    src=""  显示图像的URL
    alt=""  鼠标放在图片上显示的文字,用于网速太慢,src属性中的错误,或者浏览器禁用图像
    height=    数值和百分比 图像的高  使用百分比时,图片高度会随着其父元素的高变化而变化
    width=    数值和百分比 图像的宽  使用百分比时,图片宽度会随着其父元素的宽变化而变化

    绝对路径:从盘符开始写的路径。
    相对路径:图片相对于开发网页的路径。


    网页与图片同一目录下:
    <img src="1.jpg"/>

    图片在网页上一级目录中:
    <img src="../1.jpg"/>

    图片在网页下面一级目录:
    <img src="文件名/1.jpg"/>


    超链接标签
    语法:
    <a href="">内容</a>
    当链接为空的时候,点击超链接会刷新页面。<a href="">刷新<a/>
    href:链接地址,可以是内部链接(站内链接使用相对连接)或者外部链接(站外链接要用绝对链接)。

    a的其他属性:
    target="_self" 在本窗口进行跳转
    target="_blank" 新建一个窗口
    target="_top"  在框架中的原来窗口打开
    target="_parent" 在框架中的父窗口进行跳转

    title="" 鼠标悬浮在链接上面时提示该链接的内容
    name=""  链接命名,俗称锚。在也锚时,一定要#+锚名。

    同一页面进行跳转到的超链接标签,定义锚,锚定义下那里就以锚名所在的位置为起始位置显示在网页第一行:
    <a href="#锚名1"> 目录1</a>
    <a href="#锚名2">目录2</a>
    在页面中有时候可以使用空连接进行定位,如:
    <a name="JsText"></a>

    同一网页进行跳转的步骤:
    1,在需要跳转的位置设置锚名(这里可以是一个空连接<a href="" name="position">产品介绍</a>)
    2,在设置点击跳转链接如:<a href="#position">产品介绍</a>  注意跳转链接是使用href指定要跳转的位置。这里一定要使用#+锚名。
    锚点链接,命名锚点使用的是name属性值; href属性用于指定要链接内容的地址.

    超链接标签

    定义锚:(不同页面的锚点)

    1,<a href="网页#锚名">...</a>

    2,<a name="锚名">...</a>

    锚链接和超链接都是使用<a>标签定义;命名锚点使用<a>标签的name属性值,

    使用<a>标签的 href属性指定要链接到锚点的位置,可跳转到同一网页和不同网页内;超链接打开网页。

    跳转到同一页面超链接设置的锚位置<a href=“#锚名”>,跳转到不同页面中超链接设置的锚位置<a href=“网页名#锚名”>。

    发送邮件

    使用超链接拓展到发送邮件(如果想要发送成功就必须安装邮箱软件):

    <a href="mailto:304676177@qq.com">反馈意见</a>

    下载文件

    <a href="下载文件的地址即可下载">文件下载</a>

    <a href="pictures.rar">下载文件</a>

    <a href="Documents.rar">下载文件</a>

    浏览器会根据下载地址进行判断,如果改地址是进入官网地址进行,那就直接进入官网下载页面。

    如果是直接进行下载,那么就会直接跳出下载窗口进行下载。浏览器会自动判断如何下载,再显示窗口。

    此外还可以在连接上右击---选择---另存为...(修改下载存放目录)

  • 相关阅读:
    base加密解密工具类
    根据银行卡号判断所属银行(部分资源网上抄录)
    input autocomplete属性设计输入框自动联想(php实现)
    XFire+Spring构建Web Service经验总结
    php学习手记(持续更新)
    ios上遇到的坑(持续更新)
    随笔
    HTML5微信长按图片不会弹出菜单的解决方法
    能在编辑器里面写出的字符
    css文本两端对齐,分散对齐
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10601794.html
Copyright © 2011-2022 走看看