0009 前端 Html 08 内嵌框架 网页里 显示网页 视口 手机显示 缩小的网页

最新推荐文章于 2022-03-04 17:57:38 发布
最新推荐文章于 2022-03-04 17:57:38 发布
阅读量220 收藏
点赞数
分类专栏： 前端 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45964342/article/details/103706965
版权
本文介绍了HTML5中的内嵌框架（iframe）的使用，如何在网页中开辟区域显示其他网页内容，以及如何通过设置视口（viewport）实现手机端网页适配，避免内容过小的问题。同时讲解了内嵌框架与超链接结合的方式，以及视口meta标签的配置方法。
摘要由CSDN通过智能技术生成

以下为学习笔记，用来备忘、交流

工具：Sublime Text 3
渲染：谷歌浏览器

内嵌框架

内嵌框架就是在网页里开辟一片地方再显示一个网页；或者一个网页就是几个小网页拼成的，比如一个网页可以和一个Word文档一样由页眉页脚和中间内容组成，好处是如果有好多网页，内容不同但页眉一样，需要修改页眉只需要改一个文件就可以了。

<iframe src="http://www.baidu.com" frameborder="0" scrolling="no" width="900" height="500"></iframe>

src

最低0.47元/天 解锁文章
马上有的进化
关注
专栏目录
HTML5响应式网页设计笔记
yinghanhanhan的博客
11-23 1444
1.1分类导航或菜单等场合1.2图文混编场合1.3图文布局或显示数据1.4布局表单。
html制作手机预览效果,webstorm实现手机预览页面
weixin_30095833的博客
06-03 2119
效果：在webstorm中开发页面，复制该页面在电脑中的浏览网址，发给手机，在手机上点击链接，可以直接访问本地开发的页面。并且，电脑上修改后保存，手机上刷新即可看到效果。步骤：1、webstorm菜单栏，点击 File ——> settings... ，选择 Debugger，然后按下图红框里的配置。2、选择 Deployment，按照下图配置。3、刚创建的 myTest 的第一个菜单 ...
H5内嵌在IOS的Webview中适配刘海屏CSS解决方案
jiangjialuan2的博客
07-13 2145
摘要 首先我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，在各种手机浏览器中打开都没问题。一切都比较完美。 环境 部分安卓机webview内嵌h5页面 编辑工具HBuild X 使用方法 function setPX(){ const html = document.getElementsByTagName(‘html’)[0]; const realFs = parseFloat(window.getComputedStyle(html).fontS
手机网站建设使用长页面的优势解析！
Hurt5的博客
04-17 539
手机小小屏幕就承载许多重要东西，在咱们浏览APP资讯和移动站点中，许多内容都存在下滑屏幕的形式，这都是长翻滚网页带来的优点，让咱们看到所需要的信息和内容完美的呈现出来。长翻滚网页由于存在许多优势，让许多网页规划信赖。 长翻滚网页存在的优势： 1、网站导航更加精简化，这样做出来的导航更符合人性化特点。 2、更加合适移动设备，跟着屏幕越小，相同内容在PC端和移动端呈现出相反的作用，移动端展示出来内容就...
手机自动化---内嵌网页或 WebView的测试
weixin_44452592的博客
09-27 2133
什么是WebView 1、混合（Hybrid）应用 一部分是原生界面和代码，而另外一部分是内嵌网页，比如微信、支付宝。内嵌了一个浏览器内核，由浏览器内核实现的。 2、安卓应用中的内嵌的展示网页内容的模块，我们称为WebView 3、需要开发人员修改代码。APP修改编译 黄色高亮部分，意思是打开调试，支持自动化调试，生产环境都是关闭的。 appium自动化webView （1）appium中把所有...
CSS写一个手机
杨青青个人博客（青青本人）
03-04 1640
手机外形上来说就是长方形，然后加上圆角边框，如果是简单的平面图形，几分钟就可以用html标签和css写一个手机模型。但如果有高光，菱角等让手机展示的更逼真，可以用到css背景渐变属性。
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
前端非框架类知识点汇总
weixin_46044936的博客
07-26 2512
html单词库 <link rel="stylesheet" href="css文件路径">css引入 <iframe src="danghang.html" width="100%" height="310px" frameborder="0"></iframe> 图片标签： img src="" title="" alt="" src属性 是指图像文件路径 alt属性 是在图片加载不出来时替换成文本 title属性 是在鼠标悬停的时候显示 srcset属性 是在不
前端基础CSS+html篇 2w字吐血总结
chengxuyuanlee的博客
12-30 1992
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
如何去掉iframe内嵌页面头部/底部（iframe取部分网页）
热门推荐
37度2
05-23 1万+
请看如下代码 红色部分就是你需要加进去的  style="margin-top:-150px;width:950px;display:block;" frameborder="0" marginheight="0" marginwidth="0" border="0" id="alimamaifrm" name="alimamaifrm" scrolling="no" height="200
chrome 内嵌框架
iteye_10583的博客
08-22 554
--适用于 Windows 7/Vista/XP SP2 或更高版本系统上的 Internet Explorer 6、7、8 和 9的chrome内嵌框架 [code="html"][/code]
1.3（1） 框架——内嵌框架
wqh101121的博客
06-13 786
内嵌框架——位于body内 （1）作用：用于在网页中嵌入一个网页并让它在网页中显示。 （2）标签： <iframe src="URL"></iframe> URL指定独立网页的路径。 （3）属性： src——指向目标页面。 name——内嵌框架自定义名称，超链接跳转展现位置。 frameborder——设置边框宽度。 ...
为啥不建议写内联样式？
jijunqing321的博客
06-01 2781
最近有个小问题，就是在写页面的时候要尽量避免用内联样式，那么为啥？可能是从开始学习的时候就避免写内联，觉得不美观，js也不便操作。 然后，想了想会不会是因为css会阻塞dom树的渲染呢？ 查完以后，发现dom和css是同时进行加载，然后组成dom树的渲染，就是说，如果css没加载完，dom树肯定也是不能被渲染的。 然后，由于js是要操作dom和css，所以但凡这俩有一个没加载完，都会影响js的操作，也就是会阻塞js。 综上，可以总结出内联样式（style）与css样式的优缺点： css样式： 优点
嵌入iframe网页框架等比缩放代码
weixin_33872566的博客
11-12 2961
今天有人问这个问题，意思是想实现站外的视频播放器进行缩放，普通网页和视频网页方法一样，自己也研究了下，找到了解决方法，下面由一叶扁舟给大家分享一下 代码很简单就加了一个style="zoom:50%" 这样就可以实现等比缩放 完整代码如下 1 <iframesrc="http://www.mlwl.cc"style=...
App中显示html网页
@steveyg
07-27 4542
在如今的移动开发中，越来越多的web元素加入到了app里面，hybrid app能够综合native app 和 web app的优点，可以通过webView实现 htmllayout.xml： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_wid
axure RP文件如何找回_Axure教程：获取页面尺寸、内联框架自适应大小
weixin_39673704的博客
11-20 414
编辑导语：如何使用Axure去获取页面尺寸，并且使内联框架自适应大小呢？本文作者通过实际操作，进行了记录总结，希望看后对你有所帮助。今天要演示的东西其实很简单，一两分钟就能做完，主要是用来弥补Axure IDE提供的交互功能中的不足，导致一些想法没办法很好地实现。其实国外有大神(De Jongh)做了一个能在Axure发布框架内跑起来的Javascript拓展，这是地址：http://dejong...
HTML入门之内嵌框架
weixin_42892129的博客
02-16 1069
一、iframe标签 在HTML中，使用iframe标签来实现一个内嵌框架即在当前页面再嵌入另外一个网页。 语法： <iframe src="链接地址" width="数值" height="数值"></iframe> 其中src用于定义嵌入页面链接地址，是必选属性，而width和height分别用于定义嵌入页面的宽度和高度，是可选属性。 使用多个iframe标签可在当前页面嵌入多个网页。 如以下代码： <iframe src="http://www.baidu.com" wi
响应式手机网页会员中心前端代码源码
9. 前端工具和框架：在开发响应式网页的过程中，前端开发者可能会用到各种工具和框架来加快开发速度和提高代码质量。这些工具可能包括代码编辑器、版本控制系统（如Git）、前端构建工具（如Webpack或Gulp）以及前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值