HTML 图片标签的学习

图片标签

<img> 标签定义 HTML 页面中的图像。

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

注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。提示:通过在 <a> 标签中嵌套 <img> 标签,给图像添加到另一个文档的链接。

 

这里要说一下a标签:

<a> 标签定义超链接,用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性,它指定链接的目标。在所有浏览器中,链接的默认外观如下:1、未被访问的链接带有下划线而且是蓝色的2、已被访问的链接带有下划线而且是紫色的3、活动链接带有下划线而且是红色的

 

属性 

属性描述
aligntop
bottom
middle
left
right
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alttext规定图像的替代文本。
borderpixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossoriginNewanonymous 
use-credentials
设置图像的跨域属性
heightpixels规定图像的高度。
hspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismapismap将图像规定为服务器端图像映射。
longdescURLHTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
srcURL规定显示图像的 URL。
usemap#mapname将图像定义为客户器端图像映射。
vspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
widthpixels规定图像的宽度。

 

全局属性 

属性描述
accesskey设置访问元素的键盘快捷键。
class规定元素的类名(classname)
contenteditableNew规定是否可编辑元素的内容。
contextmenuNew指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*New用于存储页面的自定义数据
dir设置元素中内容的文本方向。
draggableNew指定某个元素是否可以拖动
dropzoneNew指定是否将数据复制,移动,或链接,或删除
hiddenNewhidden 属性规定对元素进行隐藏。
id规定元素的唯一 id
lang设置元素中内容的语言代码。
spellcheckNew检测元素是否拼写错误
style规定元素的行内样式(inline style)
tabindex设置元素的 Tab 键控制次序。
title规定元素的额外信息(可在工具提示中显示)
translateNew指定是否一个元素的值在页面载入时是否需要翻译

 

事件属性

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

 

 

实例

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>图片标签</title></head><body> <p> 插入来自一个文件夹的图片: </p> <img src="Color%20Burst%202.jpg" alt="本地图片" width="500" height="300"> <p> 插入来自一个网站的图片: </p> <img src="https://img2018.cnblogs.com/i-beta/1681961/202001/1681961-20200107222839151-243637258.jpg" alt="网站图片" width="500" height="300"></body></html>

本地文件 Color 20Burst 202.jpg,空格用%表示。

Google浏览器打开:

 

相关文章