900字范文 > Web前端开发笔记——第二章 HTML语言第九节框架标签脚本标签

Web前端开发笔记——第二章 HTML语言第九节框架标签脚本标签

时间：2022-12-17 23:08:10

一、框架标签

（一）显示目标页面

<iframe></iframe>标签表示框架标签，使用该标签可以当前窗口中显示更多的页面，其中src属性代表指向网页的URL，name属性表示框架标签的名称。简单的来说，每个HTML文件都是一个框架，且每个框架都是独立的。

<iframe src="URL" name=""></iframe>

例如，在vscode中下列html代码，设定一个框架来访问csdn官网：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><iframe src="" name="csdn"></iframe></body></html>

运行结果如下：

不过有些网站是不允许被嵌套在框架里面的，比如百度，就会出现下面这种情况：

也可以通过a标签使iframe标签在框架里显示目标链接页面，其中目标链接a标签的target属性必须与iframe标签的name属性相同，通过点击访问在框架中显示网页内容如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><iframe name="csdn"></iframe><p><a href="" target="csdn">访问csdn官网</a></p></body></html>

运行结果如下：

当点击“访问csdn官网”后，我们定义的框架就显示出来了csdn的官网：

（二）规定大小的框架

以上例子中的框架显示大小并不可观，我们可以通过其它代码来对显示页面的大小及其它进行设置。

通过width=""和height=""属性即可设置宽度和高度，例如，在vscode中下列html代码，设置框架高度为500，宽度为1000：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><iframe src="" name="csdn" height="500" width="1000"></iframe></body></html>

运行结果如下：

（三）规定边框的框架

一般默认的框架边框大小为0，即没有定义frameborder属性时。可以通过frameborder="1"属性设置边框大小，这个属性在HTML5中已经不支持使用。

例如，在vscode中下列html代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><iframe src="" frameborder="1" name="csdn" height="500" width="1000"></iframe></body></html>

运行结果如下：

二、脚本标签

<script></script>标签用于定义脚本，例如JavaScript，这里不做阐述。该标签可以通过定义src=""属性指向外部的脚本文件，双引号内即外部脚本的URL。<noscript></noscript>标签提供当无法使用脚本时的替代内容，即当浏览器被禁用脚本时，或该浏览器不支持脚本时，替代内容会显示。