html和javascript并存的吗,html和javascript怎么连接

最新推荐文章于 2025-12-04 22:56:41 发布
原创 最新推荐文章于 2025-12-04 22:56:41 发布 · 244 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文围绕HTML和JavaScript展开，介绍了HTML的标签、表格等知识，如标题、段落标签等；阐述了CSS的概念、优势及文本样式设置；还讲解了JavaScript的函数、作用域、BOM、DOM操作、事件等内容，包括函数分类、事件模型等信息技术相关要点。

大家好，本文将围绕html和javascript并存的吗展开说明，html和javascript怎么连接是一个很多人都想弄明白的事情，想搞清楚html和javascript先学哪个需要先了解以下几个事情。

HTML是什么？

超文本标记语言，用来设计网页 的（静态网页：.html,.htm),需要借助于浏览器进行展示，浏览器是网页的运行环境，建议安装chrome浏览器。

标签理解

1.HTML标签由尖括号包围关键词Python解释器的安装步骤。通常是成对出现的，称为双标签。例如<html>(开始标签)和</html>(结束标签)。有些特殊标签为单个标签，称为单标签。例如

2.标签关系有包含关系和并列关系

3.标签的含义(语义)：标签是用来干嘛的。(在适合的地方给一个合理的标签可以使页面结构更清晰)

4.每个网页都会有一个基本的结构标签(也称为骨架标签)，HTML页面也称为HTML文档

5、不区分大小写

常用标签

注释

作用：用来对页面 中的代码进行说明，不会呈现效果

1.标题标签<h1>-<h6>

(1) 语义：(head的缩写)作为标题使用，并依据重要性递减

(2) 特点：a.加了标题标签文字会变粗，字号依次变大 b.一个标题独占一行

2.段落标签<p>

(1) 语义：(paragraph的缩写),可以把HTML文档分割为若干段落

(2) 特点：a.一个段落根据浏览器窗口的大的自动换行 b.段落之间有大的空隙

3.换行标签

(1) 语义：强制换行,(break的缩写)

(2) 特点：a. 是个单标签 b. 只是简单重新开始一行与段落不同

4.文本格式标签

简介：为文字设置粗体,斜体或下划线等效果，语义：突出重要性

(1) 加粗：<strong></strong>或<b></b> 推荐使用<strong>标签，语义更强烈

(2) 倾斜：<em></em>或<i></i> 推荐使用<em>标签，语义更强烈(emphasize)

(3) 删除线：<del></del>或<s></s> 推荐使用<del>标签，语义更强烈(delete)

(4) 下划线：<ins></ins>或<u></u> 推荐使用<ins>标签，语义更强烈(insert)

5.<div>和<span>标签

简介：(没有语义，是一个盒子，用来装内容 division span)

特点：a.<div>标签用来布局，一行只能放一个<div>,是个大盒子 b.<span>标签用来布局，一行可以有多个<span>,是个小盒子

6、图像标签

img:标签名   src/alt/width/height:属性
<img src="图片路径" alt="替换文本" width="x" height="y" title="标题"/>
src:要展示的图片的路径 【相对路径、绝对路径】
alt:图片替换文本、当图片路径无效时生效
width:图片宽度
height:图片高度
title:提示信息（标题）

标签分类（重点）

  • 块级元素：

    • 独占一行，

    • 可以设置宽高，如果不设置，默认占据父元素宽度的100%，

    • 块可以嵌套 块 和 行

    • 标签：div,h1-h6 ul ol dl li p table form

  • 行级元素:

    • 在行内显示，与其他行内元素并排显示，一行排不下了才折行显示，

    • 内容撑开宽高，不可以设置宽高（img、input除外），

    • 行标签通常嵌套行标签

    • 标签：span a em strong input img

    • 特殊标签：img 和 input ，行内块状标签，兼具两种类型标签的特点

  • 可以相互转换：样式（display)

注释和特殊符号

特殊符号字符实体示例
空格&nbsp;百度 | 新浪
大于号(>)&gt;如果时间>晚上6点，就坐车回家
小于号(<)&lt;如果时间<早上7点，就走路去上学
引号&quot;W3C规范中，HTML的属性值必须用成对的"引起来
版权符号&copy;© 2003-2013阿里巴巴

表格

表格作用

1、常用来展示数据，规范排列，后台系统使用较多

2、不再使用表格进行布局，对搜索引擎不友好

表格常用属性（了解）

