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

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

一、框架标签


(一)显示目标页面


<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="https://www.csdn.net" name="csdn"></iframe>
</body>
</html>

运行结果如下:

1667058451441.jpg

不过有些网站是不允许被嵌套在框架里面的,比如百度https://www.baidu.com,就会出现下面这种情况:

1667058460455.jpg

也可以通过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="https://blog.csdn.net" target="csdn">访问csdn官网</a></p>
</body>
</html>

运行结果如下:

1667058494280.jpg

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

1667058503753.jpg


(二)规定大小的框架


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

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

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

运行结果如下:

1667058533323.jpg


(三)规定边框的框架


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

例如,在vscode中下列html代码:

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

运行结果如下:

1667058570545.jpg


二、脚本标签


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


相关文章
|
3月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
188 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
7月前
|
监控 Linux PHP
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
189 20
|
7月前
|
监控 关系型数据库 MySQL
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
155 0
|
10月前
HTML 框架2
iframe标签用于在当前页面中嵌入另一个HTML页面。通过设置frameborder属性为&quot;0&quot;,可以移除iframe边框。iframe的src属性用于指定要嵌入的页面URL。例如,使用`&lt;iframe src=&quot;https://www.runoob.com&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;`可以无边框地显示RUNOOB.COM页面。
|
10月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
203 6
|
10月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
127 5
|
10月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
995 1
|
10月前
|
缓存 前端开发 中间件
go语言中Web框架
【10月更文挑战第22天】
154 4
|
10月前
HTML 框架3
iframe 是一种在网页中嵌入另一个 HTML 页面的技术。通过设置 iframe 的属性,可以显示指定的目标链接页面。例如,可以使用 iframe 嵌入 RUNOOB.COM 网站。HTML 中的 `&lt;iframe&gt;` 标签用于定义内联框架。

热门文章

最新文章