肉渣教程

HTML 框架

上一节 下一节

HTML 框架

HTML框架(HTML Iframes)就是用来在网页中显示另外一个网页。HTML框架是一种HTML元素,另外那个网页就会显示在该元素内。

框架的基础使用

HTML框架元素是用<iframe>标签来定义的,其src属性就是定义该框架元素显示哪个网页,把该网页的url地址赋给src即可。

<iframe src="框架内网页的url地址"></iframe>

运行一下

设置框架的宽度和高度

其实嘛,没那么玄乎,跟其他的img元素、div元素都差不多的,可以用相同的方法设置该元素显示的宽度、高度。

<iframe src="框架内网页的url地址" width="100%" height="250"></iframe>

运行一下

当然也可以用style属性的方式来定义元素宽度和长度。

<iframe src="框架内网页的url地址" style="width:100%;height:250px;"></iframe>

运行一下

设置框架的边框 border

一般来说为了追求美观,都会对框架的边框进行设置,可以将边框粗细设置为0px

<iframe src="框架内网页的url地址" style="border:0px;"></iframe>

也可以将边框设置成不是那么明显的灰色:

<iframe src="框架内网页的url地址" style="border:1px solid LightGray;"></iframe>

把HTML框架当做超链接的target

听起来有点费解,讲白一点,就是点击该超链接时,当前页面不会做任何跳转,而是该超链接元素target属性所绑定的框架元素的页面元素进行页面跳转。target属性绑定的是目标框架的name属性。

<iframe src="https://zhuanfou.com" name="iframe_name" 
style="width:100%;height:250px;border:1px solid LightGray;">
</iframe>

<a href="https://sand-box.cn" target="iframe_name">
戳朕,上面的这个框架就会跳转到专否沙盒首页
</a>

运行一下


HTML 框架

上一节 下一节