HTML学习笔记02

HTML笔记02

页面结构分析

元素名描述
header标题头部区域的内容(用于页面或页面中的一块区域)
footer标记脚部区域的内容(用于整个页面或页面的一块区域)
sectionWeb页面中的一块独立区域
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内联框架

在这里插入图片描述

  • 下面我们通过写代码的方式来学习iframe内联框架:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架iframe学习</title>
</head>
<body><!-- iframe内联框架
src: 地址
width: 宽度
height: 高度
-->
<iframe src="https://www.taobao.com/" name="hello" frameborder="0" width="1000px" height="800px"></iframe><!-- 通过a标签可以实现跳转 -->
<a href="https://www.tmall.com/" target="hello">点击跳转到天猫商城</a><!-- bilibili分享视频的内联框架嵌入代码 -->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" -->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>--></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方式提交: 我们不会直接在网页的URL中看到我们提交的信息。缺点: 效率低;优点: 较为安全,且能够传输大文件。
-->
<form action="1.我的第一个网页.html" method="get"><!-- 文本输入框: input type="text" --><p>名字: <input type="text" name="username"></p><!-- 密码框: input type="password" --><p>密码: <input type="password" name="pwd"></p><!-- 提交按钮: input type="submit" / 重置按钮: input type="reset" --><p><input type="submit"><input type="reset"></p>
</form></body>
</html>
  • 打开浏览器查看网页:

在这里插入图片描述

  • 随便输入一下名字和密码(这里我输入的名字为:Clown,密码为:123456),并点击提交。查看此时的网页:

在这里插入图片描述

  • 可以发现网页跳转到了我们指定的表单提交的位置(即 “我的第一个网页” )。由于我们使用的表单提交方式为get方式,所以我们能直接从跳转后网页的URL上看到我们刚才提交的信息,很明显这是不安全的。

  • 下面我们将表单提交方式改为post

<form action="1.我的第一个网页.html" method="post">
  • 我们再打开浏览器查看网页:

在这里插入图片描述

  • 再次输入名字和密码并提交。查看此时的网页:

在这里插入图片描述

  • 由于这次我们使用的表单提交方式为post方式,所以我们不能直接从跳转后网页的URL上看到我们提交的信息了,这相对于使用get方式来说较为安全。
  • 当然,由于我们并未进行任何加密操作,所以我们仍然可以通过以下步骤获取到我们提交的信息(具体的加密操作我们学习 JavaScript 时再详细了解):

在这里插入图片描述

表单元素格式

属性说明
type指定元素的类型。textpasswordcheckboxradiosubmitresetfilehiddenimagebutton,默认为text
name指定表单元素的名称
value元素的初始值。typeradio时必须指定一个值
size指定表单元素的初始宽度。当typetextpassword时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlengthtypetextpassword时,输入的最大字符数
checkedtyperadiocheckbox时,指定按钮是否是被选中
  • 下面我们在之前的代码的基础上继续添加代码来学习其他的表单元素:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆注册</title>
</head>
<body><h1>注册</h1><!-- 表单: form
action: 表单提交的位置。可以是一个网站,也可以是一个请求处理的地址
method: post/get  --提交方式get方式提交: 我们可以直接在网页的URL中看到我们提交的信息。缺点: 不安全,不能传输大文件;优点: 效率高。post方式提交: 我们不会直接在网页的URL中看到我们提交的信息。缺点: 效率低;优点: 较为安全,且能够传输大文件。
-->
<form action="1.我的第一个网页.html" method="get"><!-- 文本输入框: input type="text"name: 指定表单元素的名称(每个input标签都需要一个name,否则无法提交)value: 默认初始值maxlength: 最长能输入几个字符size: 文本框的长度--><p>名字: <input type="text" name="username" value="张三" maxlength="8" size="30"></p><!-- 密码框: input type="password" --><p>密码: <input type="password" name="pwd"></p><!-- 单选框: input type="radio"type="radio"时,必须指定一个单选框的值(value)要想实现单选效果,必须分组(name相同的就是同一个组)--><p>性别:<input type="radio" value="male" name="gender" checked><input type="radio" value="female" name="gender"></p><!-- 多选框: input type="checkbox" --><p>爱好:<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby" checked>敲代码<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"--><p>按钮:<input type="button" value="点击变长"><input type="image" src="../resources/image/1.jpg" width="100px" height="70px"></p><!-- 下拉框: select,列表框: option --><p>国家:<select name="country"><option value="china">中国</option><option value="usa">美国</option><option value="switzerland" selected>瑞士</option><option value="india">印度</option></select></p><!-- 文本域: textareacols: 列数rows: 行数--><p>反馈<textarea name="textarea" cols="50" rows="10">文本内容</textarea></p><!-- 文件域: input type="file" --><p><input type="file" name="files"><input type="button" value="上传"></p><!-- 带验证的邮箱输入框: input type="email" --><p>邮箱:<input type="email" name="email"></p><!-- 带验证的URL地址输入框: input type="url" --><p>URL:<input type="url" name="url"></p><!-- 带验证的数字输入框: input type="number"max: 允许的最大值min: 允许的最小值step: 步长--><p>商品数量:<input type="number" name="num" max="100" min="0" step="1"></p><!-- 滑块: input type="range" --><p>音量:<input type="range" name="voice" max="100" min="0" step="2"></p><!-- 搜索框:  --><p>搜索: <input type="search" name="search"></p><p><input type="submit"><input type="reset" value="清空表单"></p>
</form></body>
</html>
  • 打开浏览器查看网页:

