HTML5 图像和链接


在了解图像和链接之前,我们要先了解一下URL


URL-Uniform Resource Locator

  • 统一资源定位器,用来标示网络中的任何资源,也被称为网址
  • URL即路径,用于定位万维网(web)上的文档。
  • URL在web页面主要有三种形式
  • 绝对路径:文件从最高级目录下开始的而完整的路径,即完整的URL。
    http://www.baidu.com/img/tu.png
    -http://协议名
    -www.baidu.com:域名
    -img:目录
    -tu.png:具体的文件
  • 相对路径:指文件的位置是相对与当前文件的位置,可以从当前文件出发找到该文件的路径,如下图所示
    相对路径1.png

    相对路径2.png
  • 根相对路径:根相对路径以 “/” 开头,路径是从当前文件的根目录开始计算的,所以如果目录结构过深,用相对路径就会好一些。

HTML 图像

  • 图像格式
  • JPEG(Joint Photopraphic Experts Group)采用有损压缩算法,压缩比较大。
  • GIF(Graphics Interface Format)采用256色的方法来压缩图像,会有较大的失真。主要用于线条为主的图像,GIF支持动画和透明图像。
  • PNG(Portable Network Graphic)采用无损压缩,有8位、24位、32位三种形式。支持透明色,但不支持动画。
  • 图像标签<img>
  • <img>空标签,它质包含属性
  • 必须属性srcsrc的值是图像的URL地址,图像的定义语法是:<img src="url"/>
  • 常用属性widthheight,用来确定图像的宽和高。宽和高只需要确定一个就可以了,否则可能会造成图像的失真。例如<img width="300px" src="img/tu.jpg">

HTML 连接

  • 超链接可以是一个字,一个词,一句话,或者一个图像等,你可以点击这些内容来跳转到新的文档或者文档的其他部分。
  • 使用a元素可以创建一个超链接,语法如下:
    <a href="url" target="">link text</a> -href:链接URL告知当前标记要跳转的地方 -target:目标,可取值_blank,_self等,可以选择用什么方式打开链接 -name:设置锚点
    示例:
    <a href="http://www.baidu .com.cn" target="_blank">在新窗口打开百度</a>
  • 链接的几个形式
  • 目标文档为下载资源
    <a href="xx.zip">下载</a>
  • 电子邮件链接
    <a href="mailto:2298520471@qq.com.cn">发送邮件</a>
  • 返回页面顶部
    <a href="#">返回顶部</a>
  • 链接到JavaScript
    <a href="javascript:...">JS 功能</a>
  • 锚点
  • 锚点是文档中的某行的一个记号,用于连接到文档中的某个位置。
  • 示例如下
    `<a name="here"></a> <br/><br/> <br/><br/> <br/><br/>`
    <a href="#here">回到锚点</a>

图像和链接就这么多了,如果有必要,后面会系统给出常用的HTML标签及属性。喜欢的小伙伴可以关注我哦,只要我还活着,就会持续更新的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,525评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,203评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,862评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,728评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,743评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,590评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,330评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,244评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,693评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,885评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,001评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,723评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,343评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,919评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,042评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,191评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,955评论 2 355

推荐阅读更多精彩内容