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

【前端】简单原生实例合集html,css,js

article 2026/4/3 0:34:35

长期补充，建议关注收藏点赞。

目录

  • 分栏
  • input各种类型
  • iframe
  • 表单
  • 拖拽

分栏

  1. 区分fieldset和frameset
  2. frameset是把浏览器窗口分成几个区域，每个区域分别放置一个html文档到对应的frame中，而且这个比例可以按住边栏进行调整
  3. col指定左右边栏的宽度
</head>
<frameset cols="25%,75%"><frame src="注册A.html" /><frame src="注册B.html" />
</frameset>

input各种类型

  • 对于 type=“button” 的 < input> 元素，value 属性设置的是按钮上显示的文本。
    -所有的单选按钮radio的 name 属性值相同，这意味着这些按钮是一个组，用户只能选择其中的一个。
<input type="button" value="alert" id="alerta" onclick="alert('我被点击啦！')">
<input type="button" value="confirm" id="confirma" onclick="confirm('确定要删除吗？')">
<input type="button" value="prompt" id="prompta" onclick="prompt('请输入用户名：')"><label for="pga"><input type="radio" name="fruit" value="pga" id="pga">苹果A</label>
<label for="jza"><input type="radio" name="fruit" value="jza" id="jza">橘子A</label>
<label for="xja"><input type="radio" name="fruit" value="xja" id="xja">香蕉A</label><p>
<!--name:value --><input type="checkbox" name="hobby" value="汽车" id="qcA">汽车A <input type="checkbox" name="hobby" value="购物" id="gwA">购物A 
</p><input type="file" name="upfilea" />

iframe

  1. a中的target对应iframe的name,表明这个链接在哪个iframe里加载
<a href="http://www.sina.com.cn" target="myframe1">新浪</a>
<a href="http://www.hao123.com" target="myframe1">hao123</a>
<a href="http://www.taobao.com" target="myframe2">淘宝</a>
<a href="http://www.baidu.com" target="myframe2">百度</a><br>
<iframe src="注册A.html" frameborder="1" height="500" width="48%" name="myframe1" id="idframe1" class="cframe"></iframe>
<iframe src="注册B.html" frameborder="1" height="500" width="48%" name="myframe2"></iframe>

表单

  • 总结
  1. label 的 for 属性和 input 的 id 属性应该对应。
    这样对应的作用是：当用户点击 < label> 时，浏览器会自动把焦点转到对应的 < input> 元素。
  2. input的name是指定表单提交时，在服务器端接收这个字段的数据时会使用这个名字。
  3. required=“”：这个属性意味着用户在提交表单之前，必须填写这个字段,如果没填写提交后会弹出提示tooltip
  4. button中的value 属性在实际提交表单时作为按钮的值传递给服务器。
    button如果同时有name和value，则提交表单时，服务器会收到 name值=value值 的数据。
<form action=""><div id="zc"><fieldset><legend>注册用户</legend><p id="p1"><label for="user">账号</label><input type="text" name="user" id="user" placeholder="账号" required="" value="">			</p><p><label for="password">密码</label>		<input type="password" name="password" id="password" placeholder="密码" value=""></p><p><button type="submit" value="注册">注册</button><button type="submit" name="action" value="register">注册</button><hr></p><p><a href="注册A.html" id="ZCA" target="_blank">注册A页面</a></p><p><a href="注册B.html" id="ZCB" target="_blank">注册B页面</a></p></fieldset>		</div>
</form>

拖拽