属性名说明示例
align水平对齐align="left|center|right" 左中右；用在：table ,tr,td中
border边框粗细border=1；用在：table中
cellspacing单元格之间的间隙默认是1，用在：table中
cellpadding单元格中内容和边框之间的间距默认是1，用在：table中
width,height宽和高用在：table、tr、td中；同一行高度一致，同一列宽度一致；通常给行设置高度，列设置宽度，

单元格合并

  • 跨行合并：rowspan=“合并的行数”

  • 跨列合并： colspan="合并的列数"

样式

使用css，可以让原始的页面即黑色文字页面变得丰富起来，漂亮起来，实现我们想要的排版布局的效果

样式：对页面进行美化、布局、定位、排版;类似于化妆、美颜

css是什么

层叠样式表（Cascading Style Sheet）

html是骨架。css是衣服，起到装饰的作用，花花绿绿的，css是用来修饰网页的，让网页变得更美丽，更好看。

html:页面中的内容

css:表现

CSS的优势

  • 内容与表现分离

  • 网页的表现统一，容易修改

  • 丰富的样式，使页面布局更加灵活

  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽

  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

  • 选择器的类型

  • 1、标签选择器，通过标签来选择页面元素。直接写标签名，会把页面中所有的相同标签的都选中

h1{

 属性：值；

}

2、id选择器

通过自定义的id属性来选择元素，id唯一，不可重复id=”id名”

#id名{
 属性：值；
}

3、类选择器

通过自定义的类属性，通过类名来选择元素，类可以重复，可以多个，class=”类名”

.类名{

 属性：值；

}

文本样式

color颜色取值的格式

1、直接写颜色 也要复合写法 yellowgreen 黄绿色

2、16进制

3、RGB RGBA 红绿蓝 三原色

颜色不需要记，ui会给你的

文字对齐方式

  • text-align: center 居中

  • right 右对齐

  • left 左对齐

对齐参照点不同 ，对齐的方式也不同，以父级元素为标准，不设宽度，默认为浏览器宽度。暂时有这个概念，盒子模型学完就推翻了

如果想要指定对齐，需要设置宽和高

宽：weight 高：hight

  • text-indent 首行缩进

单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化，首行缩进用em比较合适

开启控制台进行调整

  • line-height： 设置行高，设置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中

  • height = line-height 可以实现文本垂直居中

  • 使用场景：

    • 单行文本：垂直居中

    • 多行文本：调行间距

  • 设置文本装饰

    text-decoration: line-through 删除线

    underline 下划线

    overline 上划线

函数是什么？

函数：来源数学中的名词，类似于特定的公式，细节已经封装到函数内部，直接使用函数名来得到想要的效果。

函数分类：

1、声明式函数
 function 函数名(参数列表){
     函数体:封装的代码段;
     return 结果;
 }

无参数、无返回值的函数

示例：在页面上打印欢迎字样

 //定义
 function print1() {
       document.write('<h1>hello world</h1>');
  }
 //调用
 print1(); //使用

无参数、有返回值的函数

返回1-100之间的随机数

      /**
      * 生成1-100的随机数
      * */
      function getRandom(){
       // 随机数
       var result=Math.ceil(Math.random()*100);
       // 返回结果
       return result;
       // 不会执行
       // console.log('后续的代码');
     }
 ​
     var ary=new Array(5);
     for(var i=0;i<ary.length;i++){
       // 调用函数 ：声明变量接受结果
       ary[i]=getRandom();
     }
     console.log(ary);

有参数、无返回值的函数

示例1：修改后的显示菜单

     // 显示菜单
     // menu:代表一个数组菜单
     function showMenu(menu) {
       document.write('<h1>欢迎来到AAA</h1>');
       // 判断menu是否是数组类型的实例
       if (menu instanceof Array) {
         // 遍历
         for (i of menu) {
           document.write(`<h2>${i}</h2>`);
         }
       } else {
         alert('只接受数组类型的数据');
       }
     }
     // 调用
     var ary=['1、登录','2、注册','3、用户管理'];
     showMenu(ary);
     ary=['1、查询账单','2、输入密码','3、退出系统'];
     showMenu(ary);

有参数、有返回值的函数

作用域和作用域链（掌握）

作用域

作用域：作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

