您的位置: 首页 > 文章 > 【php基础班】第4天 map图像映射、frame框架、内嵌框架 </a> </div> <div class="entry"> <div class="entry-head"> <h1 class="entry-title"> 【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架 </h1> <div class="entry-info"> <span> 分类: <a href="//" target="_blank"> 文章 </a> </span> <span class="dot">•</span> <span> 2025-03-26 18:31:21 </span> </div> </div> <div class="entry-content clearfix"> <p><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">第一节 <map>图像映射</span></strong></p> <p><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">1.图像映射</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">图像映射是指在图像中的指定区域添加超链接，这些超链接又称为热点。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">图像映射通过<map></map>标记和<area></area>标记进行定义。<area>定义一个热点的具体位置和目标链接，而<map></map>将所有热点联合为一个整体并命名，该名称指定给<img>标记的usemap属性，将图像和热点连接起来。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><img src=“1.jpg” usemap=“#Map” /></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><map id=“Map” name=“Map”></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"> <area shape=“热点形状” coords=“坐标” href=“链接” alt=“替代文字” /></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"></map></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><strong>2. <area>属性</strong></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">shape：热点区域的形状，可选值：rect(矩形)、circle(圆形)、polygon(多边形)</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">coords：热点区域的位置坐标，根据shape的不同而不同。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">对于rect，坐标为（x1,y1,x2,y2），（x1,y1）矩形左上角，(x2,y2)右下角</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">对于circle，坐标为(x,y,r)，(x,y)圆心坐标，r为半径</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">对于polygon，坐为(x1,y1,x2,y2,…xn,yn)，(xn,yn)为第n个顶点坐标</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">href：热点链接的目标地址</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">alt：替代文本</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><img src=“1.jpg” usemap=“#Map” /></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><map id=“Map” name=“Map”></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"> <area shape=“rect” coords=“2,2,92,40” href=“#” alt=“” /></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"> <area shape=“rect” coords=“60,60,92,98” href=“#” alt=“” /></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"></map></span></p> <p><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">第二节 框架</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><strong>1. 什么是框架</strong></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">框架提供将一个浏览器窗口划分为多个区域，每个区域都可以显示不同HTML文档的方法。使用框架的最常见情况就是：一个框架显示导航控件的文档，而另一个框架显示含有内容的文档。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">框架集(frameset)是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容；框架集文件只是向浏览器提供应如何显示一组框架，以及在这些框架中应显示哪些文档的有关信息。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">框架(frame)是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档（每个框架中显示一个独立的HTML文档）。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><strong>2. <frameset>标记属性</strong></span></p> <p><strong><span style="font-family:'Microsoft YaHei';font-size:14px;"><img onerror="this.src='/statics/code456/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY3My9iYmVjMTBjYjlkZWRmYzg1MDc1YTUxZDFmMTNiMmIxMS5wbmc=" alt="【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架" title="【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架"><br></span></strong></p> <p><strong><span style="font-family:'Microsoft YaHei';font-size:14px;"><img onerror="this.src='/statics/code456/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM3Mi9jY2RiOTk4ODU5OGMxMTYyMzA4ZDVlMmNjMTc2Yzk1Yy5wbmc=" alt="【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架" title="【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架"><br></span></strong></p> <p></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">3.框架页面结构</span></strong></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"><html></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"><head></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <title>网站后台管理系统</title></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <meta http-equiv=“content-type” content=“text/html;charset=utf-8”></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"></head></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"><frameset rows=“80,*” cols=“*” frameborder=“0” border=“0” ></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <frame src=“” name=“topMain” /></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <frameset cols=“80,*” frameborder=“0” border=“0” framespcing=“0”></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <frame src=“left.html” name=“leftMain” noresize=“noresize” /></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <frame src=“main.html” name=“mainFrame” id=“mainFrame” /></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> </frameset></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <noframes>你的浏览器不支持框架！</noframes></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"></frameset></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"></html></span></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">4.注意事项</span></strong></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">FrameSet注意事项</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">在使用了框架集(Frameset)的HTML页面中，body标记被frameset取代。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">Frameset用于定义框架结构，至于框架中具体显示什么页面，则由其子元素frame设定。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">Frameset的子元素noframes用来指定浏览器不支持框架页时显示的信息</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">Frameset的标签内容中还可以有frameset（框架嵌套）</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">Frameset为W3C非推荐元素，仅可在Frameset DTD的情况下使用</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">Frame注意事项</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">frame元素用来定义单个框架的显示内容与显示方式</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">Frame为单边标记，因此用“/”结束。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">Frame元素为Frameset的子元素。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">frame为W3C非推荐元素，仅可在frameset DTD的情况下使用</span></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">5.<noframes></span></strong></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;">概念：提供给不支持框架的浏览器使用</span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;">语法：<noframes>不支持框架内容</noframes></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"><frameset cols=“150,*”><br> <frame src=“navi.html”noresize=“noresize” /></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <frame src=“main.html” name=“main”></span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> <noframes>你的浏览器不支持框架！</noframes><br> </frameset></span></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">6.框架的优点和缺点</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">使用框架具有以下优点</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（1）增强网页导航功能；</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（2）访问者的浏览器不需要为每个页面重新加载与导航相关的图形；</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（3）每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">使用框架具有以下缺点</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（1）很难实现不同框架中各元素的精确图形对齐；</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（2）对导航进行测试可能很耗时间；</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（3）老的浏览器不支持框架；</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（4）整个浏览空间变小，让人感觉缩手缩脚；</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">（5）使用框架后，容易在每个框架中产生滚动条，给浏览者造成不便。</span></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">第三节 <iframe>内嵌框架</span></strong></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">1.基本概念及语法</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">概念：Iframe元素会创建包含另外一个文档的内联框架（即行内框架）。</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">语法：</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"><iframename=“” src=“URL地址” width=“宽度” height=“高度”></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">无法显示时的文本内容</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;"></iframe></span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">说明</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">iframe用来在文档中嵌入一个行内框架</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">iframe为body的子元素，因此iframe必须放置于body元素内</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">iframe框架可放置在网页中的任何位置</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">对于不支持iframe的浏览器，可以设置替代内容</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">iframe为W3C非推荐元素，仅可在 Transitional DTD的情况下使用</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">终止标签不可省略</span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"><strong>2.<iframe>属性</strong></span></p> <span style="font-family:'Microsoft YaHei';font-size:14px;"><strong><img onerror="this.src='/statics/code456/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM2Ny83Njg2MDcxMjAzNTVlMGMzMmE1ZTk4NzhiYjU0NTM2Zi5wbmc=" alt="【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架" title="【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架"></strong><br></span> <p></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">第四节 网站构成</span></strong></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">1.网站前台</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">就是展现给用户看</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">与用户互动（在线留言）</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">查询产品</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">在线订购</span></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">2.网站后台</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">添加内容</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">编辑内容</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">删除内容</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">回复内容</span></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">处理订单</span></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">3.网站前台模板</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">首页模板、栏目页模板、内容页模板</span></p> <p style="font-weight:bold;"><strong><span style="font-family:'Microsoft YaHei';font-size:14px;">4.网站后台</span></strong></p> <p><span style="font-family:'Microsoft YaHei';font-size:14px;">后台的主要操作、增加信息、修改信息、删除信息、查询信息</span></p> <p style="font-weight:bold;"><span style="font-family:'Microsoft YaHei';font-size:14px;"> </span></p> <br> </div> <div class="entry-footer"> <h3 class="entry-related-title"> 相关推荐 </h3> <ul class="entry-related clearfix"> <li> <a href="/article/3850429.html" title="【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架" target="_blank"> 【php基础班】第4天 map图像映射、frame框架、<iframe>内嵌框架 </a> </li> <li> <a href="/article/3850428.html" title="Altium Desginer原理图导入PCB前统一更改字体" target="_blank"> Altium Desginer原理图导入PCB前统一更改字体 </a> </li> <li> <a href="/article/3850430.html" title="使用lua_next()遍历表" target="_blank"> 使用lua_next()遍历表 </a> </li> </ul> </div> </div> </article> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-copy"> <div class="menu"> <ul> <a href="/mianze.html" target="_blank" title="网站免责声明"> 网站免责声明 </a> <a href="/sitemap.xml" title="网站地图"> 网站地图 </a> <a href="/yuanmazhijia/" title="最新文章"> 最新文章 </a> <a href="/yinsi/" title="用户隐私"> 用户隐私 </a> <a href="/banquan/" title="版权申明"> 版权申明 </a> </ul> </div> <div class="copyright"> 本站所有数据收集于网络,如果侵犯到您的权益，请联系网站进行下架处理。 </a> <span title="" class="email-box"></span> </p> </div> <div class="copyright"> <p> Copyright © 2018-2021 Powered By <a href="/" title="源码之家" target="_blank"> 源码之家 </a> 备案号： <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="nofollow"> 粤ICP备20058927号 </a> </p> </div> </div> </div> </div> </footer> <div class="action" style="top:80%;"> <div class="a-box gotop" id="j-top" style="display: none;"></div> </div> <script type="text/javascript"> var _wpcom_js = {"ajaxurl":"","slide_speed":"5000"}; </script> <script type="text/javascript" src="/statics/code456/js/main.js?v=1"></script> </body> </html>
