HTML5笔记：iframe与表格

最新推荐文章于 2024-07-05 14:41:46 发布

dilidili233

最新推荐文章于 2024-07-05 14:41:46 发布

阅读量123

点赞数 2

文章标签： html5 笔记前端

本文链接：https://blog.csdn.net/dilidili233/article/details/133828270

版权

1.iframe

The LearnMySQL website provides the learning content on the courses that are mapped with different online certification exams of MySQL. The following figure displays a Web page from the website.

LearnMySQL 网站提供了与 MySQL 的不同在线认证考试映射的课程的学习内容。下图显示了来自网站 的网页。

Although the page in the preceding figure looks similar to an ordinary Web page, it comprises three separate Web pages. These Web pages are displayed in the same browser window, which makes it look like a single page. This is made possible by using the concept of frames. A frame is a rectangular region in a browser window inside which a Web page can be displayed.

尽管上图中的页面看起来类似于普通网页，但它包含三个单独的网页。这些网页显示在同一个浏览

器窗口中，这使得它看起来像一个页面。这是通过使用框架的概念实现的。框架是浏览器窗口中的

矩形区域，可在其中显示网页。

On the Web page of LearnMySQL website, the browser window is divided into three rectangular regions by using three frames, as shown in the following figure.

在 LearnMySQL 网站的网页上，浏览器窗口使用三个框架划分为三个矩形区域，如下图所示。

In the preceding figure, the first frame that is named as HeaderFrame, displays the name of the website. The second frame that is named as NavigationFrame, contains the links to the various MySQL courses. The third frame that is named as ContentFrame, displays the Web page corresponding to the link that the user clicks in the navigational links section.

在上图中，名为 HeaderFrame 的第一个框架显示网站的名称。第二个框架被命名为 NavigationFrame ，包含指向各种 MySQL 课程的链接。名为 ContentFrame 的第三个框架显示与用 户在导航链接部分中单击的链接对应的网页。

Creating Web Pages Using Frames使用框架创建页面

In the LearnMySQL website, the table of contents is displayed in the left pane. When a user clicks a link, the corresponding course is displayed in the right pane. This functionality can be achieved by using frames.

在 LearnMySQL 网站中，目录显示在左窗格中。当用户单击链接时，相应的课程将显示在右侧窗

格中。此功能可以通过使用框架来实现。

Before creating a Web page that has frames, you need to decide the Web pages you want to display in the frames and the structural appearance of these Web pages in the resulting Web page. Then, you must create a Web page that is displayed in each frame. Further, you need to organize these Web pages by putting them together inside a single browser window by using frames that can be implemented by using the <IFRAME> tag.

在创建具有框架的网页之前，需要确定要在框架中显示的网页以及这些网页在生成的网页中的结构外 观。然后，您必须创建一个显示在每个框架中的网页。此外，您需要通过使用可以使用标记实现的框架 将这些网页放在单个浏览器窗口中来组织这些网页 <IFRAME> 。

Exploring the <IFRAME> Tag 探索<IFRAME>标签

The HTML <IFRAME> tag is used to specify an inline frame. It allows you to divide a Web page into sections or frames. Each section can be used to display an individual Web page. Therefore, the <IFRAME> tag is used to embed an HTML Web page within another Web page. The embedded Web page is said to be contained within the other Web page, which is known as the containing page. The following attributes can be used with the <IFRAME> tag:

HTML <IFRAME> 标记用于指定内联框架。它允许您将网页划分为部分或框架。每个部分都可用

于显示单个网页。因此， <IFRAME> 该标记用于在另一个网页中嵌入一个 HTML 网页。所述嵌入

的网页被称为包含在另一个网页中，该网页称为包含页。以下属性可用于 <IFRAME> 标记：

◼ src : Is used to specify the location or the URL of the Web page to be embedded inside the frame.

src：用于指定要嵌入在框架中的网页的位置或 URL

◼ name : Is used to assign a name to the frame.