在这里插入图片描述

表单的应用

  • 隐藏域 hidden

  • 只读 readonly

  • 禁用 disabled

  • 我们在上面代码的基础上再次进行修改:

    • 名字的文本输入框变为只读,不可修改:
    <!-- 只读: readonly -->
    <p>名字: <input type="text" name="username" value="admin" readonly></p>
    
    • 密码的输入框隐藏,不可见:
    <!-- 隐藏: hidden -->
    <p>密码: <input type="password" name="pwd" value="123456" hidden></p>
    
    • 性别的单选框禁用选项,只能选择
    <!-- 禁用: disabled -->
    <input type="radio" value="female" name="gender" disabled>
    • 补充 label:在最后再添加一个文本输入框,使鼠标点击输入框左侧的文字时能自动锁定到右侧的输入框:
    <!-- 增强鼠标可用性: label -->
    <label for="mark">点我可自动锁定右侧输入框</label>
    <input type="text" id="mark">
    
  • 打开浏览器查看网页:

在这里插入图片描述

  • 上述应用全都正常实现。

表单初级验证

  • 为什么要进行表单验证?

    • 降低服务器开销
    • 使用户填写更高效
    • 保证数据的安全性
  • 常用方式

    • 用户提示 placeholder
    • 非空判断 required
    • 正则表达式 pattern
  • 常用正则表达式:点此查看

  • 我们在上面代码的基础上再次进行修改:

    • 设置名字右侧的文本输入框中的提示信息,且设置其不能为空:
    <!-- 提示信息: placeholder / 非空判断: required -->
    <p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>
    
    • 使用正则表达式自定义一个带验证的邮箱:
    <!-- 正则表达式: pattern -->
    <p>自定义邮箱<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
    
  • 打开浏览器查看网页:

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

红黑树(AVL树的优化)上

红黑树略胜AVL树 AVL树是一颗高度平衡搜索二叉树&#xff1a; 要求左右高度差不超过1&#xff08;严格平衡&#xff09; 有的大佬认为AVL树太过严格&#xff0c;对平衡的要求越严格&#xff0c;会带来更多的旋转&#xff08;旋转也还是会有一定的消耗&#xff01;&#xff01;…

WordPress使用子主题插件 Child Theme Wizard,即使主题升级也能够保留以前主题样式

修改WordPress网站样式&#xff0c;主题升级会导致自己定义设置的网站样式丢失&#xff0c;还需要重新设置&#xff0c;很繁琐工作量大&#xff0c;发现在WordPress 中有Child Theme Wizard子主题插件&#xff0c;使用Child Theme Wizard子主题插件&#xff0c;即使主题升级&am…

2023年下半年西安/广州/深圳软考(中/高级)开班啦!!!

软考是全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff08;简称软考&#xff09;项目&#xff0c;是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试&#xff0c;既属于国家职业资格考试&#xff0c;又是职称资格考试。 系统集成项…

智慧校园用电安全解决方案

随着科技的不断发展&#xff0c;智慧校园建设逐渐成为了教育行业的一大趋势。在这个过程中&#xff0c;电力系统作为校园基础设施的重要组成部分&#xff0c;其安全、稳定、高效的运行显得尤为重要。下面小编来为大家介绍下智慧校园用电安全解决方案吧! 一、智慧校园电力系统现…

抖店无货源和工厂直发有什么区别?聊下无货源的概念和做店思路

我是王路飞。 最近收到了几条私信&#xff0c;都是关于做抖店的&#xff0c;其中有一条吸引了我的兴趣。 他问的是&#xff1a;抖店的无货源和工厂直发有什么区别吗&#xff1f; 说实话&#xff0c;这个问题&#xff0c;我一开始是不打算回复的&#xff0c;因为没有意义。 …

C# task多线程创建,暂停,继续,结束使用

1、多线程任务创建 private void button1_Click(object sender, EventArgs e) //创建线程{CancellationToken cancellationToken tokensource.Token;Task.Run(() > //模拟耗时任务{for (int i 0; i < 100; i){if (cancellationToken.IsCancellationRequested){return;…

[C++ 网络协议] 多进程服务器端

具有代表性的并发服务器端实现模型和方法&#xff1a; 多进程服务器&#xff1a;通过创建多个进程提供服务。✔ 多路复用服务器&#xff1a;通过捆绑并统一管理I/O对象提供服务。 多线程服务器&#xff1a;通过生成与客户端等量的线程提供服务。 目录 1. 进程的概念及应用 1.…

