HTML 图片标签的学习

2021-06-05 01:04

阅读:368

标签:外观   tag   活动   用户   not   des   额外信息   space   check   

图片标签

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

标签有两个必需的属性: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 指定是否一个元素的值在页面载入时是否需要翻译

 

事件属性

  标签还支持 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浏览器打开:

技术图片

 

HTML 图片标签的学习

标签:外观   tag   活动   用户   not   des   额外信息   space   check   

原文地址:https://www.cnblogs.com/liyihua/p/12336513.html


评论


亲,登录后才可以留言!