2、let

  • 全局作用域：在代码中任何地方都能访问到的对象拥有全局作用域

    • 在 Web 浏览器中，全局作用域被认为是 window 对象，因此所有全局变量和函数都是作为 window 对象的属性和方法创建的

      • 最外层函数和在最外层函数外面定义的变量拥有全局作用域

      • 所有末定义（没有使用var)直接赋值的变量自动声明为拥有全局作用域，会挂载到window对象中

  • 函数（局部 ）作用域：和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，通常指的是函数内部。

  • 块级作用域: ES6中提供的，使用{ }限定块级作用域， 块级作用域可通过新增命令let和const声明，所声明的变量在指定块的作用域外无法被访问

    • 在一个函数内部

    • 在一个代码块（由一对花括号包裹）内部

    • 块级作用域并不影响var声明的变量

    • 面试问题：

  • var、let 和 const 的区别：

    1、var

  • 变量提升：只有声明本身被提升，而赋值操作或其他运行逻辑会留在原地。

  • 作用域：有全局作用域和函数作用域，函数作用域外的无法访问到包裹在函数内部的任何内容。

  • 块级作用域：只要是两个花括号包含的区域，就形成块（即使没有if、for等语句）。块外部无法访问到内部的内容。

  • 暂时性死区：let声明一个变量，就会与该块进行锁定。在块的内部，如果let初始化前的代码如果使用了该变量，不会去搜索上一级块内的变量，而是出现报错。只有let声明的变量初始化之后，才能访问。

  • 不能重复声明：同一作用域内，同一标识符不能重复声明。

  • 重复声明：同一作用域内可以重复声明，但是第二个声明会被忽略，只是将第二次的赋值进行覆盖。（需要避免）

认识BOM

js=ECMAScript(ECMA标准:核心语法) + BOM(浏览器对象模型)+DOM(文档对象模型：w3c)

BOM: 浏览器对象模型，Browser Object Model ,提供了一系列的API(Applicaion Programing Interface应用程序编程接口）专门用来操作浏览器窗口。

window中的常用方法（函数）

  1. alert(数据) :弹框，消息框

  2. prompt(提示信息，默认值)：弹框，输入信息

  3. confirm('确认提示'): 确认弹框，返回true/false 的结果

  4. open():打开新窗口 mdn open

  5. close():关闭窗口

  6. setTimeout(函数，延时：毫秒)：延时执行函数 只执行一次,返回结果作为句柄用来 控制该延时器

  7. clearTimeout(返回结果) :停止延时函数的执行

  8. setInterval(函数，频率：毫秒) ：定时执行，每隔一定时间执行函数 ；用法雷同于setTimeout

  9. clearInterval(返回结果)：停止定时函数的执行

window中的常用属性

  • window.location:地址栏;该接口表示其链接到的对象的位置

  • window.history:历史记录；该对象提供了对浏览器的会话历史的访问

  • window.navigator:导航；该接口表示用户代理的状态和标识

  • window.screen:屏幕；该接口表示一个屏幕窗口，往往指的是当前正在被渲染的 window 对象，可以使用 window.screen 获取它

  • window.document:文档对象

  • window.console:控制台对象

常用属性和方法

document常用属性：

属性说明
document.doctype返回与文档相关的文档类型声明 (DTD)
document.body返回文档的body元素
document.documentElement返回文档的根节点:HTML元素
document.title返回当前文档的标题
document.forms返回当前文档的表单集合。

写入和获取元素的各种方法

方法说明
document.write()在文档中写入内容；document.open(),write(),close() ;关闭后再写入会覆盖文档的内容
getElementById(元素id)根据id获取到对应的标签对象（单个）（元素：element ,节点对象node)；可以获取到动态标签
getElementsByTagName(标签名)根据标签名获取到一组同类型的元素（伪数组）；返回HTMLCollection;获取动态节点集合
getElementsByClassName(类选择器名)根据类名获取到一组同类的元素（伪数组）;返回HTMLCollection;获取动态节点集合
getElementsByName(名字)根据名字属性获取到一组同名元素（伪数组）;返回HTMLCollection;获取动态节点集合
querySelector(css选择器)通过css选择器获取到第一个匹配的元素；
querySelectorAll(css选择器)通过css选择器获取到所有匹配的元素（伪数组）；返回NodeList;获取静态节点集合；

  

        

获取|修改 内容、 属性、样式

