web前端技术笔记(二)html 表单 和页面嵌套

2023-11-20

1.相对路径和绝对路径

2.有序和无序列表

3.表格

4.注册表单

表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

1、<form>标签 定义整体的表单区域

  • action属性 定义表单数据提交地址 空 提交至本地
  • method属性 定义表单提交的方式,一般有“get”方式和“post”方式,少量不敏感GET ,大量敏感POST

2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

  • type属性
    • type="text" 定义单行文本输入框
    • type="password" 定义密码输入框
    • type="radio" 定义单选框
    • type="checkbox" 定义复选框
    • type="file" 定义上传文件
    • type="submit" 定义提交按钮
    • type="reset" 定义重置按钮
    • type="button" 定义一个普通按钮
    • type="image" 定义图片作为提交按钮,用src属性定义图片地址
    • type="hidden" 定义一个隐藏的表单域,用来存储值
  • name属性 定义表单元素的名称,此名称是提交数据时的键名
  • value属性 定义表单元素的值  (用于传参)url?'name'=value

4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项

5.勾选框

6.下拉框

7.多行文本

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!--./ 表示当前网页文件所在的目录,一般省略不写-->
    <!--../ 表示当前网页文件所在目录的上一级目录,不能省略-->
    <img src="./images/lebo.png" alt="lebo">
    <img src="../自动化-002-html列表、布局、iframe等/images/lebo.png" alt="">
    
    <img src="images/banner.jpg" alt="">
    <!--不推荐使用绝对路径-->
    <img src="‪D:\测试相关\py\自动化-002-html列表、布局、iframe等\脚本\images\img\banner.jpg"         
    alt="">

    <hr>

    <!--无序列表 需要掌握 输入下方命令+tab快速创建列表-->
<!--ul>li{列表文字}*6-->
<ul>
    <li>列表文字</li>
    <li>列表文字</li>
    <li>列表文字</li>
    <li>列表文字</li>
    <li>列表文字</li>
</ul>

