3school 知识点随笔记录(HTML图像)
taeget _blank // 链接会在新窗口打开
示例 :
<html>
<body>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。</p>
</body>
</html>
alt // 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
示例 :
<img src="boat.gif" alt="Big Boat">
设置图像背景
示例 :
<html>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
</body>
</html>
align // 设置图像的对齐方式及图像显示左右两侧
示例 :
<html>
<body>
<h2>未设置对齐方式的图像:</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像:</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> // 文字与图像最下方对齐
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> // 文字与图像中上方对齐
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> // 文字与图像最上方对齐
<p>请注意,bottom 对齐方式是默认的对齐方式。</p>
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>
把图像作为链接来使用
示例 :
<html>
<body>
<p>
您也可以把图像作为链接来使用:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
map name=" " id = " " 创建图像的映射 (name和id的值一样)
示例 :
开启图像映射
给<img>标签设置usemap属性从而开启一张图片的映射功能。
<img src = "image1.jpg" alt = "图片1" usemap = "#umap" />
设置映射区域
图片开启了映射后,应该给图片定义若干个映射区域。我们用<map>标签来包裹这些映射区域。<map>标签的id值必须和图片的usemap属性值对应。
<area>标签必须嵌套在<map>内部,用来定义映射区域。
其中:
shape属性定义映射区域的形状
rect为矩形
circle为圆形
poly为多边形
coords定义了形状的坐标与半径
href映射到图片或者页面
你可以把你的映射区域映射到不同的页面或者图片。
href = "index.html"href = "image.jpg"
另外<area>标签也可以设置target属性,用来设置在新窗口或者本窗口打开新页面。
target = "_blank"target = "_self"
示例 :
<html>
<body>
<p>请点击图像上的星球,把它们放大。</p>
<img
src="/i/eg_planets.jpg" // 主体图像路径
border="0" // 设置边距为0
usemap="#planetmap" // 映射主体的ID
alt="Planets" /> // 图片未打开显示的文字
<map name="planetmap" id="planetmap"> // 开启映射
<area
shape="circle" // 定义映射为圆形
coords="180,139,14" // 圆形中心点坐标和半径
href ="/example/html/venus.html" // 点击映射区域跳到新的链接
target ="_blank" // 打开新的网页,而不是在原网页打开
alt="Venus" /> // 图片未正常打开显示的文字
<area
shape="circle"
coords="129,161,10"
href="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
</body>
</html>
//
- 域名资讯:昨日域名成交2897个,成交额达300多万元
- 2017年12月编程语言排行榜:C语言再次崛起,有望成为2017年度编程语言
- WordPress 免插件仅代码实现 Gravatar 头像缓存
- Spring JDBCTemplate使用JNDI数据源
- 大家之前是不是误解了DC/OS与Kubernetes之间的关系
- CentOS 7 上部署Mono 4 和Jexus 5.6
- maven学习(下)利用Profile构建不同环境的部署包
- AS3初学者容易迷糊的几个问题
- Spring Security笔记:自定义Login/Logout Filter、AuthenticationProvider、AuthenticationToken
- ASP.NET Web API 2.1支持Binary JSON(Bson)
- Spring Security笔记:自定义登录页
- 浅析 Linux 初始化 init 系统
- 如何提高Python运行效率 超实用的四种提速方法
- 如何让oracle的select强制走索引
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 数据库(二)--多对多相关操作
- 【tensorflow2.0】优化器optimizers
- 数据库(三)--多对多,一对多,一对一
- 【tensorflow2.0】回调函数callbacks
- 用C++跟你聊聊“观察者模型”
- 【tensorflow2.0】构建模型的三种方法
- django实战(一)--dango自带的分页(极简)
- 线程池 -- 动态链接库
- 【tensorflow2.0】训练模型的三种方法
- 用C++跟你聊聊“建造者模式”
- 【tensorflow2.0】使用TPU训练模型
- 用C++跟你聊聊“外观模式”
- 【tensorflow2.0】使用tensorflow-serving部署模型
- 用C++跟你聊聊“模板方法模式”
- 用C++跟你聊聊“原型模式” (复制/拷贝构造函数)