前言：

本文内容：页面结构分析、iframe内联框架、初始表单提交

推荐免费HTML5基础讲解视频：【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

页面结构分析

元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

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

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

iframe内联框架

<iframe sr="path" name="mainFrame"></iframe>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
<!--iframe 内联框架
    src：地址
    width： 宽度
    height：高度
    name：框架标识名
-->
<iframe src="https://jokerdig.com" name="one" frameborder="0" width="1000px" height="500px">

</iframe>
<a href="html1.html" target="one">点击跳转</a>

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

初始表单提交

148

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>

<h1>注册</h1>
<!--表单form
    action：表单提交的位置，可以是网站，也可以是处理地址
    method: 提交方式 get/post
        get提交可以在地址栏显示提交的内容 不安全 高效
        post提交地址栏不显示提交的内容 安全 传输大文件

-->
<form method="get" action="html1.html">
<!--    账号-->
    <p>账号：<input type="text" name="login"/></p>
<!--    密码-->
    <p>密码：<input type="password" name="password"/></p>

    <p><input type="submit" value="提交"/><input type="reset" value="取消"/></p>
</form>
</body>
</html>