页面结构分析和iframe内联框架

最新推荐文章于 2024-04-25 16:20:24 发布

原创最新推荐文章于 2024-04-25 16:20:24 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #html5

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了HTML页面的结构分析，并探讨了Iframe内联框架的使用，包括其在网站中嵌入其他网站的功能，以及一个简单的示例展示。

一、页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标题脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容（不常用）
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助功能

二、简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

效果：
在这里插入图片描述

三、Iframe内联框架

作用：在网站中嵌入另一个网站
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe内联框架
src：地址
width：宽度
height：高度
-->
<iframe src="https://www.hnsoftedu.com" frameborder="0"></iframe>

<!--bilibili-->
<!--<iframe src="//player.bilibili.com/player.html?aid=853635359&bvid=BV1PL4y1c7vM&cid=589797600&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->
</body>
</html>