name:用于为框架指定名称

◼ seamless : Is a boolean attribute, which instructs the browser to display the frame as a part of the containing Web page. If this attribute is used, the frame is displayed without scroll bars and border.

Seamless: 是一个布尔属性，它指示浏览器将框架显示为包含网页的一部分。如果使用此属

性，则显示的框架不带滚动条和边框

◼ srcdoc : Is used to specify an HTML code that defines the content to be displayed inside the frame.

srcdoc : 用于指定定义要在框架内显示的内容的 HTML 代码

◼ height : Is used to set the height of the frame.

height : 用于设置框架的高度

◼ width : Is used to set the width of the frame

width : 用于设置框架的宽度

As per the preceding figure, consider the following code to divide the Web page in three frames in the home.html page of the LearnMySQL website:

按照上图，考虑以下代码，将网页划分为三个框架 .html 在 LearnMySQL 网站的主页页面中：

<!DOCTYPE HTML>
<HTML>
    <BODY>
        <IFRAME name="HeaderFrame" width="91%" height="100" ></IFRAME>
        <IFRAME name="NavigationFrame" width="25%" height="500"></IFRAME>
        <IFRAME name="ContentFrame" width="65%" height="500" ></IFRAME>
    </BODY>
</HTML>

In the preceding code, the <IFRAME> tag is used to divide the Web page, home.html, into frames of different width and height. Now, to make the Web pages visible inside the frames, you need to create, and then embed these Web pages inside the frames.

在前面的代码中， <IFRAME> 标签用于将网页 home.html 划分为不同宽度和高度的框架。现在，

若要使网页在框架中可见，您需要创建这些网页，然后将其嵌入到框架中。

For example, the navigational links for the website are created inside a file named nav.html by using the following code:

在前面的代码中， <IFRAME> 标签用于将网页 home.html 划分为不同宽度和高度的框架。现

在，若要使网页在框架中可见，您需要创建这些网页，然后将其嵌入到框架中。

<!DOCTYPE HTML>
<HTML>
    <HEAD>
        <STYLE>
            body{
                background-color: #00C0F3;
            }
            ul{ 
                margin: 0;
                padding: 0;
                list-style: none;// remove bullets from the unordered list
                width: 350px;
            }
            ul li a {
                display: block;
                text-decoration: none;
                color: Black;
                background: #B3ECFC;
                padding: 5px;
                border: 1px solid #ccc;
                border-bottom: 0;
            }
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
                width: 320px;
            }
            li:hover ul { 
            display: block; 
            }
            a:hover
            {
                background-color:#5E9DC9;
            }
        </STYLE>
    </HEAD>
    <BODY>
        <UL>
            <LI><A href="Courses.html">Courses</A></LI>
            <LI><A href="Book1.html">MySQL5 Database Administrator Certified
Professional Exam Part- I</A></LI>
            <LI><A href="Book2.html">MySQL5 Developer Certified Professional Exam Part I</A></LI>
            <LI><A href="Book3.html">MySQL5 Developer Certified Professional Exam Part II</A></LI>
        </UL>
    </BODY>
</HTML>

Similarly, other Web pages can also be created by using the HTML code.

同样，也可以使用 HTML 代码创建其他网页。

You need to replace the code in the home.html Web page with the following code to embed the files inside the desired frames:

您需要将主页中的代码替换为以下代码 .html 以将文件嵌入到所需的框架中：

<!DOCTYPE HTML>
<HTML>
    <BODY>
        <IFRAME srcdoc= "<CENTER><H1><B>Learn MySQL</B></H1></CENTER> "name="HeaderFrame"width="91%" height="100" ></IFRAME>
        <IFRAME src="nav.html" name="NavigationFrame" width="25%" height="500">            </IFRAME>
        <IFRAME name="ContentFrame" width="65%" height="500" ></IFRAME>
    </BODY>
</HTML>

