1.HTML <img> 标签

HTML <img> 标签

实例

在下面的例子中,我们在页面中插入一幅 W3School 的工程师在上海鲜花港拍摄的郁金香照片:

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

以上代码的效果:

亲自试一试

(您可以在页面底部找到更多实例)

浏览器支持

IE Firefox Chrome Safari Opera
         

所有浏览器都支持 <img> 标签。

定义和用法

img 元素向网页中嵌入一幅图像。

请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性:src 属性 和 alt 属性

延伸阅读:如何正确地使用图像

HTML 与 XHTML 之间的差异

在 HTML 中,<img> 标签没有结束标签。

在 XHTML 中,<img> 标签必须被正确地关闭。

在 HTML 4.01 中,不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

在 XHTML 1.0 Strict DTD 中,不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

必需的属性

属性 描述
alt text 规定图像的替代文本。
src URL 规定显示图像的 URL。

可选的属性

属性 描述
align
  • top
  • bottom
  • middle
  • left
  • right
不推荐使用。规定如何根据周围的文本来排列图像。
border pixels 不推荐使用。定义图像周围的边框。
height
  • pixels
  • %
定义图像的高度。
hspace pixels 不推荐使用。定义图像左侧和右侧的空白。
ismap URL 将图像定义为服务器端图像映射。
longdesc URL 指向包含长的图像描述文档的 URL。
usemap URL 将图像定义为客户器端图像映射。
vspace pixels 不推荐使用。定义图像顶部和底部的空白。
width
  • pixels
  • %
设置图像的宽度。

全局属性

<img> 标签支持 HTML 中的全局属性

事件属性

<img> 标签支持 HTML 中的事件属性

TIY 实例

插入图像

本例演示如何在网页中显示图像。

从不同的位置插入图片

本例演示如何将其他文件夹或服务器的图片显示到网页中。

背景图片

本例演示如何添加背景图片到HTML页面。

排列图片

本例演示如何在文字中排列图像。

浮动图像

本例演示如何使图片浮动至段落的左边或右边。

调整图像尺寸

本例演示如何将图片调整到不同的尺寸。

为图片显示替换文本

本例演示如何为图片显示替换文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。

制作图像链接

本例演示如何将图像作为一个链接使用。

创建图像地图

本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

延伸阅读 - 如何正确地使用图像

HTML 和 XHTML 最引人注目的特征之一,就是能够在文档的文本中包括图像,既可以把图像作为文档的内在对象(内联图像),也可以将其作为一个可通过超链接下载的单独文档,或者作为文档的背景。

合理地在文档内容中加入图像(静态的或者具有动画效果的图标、照片、说明、绘画,等等)时,会使文档变得更加生动活泼,更加引人入胜,而且看上去更加专业,更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。

然而,如果过度使用图像,文档就会变得支离破碎,混乱不堪,而且无法阅读,用户在下载和查看该页面时,更会增加很多不必要的等待时间。

请阅读下面的文章,学习 Web 上的两种主要图像格式:GIF 和 JPEG,以及如何正确地使用图像:

相关页面

HTML DOM 参考手册:Image 对象

2 .常见图片格式:

图片格式图片格式是计算机存储图片的格式,常见的存储的格式有 bmp、jpg、tiff、gif、pcx、 tga、exif、fpx、svg、psd、cdr、pcd、dxf、ufo、eps、ai、raw 等

3 .路径:

绝对路径:是从盘符(或根目录)开始的路径,形如
C:\windows\system32\cmd.exe
相对路径:是从当前路径开始的路径,假如当前路径为C:\windows\system32\cmd.exe
要描述上述路径,只需输入
system32\cmd.exe

4.链接

一种允许我们同其他网页或站点之间进行连接的元素。

类型

按照连接路径的不同,网页中超链接一般分为以下3种类型:内部链接,锚点链接外部链接

超链接对象

