HTML基本学习笔记（下）

喋喋丫

于 2023-03-15 18:19:56 发布

阅读量90

点赞数 1

文章标签： html javascript servlet

本文链接：https://blog.csdn.net/m0_71641098/article/details/129563243

版权

本文介绍了HTML中的iframe内联框架的使用，包括如何插入B站视频以及自定义属性。接着详细讲解了表单的语法，如get和post方法的安全性和效率差异，以及各种表单元素如单选框、多选框、按钮、列表下拉框、文本域和文件域的使用。还探讨了表单验证的基本方法，如placeholder、required和pattern属性，并展示了邮箱、URL、数字和滑块等验证功能。

摘要由CSDN通过智能技术生成

书接上回：

14. iframe内联框架

14.1 内联框架格式

14.2 示例代码展示

eg：在bilibili中分享嵌入式代码选项中复制得到iframe内联框架中

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

<iframe src="//player.bilibili.com/player.html?aid=908022007&bvid=BV1nM4y1d7pj&cid=1041407428&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

</body>
</html>

自行输入网址（src中）

<!--iframe内联框架
src：path
w-h：宽和高
-->
<iframe src="https://www.bilibili.com" frameborder="0"width="1500px" height="800px"></iframe>

利用超链接跳转到自身html文件或网页(利用iframe中的name属性和超链接文本的target属性)
- target属性是表示在哪个窗口打开
- name属性是框架标识名

<iframe src="" name="hello" frameborder="0" width="1000px" height="500px"></iframe>

<a href="https://www.bilibili.com" target="hello">点击跳转</a>

15. 表单

15.1 表单语法

15.1.2 get 和post的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>

<h1>注册</h1>
<!--表单form
action：表单提交位置，可以是网站，也可以是请求处理地址
mothod：post，get
    get中可以在url中看到提交信息，不安全，但高效
    post中可以在url中不能看到提交信息，安全，传输较大文件
-->

<form action="1.我的第一个网页.html" method="post">
<!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <input type="submit">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="reset">


</form>
</body>
</html>

get中可以在url中看到提交信息，不安全，但高效

post中可以在url中不能看到提交信息，安全，传输较大文件

注册登陆页面图

15.2 表单属性

name必填(表示组)

15.2.1 单选框

<!--单选框
    input type=”radio“
    value:单选框的值
    name：表示组
    加name属性才能使得单选框两个选项在同一组里，达到单选的目的

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


    </p>

加name属性才能使得单选框两个选项在同一组里，达到单选的目的

15.2.2 多选框

<!--多选框
    input type：”checkbox“

-->
    <p>
        爱好：
        <input type="checkbox" value="study" name="hobby">学习
        <input type="checkbox" value="swimming" name="hobby">游泳
        <input type="checkbox" value="reading" name="hobby">阅读
        <input type="checkbox" value="play game" name="hobby">玩游戏
    </p>

15.2.3 按钮

<!--按钮
     input type="button"   普通按钮
    input type="image"   图片按钮
    input type=”submit“   提交按钮
    input type=”reset“   重置按钮
-->
    <p>
        按钮：
        <input type="button" name="btn1" value="点击跳转">
        <input type="image"src="../resource/image/1.png">
    </p>
    <input type="submit">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="reset">

15.2.4 列表下拉框

 <!--列表框，下拉框

-->
    <p>
        国家：
        <select name="列表名称" >
            <option value="china" selected>中国</option>
            <option value="su">苏黎世</option>
            <option value="iceland">冰岛</option>
            <option value="uk">英国</option>
        </select>
    </p>

selected 默认选择（下拉框）
checked默认选择（单选框、多选框）

15.2.5 文本域

 <!--文本域
    -->
    <p>
        反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

15.2.6 文件域

  <!--文件域
    input type="file"
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

15.3 表单的应用

隐藏域(hidden)
- 应用默认密码保存

  <p>密码：<input type="password" name="pwd" value="123456" hidden></p>

只读(readonly)
- 只读

 <p>名字：<input type="text" name="username" value="adim" readonly ></p>

禁用(disabled)

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

    </p>

增加鼠标可用性(label)
- 点击文字可以定位到框体

<!--增强鼠标可用性-->
    <p>
        <label for="mark">点击试试</label>
        <input type="text" id="mark">
    </p>

15.4 表单的初级验证

placeholder（提示信息）

<p>名字：<input type="text" name="username" placeholder="请输入用户名"  ></p>

required(非空)

<p>密码：<input type="password" name="pwd"  required></p>

pattern(正则表达式)

<!--正则表达式-->
<!--https://www.jb51.net/tools/regexsc.htm-->
    <p>
        电子邮箱：
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

正则表达式查询网址：脚本之家（正则表达式速查表_脚本之家）

16. 功能标签

16.1 常见功能标签

邮箱验证
网址验证
数量/音量
滑块验证
搜索框

16.2 示例代码展示

    <!--邮箱验证-->
    <p>
        邮箱：
        <input type="email" name="emial">
    </p>
    <!--url验证-->
    <p>
        网址：
        <input type="url" name="url">
    </p>
    <!--数字验证
    step 增幅
    -->
    <p>
        数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
    <!--滑块验证-->
    <p>
        音量：
        <input type="range" name="voice" min="0" max="100">
    </p>
    <!--搜索-->
    <p>
        搜素：
        <input type="search" name="search">
    </p>

完结，撒花*★,°*:.☆(￣▽￣)/$:*.°★* 。

喋喋丫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基本学习笔记（下）

密码：<input type="password" name="pwd" value="123456" hidden></p><p>名字：<input type="text" name="username" placeholder="请输入用户名" >
复制链接

扫一扫