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

最新推荐文章于 2022-10-23 17:03:15 发布
最新推荐文章于 2022-10-23 17:03:15 发布
阅读量2k 收藏 1
点赞数
分类专栏： # 待整理HTML 文章标签： Html 列表标签 图像标签 地图标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pre_eminent/article/details/14163385
版权 
<!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>

pre_eminent
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
37.jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38.jquery异步加载图片的插件jqGalScroll下载 39.jquery微型相册插件Micro Image Gallery下载 40.jQuery把图片放大及变亮特效插件下载 41.jquery拖动...
mapboxGL列表和地图联动
LZUGIS
05-10 776
概述 列表和地图联动是webgis中一个非常常见的功能，本文讲一下在mapboxGL中结合vue如何实现此功能。 效果 实现思路 1. 获取数据 获取数据并将数据保存起来； 2. 列表展示 列表简单的用ul、li来实现。 3. 地图展示 数据获取之后，通过document.createElement()的方式创建marker，将结果在地图上展示。 4. 列表地图联动 联动存在两个交互：鼠标移动和点击选中，所以需要两个变量用来记录当前鼠标经过的和点击选中的，如果鼠标经过的和点击选中发生变化的时候，去设置对应
html -- map标签
fupo
12-23 2404
shape 形状 1. 矩形 rect shape=“rect” coords=“x1,y1,x2,y2” 第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标。“0,0”是图像左上角的坐标。 <area shape="rect" coords="10,50,30,60" href="up" alt="上"> </area> coords="10,50,30,60" 10,50：顶点（左上角）xy坐标 30,60: 对角（右下角）xy坐标 2. 圆形 circle
HTML常用标签之"地图"标签
anig2014的专栏
03-06 1686
六. "地图"标签 简介: 这个和上一章的图像标签一样, 都属于简单 容易理解的, 所谓的地图标签就是在原本的图像上 添加了地图上坐标的概念, 使得图像上不同的坐标位置点击时可以有不同的跳转页面   跟上一章一样, 直接上码了 地图标签 --> 返回主页
html在线地图,HTML: <map> 标签
weixin_39833290的博客
05-31 274
在线示例带有可点击区域的图像映射：示例html>基础教程网(nhooo.com)测试看看 ‹/›浏览器兼容性IEFirefoxOperaChromeSafari目前大多数浏览器支持 标签。标签定义及使用说明 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。标记的usemap属性必须与标记的name属性相同，以在这两个元素之间建立关系。area 元素永远嵌套在 map 元素内部。a...
HTML中map标签与area标签
m0_54606980的博客
10-23 776
map标签 area标签
Google+Android+SDK开发范例大全
03-07
8.2 在程序里浏览网页——WebView.loadUrl 8.3 嵌入HTML标记的程序——WebView.loadData 8.4 设计前往打开网页功能——Intent与Uri.parse 8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter ...
从入门到精通HTML5——PDF——网盘链接
02-27
　4.7.2　无序列表和有序列表的嵌套 78 　4.8 小结 79 　4.9 习题 80 　第5章 超链接 81 　教学录像：22分钟 　5.1 超链接的基本知识 82 　5.1.1 超链接 82 　5.1.2 绝对路径 82 　5.1.3 相对路径 82 　5.2 超链接的...
fend-p5-neighborhood-map:邻里地图项目
05-22
如果单击了地图或列表视图中项目上的标记，则页面将加载Flickr图像并将其放置到模式窗口中以方便查看。 可以按标签过滤地点。 请尝试进入：博物馆或露天，曲棍球或自行车道。 应用程序将尝试按标签过滤内容。 使用...
map-of-sixteen:以地图的形式记住十六
06-13
重新绘制城市标签并在标签上添加同学编号。 重新实现详细信息框中列表的事件绑定机制。 在访问日志中添加一些最新的平台信息（UA 字符串）。 将依赖项更新到最新版本。 修复一些小错误和错别字，提高兼容性。 ...
HTML5 世界地图 划分世界区域并显示国家名
12-20
这是一款基于HTML5的世界地图应用，它的特点是可以将地图中的各个国家区域进行划分，鼠标滑过时即可显示该区域对应的国家名称，你也可以对弹出的标签进行自定义文字和自定义样式。
html图像地图map标签的使用
09-14
map标签定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。这是在所有主流浏览器中都可以兼容的一个标签属性。
html获取地图选择区域(以山西省为例)
06-18
在山西地图上鼠标放到各个地市，对应地市变阴影显示，点击后对话框弹出地市名称。可扩展编程。
百度地图颜色标记
11-25
可以实现在不同省市用不同颜色标注出来，类似快递网点标注
HTML调用百度地图API，实现地图标注位置
啸啸说的博客
03-17 6176
快速学会HTML调用百度地图API
html 中写目录列表,HTML的目录列表和菜单列表有什么区别？
weixin_33078391的博客
06-05 2235
1.目录列表标记目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因为它的功能也可以通过无序列表来实现。语法：列表项列表项列表项······说明：在该语法中，和标志着目录列表的开始和结束。举例：目录列表列表无序列表有序列表目录列表在代码中<1:1>无序列表<1土>有序列表<1:1>目录列表部分的标记为设置目录列表，在浏览器中预览，可...
html中怎么写地图,html map标签是什么？
weixin_42097369的博客
05-31 576
首先让我们来看一下htmlmap标签是什么：htmlmap标签:定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。定义map：map标签定义map，area标签定义可点击的热点，area属性;shape：定义热点形状，可选参数rect(矩形)、circle(圆形)、poligon(自定义形状)。coords：定义形状路径;当shape=rect时，四个数字依次为：起...
html中图形和图像,在Html中，图像使用地图标签
weixin_35054319的博客
06-04 295
在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：注:所有的最标都是相对于图片左上角的其中，坐标coords对各个shape的解释如下：shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right即，当shape是矩形时，coords表示矩形左上及右下(x2, y2)的坐标sha...
解释如下代码：for pic_id1 in range(1,N_pic+1): print('matching ' + set_name +': ' +str(pic_id1).zfill(5)) N_CHANGE = 0 for T_id in range(1,16,3): for H_id in range(2,5): FAIL_CORNER = 0 data_mat1 = read_data(input_file,pic_id1,T_id,H_id) search_list = range( max((pic_id1-10),1),pic_id1)+ range(pic_id1+1, min((pic_id1 + 16),N_pic + 1 ) ) for cor_ind in range(0,N_cor): row_cent1 = cor_row_center[cor_ind] col_cent1 = cor_col_center[cor_ind] img_corner = data_mat1[(row_cent1-N_pad): (row_cent1+N_pad+1), (col_cent1-N_pad): (col_cent1+N_pad+1) ] if ((len(np.unique(img_corner))) >2)&(np.sum(img_corner ==1)< 0.8*(N_pad2+1)**2) : for pic_id2 in search_list: data_mat2 = read_data(input_file,pic_id2,T_id,H_id) match_result = cv2_based(data_mat2,img_corner) if len(match_result[0]) ==1: row_cent2 = match_result[0][0]+ N_pad col_cent2 = match_result[1][0]+ N_pad N_LEF = min( row_cent1 , row_cent2) N_TOP = min( col_cent1, col_cent2 ) N_RIG = min( L_img-1-row_cent1 , L_img-1-row_cent2) N_BOT = min( L_img-1-col_cent1 , L_img-1-col_cent2) IMG_CHECK1 = data_mat1[(row_cent1-N_LEF): (row_cent1+N_RIG+1), (col_cent1-N_TOP): (col_cent1+N_BOT+1) ] IMG_CHECK2 = data_mat2[(row_cent2-N_LEF): (row_cent2+N_RIG+1), (col_cent2-N_TOP): (col_cent2+N_BOT+1) ] if np.array_equal(IMG_CHECK1,IMG_CHECK2) : check_row_N = IMG_CHECK1.shape[0] check_col_N = IMG_CHECK1.shape[1] if (check_col_Ncheck_row_N>=25): match_all.append( (pic_id1, row_cent1, col_cent1, pic_id2 , row_cent2, col_cent2) ) search_list.remove(pic_id2) else: FAIL_CORNER = FAIL_CORNER +1 N_CHANGE = N_CHANGE + 1 #%% break if less than 1 useless corners, or have detected more than 10 images from 60 if(FAIL_CORNER <= 1): break
最新发布
06-13
这段代码是一个嵌套的循环结构，用于在多张图像之间进行匹配，并将匹配结果存储在列表match_all中。 具体地，外层循环是对图像编号pic_id1进行遍历，其中pic_id1的取值范围是1到N_pic，每次循环开始时会输出一行提示信息，格式为“matching + set_name + : + pic_id1的值（5位数字，前面用0填充）”。 内层循环是对图像中的角点进行遍历，其中T_id的取值范围是1到15，步长为3，H_id的取值范围是2到4，表示在图像的第T_id个特征点和第H_id个金字塔层的角点处进行匹配。 在内层循环的每次迭代中，首先调用read_data函数从图像文件中读取数据，然后使用range函数生成一个搜索列表search_list，其中包含了当前图像之前10张和之后15张图像的编号，这些图像将被用来与当前图像进行匹配。 接着对每个角点进行处理，首先计算角点的中心坐标row_cent1和col_cent1，然后从data_mat1中提取一个大小为(N_pad2+1)×(N_pad2+1)的小图像img_corner，其中N_pad是一个参数，表示小图像的大小。 如果提取的小图像中的像素值不止两种，并且像素值为1的像素数小于小图像总像素数的80%，则开始在搜索列表中的图像中寻找与该小图像匹配的图像，这里使用了cv2_based函数进行图像匹配。 如果找到了一个与小图像匹配的图像，则计算该图像对应的角点的中心坐标row_cent2和col_cent2，然后将两个图像中以两个角点为中心，大小相同的区域提取出来，分别存储在IMG_CHECK1和IMG_CHECK2中。 如果IMG_CHECK1和IMG_CHECK2相等，且它们的大小都不小于25×25，则将当前匹配结果的信息（两个图像的编号以及两个角点的中心坐标）添加到match_all列表中，同时将已匹配的图像从搜索列表中移除。 如果在内层循环的所有迭代中都没有找到与当前角点匹配的图像，则将FAIL_CORNER计数器加一，表示当前角点无法匹配，同时将N_CHANGE计数器加一。 内层循环结束后，会检查FAIL_CORNER的值是否小于等于1，如果是，则跳出外层循环，否则继续下一次循环。这个判断的目的是在不需要再进行匹配的情况下尽早结束循环，以提高代码效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值