属性说明
操作对象.innerHTML改变 HTML 内容
操作对象.innerText改变 HTML 内容为纯文本
操作对象.textContent改变 HTML 内容为纯文本
操作对象.attribute获取|修改 HTML 属性
操作对象.setAttribute(属性名,属性值)修改属性的值
操作对象.getAttribute("属性名")获取属性的值
对象.style.property改变操作样式的属性
对象.className修改元素的类选择器
对象.classList.add(类选择器)在类列表中添加类选择器
对象.classList.replace(原始类选择器，新类选择器)替换
对象.classList.remove(类选择器)移除
对象.classList.contains(类选择器)判断是否包含类选择器 true/false
对象.classList.item(索引)根据索引获取列表中的某个选择器的名字
对象.classList.forEach()遍历
Window.getComputedStyle()返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值；在许多在线的演示代码中，getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用

DOM节点属性

节点属性

下述属性用来获取节点对象

属性名称描述
parentNode返回节点的父节点
parentElement返回节点的父元素
childNodes返回所有节点，包含元素节点和文本节点，换行等
children返回子节点集合，只返回元素节点【标签】
firstChild返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild返回节点的最后一个子节点
firstElementChild返回节点的第一个元素子节点
lastElementChild返回节点的最后一个元素子节点
nextSibling下一个节点
previousSibling上一个节点
getAttributeNode获取属性节点
previousElementSibling上一个元素节点
nextElementSibling下一个元素节点

节点操作

常用方法：
名称描述
document.createElement(“元素名”)创建元素节点
document.createTextNode(“文本”)创建文本节点
A.appendChild( B)把B节点追加至A节点的末尾
parent.insertBefore( A,B )把A节点插入到B节点之前；A：要插入的新的节点 B:原来已经存在的一个元素
cloneNode(deep)复制某个指定的节点 deep:true 深层复制，包括其中的子节点 deep:false 浅层复制，只是当前节点对象
名称描述
父节点.removeChild( 子节点)删除指定的节点
父节点.replaceChild( newNode, oldNode)用其他的节点替换指定的节点

事件简介

JavaScript 是一个事件驱动(Event-driven) 的语言，当浏览器载入网页开始读取后，虽然马上会读取JavaScript 事件相关的代码，但是必须要等到「事件」被触发(如使用者点击、按下键盘等)后，才会再进行对应代码段的执行。

事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。

事件：特定的时间节点发生的一些动作（行为），一旦动作发生或会触发一些操作。

常见事件：点击、双击、移动、滚动、改变事件

理解：

事件：就是用户或浏览器自身执行的某种操作，如click、load、mouseover等，都是事件的名字，而响应某个事件的函数就被称为事件处理程序

DOM事件流

DOM是树形结构，如果同时给父子节点都绑定事件时，当触发子节点的时候，这两个事件的发生顺序如何决定?这就涉及到事件流的概念，它描述的是页面中接受事件的顺序

事件流(Event Flow)指的就是「网页元素接收事件的顺序」。当一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：

  1. 捕获阶段：事件从window对象自上而下向目标节点传播的阶段；

  2. 目标阶段：真正的目标节点正在处理事件的阶段；

  3. 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

事件模型

1、DOM0级事件模型

又称为原始事件模型，事件绑定监听函数比较简单, 有两种方式:

  • HTML代码中直接绑定:

    <input type="button" onclick="fun()">

  • 通过JS代码指定属性值:

    var btn = document.getElementById('.btn');

    btn.onclick = fun; //只能绑定1次事件

    移除监听函数：

    btn.onclick = null;

这种方式所有浏览器都兼容，但是逻辑与显示并没有分离

2、DOM2级事件模型

属于W3C标准模型，现代浏览器(除IE6-8之外的浏览器)都支持该模型。在该事件模型中，一次事件共有三个过程:

  • 事件捕获阶段(capturing phase)。事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

  • 事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。

  • 事件冒泡阶段(bubbling phase)。事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

DOM2事件特点

1、同一个元素绑定相同的事件，后面的不会覆盖前面的。因为DOM2级事件绑定不是给元素添加属性是直接添加的事件。等同于给一个元素绑定了多个事件。 2、在DOM2级事件处理中通过addEventListener()添加的匿名函数无法移除，只能清除命名函数；

小结：DOM0和DOM2区别

区别

  1. dom0级绑定多个相同的事件，后者会覆盖前者，dom2级不会

  2. Dom0只适合普通事件，Dom2级还有指定的事件类型如DOMContentLoaded(当html文档结构加载完成之后执行)这个事件就是jquery中的$(document).ready()

事件对象Event

问题：

鼠标移动时获取鼠标的位置？怎么获取？使用：Event:

当一个事件被触发时，会创建一个事件对象(Event Object), 这个对象里面包含了与该事件相关的属性或者方法。该对象会作为第一个参数传递给监听函数。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件代理（事件委托）

