【html段落框架】HTML中的内联框架及进阶设计

2023-03-25 09:48 33次浏览段落

今天将为大家带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>

function myCat(){

document.getElementById("eg1").innerHTML ="hello!";

}

</script>

</body>

</html>

运行结果：

点击前

点击后

Javascrip可以修改样式，示例：

<!DOCTYPE html>

<html>

<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">JavaScript 可以更改 HTML 元素的样式。</p>

function myFunction() {

document.getElementById("demo"). = "25px";

document.getElementById("demo"). = "red";

document.getElementById("demo"). = "yellow";

}

</script>

</body>

</html>

运行结果：

点击前

点击后

三、HTML文件路径

1、文件路径描述了网站文件夹结构中某个文件的位置。

2、文件路径会在连接外部文件时被用到：

l 网页

l 图像

l 样式表

l JavaScript

3、绝对文件路径是指向一个因特网文件的完整URL，示例：

运行结果：

4、相对路径指向了对于当前页面的文件。

四、HTML响应式设计

1、RWD指的是响应式Web设计（Responsive Web Design）。

2、RWD 能够以可变尺寸传递网页。

3、RWD 对于平板和移动设备是必需的。

创建响应式设计的一个方法，实在急来创建它，示例：

<!DOCTYPE html>

<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>

<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>

<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

</div>

<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>

href=";>

</head>

<body>

<h1>Welcome to the New world</h1>

<p>Resize this responsive page!</p>

</div>

<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>

<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

</div>

<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>

运行结果：

学完这一节对网页的进阶设计内容，是不是觉得对网页设计有了更多的认识呢？

兰斯百科

兰斯百科

【html段落框架】HTML中的内联框架及进阶设计

兰斯百科

兰斯百科

【html段落框架】HTML中的内联框架及进阶设计

相关推荐