HTML中的内联框架及进阶设计（html内联框架举例）
ccwgpt 2024-10-21 04:03 34 浏览 0 评论
今天将为大家带HTML的内联框架，以及网页进阶设计，在想对网页做出更进一步的完善时，我们可以使用JavaScript对网页设计出更多的样式以及使用响应式设计来设计出更加出众的网页外观。
一、HTML框架—iframe
1、Iframe是一种可以在网页内联其他网页的元素
2、Iframe语法为：<iframe arc = “URL”></iframe>（其中URL指向不同的网页）
3、Iframe以height和width属性来定义长度和宽度，示例：
运行结果：
4、在iframe中可以用frameborder属性来定义是否显示边框，设置属性为“0”的时候移除iframe的边框，示例：
运行结果：
二、HTML javaScript
1、JavaScript是面向Web的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和Web应用必须掌握的基本工具。
2、在HTML中是用<script>标签来定义客户端脚本（JavaScript）。
3、JavaScript的常见用途是图像处理、表单验证和内容的动态更改。
4、JavaScript更改内容的示例：
<!DOCTYPE html>
<html>
<head>
<title>javascript示例</title>
</head>
<body>
<button type="button" onclick="myCat()">点击这里！</button>
<p id="eg1">看这里</p>
<script>
function myCat(){
document.getElementById("eg1").innerHTML ="hello!";
}
</script>
</body>
</html>
运行结果：
Javascrip可以修改样式，示例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 可以更改 HTML 元素的样式。</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">点击我！</button>
</body>
</html>
运行结果：
三、HTML文件路径
1、文件路径描述了网站文件夹结构中某个文件的位置。
2、文件路径会在连接外部文件时被用到：
l 网页
l 图像
l 样式表
l JavaScript
3、绝对文件路径是指向一个因特网文件的完整URL，示例：
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
运行结果：
4、相对路径指向了对于当前页面的文件。
四、HTML响应式设计
1、RWD指的是响应式Web设计（Responsive Web Design）。
2、RWD 能够以可变尺寸传递网页。
3、RWD 对于平板和移动设备是必需的。
创建响应式设计的一个方法，实在急来创建它，示例：
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to the New world</h1>
<h2>Resize this responsive page!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
运行结果：
4、另一个创建响应式设计的方法，是使用现成的 CSS 框架—Bootstrap。
5、Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
6、Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机，示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Welcome to the New world</h1>
<p>Resize this responsive page!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-md-4">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="col-md-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
运行结果：
学完这一节对网页的进阶设计内容，是不是觉得对网页设计有了更多的认识呢？
相关推荐
- 丨公司丨公司大架构整理汇总
-
注：本文转自团队成员原创作品，特此鸣谢（公号：法海图鉴）今日话题公司大架构整理背景介绍经过前几期话题对各种企业类型的介绍，想必大家已经有了初步认识。之后我将带着大家开启对公司的深入了解。本期...
- 图解物理--八年级物理下册最全知识框架导图
-
第七章力1力2弹力3重力第八章运动和力1牛顿第一定律2二力平衡3摩擦力第九章压强1压强2液体压强3大气压强4流体压强与流速的关系第十章浮力1浮力2阿基米德原理3物体的浮沉条件及应用第十一章功...
- 八年级上册生物，思维导图，期末高分必备资料，家长收藏
-
这是八年级上册生物的思维导图，孩子在背诵知识点的时候，可以看一下知识点在导图中的位置，形成对知识点整体的把握，有助于学生拿高分，特别是图片中带红色星星的部分，更是要注意背诵，是重点内容。家长可以把图片...
- 2019政府工作报告精华，这张思维导图里全都有
-
每经记者：李可愚每经编辑：陈星每日经济新闻
- 图解薪酬体系结构设计
-
...
- 司考复习独家总结!一张图总结行政法知识结构体系
-
作为三大实体法之一，行政法的分值在60分左右，行政法在司法考试中一直比较平稳常规，没有偏题怪题，还是比较容易得分的。小编要提醒大家，在3月之前要把三大实体法学习一遍。下图是厚大在线360导学师小周总结...
- 实用干货!高中物理框架图，让零碎知识“串联”起来
-
高中物理学习一定要抓好逻辑结构大框架！了解整个知识框架体系后，更易抓住骨干知识，干掉重难知识点~今天给大家分享高中物理的框架图同学们赶紧收藏起来吧！力学知识结构图光学知识结构图热学、原子物理知识结构图...
- 254m超高层办公楼型钢砼框架-核心筒结构图
-
高度类别：超高层建筑钢筋混凝土结构：框架,框架核心筒钢结构：钢框架建筑功能：办公包含：办公楼57层（-3层）254.150m钻孔灌注桩桩+筏板型钢混凝土框架-钢筋混凝土核心筒西裙房2层（-...
- 砖混结构与框架结构，究竟有何区别?千万别被坑!
-
现在买房装修的人最怕啥？不是价格高，而是房子不安全！两种主流建筑结构，砖混靠墙，框架靠柱子，选错了隔墙都可能要命。简单说，砖混便宜但别碰高层，框架贵点但能保命。砖混那些承重墙根本不能拆，想砸墙改个开放...
- 大师一百——高中化学必考:《元素周期律》考点框架图
-
今天大师给大家带来的是高中化学的《元素周期律》考点框架图，高中的同学必须牢记于心，这种重要的考点，考试是一定会考的！化学大师...
- 需求分析框架图
-
需求分析框架图
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)