为什么要事件委托?

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的操作dom,那么引起浏览器重绘和回流的可能也就越多，页面交互的事件也就变的越长，这也就是为什么要减少dom操作的原因。每一个事件处理函数，都是一个对象，那么多一个事件处理函数，内存中就会被多占用一部分空间。如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

HTML实现单击与双击等连续事件并存且互不干扰
NaXieNianDeii的博客
09-18 2192
挺简单的原理，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击事件测试</title> <script> var grade=0; function j...
基于Java、JavaScript、Vue和HTML的QRCodeLogin系统设计源码
10-01
本项目通过使用Java、JavaScript、Vue和HTML等编程语言和技术，构建了一个跨平台的QRCodeLogin系统。系统源码包含多个文件，其中Java语言负责后端逻辑处理，JavaScript和Vue框架用于前端界面设计与交互实现，HTML...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
胖虎虎
07-28 4522
JS函数类似Java中的方法Java中定义方法的格式是[修饰符列表]返回值类型方法名(形式参数列表){方法体;}JS是一种弱类型，JS中的函数不需要指定返回值类型，返回什么类型都行函数的定义格式是//第一种方式function函数名(形式参数列表){函数体;}//第二种方式函数名=function(形式参数列表){函数体;}例如函数//a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。配合单击按钮框的逻辑完整代码如下...
【Web前端】标签大全HTML/CSS/JavaScript
鱼干的博客
07-29 2037
HTML 超文本标记语言 它负责网页的三个要素之一结构 CSS1 内容与表现分离 2网页表现统一容易更改 .3丰富样式 是布局灵活 4.减少网页代码量 增加网页浏览速度 节省 网络带宽 5.运用独立页面的css 有利于网页被搜索引擎收录 html超文本标记语言 表内容 +css表现 +js行为 客户端脚本语言 运行在客户端浏览器中的， 每个浏览器都有解析就是引擎 不需要编译 直接运行 功能：可以增强用户与htm
javascript 鼠标单击和双击事件并存的实现方法
热门推荐
Quincylk的专栏
08-14 2万+
http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法，经常需要为一个链接注册双击事件，或让一个按钮或者其他元素上面同时注册单击或者双击事件。供大家参考。 经常需要为一个链接注册双击事件，或让一个按钮或者其他元素上面同时注册单击或者双击事件，此时网页中的双击事件似乎永远都不会起作用，原因是当点击一
html小人动画效果代码,JavaScript+html5 canvas绘制的小人效果
weixin_40001245的博客
06-05 574
本文实例讲述了JavaScript+html5 canvas绘制的小人效果。分享给大家供大家参考，具体如下：运行效果截图如下：index.html代码如下：canvas中的缩放#canvas {background:black; margin-top:100px; margin-left:200px;}cache = {};var offsetX = 50,offsetY = 20;cache.c...
JavaScript数组
流楚丶格念的博客
07-19 4452
文章目录数组为什么要学习数组数组的概念数组的定义获取数组元素遍历数组数组中新增元素案例 数组 为什么要学习数组 之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？ 数组的概念 所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。 数组的定义 数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。 通过数组字面量创建数组 // 创建一个空数组 var ar
html+css+js基础问答
qq_43751465的博客
08-26 5828
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
如何在 JavaScript 事件中区分页面关闭和页面刷新？
redrun博客
11-11 3615
在 Web 开发中，有时你需要监听页面关闭或刷新事件，并根据情况执行不同的操作。可以监听页面关闭或刷新事件，但无法区分这两者。通过设置一个标记，可以判断页面是否刷新。通过检查，可以确定页面是否被刷新。虽然事件能处理很多场景，但如果你需要更精确的控制，可以结合或来判断页面是否刷新。记住需要进行适当的兼容性测试。
动态执行 JavaScript 代码的正确姿势与安全边界
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-29 740
动态执行让 JavaScript 拥有脚本语言的魔力，也打开了潜在的潘多拉盒子。API作用域CSP 需求性能典型用途eval与调用点相同最慢教学演示、遗留代码Function全局与eval相当模板引擎、表达式求值setTimeout字符串与调用点相同同eval历史代码import()独立模块合法脚本源即可快，支持缓存懒加载、A/B 实验Worker 线程白名单线程开销大计算、沙箱插件在现代前端工程，动态import()与Worker 沙箱是最值得推崇的做法；eval与。
一个html中同时引入js和ts,vue-cli3 js项目中引入ts混用（typeScript）
weixin_30595763的博客
06-15 3616
一、安装typescript及loadernpm install typescript ts-loader --save-dev二、安装vue-property-decoratornpm install vue-property-decorator --save-dev三、配置vue.config.jsmodule.exports = {configureWebpack: {resolve: { ...
javascript实现单击和双击并存的方法
10-25
在使用JavaScript进行网页开发时，如何实现单击和双击事件的同时触发一直是一个值得关注的问题。在常规的网页交互中，单击事件往往会先于双击事件被触发，因为用户对元素的第一次点击会立即触发单击事件的处理函数，...
Etch-A-Sketch:一个简单的Etch Sketch应用程序，该应用程序使用html，javascript和jquery构建
05-29
在编程领域，创新和趣味性往往并存，而“Etch-A-Sketch”就是一个很好的例子。这个项目基于经典的儿童玩具Etch A Sketch，将其转化为数字版本，利用HTML、JavaScript和jQuery来实现。在本文中，我们将深入探讨这些...
基于Django框架的moobo论坛设计源码，多语言支持：Python, JavaScript, CSS, HTML
10-04
bbs目录和blog目录可能分别用于存放论坛和博客相关的代码，这两个功能在社区交流平台上常常并存，以便用户能够分享信息和参与讨论。editor目录可能用于实现一个文本编辑器组件，这在发布帖子或评论时非常有用，允许...
React大模型网站-流式推送markdown转换问题以及开启 rehype-raw,rehype-sanitize,remark-gfm等插件的使用
m0_61998604的博客
12-04 591
本文介绍了在React大模型网站中实现流式推送Markdown转换的方法，重点讲解了ReactMarkdown库及其配套插件的使用。主要内容包括：1）ReactMarkdown基础用法；2）通过rehype-raw插件支持HTML标签渲染；3）使用rehype-sanitize防止XSS攻击；4）利用remark-gfm支持GitHub风格的Markdown语法；5）给出了完整的流式渲染实现方案，包含SSE推送、内容累积和实时更新等关键技术。文章还提供了完整的代码示例，帮助开发者快速实现安全可靠的Markd
50、【Ubuntu】【Gitlab】拉出内网 Web 服务：http.server 单/多线程分析（二）
最新发布
HIT_Weston的博客
12-04 636
本文分析了Python的http.server模块在单线程和多线程模式下的性能表现。通过测试发现，单线程模式下（Python<3.7）并发请求会被阻塞，后发请求需要等待前一个请求完成；而多线程模式下（Python≥3.7）可以同时处理多个请求。作者通过slow_server.py脚本模拟耗时操作，使用time curl命令测试响应时间，验证了线程模型的差异。文章还指出Python 3.7是一个重要分水岭，官方将默认命令行服务器升级为多线程以提升用户体验。技术细节参考了CPython源码，并提供了Git
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 605
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
《Java Web 期末项目分享：MVC+DBUtils+c3p0 玩转数据库增删改查》——第一弹
zzy_wqe的博客
12-04 344
编写登录表单，提交到 LoginServlet；可读取 Cookie 自动填充用户名。启动 Tomcat，测试登录、增删改查是否正常（检查数据库数据变化、页面显示是否正确）；：编写表单，提交到对应 Servlet，实现数据录入 / 回显。确保未登录时直接访问 Servlet 会跳转到登录页。添加空值判断、数据库操作异常捕获，给出友好提示；
【前端知识】从前端请求到后端返回：Gzip压缩全链路配置指南
wendao76的专栏
12-03 1085
本文详细介绍了Gzip压缩的全链路配置流程，从前端请求到后端返回的完整实现方案。前端需通过Accept-Encoding: gzip声明支持压缩，后端根据请求头、响应类型和大小判断是否压缩，并返回Content-Encoding: gzip响应头。文章提供了浏览器、JavaScript、命令行工具等多种前端场景的配置示例，以及Nginx、Apache、Node.js和Spring Boot等主流后端技术的Gzip配置方法。通过合理配置Gzip压缩，可显著减少网络传输数据量，提升Web应用性能。
基于HTML5和JavaScript实现的像素小鸟游戏
HTML5 小鸟游戏——“是男人就撑过60秒”这一项目是一个典型的基于原生 JavaScript 与 HTML5 Canvas 技术实现的轻量级浏览器端小游戏，其灵感来源于风靡全球的《Flappy Bird》（中文俗称“像素鸟”或“下落的小鸟”...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值