CTFhub-文件上传-前端验证

burp 抓包 --> 重发--> 查看源代码 用 GodZilla 生成木马 文件名为 1.php.jsp 上传-->抓包-->改包 (删掉 .jpg) --> 点击 放行 木马文件位置为&#xff1a;http://challenge-f0531d0c27641130.sandbox.ctfhub.com:10800/upload/1.php 用 蚁剑连接 ctfhub{4743b…

数组中的第K个最大元素

题目链接 数组中的第K个最大元素 题目描述 注意点 需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素 解答思路 本题可以使用快速排序、堆排序或优先队列解决&#xff0c;快排可以比较快速找到某个元素在数组中排序后的位置&#xff0c;所以找…

Linux内核数据结构 散列表

1、散列表数据结构 在Linux内核中&#xff0c;散列表&#xff08;哈希表&#xff09;使用非常广泛。本文将对其数据结构和核心函数进行分析。和散列表相关的数据结构有两个&#xff1a;hlist_head 和 hlist_node //hash桶的头结点 struct hlist_head {struct hlist_node *first…

最简单vue获取当前地区天气--高德开放平台实现

目录 前言 一、注册成为高德平台开发者 二、注册天气key 1.点击首页右上角打开控制台 2.创建新应用 三、vue项目使用 1.打开vue项目找到public下的index.html&#xff0c;如果是vue3的话直接在主目录打开index.html文件就行&#xff0c;主要就是打开出口文件 ​编辑 2.根据高德…

HTTPS协议原理

目录 前言 1.理解加密和解密 2.为什么要加密 3.常见的加密方式 3.1对称加密 3.2非对称加密 4.数据摘要和数据指纹 5. 数字签名 6.HTTPS的加密策略 6.1只使用对称加密 6.2使用非对称加密 6.2.1服务端使用非对称加密 6.2.2双方都使用非对称加密 6.3对称加密非对称加…

OLED透明屏显示技术:未来显示科技的领航者

OLED透明屏显示技术是一种创新性的显示技术&#xff0c;它的特殊性质使其成为未来显示科技的领航者。 OLED透明屏具有高对比度、快速响应时间、广视角和低功耗等优势&#xff0c;同时&#xff0c;其透明度、柔性和薄型设计使其成为创新设计的理想选择。 本文将深入探讨OLED透…

【爬虫】5.6 Selenium等待HTML元素

任务目标 在浏览器加载网页的过程中&#xff0c;网页的有些元素时常会有延迟的现象&#xff0c;在HTML元素还没有准备好的情况下去操作这个HTML元素必然会出现错误&#xff0c;这个时候Selenium需要等待HTML元素。例如&#xff1a;上节实例中出现的select的下拉框元素&#xff…

Python实操GetOpenFilename打开文件选择框获取工作表信息

import xlwings as xw xlapp xw.App(visibleTrue, add_bookFalse) a xlapp.api.GetOpenFilename(Excel Files (*.xl*),*.xl*, 0, 0, 0, True) print(a[0]) slist [] for i in a:wk xw.Book(i)for s in wk.sheets:s_dict {}s_dict[工作簿名字] wk.names_dict[工作表名字] …

MyBatis学习简要

目录 什么是MyBatis? MyBatis实现的设想 MyBatis基于配置文件的开发步骤 mybatis的配置文件 Mapper代理开发 配置文件完成增删改查的三步 注解开发 一、条件查询 参数接收时&#xff0c;参数的设置&#xff1a; 动态条件查询&#xff1a; 二、添加功能 步骤&#xf…

crawlab通过docker单节点部署简单爬虫

crawlab 单节点docker安装 此处介绍的是单节点的方式&#xff0c;多节点的情况可以把爬虫上传到一个节点中&#xff0c;之后会同步到其它节点上 version: 3.3 services:master:image: crawlabteam/crawlabcontainer_name: crawlab_masterrestart: alwaysenvironment:CRAWLAB…

安卓系列机型永久去除data分区加密 详细步骤解析

安卓机型玩机搞机刷写第三方twrp存储出现乱码 存储不显示等情况都是没有解密data分区的原因。用户需要在twrp里格式化data分区重启后存储显示正常。那么这个操作后你的数据分区就会呗彻底清除。 今天主要解析下如何操作可以永久解密data分区。其实data分区加密原则上也是厂商为…

node升级带来的问题及解决方案(digital envelope routines::unsupported)

由于项目需要将 node版本从16升级到了18&#xff0c;但是原有的老项目还是使用的16的环境&#xff0c;导致在运行老版本的时候出现错误 错误信息如下 Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:71:19)at Object.…

SSD的基础知识介绍

固态硬盘&#xff0c;英文名Solid State Disk或Solid State Drive&#xff0c;是一种以存储器作为永久性存储器的电脑存储设备。虽然SSD已不是使用“碟盘”来记存数据&#xff0c;也没有用于“驱动”的马达&#xff0c;但是人们依照命名习惯&#xff0c;仍然称为固态硬盘或固态…