超链接是超级链接的简称。如果按照使用对象的不同,网页中的链接又可以分为:文本超链接,图像超链接,E-mail链接,锚点链接,多媒体文件链接,空链接等。

超链接是一种对象,它以特殊编码的文本或图形的形式来实现链接,如果单击该链接,则相当于指示浏览器移至同一网页内的某个位置,或打开一个新的网页,或打开某一个新的WWW网站中的网页。

网页超链接

网页上的超链接一般分为三种:一种是绝对URL的超链接。URL(Uniform Resource Locator)就是统一资源定位符,简单地讲就是网络上的一个站点、网页的完整路径。http://www.xxx. com/

第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去;

还有一种称为同一网页的超链接,这种超链接又叫做书签

动态静态

超链接还可以分为动态超链接和静态超链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的超链接,例如我们可以实现将鼠标移动到某个文字链接上,文字就会象动画一样动起来或改变颜色的效果,也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接,顾名思义,就是没有动态效果的超链接。

论坛超链接

正文形式

1 图文

2 软文

3 留言 {回帖使用较多}

4表格

5 无

二、链接位置

1 开头

2 文中

3 末尾

4 隐藏

三、链接形式

1.文本

2. 目标关键词

3. 链接

4. 带锚文字链接

5. 隐藏 {链接与背景色一致等}

四、链接代码

A超文本标记语言(html)

1.<a></a> {锚(anchor)标签}

锚标签属性

title=锚文字

href=链接

target=_blank {转到空白页}

rel=nofollow或者 rel=external nofollow {搜索引擎蜘蛛不跟踪这个(外部)链接}

2. <b></b> {加粗(bold)标签}

虽然 <strong></strong> 与 <b></b> 表现形式相同,但 bold 是“加粗”,strong 是“强调”。

3. <font color = #六位16进制码></font> {字体(font)标签}

4. <span></span> {生成(span)标签}

生成标签自身无涵义

举例:设置字体颜色 <span style ="color:# 六位16进制码;"></span>

B Discuz!代码

1. [url=链接]链接[/url] {等于 <a href=链接 target=_blank>链接</a>}

2. [url=链接]锚文字[/url] {等于 <a href=链接 target=_blank>锚文字</a>}

3. [url=链接]锚文字[/url ]([url=链接]链接[/url])

4. [url=链接A]锚文字a[/url]|[url=链接B]锚文字b[/url]

5. 目标关键词[url=链接]链接[/url]

6. 目标关键词[url=链接]锚文字[/url]

五、链接数量

链接数量大等于0

建议数量

每个页面30贴=每帖1个*30贴=30个

每个页面10贴=每帖(1-2)个*10贴=(10-20)个

六、术语简释

1. 目标关键词(keyword)

目标关键词(keyword) ≈关键字、关键词、目标关键字、外链关键字、外链关键词

2.文本(text)

文本(text) ≈ 文字、纯文字、纯文本

3.锚文字(anchor text)

锚文字(anchor text){包含目标关键词} ≈ 链接锚文字、超链接锚文字、外链锚文字、锚文本、链接锚文本、超链接锚文本、外链锚文字、链接文字、超链接文字、外链文字、超文本、链接超文本、超链接文本、外链超文本、链接源头文字

4.链接(link)

链接(link) ≈ 网址、网页地址、地址、裸链、外链、链接、超链接、纯链接、外部链接、导出链接、外部超链接、导出超链接

2超文本标记语言编辑

1

<a></a><!--一个超级链接。-->

1

<atitle="百度百科"></a><!--一个有标题的超链接。-->

1

<ahref="mailto"></a><!--一个自动发送电子邮件的链接。-->

锚点链接

1

<ahref="#百度百科"></a><!--一个有标题的超链接。-->

