当前位置： 首页 > news >正文

HTML学习笔记02

news 2025/10/28 4:42:10

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指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlengthtype为text或password时，输入的最大字符数
checkedtype为radio或checkbox时，指定按钮是否是被选中
  • 下面我们在之前的代码的基础上继续添加代码来学习其他的表单元素：
<!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>

  • 打开浏览器查看网页：

请添加图片描述

相关文章：

HTML学习笔记02

HTML笔记02 页面结构分析 元素名描述header标题头部区域的内容&#xff08;用于页面或页面中的一块区域&#xff09;footer标记脚部区域的内容&#xff08;用于整个页面或页面的一块区域&#xff09;sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用…...

编程日记 2023/8/26 23:45:38

＜C++＞ 内存管理

1.C/C内存分布 让我们先来看看下面这段代码 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] {1, 2, 3, 4};char char2[] "abcd";char *pChar3 "abcd";int *ptr1 (int *) mal…...

编程日记 2023/8/26 23:44:37

【Java】ByteBuffer类的arrayOffset方法详解+示例

arrayOffset功能详解；arrayOffset在position等于0和非0两种场景下的demo。使用类java.nio.ByteBuffer中的arrayOffset()方法可以获得这个缓冲区的第一个元素在底层支持（backing）数组中的偏移量。 如果这个buffer底层是由数组支持的，那么buffer的postion p对应于数组的index…...

编程日记 2023/8/26 23:43:36

【C++】C++ 引用详解 ⑤ ( 函数 “ 引用类型返回值 “ 当左值被赋值 )

文章目录 一、函数返回值不能是 " 局部变量 " 的引用或指针1、函数返回值常用用法2、分析函数 " 普通返回值 " 做左值的情况3、分析函数 " 引用返回值 " 做左值的情况 函数返回值 能作为 左值 , 是很重要的概念 , 这是实现 " 链式编程 &quo…...

编程日记 2023/8/26 23:42:34

Git，分布式版本控制工具

1.为常用指令配置别名&#xff08;可选&#xff09; 打开用户目录&#xff0c;创建.bashrc文件 &#xff08;touch ~/.bashrc&#xff09; 2.往其输入内容 #用于输出git提交日志 alias git-loggit log --prettyoneline --all --graph --abbrev-commit #用于输出当前目录所有文…...

编程日记 2023/8/26 23:41:33

LeetCode 面试题 02.02. 返回倒数第 k 个节点

文章目录 一、题目二、C# 题解 一、题目 实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回该节点的值。 注意&#xff1a;本题相对原题稍作改动 点击此处跳转题目。 示例&#xff1a; 输入&#xff1a; 1->2->3->4->5 和 k 2 输出&#xff1a; 4 说…...

编程日记 2023/8/26 23:39:29

SpeedBI数据可视化工具：丰富图表，提高报表易读性

数据可视化工具一大作用就是能把复杂数据可视化、直观化&#xff0c;更容易看懂&#xff0c;也就更容易实现以数据驱动业务管理升级&#xff0c;因此一般的数据可视化工具都会提供大量图形化的数据可视化图表&#xff0c;以提高报表的易懂性&#xff0c;更好地服务企业运营决策…...

编程日记 2023/8/26 23:38:28

编写Dockerfile制作Web应用系统nginx镜像

文章目录 题目要求&#xff1a;一、创建文档&#xff0c;编写Dockerfile文件可以将harbor仓库去启动先起来 二、运行Dockerfile&#xff0c;构建nginx镜像三、推送导私有仓库&#xff0c;也就是我们的harbor仓库 题目要求&#xff1a; 编写Dockerfile制作Web应用系统nginx镜像…...

编程日记 2023/8/26 23:37:26

记录一次微服务连接Nacos异常-errorMsg: Illegal character in authority at index 7:

组件信息 Nacos 2.2.3 SpringCloud微服务 部署环境&#xff1a;centerOS 部署方式&#xff1a;k8s 前言 nacos开启鉴权&#xff0c;nacos地址通过变量方式传入服务中 PropsUtil.setProperty(props, "spring.cloud.nacos.discovery.server-addr", "${NACO…...

编程日记 2023/8/26 23:36:24

【Java】反射 之 调用构造方法

调用构造方法 我们通常使用new操作符创建新的实例&#xff1a; Person p new Person();如果通过反射来创建新的实例&#xff0c;可以调用Class提供的newInstance()方法&#xff1a; Person p Person.class.newInstance();调用Class.newInstance()的局限是&#xff0c;它只…...

