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> 标签提供当无法使用脚本时的替代内容,即当浏览器被禁用脚本时,或该浏览器不支持脚本时,替代内容会显示。


相关文章
|
9月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
10月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
811 108
|
10月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
812 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
12月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
229 2
|
12月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
339 1
|
12月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1232 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
监控 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
569 20
|
8月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
614 4
|
12月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!