<!--第1种-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽div</title>
<style type="text/css">div{position:absolute;width:150px;height:150px;background-color:red;}
</style>
<script type="text/javascript">
function drag(obj)
{if (typeof obj == "string") {var obj = document.getElementById(obj);obj.orig_index=obj.style.zIndex;///原始z-index}obj.onmousedown=function (e){//鼠标按下this.style.cursor="move";//设置鼠标样式this.style.zIndex=1000;//设置当前对象永远显示在最上层var d=document;if(!e) e=window.event;//按下时创建一个事件var x=e.clientX-document.body.scrollLeft-obj.offsetLeft;//x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距var y=a.clientY-document.body.scrollTop-obj.offsetTop;//y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距d.onmousemove=function(e){//鼠标移动if(!e) e=window.event;//移动时创建一个事件obj.style.left=e.clientX+document.body.scrollLeft-x;obj.style.top=e.clientY+document.body.scrollTop-y;}d.onmouseup=function (){//鼠标放开document.onmousemove=null;document.onmouseup = null;obj.style.cursor="normal";//设置放开的样式obj.style.zIndex=obj.orig_index;//回归原始z-index}}
}
</script>
</head>
<body>
<div id="div1" style="width:100px;height:100px;z-index:99"> </div>
<div id="div2" style="left:170px; background-color:blue; z-index:98"></div>
<script type="text/javascript">drag("div1");drag("div2");</script>
</body>
</html><!--第2种-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>拖拽实例</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.box{width:100px;height:100px;background: red;position: absolute;top:0;}.left{left:0;}.right{right:0;}</style><script></script>
</head>
<body><div id="div1" class="box left">DIV1</div><div id="div2" class="box right">DIV2</div><script>//普通拖拽 -- 父类class Drag{constructor(id){this.oDiv = document.querySelector(id);this.disX = 0; this.disY = 0;this.init();}init(){this.oDiv.onmousedown = function(ev){this.disX = ev.clientX - this.oDiv.offsetLeft;this.disY = ev.clientY - this.oDiv.offsetTop;
//ev.clientX 是鼠标在页面上的水平位置
//this.oDiv.offsetLeft 是目标元素距离页面左边的距离
//通过相减就得到了鼠标点击点和元素左边缘之间的水平距离。document.onmousemove = this.fnMove.bind(this);document.onmouseup = this.fnUp.bind(this);return false;}.bind(this);}fnMove(ev){this.oDiv.style.left = ev.clientX - this.disX+'px';this.oDiv.style.top = ev.clientY - this.disY+'px';}fnUp(){document.onmousemove=null;document.onmouseup=null;}}//子类—— 限制范围class LimitDrag extends Drag{fnMove(ev){super.fnMove(ev);//限制范围if(this.oDiv.offsetLeft<=0){this.oDiv.style.left =0;}}}//调用new Drag('#div1');new LimitDrag('#div2');</script>
</body>
</html>

第二种封装更专业，但少考虑了滚动条的影响，比第一种多考虑了限制范围。

相关文章：

【前端】简单原生实例合集html,css,js

长期补充&#xff0c;建议关注收藏点赞。 目录 分栏input各种类型iframe表单拖拽 分栏 区分fieldset和framesetframeset是把浏览器窗口分成几个区域&#xff0c;每个区域分别放置一个html文档到对应的frame中&#xff0c;而且这个比例可以按住边栏进行调整col指定左右边栏的宽…...

编程日记 2026/3/3 2:25:38

MySQL--》如何在MySQL中打造高效优化索引

目录 初识索引 索引结构 性能分析 索引使用 最左前缀法则 SQL提示使用 覆盖索引使用 前缀索引使用 索引失效情况 初识索引 索引(index)&#xff1a;是帮助MySQL高效获取数据的数据结构(有序)&#xff0c;在数据之外数据库系统还维护着满足特定查找算法的数据结构&…...

编程日记 2026/3/11 5:21:37

盛京开源社区加入 GitCode，书写东北开源生态新篇章

在数字化转型与开源技术蓬勃发展的浪潮下&#xff0c;开源社区已成为推动技术创新的核心力量。盛京开源社区&#xff08;SJOSC&#xff09;作为沈阳地区的开源交流平台&#xff0c;始终致力于连接开发者、企业及高校&#xff0c;构建区域技术生态圈。 现在&#xff0c;盛京开源…...

编程日记 2026/3/29 8:56:58

HTML转义和反转义工具类

HTML转义和反转义工具类 package com.common.utils;import cn.hutool.http.HTMLFilter; import org.apache.commons.lang3.StringUtils;/*** 转义和反转义工具类** author lxx*/ public class EscapeUtil {public static final String RE_HTML_MARK "(<[^<]*?>…...

编程日记 2026/3/2 8:50:41

网络运维学习笔记（DeepSeek优化版）005网工初级（HCIA-Datacom与CCNA-EI）链路层发现协议与VLAN技术

文章目录 一、链路层发现协议1.1 思科CDP协议1.2 华为LLDP协议 二、VLAN&#xff08;Virtual Local Area Network&#xff0c;虚拟局域网&#xff09;技术详解2.1 基本概念2.2 技术特性2.3 接口工作原理2.3.1 Access模式2.3.2 Trunk模式 2.4 厂商配置对比思科配置华为配置 2.5 …...

编程日记 2026/3/20 6:55:48

DeepSeek开源周Day4：三连发！突破 AI 训练瓶颈的立体解决方案，并行计算三剑客DualPipe、EPLB与Profile-data

项目地址&#xff1a; https://github.com/deepseek-ai/DualPipehttps://github.com/deepseek-ai/eplbhttps://github.com/deepseek-ai/profile-data 开源日历&#xff1a;2025-02-24起 每日9AM(北京时间)更新&#xff0c;持续五天 (4/5)&#xff01; ​ ​ 一、背景概述 …...

编程日记 2026/4/2 6:13:12

树莓百度百科更新！宜宾园区业务再添新篇

树莓集团宜宾园区业务不断拓展&#xff0c;主要体现在以下几个方面&#xff1a; 产业布局 -聚焦数字经济核心领域&#xff1a;涵盖软件开发、人工智能、大数据等&#xff0c;吸引众多上下游企业入驻&#xff0c;形成从芯片研发、软件开发到系统集成的完整产业链条。 -推进“双…...

编程日记 2026/3/20 5:00:33

RabbitMQ操作实战

1.RabbitMQ安装 RabbitMQ Windows 安装、配置、使用 - 小白教程-腾讯云开发者社区-腾讯云下载erlang&#xff1a;http://www.erlang.org/downloads/https://cloud.tencent.com/developer/article/2192340 Windows 10安装RabbitMQ及延时消息插件rabbitmq_delayed_message_exch…...

编程日记 2026/3/15 19:43:39

IO 和 NIO 有什么区别？

文章目录 阻塞模式与非阻塞模式数据处理方式通信模型应用场景 阻塞模式与非阻塞模式 IO&#xff1a;是阻塞式的 IO 操作。在传统的 IO 中&#xff0c;当一个线程执行读操作或者写操作时&#xff0c;该线程会被阻塞&#xff0c;直到操作完成。例如&#xff0c;在从文件读取数据…...

编程日记 2025/3/22 20:55:17

OpenWebUI配置异常的外部模型导致页面无法打开

一、使用Ollama关闭OpenAI OpenWebUI自带OpenAI的API设置&#xff0c;且默认是打开的&#xff0c;默认情况下&#xff0c;启动后&#xff0c;会不断的去连https://api.openai.com/v1&#xff0c;但是无法连上&#xff0c;会报错&#xff0c;但是不会影响页面&#xff0c;能正常…...

编程日记 2026/3/11 10:26:15

2025年度福建省职业院校技能大赛高职组“信息安全管理与评估”赛项规程样题模块二

模块二 网络安全事件响应、数字取证调查、应用程序安全 竞赛项目赛题 本文件为信息安全管理与评估项目竞赛-第二阶段样题&#xff0c;内容包括&#xff1a;网络安全事件响应、数字取证调查。 本次比赛时间为90分钟。 介绍 竞赛有固定的开始和结束时间&#xff0c;参赛队伍必须…...

编程日记 2026/2/25 8:05:29

鸿蒙兼容Mapbox地图应用测试

鸿蒙Next已经发布一段时间了&#xff0c;很多之前的移动端地图应用&#xff0c;纷纷都要求适配鸿蒙Next。作为开发者都清楚&#xff0c;所谓的适配其实都是重新开发&#xff0c;鸿蒙的开发语言和纯前端的Javascript不同&#xff0c;也可以Android原始开发的语言不同。鸿蒙自带的…...

编程日记 2026/3/15 15:24:32

java练习（45）

ps:题目来自力扣 两数相除 给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。例如&#xff0c;8.345 将被截断…...

编程日记 2026/3/4 6:24:10

面试之《前端开发者如何优化页面的加载时间？》

前端开发者可以从多个方面入手优化页面的加载时间&#xff0c;以下是一些常见且有效的方法&#xff1a; 优化资源加载 压缩资源文件&#xff1a;对 HTML、CSS、JavaScript 文件进行压缩&#xff0c;去除不必要的空格、注释等&#xff0c;减小文件体积&#xff0c;加快下载速度…...

编程日记 2026/3/12 1:40:59

部署Flink1.20.1

1、设置环境变量 export JAVA_HOME/cluster/jdk export CLASSPATH.:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jarp #export HIVE_HOME/cluster/hive export MYSQL_HOME/cluster/mysql export HADOOP_HOME/cluster/hadoop3 export HADOOP_CONF_DIR$HADOOP_HOME/etc/hadoop …...

编程日记 2026/3/15 5:48:34

iOS自归因详细介绍

iOS自归因详细介绍 自归因&#xff08;Self-Attribution&#xff09;是指应用或广告平台通过分析用户行为数据&#xff0c;确定用户安装应用的来源渠道。在iOS生态中&#xff0c;由于隐私政策的限制&#xff08;如App Tracking Transparency&#xff0c;ATT&#xff09;&#…...

编程日记 2026/3/2 19:13:11

影视后期工具学习之PR

pr剪辑之旅 第一节课 入门基础知识 1.了解影视基础术语 2.PR面板&首选项设置 首选项需要设置的选项： 自动保存： 修剪： 媒体： 媒体缓存： 经典面板设置，可以根据个人喜好做出改变： 3.展示与准备工作 新建序列：1.横板序列 2.竖版序列：</...

编程日记 2026/3/31 3:20:51

浏览器JS打不上断点，一点就跳到其他文件里。浏览器控制台 js打断点，指定的位置打不上断点，一打就跳到其他地方了。

关闭JavaScript 源代码映射&#xff0c;F12开发者模式 设置->偏好设置->源代码/来源->JavaScript 源代码映射。 肯定不是这个原因导致的&#xff0c;但这个办法可以暂时解决问题&#xff0c;点完这个东西就隐藏了webpack&#xff0c;有懂的来讲讲。 又浪费一个小时…...

编程日记 2026/3/11 12:29:46

XXE漏洞：原理、危害与修复方法详解

目录 一、XXE漏洞概述二、XXE漏洞原理三、XXE漏洞危害1. 任意文件读取2. 命令执行3. 拒绝服务攻击（DoS）4. SSRF攻击四、XXE漏洞修复方法1. 禁用外部实体JavaPythonPHP2. 输入验证和过滤3. 安全配置服务器4. 升级解析器版本五、总结一、XXE漏洞概述 XXE（XML External Entity…...

编程日记 2026/3/27 9:34:46

C#与AI的交互（以DeepSeek为例）

C#与ai的交互 与AI的交互使用的Http请求的方式&#xff0c;通过发送请求&#xff0c;服务器响应ai生成的文本 下面是完整的代码&#xff0c;我这里使用的是Ollama本地部署的deepseek&#xff0c;在联网调用api时&#xff0c;则url会有不同 public class OllamaRequester {[Se…...

编程日记 2026/3/16 14:47:15

Qt——使用QtConcurrent::run开启的线程，程序退出后仍在后台运行的解决方法（QFutureWatcher监视线程）

【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！ 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实...

编程日记 2025/5/11 11:43:02

DeepSeek-R1：通过强化学习激发大语言模型的推理能力

注&#xff1a;此文章内容均节选自充电了么创始人&#xff0c;CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》&#xff08;人工智能科学与技术丛书&#xff09;【陈敬雷编著】【清华大学出版社】 文章目录 DeepSeek大模型技术系列三DeepSeek大模型技术系列三》DeepSeek-…...

编程日记 2026/3/14 3:55:49

Xcode如何高效的一键重命名某个关键字

1.选中某个需要修改的关键字&#xff1b; 2.右击&#xff0c;选择Refactor->Rename… 然后就会出现如下界面&#xff1a; 此时就可以一键重命名了。 还可以设置快捷键。 1.打开Settings 2.找到Key Bindings 3.搜索rename 4.出现三个&#xff0c;点击一个地方设置后其…...

编程日记 2026/3/4 15:14:44

smolagents学习笔记系列（八）Examples - Master you knowledge base with agentic RAG

这篇文章锁定官网教程中 Examples 章节中的 Master you knowledge base with agentic RAG 文章&#xff0c;主要介绍了如何将 agent 和 RAG 结合使用。 官网链接&#xff1a;https://huggingface.co/docs/smolagents/v1.9.2/en/examples/rag&#xff1b; Agentic RAG 在之前的…...

编程日记 2026/4/2 18:48:29

数据挖掘工程师的技术图谱和学习路径

数据挖掘工程师的技术图谱和学习路径： 1.基础知识 数据挖掘工程师是负责从大量数据中发现潜在模式、趋势和规律的专业人士。以下是数据挖掘工程师需要掌握的基础知识： 数据库知识：熟悉关系数据库和非关系数据库的基本概念和操作，掌握SQL语言。 统计学基础：了解统计学的基…...

编程日记 2026/4/2 3:09:45

机器学习数学基础：37.偏相关分析

偏相关分析教程 一、偏相关分析是什么 在很多复杂的系统中&#xff0c;比如地理系统&#xff0c;会有多个要素相互影响。偏相关分析就是在这样多要素构成的系统里&#xff0c;不考虑其他要素的干扰&#xff0c;专门去研究两个要素之间关系紧密程度的一种方法。用来衡量这种紧…...

编程日记 2026/2/6 0:07:16

DevSecOps普及：安全与开发运维的深度融合

一、引言 随着软件开发模式的演进&#xff0c;DevOps已成为现代软件工程的主流实践。然而&#xff0c;在传统的DevOps流程中&#xff0c;安全往往被视为开发和运维之外的额外环节&#xff0c;导致安全漏洞在产品交付后才被发现&#xff0c;增加了修复成本和风险。为了解决这一…...

编程日记 2026/2/15 13:26:36

MySQL 8.4 SQL 全攻略：所有知识点与实战场景

一、引言 MySQL 作为一款广泛使用的开源关系型数据库管理系统&#xff0c;在数据存储和管理领域占据着重要地位。MySQL 8.4 版本在性能、功能和安全性等方面都有了显著的提升。本文将全面介绍 MySQL 8.4 中 SQL 的各种知识点&#xff0c;并结合实战场景进行详细讲解&#xff0…...

编程日记 2026/3/3 15:49:20

AVA面试_进阶部分_kafka面试题

1.Kafka 的设计时什么样的呢&#xff1f; Kafka 将消息以 topic 为单位进行归纳 将向 Kafka topic 发布消息的程序成为 producers. 将预订 topics 并消费消息的程序成为 consumer. Kafka 以集群的方式运行&#xff0c;可以由一个或多个服务组成&#xff0c;每个服务叫做一个…...

编程日记 2026/2/15 21:00:10

Redis源码剖析之GEO——Redis是如何高效检索地理位置的？

Redis GEO 用做存储地理位置信息&#xff0c;并对存储的信息进行操作。通过geo相关的命令&#xff0c;可以很容易在redis中存储和使用经纬度坐标信息。Redis中提供的Geo命令有如下几个&#xff1a; geoadd&#xff1a;添加经纬度坐标和对应地理位置名称。geopos&#xff1a;获取…...

编程日记 2026/3/11 3:48:59