HTML学习（四）——页面结构分析，内联框架，文本框，密码框，单选框，多选框，按钮

最新推荐文章于 2022-09-29 20:58:25 发布

笔锋Sharpen

最新推荐文章于 2022-09-29 20:58:25 发布

阅读量302

点赞数

本文链接：https://blog.csdn.net/weixin_52725999/article/details/113875511

版权

页面结构分析

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

<!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 src="path" name="mainFrame">
    
</iframe>

src:引用页面地址

name：框架标识名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe内联框架
src:地址
w-h：高度宽度
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="我的第一个网页.html" target="hello">点击跳转</a>

</body>
</html>

表单语法

method:规定如何发送表单数据常用值:get/post

action:表示向何处发送表单数据

<form method="post" action="result.html">
    <p>
        名字：<input name="name" type="text">
    </p>
    <p>
        密码：<input name="pass" type="password">
    </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重新填写"/>
    </p>
</form>

登陆注册文本框，密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post|get 提交方式
        get提交：我们可以再url中看到我们提交的信息，不安全，但是高效率
        post提交：比较安全，可以传输大文件
-->
<form action="我的第一个网页.html" method="post">
<!--    文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
<!--    密码框 input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>
</body>
</html>

多选框，单选框，按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post|get 提交方式
        get提交：我们可以再url中看到我们提交的信息，不安全，但是高效率
        post提交：比较安全，可以传输大文件
-->
<form action="我的第一个网页.html" method="post">
<!--    文本输入框：input type="text"
value="zhangsan" 默认初始值
 maxlength="8" 最长能写几个字符
 size="30" 文本框的长度-->
    <p>名字：<input type="text" name="username" ></p>
<!--    密码框 input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--   单选框标签
 input type="radio"
 value: 单选框的值
 name:表示组，名字一样表示一个组，一个组只能选择一个，反之，可以多选
 -->
    <p>
        性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
<!--    多选框
input type=”checkbox
-->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
<!--    按钮-->
    <p>
        按钮：
        <input type="button" name="bt1" value="点击">
        <input type="image" src="../resources/image/1.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>
</body>
</html>

笔锋Sharpen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（四）——页面结构分析，内联框架，文本框，密码框，单选框，多选框，按钮

页面结构分析元素名描述header标题头部区域的内容（用于页面或页面中的一块区域）footer标记脚部区域的内容（用于整个页面或页面的一块区域）sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用（常用于侧边栏）nav导航类辅助内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
复制链接

扫一扫