【html段落框架】HTML内嵌框架和高级设计

2023-03-15 23:06 28次浏览教育

今天，为了HTML的内嵌框架和网页高级设计，您可以使用JavaScript为网页设计更多的样式，使用响应性设计设计更好的网页外观。

一、HTML框架——iframe

1、Iframe是网页内可以链接其他网页的元素。

2、Iframe语法为iframearc="URL"/iframe。其中URL指向其他网页

3、Iframe使用height和width属性定义长度和宽度。例如：

运营结果：

在 4、iframe中，可以使用frameborder属性定义是否显示边框，并将属性设置为" 0 "以删除iframe边框。例如：

运营结果：

2、html JavaScript

1、JavaScript是面向web的编程语言，得到了所有web浏览器的支持，是目前使用最广泛的脚本编程语言之一，是web设计和web应用程序必须掌握的基本工具。

2、HTML使用脚本标记定义客户端脚本(JavaScript)。

3、JavaScript的一般用途是图像处理、表单验证和内容的动态更改。

4、JavaScript更改示例：

！DOCTYPE html

Html

头(电影)

Titlejavascript示例/title

/head

菩提

button type=' button ' onclick=' mycat()'单击此处！/button

P id='eg1 '看这里/p

脚本(脚本)

Function myCat(){

Document.getelementbyid ('eg1 ')。innerhtml=' hello！'中选择另一种天花板类型。

}

/脚本

/body

/html

运行结果：

点击前

点击后

JavaScript可以修改样式，如下例所示：

！DOCTYPE html

Html

菩提

H1我的第一段JavaScript/H1

P id='demo'JavaScript可以更改HTML元素的样式。/p

脚本(脚本)

粉丝

ction 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段落框架

1.文章《【html段落框架】HTML内嵌框架和高级设计》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

2.文章《【html段落框架】HTML内嵌框架和高级设计》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

【html段落框架】HTML内嵌框架和高级设计

相关推荐