<!--ul>(li>a[href=#]{列表文字})*6-->
<ul>
    <li><a href="htttp://www.baidu.com">baidu</a></li>
    <li><a href="http://www.17lebo.com">lebo</a></li>
    <li><a href="#">列表文字</a></li>
    <li><a href="#">列表文字</a></li>
    <li><a href="#">列表文字</a></li>
    <li><a href="#">列表文字</a></li>
</ul>


<!--有序列表 用得少 从a开始-->
<ol type="a">
    <li>python</li>
    <li>selenium</li>
    <li>appium</li>
</ol>

<hr>

<table border="1">
    <!--tr为一行 th为表头 td为单元格内容-->
    <tr>
        <th>111111</th>
        <th>222222</th>
        <th>333333</th>
        <th>444444</th>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
    </tr>

</table>

<hr>

<form action="" method="get">
        <!-- for属性 点击label 自动定位到id为username的输入框>
        <label for='username'>用户名</label>
        <input type="text" name="username" id='username'> <br><br>
        密码 <input type="password" name="password"><br><br>

        <!--name属性一致为一组并只能选择其中一个-->
        性别 <input type="radio" name="gender" value="0">男
        <input type="radio" name="gender" value="1">女
        <br><br>

        爱好
        <!--勾选框 需要在后边加上相应的value值-->
        <input type="checkbox" name="hobby" value="study">学习
        <input type="checkbox" name="hobby">吃饭
        <input type="checkbox" name="hobby">睡觉
        <input type="checkbox" name="hobby">坑蒙拐骗
        <input type="checkbox" name="hobby">踢足球

        <br><br>

        头像<input type="file" name="pic">

        <br><br>
        籍贯
        <select name="site" id="">
            <option value="0">湖南</option>
            <option value="1">北京</option>
            <option value="2">河北</option>
            <option value="3">广东</option>
        </select>

        <br><br>
        <!--多行文本-->
        <textarea name="inof" id="" cols="30" rows="10"></textarea>

        <br><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">

<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
        <input type="image" src="xxx.gif">
    </form>
</body>
</html>

页面嵌套iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--target 属性值:
        "_self" 新连接在当前窗口打开
        "_blank" 新连接在新窗口中打开
        "framname"指定显示在 name为"framname"的iframe区域
    -->
    <a href="006-注册表单.html" target="myframe">006test</a>
    <!--<a href="http://www.baidu.com" target="_blank">testa</a>-->

    <iframe src="http://www.baidu.com" frameborder="1" name="myframe"></iframe>
</body>
</html>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

web前端技术笔记(二)html 表单 和页面嵌套 的相关文章

随机推荐

  • .NET的RulesEngine(规则引擎)使用

    本文目录 1 背景说明 1 1 规则引擎的使用场景 1 2 demo的代码说明 2 演示 2 1 入门demo演示 2 1 1 代码展示 2 1 2 代码下载 2 2 规则参数说明 2 2 1 第一部分参数说明 2 2 2 第二部分参数说明
  • 2021.9.5笔试题

    第一题 题目 找x y target 数字特别大 可能会溢出 代码 include
  • CPU 100%问题排查

    1 top c top c 命令找出当前进程的运行列表 按一下 P 可以按照CPU使用率进行排序 显示Java进程 PID 为 2609 的java进程消耗最高 2 top Hp pid 然后我们需要根据PID 查出CPU里面消耗最高的进程
  • sklearn的make_circles和make_moons生成数据

    关于make circles and make moons生成环形形状和月亮形状数据 转载来源 https blog csdn net dataningwei article details 53649330 make circles sk
  • ConcurrentHashMap源码解读

    曾经研究过jkd1 5新特性 其中ConcurrentHashMap就是其中之一 其特点 效率比Hashtable高 并发性比hashmap好 结合了两者的特点 集合是编程中最常用的数据结构 而谈到并发 几乎总是离不开集合这类高级数据结构的
  • 儿童计算机诈骗案例,妈妈用纸箱为4岁女儿做笔记本电脑走红 小孩子这么好骗吗?...

    原标题 妈妈用纸箱为4岁女儿做笔记本电脑走红 小孩子这么好骗吗 来源 游民星空 在全球大隔离的状态下 单身生活的人可能会感到孤独无聊 但是已经有孩子的家长可能逐渐的要抓狂了 每天精力旺盛的孩子们可能会吵的你无法在家工作甚至休息 于是就开始变
  • 百度飞桨图像分割七日打卡营学习笔记

    百度飞桨图像分割七日打卡营学习笔记 来源 飞桨图像分割教程 课程链接https aistudio baidu com aistudio course introduce 1767 1 语义分割概念 图像分割是计算机视觉中除了分类和检测外的另
  • java项目抠图功能实现

    java项目抠图功能 项目中需要一个上传文字签名并且抠掉背景图的功能 当初第一次听到这个需求时 差点惊掉下巴 我压根都不会觉得java里能实现这功能 但是既然客户需要 那就照办吧 经过这次功能的实现 我也更加坚定了一个想法 再奇葩的需求 也
  • win 11bitlocker恢复密匙一般情况的解决方式(这里指的是你现在使用的微软账户一直没有变更过)

    本来没有打算写这一篇解决帖子的 但是最近好多微博的友友都在私我询问解决方法 孩子虽然很热心 但是真的回复不过来了 打字太累了 这里给大家简单指个路 希望能够对大家有所帮助 当时出现这个问题的时候 一搜网上的解决方法都是重装系统什么的 真是吓
  • flink学习之state

    state作用 保留当前key的历史状态 state用法 ListState
  • 关于Socket通信客户端是否需要绑定端口号

    参见http blog chinaunix net uid 23193900 id 3199173 html 无连接的socket的客户端和服务端以及面向连接socket的服务端通过调用bind函数来配置本地信息 使用bind函数时 通过将
  • C++输出二进制数

    示例 include
  • Lattice Diamond安装

    1 下载 到Lattice官网 http www latticesemi com 注册一个lattice的账号后就可以去下载Diamond 登陆后如下图 根据自己系统情况选择对应的版本 我用的是32位win8 Diamond软件安装包和La
  • DenseFusion复现-可以在30系/40系显卡运行

    笔者电脑显卡为4060 因为使用DenseFusion作者pytorch1 0的代码没有成功 发现很多人在30系显卡上复现失败 经过查资料后发现是因为cuda版本与显卡算力不匹配 需要提高cuda版本 因此也需要提高pytorch版本 后来
  • vue动态添加style样式

    注意 凡是有 的style属性名都要变成驼峰式 比如font size要变成fontSize 除了绑定值 其他的属性名的值要用引号括起来 比如backgroundColor 00a2ff 而不是 backgroundColor 00a2ff
  • 数据库服务器操作系统升级方案,PostgreSQL 数据库跨版本升级常用方案解析

    大家好 我是只谈技术不剪发的 Tony 老师 对于企业而言 将数据库系统升级到新版本通常可以获得更好的性能 更多的功能 最新的安全补丁和错误修复等 因此 本文就来介绍一下 PostgreSQL 数据库版本升级的 3 种常用方案 升级方案概述
  • Element Plus 实例详解(五)___Scrollbar 滚动条

    Element Plus 实例详解 五 Scrollbar 滚动条 本文目录 一 前言 二 搭建Element Plus试用环境 1 搭建Vue3项目 基于Vite Vue 2 安装Element Plus 三 Element Plus S
  • 讲解+可执行完整代码 C++单链表(2)查找、插入、删除元素

    目录 一 查找元素 代码部分 核心代码 完整代码 二 插入元素 核心思路 代码部分 核心代码 完整代码 编辑 三 删除元素 核心思路 代码部分 核心代码 完整代码 一 查找元素 此段代码仅实现查找元素的功能 代码部分 核心代码 node l
  • 探究 Nginx 中 reload 流程的真相

    点击上方 程序员小乐 关注 星标或置顶一起成长 每天凌晨00点00分 第一时间与你相约 每日英文 Try to hold the right hand with your left hand and gave yourself most s
  • web前端技术笔记(二)html 表单 和页面嵌套

    1 相对路径和绝对路径 2 有序和无序列表 3 表格 4 注册表单 表单用于搜集不同类型的用户输入 表单由不同类型的标签组成 相关标签及属性用法如下 1