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" 属性。
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
| 不推荐使用。规定如何根据周围的文本来排列图像。 |
| border | pixels | 不推荐使用。定义图像周围的边框。 |
| height |
| 定义图像的高度。 |
| hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
| width |
| 设置图像的宽度。 |
全局属性
<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><!--一个有标题的超链接。--> |
扫一扫
2572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
