您的位置：首页 > Web前端 > HTML

Html_列表标签+图像标签+地图标签

2013-11-05 11:28 357 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
这里面是title
</title>
</head>
<body background="../myweb/chm.jpg">
<font color="#000099" size="+6">这是演示的文字</font>
这<font color="red" size="8">里面</font>是body
<br />
这是新的一行
<hr />
<h1>这是H1	标签</h1>
<hr />
c<db>a		3<45>6
c<db>a
a a
×
<hr />
<!--这里面演示的是列表标签-->
<font color="#000099" size="+3">下面演示列表标签（用dl定义列表）</font>
<dl>
<dt>用dt定义项目A（dt）</dt>
<dd>下层目录1（dd定义描述）</dd>
<dd>下层目录2（dd定义描述）</dd>
<dd>下层目录3（dd定义描述）</dd>
<dt>用dt定义项目B（dt）</dt>
<dd>下层目录1（dd定义描述）</dd>
<dd>下层目录2（dd定义描述）</dd>
<dd>下层目录3（dd定义描述）</dd>
</dl>
<hr />
<font color="#000099" size="+3">下面演示无序列表（用ul定义无序列表）</font>
<ul type="square">
<li>列表项1（用li定义描述）</li>
<li>列表项2（用li定义描述）</li>
<li>列表项3（用li定义描述）</li>
</ul>
<hr />
<font color="#000099" size="+3">下面演示有序列表（用ol定义有序列表）</font>
<ol type="i">
<li>列表项1（用li定义描述）</li>
<li>列表项2（用li定义描述）</li>
<li>列表项3（用li定义描述）</li>
</ol>
<hr />
<h4>一个嵌套列表：(会自动使用不同的type)</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>

<!--
列表标签
标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。 	-->
<hr />
<font color="#000099" size="+3">下面演示图像标签(用img定义图像)</font>
<img src="../img/1.JPG" height="20" width="55" align="middle" border="3" alt="这是alt文本" />
<!--
图像标签
标签 描述
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。
图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，
它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。
src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" />URL 指存储图像的位置。
如果名为 "boat.gif" 的图像位于 www.w3school.com.cn
的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。 浏览器将图像显示在文档中图像标签出现的地方。
如果你将图像标签置于两个段落之间，那么浏览器会
首先显示第一个段落，然后显示图片，最后显示第二段。
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，
替换文本属性告诉读者她们失去的信息。
此时，浏览器将显示这个替代性的文本而不是图像。
为页面上的图像都加上替换文本属性是个好习惯，
这样有助于更好的显示信息，
并且对于那些使用纯文本浏览器的人来说是非常有用的。
基本的注意事项 - 有用的提示：
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，
需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
-->
<p>
还可以把图像作为链接来使用：
<a href="1.html" >
<img src="../i/eg_buttonnext.gif"  />
</a>
</p>
<hr />
<font color="#000099" size="+3">下面演示图像地图标签(用map定义图像地图，需要和img标签联合使用)</font>
<img src="chm.JPG" alt="map标签演示" usemap="#mapId" />
<map id="mapId">
<area shape="rect"  coords="0,0,50,50" href="1.html"/>
<area shape="circle"  coords="0,0,90" href="2.html"/>
</map>
<!--
HTML <area> 标签的 coords 属性
HTML <area> 标签
定义和用法
coords 属性规定区域的 x 和 y 坐标。
coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。
图像左上角的坐标是 "0,0"。
详细解释：
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。
坐标的数字及其含义取决于 shape 属性中决定的区域形状。
可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
下面列出了每种形状的适当值：
圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），
r 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。
定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，
"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是
定义带有四个顶点的多边形的一种简化方法。
-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Html 列表标签 图像标签 地图标签
相关文章推荐
新的分享
章节导航