HTML2——图像、超链接
文章目录
- 图像
- 常见图像格式
- JPG格式
- GIF格式
- BMP格式
- PNG格式
- 图像标签的基本语法
- 超链接
- 超链接的基本用法
- 超链接的应用场合
- 页面间链接
- 锚链接
- 功能性链接
图像
常见图像格式
在日常生活中,使用比较多的图像格式有4中,即JPG格式、GIF格式、BMP格式、PNG格式。
JPG格式
JPG(JPEG)是在Internet上被广泛支持的图像格式,它是联合图像专家组(Joint Photographic Experts Group)的英文缩写。JPG格式采用的是有损压缩,会造成图像画面的失真,不过压缩之后的体积很小,而且比较清晰,所有比较适合在网页中使用。此格式最适合用于摄影或连续色调图像的高级格式,这是因为JPG文件可以包含数百万种颜色。随着JPG格式文件品质的提高,文件的大小和下载时间也会随之增加。通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡。
GIF格式
GIF是网页中使用最广泛、最普遍的一种图像格式,它是图像交换格式(Graphics Interchange Format)的英文缩写。GIF格式文件支持透明色,使得GIF格式图像在网页的背景和一些多层特效的显示上用得非常多,还支持动画,这是它最突出的一个特点,因此GIF格式图像在网页中应用非常广泛。
BMP格式
BMP格式图像在Windows操作系统中使用得比较多,它是位图(Bitmap)的英文缩写。BMP格式图像文件与其他Microsoft Windows程序兼容,但它不支持文件压缩,也不适用于Web页面。
PNG格式
PNG格式是20世纪90年代中期开始开发的图像文件存储格式,它兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG is not GIF”,是一种新兴的Web图像格式。
图像标签的基本语法
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
src:设置图片的路径
- 绝对路径:磁盘路径或互联网路径
- 相对路径:同一级:直接调用;上一级:…/;下一级:img/a.jpg
width和height:设置图片的宽和高, 一般要么都不写,显示的是图片的真实大小,要么只是宽或者高,让图片等比例缩放,避免失真。
border : 设置图像的边框,以像素为单位。
alt:指定替代的文本,表示图像无法显示时(如图片路径错误或网速太慢等)用来替代显示的文本。这样,即使图像无法显示时,用户也可以看到网页丢失的信息内容。
title:提供额外的提示和帮助信息,当鼠标移至图片上时显示提示信息。
超链接
超链接的基本用法
超链接包含两部分内容,一是链接地址,即链接的目标,可以是某个网址或文件的路径,对应为<a>
标签的href
属性;二是链接文本或图像,单击该文本或图像,将跳转到href
属性指定的连接地址。
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
href
表示链接地址的路径
target
:设置链接在哪个窗口打开,默认是在当前页打开。_blank
:在一个新窗口打开,_self
在当前页打开。_top
:最顶层框架;_parent
:父框架_search
:在浏览器的搜索区装载文档。
当超链接不需要到任何的地址,在href里面加#
, <a href="#">这是一个超链接</a>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>超链接</title></head><body><!--图像超链接--><a href="https://www.baidu.com" target="_blank"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度"/></a><br /><!--文本超链接--><a href="https://www.baidu.com">百度一下</a></body>
</html>
base可以设置整体链接的打开状态。写在head标签里。
<head><meta charset="UTF-8"><title>超链接</title><base target="_blank">
</head>
超链接的应用场合
页面间链接
就是从一个页面链接跳转到另外一个页面。如A页到B页,最常用,用于网站导航。
锚链接
常用于目标页面内容很多,需定位到目标页面中的某个位置。如A页甲位置到A页乙位置,或者A页甲位置到B页乙位置。
如<a name="top" >顶部</a>
<a href="#top">回到顶部</a>
在页面的乙位置设置标记<a name="marker">目标位置乙</a>
设置甲位置的连接路径href属性值为“#标记名”,<a href="#marker">当前位置甲</a>
页面间的锚链接href属性值为“页面#标记名”,<a href="login.html#marker">当前位置甲</a>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>锚链接</title></head><body><a href="#marker">当前位置甲</a><p>《水浒传》是元末明初施耐庵(现存刊本署名大多有施耐庵、罗贯中两人中的一人,或两人皆有)编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安,以及受招安后为宋朝征战,最终消亡的宏大故事,艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程,
深刻揭示了起义的社会根源,满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想,
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一,问世后,在社会上产生了巨大的影响,成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一,流传极广,脍炙人口;</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一,对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br /><p>《水浒传》是元末明初施耐庵(现存刊本署名大多有施耐庵、罗贯中两人中的一人,或两人皆有)编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安,以及受招安后为宋朝征战,最终消亡的宏大故事,艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程,
深刻揭示了起义的社会根源,满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想,
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一,问世后,在社会上产生了巨大的影响,成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一,流传极广,脍炙人口;</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一,对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br /><a name="marker">目标位置乙</a><p>《水浒传》是元末明初施耐庵(现存刊本署名大多有施耐庵、罗贯中两人中的一人,或两人皆有)编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安,以及受招安后为宋朝征战,最终消亡的宏大故事,艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程,
深刻揭示了起义的社会根源,满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想,
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一,问世后,在社会上产生了巨大的影响,成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一,流传极广,脍炙人口;</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一,对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br />
<p>《水浒传》是元末明初施耐庵(现存刊本署名大多有施耐庵、罗贯中两人中的一人,或两人皆有)编著的章回体长篇小说。</p><br /><br />
<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安,以及受招安后为宋朝征战,最终消亡的宏大故事,艺术地反映了中国历史上宋江起义从发生、
发展直至失败的全过程,
深刻揭示了起义的社会根源,满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想,
也具体揭示了起义失败的内在历史原因。</p><br /><br />
<p>《水浒传》是中国古典四大名著之一,问世后,在社会上产生了巨大的影响,成了后世中国小说创作的典范。</p><br /><br />
<p>《水浒传》是中国历史上最早用白话文写成的章回小说之一,流传极广,脍炙人口;</p><br /><br />
<p>同时也是汉语文学中具备史诗特征的作品之一,对中国乃至东亚的叙事文学都有极其深远的影响。</p><br /><br /></body>
</html>
功能性链接
在页面中调用其他程序功能,如电子邮件等。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>功能链接</title></head><body><!--添加到压缩文件(下载压缩包)--><a href="img/dog.zip">添加到压缩文件</a><br /><!--邮箱--><a href="mailto:admin@baidu.com">联系百度邮箱</a><br /><!--跳转到图片--><a href="https://www.baidu.com/img/baidu_jgylogo3.gif">百度</a><br /><!--点击下载--><a href="https://www.baidu.com/img/baidu_jgylogo3.gif" download="baidulogo.gif">点击下载</a><br /></body>
</html>
HTML2——图像、超链接相关推荐
- php网站xml链接,xml图像超链接的制作代码
学习的时候遇到的另一个问题,做图像超链接要把链接地址放到的href属性中去,可是这就是在标签中套标签,是不可以的,查了<Web编程实做教程>,才知道正确的解决方案,现在与大家分享. 此段代 ...
- html5基础(网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单)
网页的基本信息 1.DOCTYPE声明 文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
- 连接php的作用是什么,什么是超链接,有什么作用
超链接在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素,作用是可以是另一个网页,也可以是相同网页上的不同位置. 本文操作环境:Windows7系统,Dell G3电脑. ...
- 019_html超链接
1. html使用超链接与网络上的另一个文档相连. 2. 几乎可以在所有的网页中找到超链接.点击超链接可以从一张页面跳转到另一张页面. 3. html超链接 3.1. 超链接可以是一个字, 一个词, ...
- html中超链接使用_HTML实例源码
HTML实例源码 实例一 1.要求: 知识要点: html 文档的基本结构,html 标签的书写格式.作用.用法 实训目的: 掌握 html 文档的基本结构,掌握 html 代码网页编辑的基本方法实训 ...
- 超链接一般有两种表现形式_超链接有哪几种类型,各有什么作用
展开全部 分类: 1.按照连接路径的不同,网页中超62616964757a686964616fe4b893e5b19e31333431353364链接一般分为以下3种类型:内部链接,锚点链接和外部链接 ...
- 图片怎么变成html链接,HTML图片怎么超链接
0 回答 2021-05-06 浏览:0 分类:其他问题 1 回答 2021-05-06 浏览:0 分类:其他问题 回答: 2 回答 2021-05-06 浏览:0 分类:其他问题 回答:超链接的代码 ...
- 怎么将html链接发微博,微博怎么发Word里带超链接的文字?
2 回答 回答: 用户都能自己编宏代码了,你还要它大师干嘛? 这个需求得用宏代码来实现. 请留下联系方式,将程序模板文档发给你. 有关文件批量处理的功能需求,比如批量替换,批量更名,批量压缩,批量裁剪 ...
- Web前端技术基础实验报告三之超链接与多媒体文件应用
目录 Web前端技术基础实验报告 实验题目:超链接与多媒体文件应用 实验目的:熟悉超链接与多媒体文件的插入的相关标签 实验内容 : 实验过程及结果 Web前端技术基础实验报告 实验题目:超链接与多媒体 ...
- 基于python实现(问卷星)Excel中图片超链接的批量下载
1. Introduction 最近出于工作需要,使用问卷星收集同学们的照片.但是问卷星竟然没有一个批量附件下载的功能,只把每个图像的超链接放在了excel文件里,着实让我大受震撼.在网上简单搜了下资 ...
最新文章
- 认识HTML5的WebSocket 认识HTML5的WebSocket
- 图论 ---- DAG删点+枚举+暴力+离线前缀异或和 J Red-Black Paths (2021 icpc网络赛第一场)
- permute、transpose、view、reshape、unsequeeze与flatten
- 多文件同时读写为什么没有单文件读写快?
- LeetCode—216. 组合总和 III
- 【excrt】屠龙勇士(luogu 4774)
- swift 2.2 语法 (上)
- 725 - Division
- springboot 事务_第六章:springboot开启声明式事务
- LeetCode(1046)——最后一块石头的重量(JavaScript)
- 数据结构上机实践第二周项目1
- mysql内部代码的优缺点
- 新产品开发流程管理:以市场为驱动【笔记】(二)
- Zigbee 2006介绍+资料+源代码下载
- 【捞】明朝灭亡的经济原因
- androidmmi可以卸载吗_删除Android自带的系统软件注意事项
- 人工智能/虚拟现实技术的工程伦理分析:以电影《头号玩家》为例
- 10步搞定App内测发布(蒲公英内测平台)
- 高德地图实现卫星图-区域掩模3D
- 夜晚,我路过那座城市