In the preceding code, the file, header.html, is embedded inside the frame, HeaderFrame. Similarly, thefile, nav.html, is embedded in the frame named NavigationFrame. This is done by providing the name ofthe files as a value for the src attribute of the corresponding <IFRAME> tags used to create theframes.However, the content frame is not displaying anything as no HTML page has been specified for it.

在前面的代码中，文件 header.html 嵌入在框架 HeaderFrame 中。同样，文件 nav.html 嵌入在名为 NavigationFrame 的框架中。这是通过提供文件名作为用于创建帧的相应标记的 src 属性的值来完成<IFRAME>的。但是，内容框架不显示任何内容，因为没有为其指定 HTML 页面。

The home.html Web page of the LearnMySQL website is displayed, as shown in the following figure. 将显示 LearnMySQL 网站的首页.html网页，如下图所示。

In the preceding figure, the navigational links are displayed inside the frame, NavigationFrame . However, whenever a link is clicked, the corresponding Web page is displayed in a new window. Instead, you want to display these pages inside the frame, ContentFrame . This can be implemented by specifying the target frame for the links. You can specify a target frame for the links by using the target attribute of the <A> tag.

在上图中，导航链接显示在框架 NavigationFrame 内。但是，每当单击链接时，相应的网页都

会显示在新窗口中。相反，您希望在框架 ContentFrame 中显示这些页面。这可以通过指定链

接的目标帧来实现。您可以使用标签的目标属性为链接指定目标框架 <A> 。

The target attribute is used to specify the name of the frame where the HTML document should open. Consider the following code snippet to apply the target attribute on the links created in nav.html :

target 属性用于指定 HTML 文档应该打开的框架的名称。考虑以下代码片段，将 target 属性应用于在 nav.html 中创建的链接：

<!DOCTYPE HTML>
<HTML>
    <BODY>
        <UL>
            <LI><A href="Courses.html" target="ContentFrame">Courses</A></LI>
            <LI><A href="Book1.html" target="ContentFrame">MySQL5 Database Administrator Certified Professional Exam Part- I</A></LI>
            <LI><A href="Book2.html" target="ContentFrame">MySQL5 Developer Certified
            Professional Exam Part- I</A></LI>
            <LI><A href="Book3.html" target="ContentFrame">MySQL5 Developer Certified
            Professional Exam Part- II</A></LI>
        </UL>
    </BODY>
</HTML>

In the preceding code snippet, the target attribute is used to specify ContentFrame as a target frame for the links. On clicking a link, the corresponding Web page is displayed inside the frame, ContentFrame, as shown in the following figure.

在前面的代码片段中， target 属性用于指定 ContentFrame 作为链接的目标帧。单击链接后，相应的网页 将显示在框架 ContentFrame 内，如下图所示：

Styling Frames框架样式

Frames can also be enhanced for a better look and feel. For example, the border of a particular thickness or appropriate margins can be applied on the frames to improve its appearance. This can be implemented by using the styling rules of CSS.

框架也可以进行增强，以获得更好的外观和感觉。例如，可以在框架上应用特定厚度或适当边距的边 界，以改善其外观。这可以通过使用 CSS 的样式规则来实现。

The following table lists the various CSS properties that can be used for styling the frames.

下表列出了可用于设置框架样式的各种 CSS 属性。

Consider the following code snippet for applying styles on the frames created in the file, home.html :

请考虑以下代码片段，用于在文件 home 中创建的框架上应用样式 .html ：

<!DOCTYPE HTML>
<HTML>
   <HEAD>
        <STYLE>
            iframe{
                border :5px solid black;
                margin-left :1px;
                padding: 1px;
            }
        </STYLE>
    </HEAD>
<--下方代码省略-->

</HTML>The preceding code snippet applies a black color border to the frames with the left margin of 1px. The output of the preceding code snippet is displayed in the following figure.

前面的代码片段将黑色边框应用于左边距为 1px 的帧。上述代码片段的输出如下图所示。