编程日记 2023/8/26 23:35:22

Hightopo 使用心得（6）- 3D场景环境配置（天空球，雾化，辉光，景深）

在前一篇文章《Hightopo 使用心得&#xff08;5&#xff09;- 动画的实现》中&#xff0c;我们将一个直升机模型放到了3D场景中。同时&#xff0c;还利用动画实现了让该直升机围绕山体巡逻。在这篇文章中&#xff0c;我们将对上一篇的场景进行一些环境上的丰富与美化。让场景更…...

编程日记 2023/8/26 23:34:21

【Python PEP 笔记】201 - 同步迭代 / zip() 函数的使用方法

原文地址&#xff1a;https://peps.python.org/pep-0201/ PDF 地址&#xff1a; 什么是同步迭代 同步迭代就是用 for 一次循环多个序列。 类似于这样的东西&#xff1a; arr1 [1, 2, 3, 4] arr2 [a, b, c, d] for a, b in arr1, arr2:print(a, b)使用 map 实现 for a, b …...

编程日记 2023/8/26 23:33:19

远程控制：用了向日葵控控A2后，我买了BliKVM v4

远程控制电脑的场景很多&#xff0c;比如把办公室电脑的文件发到家里电脑上&#xff0c;但是办公室电脑旁边没人。比如当生产力用的电脑一般都比较重&#xff0c;不可能随时带在身边&#xff0c;偶尔远程操作一下也是很有必要的。比如你的设备在工况恶劣的环境中&#xff0c;你…...

编程日记 2023/8/26 23:32:19

基于swing的火车站订票系统java jsp车票购票管理mysql源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的火车站订票系统 系统有2权限&#xff1a;…...

编程日记 2023/8/26 23:31:16

MAVEN利器：一文带你了解IDEA中如何使用Maven

前言&#xff1a; 强大的构建工具——Maven。作为Java生态系统中的重要组成部分&#xff0c;Maven为开发人员提供了一种简单而高效的方式来构建、管理和发布Java项目。无论是小型项目还是大型企业级应用&#xff0c;Maven都能帮助开发人员轻松处理依赖管理、编译、测试和部署等…...

编程日记 2023/8/26 23:30:13

R语言15-R语言中的列的分裂与合并长宽数据转换

列的分裂与合并 列的分裂&#xff1a; 使用 separate() 函数将一个包含多个值的列分裂成多个列。 install.packages("tidyr") # 安装 tidyr 包&#xff08;如果尚未安装&#xff09; library(tidyr)data <- data %>%separate(col_name, into c("part1…...

编程日记 2023/8/26 23:29:10

使用Pytorch和OpenCV实现视频人脸替换

“DeepFaceLab”项目已经发布了很长时间了&#xff0c;作为研究的目的&#xff0c;本文将介绍他的原理&#xff0c;并使用Pytorch和OpenCV创建一个简化版本。 本文将分成3个部分&#xff0c;第一部分从两个视频中提取人脸并构建标准人脸数据集。第二部分使用数据集与神经网络一…...

编程日记 2023/8/26 23:28:10

【力扣】202. 快乐数 ＜哈希＞

【力扣】202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 【快乐数】 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 如果这个过程…...

编程日记 2023/8/26 23:27:07

深度学习4. 循环神经网络 – Recurrent Neural Network | RNN

目录 循环神经网络 – Recurrent Neural Network | RNN 为什么需要 RNN &#xff1f;独特价值是什么&#xff1f; RNN 的基本原理 RNN 的优化算法 RNN 到 LSTM – 长短期记忆网络 从 LSTM 到 GRU RNN 的应用和使用场景 总结 百度百科维基百科 循环神经网络 – Recurre…...

编程日记 2023/8/26 23:26:06

自动驾驶感知传感器标定安装说明

1. 概述 本标定程序为整合现开发的高速车所有标定模块，可实现相机内参标定和激光、相机、前向毫米波 至车辆后轴中心标定，标定参数串联传递并提供可视化工具验证各个模块标定精度。整体标定流程如下，标定顺序为下图前标0-->1-->2-->3，相同编号标定顺序没有强制要求…...

编程日记 2023/8/26 23:25:05

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/10/28 2:04:56

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/25 11:57:30

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/10/23 11:19:35

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/10/23 18:29:35

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/10/27 17:22:08

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/10/21 12:40:54

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/10/4 8:19:28

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/10/19 15:23:13

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/10/18 19:25:45

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/11 8:31:16