图片标签
<img> 标签定义 HTML 页面中的图像。
<img> 标签有两个必需的属性：src 和 alt。
注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。 提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
这里要说一下a标签：
<a> 标签定义超链接，用于从一个页面链接到另一个页面。 <a> 元素最重要的属性是 href 属性，它指定链接的目标。 在所有浏览器中，链接的默认外观如下： 1、未被访问的链接带有下划线而且是蓝色的 2、已被访问的链接带有下划线而且是紫色的 3、活动链接带有下划线而且是红色的
属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | top bottom middle left right |
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 |
| alt | text | 规定图像的替代文本。 |
| border | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 |
| crossoriginNew | anonymous use-credentials |
设置图像的跨域属性 |
| height | pixels | 规定图像的高度。 |
| hspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 |
| ismap | ismap | 将图像规定为服务器端图像映射。 |
| longdesc | URL | HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 |
| src | URL | 规定显示图像的 URL。 |
| usemap | #mapname | 将图像定义为客户器端图像映射。 |
| vspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 |
| width | pixels | 规定图像的宽度。 |
全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditableNew | 规定是否可编辑元素的内容。 |
| contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-*New | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggableNew | 指定某个元素是否可以拖动 |
| dropzoneNew | 指定是否将数据复制，移动，或链接，或删除 |
| hiddenNew | hidden 属性规定对元素进行隐藏。 |
| 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浏览器打开：
原文地址：https://www.cnblogs.com/liyihua/p/12336513.html
时间： 2024-10-28 22:40:54