3school 知识点随笔记录(HTML图像)

时间:2019-04-13
本文章向大家介绍3school 知识点随笔记录(HTML图像),主要包括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>
//

 

上一页 下一页

原文地址:http://www.manongjc.com/article/102111.html