页面结构分析；内联框架iframe；表单form；input的用法

最新推荐文章于 2023-07-12 11:03:45 发布

大吖么大白菜

最新推荐文章于 2023-07-12 11:03:45 发布

阅读量298

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45964083/article/details/115895380

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面结构分析

header ：标题头部区域
footer ：标记脚部区域的内容
section：Web页面中的一块独立区域
article：独立的文章内容
aside ：相关内容或应用,常用于侧边栏
nav ：导航类辅助内容

<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>

内联框架iframe

相当于页面里面还有页面

<iframe src="https://www.baidu.com"  frameborder="0" width="500px" height="400px"></iframe>

在这里插入图片描述
联合a标签使用：
（name：框架标识名）
iframe的src不填写内容，设置了name的名字，而是在a标签里填写了访问地址，且用target关键字将要跳转的页面放到iframe中。

<iframe src=""  name="hello" frameborder="0" width="300px" height="250px"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>

在这里插入图片描述
点击之后：

表单form

post和get提交

action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，搞笑
post方式提交：比较安全，可以传输大文件

value：默认初始值
maxlength="8"限定最长字符
size=“文本框的长度”

<h1> 注册</h1>
<form action="1.我的第一个网页.html" method="post">
    <p>名字：<input type="text" name="username" value="呵呵哒"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

在这里插入图片描述

单选框

想要有默认的一项，可以在其中写checked，该项即可被默认选中
input type=“radio”
value:单选框的值
name：表示组

<p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

在这里插入图片描述

多选框

input type=“checkbox”
想要有默认的一项，可以在其中写checked，该项即可被默认选中

<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>

在这里插入图片描述

按钮

input type=“button” 普通按钮
input type=“image” 图像按钮
input type=“submit” 提交按钮
input type=“reset” 重置（清除表格）
input type=“file” 文件域（可以上传文件）

input type=“email” 可简单判断输入的邮件号是否合法
input type=“url” 可简单判断输入的网址是否合法

input type=“number” 可用max 和 min 关键字设置上下限，还可用step关键字进行修饰，使得输入框中有上下的按钮。如：

<input type="number" name="number" step="1" max="10" min="0" size="10">

在这里插入图片描述
input type=“range” 滑块。和调节音量的方式一样。可设置max min step
input type=“search” 搜索框

下拉框（select）

想要有默认的一项，可以在其中写selected，该项即可被默认选中(如下面的俄罗斯)

<p>下拉框：
        <select name="这里定义列表的名称" >
            <option value="这里是选项的值">中国</option>
            <option value="els" selected>俄罗斯</option>
            <option value="dg">德国</option>
        </select>
    </p>

在这里插入图片描述

文本域（textarea）

cols是列数，rows是行数

    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    </p>

在这里插入图片描述

表单的使用

readonly
在标签中加入该关键字之后就为只读，无法更改
disabled
在标签中加入该关键字之后就为禁用，无法使用
hidden
在标签中加入该关键字之后就为隐藏，虽然无法看见，但是确实存在

增强鼠标的可用性

用label之后，点击文字即可定位到for指向的id处的标签，增强了鼠标的可用性

<p>
        <label for="mark">点击我</label>
        <input type="text" id="mark">
    </p>

表单的初级验证

placeholder=“。。。” 提示信息
可用在输入框中，在。。。处填写你想要告诉用户的内容。如在登录的输入框中写
placeholder=“请输入用户名”

required 非空判断
该关键字用在标签当中，是不能为空的意思。

pattern=“。。。” 正则表达式
这需要在百度上搜索你需要的正则表达式填入此中，然后限制输入的内容。

大吖么大白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面结构分析；内联框架iframe；表单form；input的用法

页面结构分析header ：标题头部区域footer ：标记脚部区域的内容section：Web页面中的一块独立区域article：独立的文章内容aside ：相关内容或应用,常用于侧边栏nav ：导航类辅助内容<body><header> <h2>网页头部</h2></header><section> <h2>网页主体</h2></section>&l
复制链接

扫一扫

专栏目录