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


相关文章
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
90 9
|
2月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
11天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
6天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
66 17
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
46 6
|
2月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
36 9
|
2月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
2月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
178 3