Java+HTML预习笔记_20140610的更多相关文章

  1. Java基础复习笔记系列 九 网络编程

    Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...

  2. Java基础复习笔记系列 八 多线程编程

    Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...

  3. Java基础复习笔记系列 七 IO操作

    Java基础复习笔记系列之 IO操作 我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...

  4. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

  5. Java基础复习笔记系列 四 数组

    Java基础复习笔记系列之 数组 1.数组初步介绍? Java中的数组是引用类型,不可以直接分配在栈上.不同于C(在Java中,除了基础数据类型外,所有的类型都是引用类型.) Java中的数组在申明时 ...

  6. 20145213《Java程序设计学习笔记》第六周学习总结

    20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...

  7. [原创]java WEB学习笔记95:Hibernate 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. java effective 读书笔记

    java effective 读书笔记 []创建和销毁对象 静态工厂方法 就是“封装了底层 暴露出一个访问接口 ” 门面模式 多参数时 用构建器,就是用个内部类 再让内部类提供构造好的对象 枚举 si ...

  9. java JDK8 学习笔记——助教学习博客汇总

    java JDK8 学习笔记——助教学习博客汇总 1-6章 (by肖昱) Java学习笔记第一章——Java平台概论 Java学习笔记第二章——从JDK到IDEJava学习笔记第三章——基础语法Jav ...

  10. java JDK8 学习笔记——第16章 整合数据库

    第十六章 整合数据库 16.1 JDBC入门 16.1.1 JDBC简介 1.JDBC是java联机数据库的标准规范.它定义了一组标准类与接口,标准API中的接口会有数据库厂商操作,称为JDBC驱动程 ...

随机推荐

  1. Codeforces Round 638 (Div. 2)B. Phoenix and Beauty

    B. Phoenix and Beauty 这道题目学到的东西: 从给出的数据范围观察,得到一些有用信息(峰哥教的) 考虑无解的情况' 其实这题考虑怎么操作是比较难的,如果能想出来满足条件的结果就比较 ...

  2. C语言之兔子生产问题

    /#include <stdio.h> main() { long fib1 = 1, fib2 = 1, fib;//定义长整型变量,fib1表示当前前一个月的兔子数,fib2表示当前前 ...

  3. Elasticsearch 如何保证写入过程中不丢失数据的

    丢失数据的本质 在本文开始前,首先明白一个点,平时我们说的组件数据不丢失究竟是在指什么,如果你往ES写入数据,ES返回给你写入错误,这个不算数据丢失.如果你往ES写入数据,ES返回给你成功,但是后续因 ...

  4. Jetpack Compose(3) —— 状态管理

    上一篇文章拿 TextField 组件举例时,提到了 State,即状态.本篇文章,即讲解 State 的相关改概念. 一.什么是状态 与其它声明式 UI 框架一样,Compose 的职责非常单纯,仅 ...

  5. C# 常用特性(Attribute)

    目录 指定方法实现的属性MethodImplAttribute 标记不再使用的程序元素ObsoleteAttribute 指定属性或事件的说明DescriptionAttribute 未完待续... ...

  6. Google Chart API学习(二)

    书接上回: combo-charts: <html> <head> <script type="text/javascript" src=" ...

  7. Android热点SoftAP使用方式

    一.背景 最近项目中Android设备需要获取SoftAP信息(wifi账号.密码.IP等),然后传递到投屏器中,那么如何获取到SoftAP信息呢?我们知道可以通过WifiManager类里的方法可以 ...

  8. 【732. 我的日程安排表 III】线段树求解

    class MyCalendarThree { public static void main(String[] args) { MyCalendarThree myCalendarThree = n ...

  9. StableSwarmUI:功能强大且易于使用的Stable Diffusion WebUI

    StableSwarmUI是一个模块化和可定制的Stable Diffusion WebUI,最近发布了0.6.1-Beta版本.这个开源项目,托管在GitHub上:https://github.co ...

  10. vue中类tabs左右滑动

    效果图 思路 给定一个变量用来记录滚动了几列,每滚动一次加1滚动一列,监听页面滚动父级元素宽度改变,重新设置滚动的距离(放在计算属性中让其自动计算) <template> <div ...