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

HTML学习笔记02

news 2026/1/30 15:53:01

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

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/1/29 0:07:02

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/1/26 14:15:19

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/28 10:57:26

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/1/20 23:32:51

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/1/22 11:16:26

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/1/24 1:58:29

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2026/1/26 4:49:33

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2026/1/17 19:18:25

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

编程新知 2026/1/29 17:39:27

C++11 constexpr和字面类型：从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

编程新知 2026/1/26 22:17:09