HTML——链接&图像

一、链接

1.新页面打开链接

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

2.本页面,name为"C4"处打开链接

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

3.跳出框架

<a href="/index.html"
target="_top">请点击这里!</a>

4.发送邮件链接

<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>

5.复杂的邮件链接

<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>

  

二、图像

1.图片背景

<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
</body>

2.图片位置

文本中位置:bottom(默认)、middle、top

段落中浮动:left、right

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

3.图片替换文本

<img src="/i/eg_goleft123.gif" alt="向左转" />

4.图片链接  

<a href="/example/html/lastpage.html">
  <img border="0" src="/i/eg_buttonnext.gif" />
</a>

5.创建图像映射

img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),

所以我们同时向 map 元素添加了 "id" 和 "name" 属性

map该name元素,获取图片圆形区域,添加链接。

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

</map>

6.把图像转换为图像映射

<p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>

图像标签:  

<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域

  

  

  

  

时间: 2024-10-05 08:00:09

HTML——链接&图像的相关文章

HTML标签-链接/图像

<!-- 链接 --><a href="#"></a><a href="#"><img src="#" alt="替换文本"></a>1.链接数据:文本链接和图片链接2.属性:    href属性:指向另一个文档的链接    name属性:创建文档内的链接<!-- 图像 --><img src="#" />3.i

HTML基础标签:标题段落空格链接图像强调

HTML 标题 HTML标题(Heading)是通过<h1>-<h6>标签来定义的. h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构.写作文.PPT等. 这里有六个标题元素标签——<h1>.<h2>.<h3>.<h4>.<h5>.<h6>,每个元素代表文档中不同级别的内容: <h1>表示主标题(themainheading),<h2>表示二级子标题(subh

HTML系列(四):编辑图像

一.图像的基本概念 1.矢量图:文件占用空间小,放大后图像不会失真,和分辨率无关.适用于图形设计.文字设计.标志设计.版式设计等. 2.位图:由像素点组成,文件较大,放大和缩小图像会失真. 3.有损压缩图像:允许压缩过程损失一定的不敏感信息.JPEG和JPG是最常见的采用有损压缩进行处理的图片格式. 4.无损压缩图像:记录图像上每个像素点的数据信息,采用特殊的算法来压缩文件大小.PNG是最常见的采用无损压缩的图片格式. 5.常见格式的图像:JPEG/JPG是网页中常见的图像格式,以24位存储单个

HTML 图像&lt;img&gt;

定义和用法: img元素向网页中嵌入一副图像. 请注意:从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像.<img>标签创建的是被引用图像的占位空间. 属性: <img>标签有两个必需的属性:src属性(规定显示图像的URL)和alt属性(规定图像的替代文本). 可选的属性: height:定义图像的高度. width:定义图像的宽度. ismap:将图像定义为服务器端图像映射. longdesc:指向包含长的图像描述文档的URL. usemap:

Bootstrap简易使用指南

1.框架 1.1全局样式 使用HTML5的doctype,scaffolding.less中定义全局样式,从2开始使用normalize.css,并使用reset.less进行简化 1.2默认栅格系统 940px宽12列栅格,使用row与span[NUM]的class来控制,使用offset[NUM]来控制偏移,于non-fluid可以直接嵌套,提供了四种响应式方案 1.3流动栅格系统 基于百分比,将row改为row-fluid即可使用,内嵌注意宽度是按照父列的百分比进行计算的 1.4自定义栅格

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

[No000098]SVN学习笔记5-分支,合并,属性,补丁,锁,分支图

行结束符和空白选项 在项目的生命周期中,有时可能会将行结束符由 CRLF 改为 LF,或者修改一段代码的缩进.不幸的是这样将会使大量的代码行被标记为已修改,尽管代码本身并没有被修改.这里列出的选项将会在比较差异 和应用补丁时帮助你应对这些修改.你将会在合并和追溯对话框中看到这些设置,它们同样也出现在TortoiseMerge 的设置中. 忽略行结束符 排除仅行结束符的差异. 比较空白 将所有缩进和行内空白差异视为增加/删除的行. 忽略空白修改 排除那些完全是针对空白数量或类型的修改,例如,修改缩

HTML初接触

    牛腩中运用了一些HTML的知识,但是还没有系统的接触过,这次系统的接触了一次HTML,就像老师说的果然引起了共鸣,这里简单的总结一下.     标题主体              文本显示         本文显示基础:                  本文显示Demo:              段落控制         段落控制基本内容:                  段落控制Demo:             特殊字符         通过引用输入特殊字符(键盘上不存在的字符

body之内联标签img

img创建的是被链接图像的占位空间,它不会真正地在网页插入图像. 两个必须属性: src:图像的超链接 alt:图像的替代文本 可选属性: height:高度 width:宽度 ismap:将图像定义为服务器端图像映射 longdesc:指向 usemap:将图像定义为客户端图像映射器 align:排列,top,bottom,left,right,middle  上下左右中 效果图: