哇，你知道吗？在HTML网页设计里面，我们都离不开图片这个小可爱！它能让咱们的页面变得更有趣，让同学们忍不住想要看下去。那么，怎么才能把好看的图片放进HTML文档？这几点小知识，你可别错过，比如怎么把Image插入到超级连接上，怎么处理用CSS创造本地独立服务器响应图，还有怎么用插件把新东西插进HTML里等丰富有趣的细节~
使用img和a<a href='https://www.icz.com/technicalinformation/web/vue2/2024/04/13563.html' title='元素' target='_blank' rel="noopener">元素</a>创建服务器端的分区响应图
一、在超链接里嵌入图像
http://localhost:63342/html_test/public/embeddedContent_Chapter15/otherpage.html?466,39
网页设计里，有时候要在超级链接里面显示图片。这个时候就用到了<img>跟元素一起弄。添加上ismap属性后，就能创建出一种服务器端的分区响应图了，点哪儿就能告诉你哪里被选中了，有点像是个互动游戏。再来说说客户端分区响应图，这款就是可以在不同区域点一下就让浏览器跳转到对应的URL去。至于如何设定这些区域的话，就得借助
元素了，给它设定好一些数值，比如target定的是在哪儿显示URL，media则是针对哪种介质等等。二、创建客户端分区响应图
客户端分区响应图就是一种让我们玩得更嗨皮的互动设计~在HTML里实现这个功能其实不难！只要把 shape 和 coords 的属性设定好，就能画出各种各样形状大小不一的点击区了。比如说，画矩形就要给 coords 四个数；画圆形就用三个数表示圆心和半径好了；要画多边形，最起码也要记住六个整数代表每个角的位置。然后，在图片上添加好这些区域以后，用户一点就能触发相应的操作
三、嵌入另一张HTML文档
除了插图以外，iframe这个东西也挺好用的。它能让你在一个网页里放另外一个网页，还可以调节各种属性。比如说， src就是用来设定要加载的网址啦； srcdoc就像是给内嵌的网页加个标题似的；而且还有 seamless和 sandbox这些选项，可以更精细地调整 iframe的显示效果！
四、通过插件嵌入内容
除了iframe，你还可以用object和embed元素来给浏览器添加插件显示功能比如当你想要网页里显示视频或者其他浏览器不自带的功能，这俩元素就能派上大用场了。你可以用object来建造客户端的分隔图或浏览器的环境，然后根据自己需要设定好它的属性。但得提醒下，别忘了有些浏览器（像Chrome和Safari）可能会有兼容性的小麻烦，用的时候要小心点！
五、嵌入数字表现形式
HTML不仅能搞定图片和文字，连数字也能轻松展现，比如用那个叫做progress的元素来演示任务拆解的进度，还能用meter展现某个区间值的情况，通过设定min、max值就能实现。别忘了还有low、high和perfect三种状态，用来让你对数值有个更清楚的认识。
看完上面的介绍，你应该明白了在HTML里嵌各种各样的东西其实不难，而且这真的能让网页更有趣，更吸引人。举个例子，不管是放个图，加个链接还是表示一些数据，只要用得巧，都能给网页设计变出很多花样来。
评论0