小马哥	18	男	中国
小岳岳	45	男
邓紫棋	23	女

人物介绍
小马哥	18	男	rowspan="3">中国
小岳岳	45	男
邓紫棋	23	女

tty之星

1)前端的html和css基础标签简单盒子

1）前端：html

这里使用谷歌浏览器

开发工具使用pycharm

1、HTML的概述

html全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

注：html中，除了语义，其他什么都没有。

2、HTML的网络术语

· 网页：由各种标记组成的一个页面就叫网页。

· 主页(首页) : 一个网站的起始页面或者导航页面。

· 标记：

称为开始标记，

称为结束标记，也叫标签。每个标签都规定好了特殊的含义。

· 元素：

内容

称为元素.

· 属性：给每一个标签所做的辅助信息。

3、HTML 的规范

（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：

（2）所有的标记都必须小写。

（3）所有的标记都必须关闭。

· 双边标记：

· 单边标记：
转成

转成

，还有

（4）所有的属性值必须加引号。

（5）所有的属性必须有值。

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。

任何一个标准的HTML页面，第一行一定是一个以

DOCTYPE...

html>
lang="en">

charset="UTF-8">
我的第一个网页

我的第一个网页

head标签都放在头部分之间。这里面包含了：、<meta>、<link>，<style> · <title>：指定整个网页的标题，在浏览器最上方显示。 · <meta>：提供有关页面的基本信息 · <link>：定义文档与外部资源的关系。 · <style>:定义内部样式表与网页的关系 http-equiv属性 它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。  <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  <meta http-equiv="x-ua-compatible" content="IE=edge"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个网页

我的第一个网页

http-equiv="refresh" content="2;URL=http://www.baidu.com">

http-equiv="Content-Type" content="text/html;charset=utf-8" />

http-equiv="x-ua-compatible" content="IE=edge">

上面这个标签，是让我们网页支持移动端，移动设备优先（了解即可）

可以参考：

http://www.cnblogs.com/majj/p/9056951.html

需要记住：

标题使用

至
标签进行定义。
定义最大的标题，
定义最小的标题。具有align属性，属性值可以是：left、center、right。

html>
lang="en">

 charset="UTF-8">
 我的第一个网页


学城


学城


学城


学城


学城


学城

上标：^下标：

上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部

例子：

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

52
82

特殊符号：

· ：空格（non-breaking spacing，不断打空格）

· <：小于号（less than）

· >：大于号（greater than）

· &：符号&

· "：双引号

· '：单引号

· ©：版权©

· ™：商标™

特殊符号列表：

http://tool.chinaz.com/Tools/HtmlChar.aspx

段落标签：

属性：

· align='属性值'：对齐方式。属性值包括：left、center、right

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

这是一个段落

align="center">这是另一个段落

下面这几句话，大家一定牢牢记住。HTML标签是分等级的。HTML将所有的标签分为两种：

· 文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。

· 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西

标签可以换行

修改超链接连接的颜色

html>
lang="en">

 charset="UTF-8">
 我的第一个网页


href="http://www.baidu.com">百度一下

出现小手在浏览器上：

跳到顶部：#top

href="#top">src="./1.jpg" alt="美女">

阻止a标签的功能：

href="javascript">

从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

错误写法：（把h系列的标签放到p里）

块级标签：

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。

div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

div标签的属性：

· align="属性值"：设置块儿的位置。属性值可选择：left、right、 center

和
唯一的区别在于：是不换行的，而
是换行的。

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

class="topBar">
 导航栏

class="header">
 区域栏

sssss
bbbbb

标签选择器：

类选择器：

写多个别名：

：标签不能设置宽高，在一行内显示，默认是内容的宽高

display属性：可以对a标签的属性进行设置宽高

Img：标签

行内块标签

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

Span举例：

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

 商品简介:

 href="">详细信息
 href="">生产日期


预定义标签：

含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，
标签几乎用不着。但在PHP中用于打印一个数组时使用。

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

 鹅鹅鹅

 作者：李白
 曲项向天歌
 白毛浮绿水



超链接：

外部链接：链接到外部文件。举例：

<a href="new.html">点击进入到新网页a>

<a href="http://www.baidu.com" target="_blank">进入百度a>

锚链接：
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。

<a href="new.hhml#top">回到顶部a>

邮件链接：
代码举例：

<a href="mailto:[email protected]">联系我们a>

返回页面顶部的位置

<a href="#">跳转到顶部a>

与js有关：

<a href="javascript:alert(1)">内容a>

 <a href="javascript:;">内容a>

1. javascript:;表示什么都不执行，这样点击时就没有任何反应例如：内容

2. javascript:是表示在触发 默认动作时，执行一段JavaScript代码。例如：内容

连接图片：

<img src="2.jpg"><img src=".\2.jpg">

<img src="..\2.jpg">

（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

（2）网络路径。举例：

<img src="http://www.baidu.com/2016040102.jpg">

· width：宽度

· height：高度

· title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。

· align：指图片的水平对齐方式，属性值可以是：left、center、right

<img src="images/bojie.jpeg" alt="波姐" title='波多野结衣' width="400" height="400">

注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right

无序列表
，无序列表中的每一项是

· ul：unordered list，“无序列表”的意思。

· li：list item，“列表项”的意思。

html>
lang="en">

 charset="UTF-8">
 我的第一个网页


张三


李四


王五

· li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

· 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

属性：

· type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

效果如下：

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

type="square">

张三


李四


王五

列表之间是可以嵌套的。我们来举个例子：
代码：

<ul>

 <li>北京市b>

 <ul>

 <li>海淀区li>

 <li>朝阳区li>

 <li>东城区li>

 ul>

 li>

 <li>广州市b>

 <ul>

 <li>天河区li>

 <li>越秀区li>

 ul>

 li>

 ul>

有序列表
里面的每一项是

<ol>

 <li>嘿哈li>

 <li>哼哈li>

 <li>呵呵li>

ol>

属性：

· type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

type="A">

嘿哈


哼哈


呵呵

定义列表

定义列表的作用非常大。

英文单词：definition list，没有属性。dl的子元素只能是dt和dd。

·
：definition title 列表的标题，这个标签是必须的

·
：definition description 列表的列表项，如果不需要它，可以不加

备注：dt、dd只能在dl里面；dl里面只能有dt、dd。

html>
lang="en">

 charset="UTF-8">
 我的第一个网页


第一条规则


不准睡觉


不准交头接耳


不准下神


第二条规则


可以泡妞


可以×××子


可以看mv

表格标签：

表格标签用
表示。
一个表格
是由每行组成的，每行是由:行
属性：
· dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
· bgcolor：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
· height：一行的高度
· align="center"：一行的内容水平居中显示，取值：left、center、right
· valign="center"：一行的内容垂直居中，取值：top、middle、bottom
:单元格
属性：
· align：内容的横向对齐方式。属性值可以填：left right center。
如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
· valign：内容的纵向对齐方式。属性值可以填：top middle bottom
· width：绝对值或者相对值(%)
· height：单元格的高度
· bgcolor：设置这个单元格的背景色。
· background：设置这个单元格的背景图片。
单元格合并：
o colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
o rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
html>
lang="en">

 charset="UTF-8">
 我的第一个网页

组成的。
所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。

html>
lang="en">

 charset="UTF-8">
 我的第一个网页























小马哥 18 男山东
小岳岳 45 男河南
邓紫棋 23 女香港

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

border="1">






















小马哥 18 男山东
小岳岳 45 男河南
邓紫棋 23 女香港

border="1">






















小马哥 18 男山东
小岳岳 45 男河南
邓紫棋 23 colspan="2">香港

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

border="1">






















小马哥 18 男 rowspan="3">中国
小岳岳 45 男
邓紫棋 23 女

加粗使用


 我的第一个网页























小马哥 18 男中国
小岳岳 45 男
邓紫棋 23 女

表格的标题：

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

border="1">























人物介绍
小马哥 18 男 rowspan="3">中国
小岳岳 45 男
邓紫棋 23 女

表单标签：

表单标签用
表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

get提交和post提交的区别：
GET方式：
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
特点：只适合提交少量信息，并且不×××全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式：
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

nput>:输入标签：

用于接收用户输入。

<input type="text" />

o type="属性值"：文本类型。属性值可以是：

o text（默认）

o password：密码类型

o radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

o checkbox：多选按钮，名字相同的按钮作为一组进行选择。

o checked：将单选按钮或多选按钮默认处于选中状态。当标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。

o hidden：隐藏框，在表单中包含不希望用户看见的信息

o button：普通按钮，结合js代码进行使用。

o submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。

o reset：重置按钮，清空当前表单的内容，并设置为最初的默认值

o image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。

o file：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

o value="内容"：文本框里的默认内容（已经被填好了的）

o size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。

o readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。

o disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写

html>
lang="en">

 charset="UTF-8">
 我的第一个网页


 姓名：value="呵呵" >逗比

 昵称：value="哈哈" readonly="">

 名字：type="text" value="name" disabled="">

 密码：type="password" value="pwd" size="50">

 性别：type="radio" name="gender" value="male" checked="">男
 type="radio" name="gender" value="female" >女

 爱好：type="checkbox" name="love" value="eat">吃饭
 type="checkbox" name="love" value="sleep">睡觉
 type="checkbox" name="love" value="bat">打豆豆


html>
lang="en">

 charset="UTF-8">
 我的第一个网页



 姓名：value="呵呵" >逗比

 昵称：value="哈哈" readonly="">

 名字：type="text" value="name" disabled="">

 密码：type="password" value="pwd" size="50">

 性别：type="radio" name="gender" value="male" checked="">男
 type="radio" name="gender" value="female" >女

 爱好：type="checkbox" name="love" value="eat">吃饭
 type="checkbox" name="love" value="sleep">睡觉
 type="checkbox" name="love" value="bat">打豆豆


 type="button" value="普通按钮">

 type="submit" value="提交按钮">

 type="reset" value="重置按钮">

 type="image" src="images/bojie.jpeg" width="400" value="图片按钮2">

 type="file" value="文件选择框">

标签里面的每一项用表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

name="txtInfo" rows="4" cols="20">小李飞刀

html>
lang="en">

 charset="UTF-8">
 我的第一个网页



 账号信息
 姓名：value="呵呵" >逗比

 密码：type="password" value="pwd" size="50">





 其他信息
 性别：type="radio" name="gender" value="male" checked="">男
 type="radio" name="gender" value="female" >女

 爱好：type="checkbox" name="love" value="eat">吃饭
 type="checkbox" name="love" value="sleep">睡觉
 type="checkbox" name="love" value="bat">打豆豆




<input type="radio" name="sex" /> 男

<input type="radio" name="sex" /> 女

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

type="radio" name="sex" /> 男
type="radio" name="sex" /> 女

type="radio" name="sex" id="nan" /> for="nan">男
type="radio" name="sex" id="nv" /> for="nv">女

可以写成这样

html>
lang="en">

 charset="UTF-8">
 我的第一个网页

type="radio" name="sex" id="nan" /> for="nan">男
type="radio" name="sex" id="nv" /> for="nv">女
type="checkbox" id="kk" />
for="kk">10天内免登陆

Css的引入方式

1）行内引入：

html>
lang="en">

 charset="UTF-8">
 Title

style="color: red">
 我是一个div

2）内接式

html>
lang="en">

 charset="UTF-8">
 Title


 我是一个div

我是×××的

3)外接式：

4）外接式-导入式

Css选择器：

标签选择器：

html>
lang="en">

 charset="UTF-8">
 Title







haha





Id选择器：

html>
lang="en">

 charset="UTF-8">
 Title


id="box">



class="child">

id="pa" class="app">猜猜我是什么颜色





后代选择器：

子代选择器：

总结：标签选择器是安照权重来分的，首先是id 然后是class 最后是标签，比大小，如果id多那就是这个如果id一样就比class，一次类推

标签悬浮和点击过后以及点击前的颜色

盒子模型：

Padding使用：

html>
lang="en">

 charset="UTF-8">
 Title


class="box">
内容

html>
lang="en">

 charset="UTF-8">
 Title


class="box">
内容

小三角：

html>
lang="en">

 charset="UTF-8">
 Title

你可能感兴趣的:(前端,html,css,前端)

FastAPI安全防护指南：构建坚不可摧的参数处理体系 qcidyu fastapi 安全
扫描二维码关注或者微信搜一搜：编程智域前端至全栈交流与成长探索数千个预构建的AI应用，开启你的下一个伟大创意第一章：输入验证体系1.1类型安全革命frompydanticimportBaseModel,PaymentCardNumberfrompydantic.typesimportSecretStrclassUserRequest(BaseModel):username:str=Field(mi

SvelteKit 最新中文文档教程（3）—— 数据加载
前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我

torch.logical_and()方法 CodeWang_NC pytorch 深度学习 python
torch.logical_and()计算给定输入张量的元素逻辑AND。零被视为False，非零被视为True官方文档说明:https://pytorch.org/docs/stable/generated/torch.logical_and.html#torch.logical_andtorch.logical_and(input，other，*，out=None）→返回张量input（张量）–

springboot kafka spring boot搭建单机集群集成入门木秀林环境配置 kafka spring boot docker
搭建kafka(单机版)使用虚拟机+docker参考https://blog.csdn.net/qq_35394891/article/details/84349955https://www.cnblogs.com/xiaohanlin/p/10078865.html拉取镜像(kafka依赖zookeeper,所有两个都要)dockerpullwurstmeister/zookeeperdocke

CSS中粘性定位 ~废弃回忆 �༄ HTML css 前端 html CSS中粘性定位
1.如何设置为粘性定位?给元素设置posttion:sticky即可实现粘性定位.可以使用left,right,top,bottom四个属性调整位置,不过最常用的是top值.2.粘性定位的参考点在哪里?离他最近的一个拥有"滚动机制"的祖先元素,即便这个祖先不是最近的真实可滚动祖先.3.粘性定位元素的特点?不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式.最常用的值是top值;粘性定位和浮动

【SpringMVC】常用注解：@RequestParam 字节源流 java 开发语言
1.作用如果控制器标注的方法的参数名称与前端传递过来的参数名称不一致，使得SpringMVC无法自动启动，那么我们可以使用该注解实现前后端参数的绑定。2.相关属性value/name：这两个属性都是一个作用，都是描述参数的名称，也就是前端传递过来的参数的名称。required：默认值为true.标识当前的参数是必须携带的，如果前端没有携带该参数，就会报404的异常。如果是false就是不必须的de

CSS:不设定高度的情况,如何让flex下的两个元素的高度一致 25号底片~ css css 前端
方法1：使用align-items:stretch（默认行为）flex容器的默认行为是align-items:stretch，这意味着子元素的高度会自动拉伸到与容器高度一致。如果容器没有固定高度，子元素会以最高的子元素为准。css.container{display:flex;/*启用flex布局*/align-items:stretch;/*默认值，子元素高度会拉伸到一致*/}.item{/*不

html字段最大长度限制,html input 限制输入的长度并提示的方法朱佳顺 html字段最大长度限制
html中input标签的value值的长度理论上应该是2^32(数据来源于资料，没有测试过)，但为了防止一些input的输入数据过长来做一些限制，该如何实现呢？这篇文章就来介绍一下，如何限制input输入数据的长度并且输入的数据超过规定的长度该如何去提示？htmlinput限制输入字符串长度的方法input标签中的maxlength属性，可以用来规定输入字符串的最大长度。示例代码：htmlinp

六十天前端强化训练之第十七天React Hooks 入门：useState 深度解析编程星辰海 #前端前端 react.js javascript
=====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、知识讲解1.Hooks是什么？2.useState的作用3.基本语法解析4.工作原理5.参数详解a)初始值设置方式b)更新函数特性6.注意事项7.类组件对比8.常见问题解答二、核心代码示例三、实现效果四、学习要点总结五、扩展阅读推荐官方文档优质文章推荐学习路径进阶资源六、实践步骤一、表单输入控制二、动态

深入解析React 18核心特性：构建未来级Web应用的全面指南斯~内克 react知识点前端 react.js 前端框架
一、React18的里程碑意义React18作为近年来最具革命性的版本更新，标志着前端开发正式进入并发渲染时代。这个版本不仅带来了底层架构的革新，更重新定义了现代Web应用的性能标准与开发范式。根据npm官方统计，React18发布首周下载量突破1800万次，GitHub星标数新增3.4万，充分展现了开发者社区对其技术价值的认可。二、架构革命：并发模式深度解析2.1并发渲染原理//传统同步渲染模式

【51单片机】程序实验17.红外遥控 -一杯为品- 51单片机 51单片机 mongodb 嵌入式硬件
主要参考学习资料：B站【普中官方】51单片机手把手教学视频开发资料下载链接：http://www.prechin.cn/gongsixinwen/208.html单片机套装：普中STC51单片机开发板A4标准版套餐7目录红外遥控介绍红外线简介红外遥控原理红外发射装置红外接收装置硬件设计实验17红外遥控红外接收头驱动主函数红外遥控介绍红外线简介可见光按波长从长到短排列依次为红橙黄绿青蓝紫，其中红光波

深入解析 React Diff 算法：原理、优化与实践赵大仁前端技术 js react.js 前端前端框架
深入解析ReactDiff算法：原理、优化与实践1.引言React作为前端领域的标杆框架，采用虚拟DOM（VirtualDOM）来提升UI更新性能。React的Diff算法（Reconciliation）是虚拟DOM运行机制的核心，它决定了如何高效地对比新旧DOM并执行最少的操作来更新UI。本篇文章将深入探讨ReactDiff算法的原理、优化策略，并通过生动的示例解析其工作方式，让你能够更直观地理

前端面试题---vue项目打包时, 内存不足了怎么办为什么会出现这样的情况 *星之卡比* 前端 vue.js javascript
Vue项目打包时如果出现内存不足（OOM，OutofMemory）简称就是OOM，通常是因为项目代码量较大、依赖过多、打包时Webpack需要处理的文件过多，导致Node.js运行时超出了默认的内存限制。一、为什么会出现内存不足？项目过大：项目代码文件过多，Webpack需要处理的内容太多。第三方库过多：node_modules体积过大，依赖库多且未进行优化。SourceMap过大：默认produ

深入解析 React 最新特性：革新、应用与最佳实践赵大仁前端 ReactNative react.js 前端前端框架
深入解析React最新特性：革新、应用与最佳实践1.引言React作为前端开发的核心技术之一，近年来不断推出新的API和优化机制，从ConcurrentRendering（并发模式）到ServerComponents（服务器组件），都在不断提升开发体验和应用性能。本文将深入解析React最新特性，包括React18并发模式、useTransition、useDeferredValue、ReactS

【原创】Linux上普通用户安装、运行nmap功能扫描指定IP地址上的端口赵庆明老师 Linux linux tcp/ip 运维
由于是普通用户，因此权限受限，基本上不用考虑常规途径安装了。加上服务器操作系统可能比较老，如果使用源码编译的话，可能会有一大堆编译错误，且由于权限问题，无法解决。这里我要用到一个工具：nmap，扫描某主机。登录nmap官网https://nmap.org/点击下载https://nmap.org/download.html点击Linux版的nmap,下载rpm安装包下载完后，上载到服务器。使用以下

从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南软件职业规划 spring spring boot vue.js 后端
一、准备工作1.开发环境搭建安装JDK（JavaDevelopmentKit）：前往Oracle官网（https://www.oracle.com/java/technologies/javase-jdk11-downloads.html，以JDK11为例）下载适合你操作系统的JDK安装包，按照安装向导完成安装。安装完成后，配置系统环境变量，确保在命令行中能通过java-version命令查看到正

我与DeepSeek读《大型网站技术架构》- 大型网站架构技术一览与Web开发技术发展历程诺亚凹凸曼架构
文章目录大型网站架构技术一览1.前端架构2.应用层架构3.服务层架构4.存储层架构5.后台架构6.数据采集与监控7.安全架构8.数据中心机房架构Web开发技术发展历程一、静态HTML阶段二、CGI脚本模式阶段三、服务器页面模式阶段大型网站架构技术一览1.前端架构浏览器访问优化：压缩静态资源、减少HTTP请求。CDN加速：将静态资源分发至边缘节点，降低网络延迟。反向代理：缓存热点内容，提供负载均衡与

我与DeepSeek读《大型网站技术架构》（4）诺亚凹凸曼架构
瞬时响应：网站的高性能架构章节要点本章聚焦于如何通过系统性优化实现网站快速响应，从多层级、多维度剖析了高性能架构的核心策略。1.高性能架构的优化层级(1)前端性能优化目标：减少用户端请求延迟，提升页面加载速度。核心策略：减少HTTP请求：合并CSS/JS文件、使用CSSSprites（雪碧图）。压缩资源：Gzip压缩文本文件（HTML/CSS/JS）、图片优化（WebP格式）。CDN加速：静态资源

2024前端Webpack面试题司宁前端面试题前端 webpack
1、谈谈你对Webpack的理解Webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，Webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。2、Webpack的基本功能代码转换：Type

基于IMX6ULL的安防监控项目暗夜之眼007 linux
项目功能介绍该项目是基于NXP的IMX6ULL的安防监控项目。应用http微服务器boa实现网页展示监控信息；利用ov5640摄像头模块采集图像信息，并移植mjpg-streamer库实现在远端网页可以查看实时监控图像；利用cgi与html交互实现控制命令的下发和监控数据上传，用户可以在网页端控制硬件，比如LED灯，蜂鸣器等，同时可以在网页端直观查看ICM20608获取的加速度、角速度和温度数据。

负载均衡中四层和七层协议区别 LeonNo11 nginx 负载均衡运维
https://www.cnblogs.com/liuzhongkun/p/17046936.html在负载均衡（LoadBalancing）中，四层（L4）负载均衡和七层（L7）负载均衡是两种常见的方式，它们的区别主要体现在工作层级、处理方式、功能特性等方面。1.L4（四层）负载均衡基于TCP/UDP传输层的负载均衡协议层：工作在OSI模型的第4层（传输层）。工作方式：主要依据IP地址和端口号进

【pptx-preview】react+pptx预览起来改bug javascript react.js pptx
pptx前端预览插件pptx-preview-npm1.插件使用letpptxPreviewer:any=null;constdom:any=document.getElementById(`pptx-wrapper`);if(!dom)return;pptxPreviewer=init(dom,{width:800});fetch(url).then((response:any)=>respon

vue 动态加载插件及插件样式解决插件样式造成的全局污染问题看客随心 vue.js 前端 javascript
1工具方法/***动态加载第三方js.css*@param{*}src路径*@param{*}isCss是否为css文件*/exportfunctionasynLoad(src,isCss=false){returnnewPromise(res=>{if(isCss){letlist=Array.from(document.documentElement.getElementsByTagName(

利用python 执行统计模型: 渔好学 python
利用python执行统计模型:http://www.statsmodels.org/stable/index.html

HarmonyOS 实战开发 —— 基于HMRouter的路由跳转方案 CTrup 鸿蒙开发 HarmonyOS 移动开发 harmonyos 组件化移动开发鸿蒙开发 ArkUI HMRouter 组件化路由
往期笔录记录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……HMRouter简介HMRouter作为Har

web前端开发工程师工作的岗位职责（合集）极客11 面试与求职前端状态模式
web前端开发工程师工作的岗位职责1职责：1、根据设计图进行前端页面开发并设计编写业务交互脚本2、优化前端页面，保证良好的用户体验以及不同浏览器的兼容性3、web前沿技术研究和新技术调研，将主流的特效应用到业务场景中4、配合后台开发人员实现网站界面和功能，为产品后期运营提供升级、维护等技术支持。5、工作积极主动，善于沟通，协调项目与项目之间的工作安排与配合，确保开发工作顺利进行。6、具备较强的学习

vue处理接口返回EventStream数据并进行展示 zuo-yiran vue学习笔记 js vue.js 前端 javascript
1、在Vue组件中连接外部SSE接口HTML：来自本地文件的SSE流数据：-----+++++JS：mounted(){//http://localhost:3001/sse-stream为返回EventStream数据的地址consteventSource=newEventSource('http://localhost:3001/sse-stream');//监听消息事件eventSource

CSS3学习教程，从入门到精通， CSS3入门介绍的语法知识点及案例（1）知识分享小能手前端开发网页开发编程语言如门 css3 学习 css html5 前端 java html
CSS3入门介绍一、CSS3选择器1.1基本选择器/*元素选择器*/p{color:red;}/*类选择器*/.myClass{font-size:20px;}/*ID选择器*/#myId{background-color:yellow;}/*通用选择器*/*{margin:0;padding:0;}这是一个段落这是一个带有类的段落这是一个带有ID的段落1.2属性选择器/*属性选择器*/[href

【python】flask-Web 应用程序框架 3L_csdn #python flask python 前端 python web框架 http
目录简介一、简单示例二、Flask详细使用总结1、HTML转义2、路由2.1、使用route()装饰器将函数绑定到URL。2.2、变量规则2.3、唯一的URLs/重定向行为2.4、网址构建2.5、HTTP方法2.5、有json体返回的HTTPGET请求示例(请求中不带参数)2.6、有json体返回的HTTPGET请求示例(请求中带参数)简介Flask是一个轻量级的WSGIWeb应用程序框架。它旨在

使用flask快速搭建web应用 alex190824 flask 前端 python echarts
文章目录前言一、Flask是什么？二、使用步骤1.引入包2.简单的服务端应用程序3.添加用于显示折线图代码4.在templates目录下，创建用于渲染的line-simple.html页面5.完整的代码结构前端代码后端代码总结前言在数据处理分析过程中，有快速搭建数据展示的应用场景需求，此时可以使用Flask快速进行web应用环境构建。本示例演示创建web应用及显示渲染echart折线图。一、Fla

桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？换个号韩国红果果 html 小球碰撞
稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变

《高性能HTML5》读后整理的Web性能优化内容白糖_ html5
读后感先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。

[JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop 商城系统 jshop 电商系统
在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。 在jshop中，对RequestContextHolder的

算法之时间复杂度周凡杨 java 算法时间复杂度效率
 在计算机科学中，算法的时间复杂度是一个函数，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的字符串的长度的函数。时间复杂度常用大O符号表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是渐近的，它考察当输入值大小趋近无穷时的情况。这样用大写O()来体现算法时间复杂度的记法，

Java事务处理 g21121 java
一、什么是Java事务通常的观念认为，事务仅与数据库相关。事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状

Linux awk命令详解 510888780 linux
一. AWK 说明 awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。 awk的处理文本和数据的方式：它逐行扫描文件，从第一行到

android permission 布衣凌宇 Permission
<uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na

Oracle和谷歌Java Android官司将推迟 aijuans java oracle
北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来

linux shell 常用命令 antlove linux shell command
grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with:

Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术 Java解析xml文档 dom技术 XML配置数据库连接
 XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习 XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML: DOM解析XML文件 SA

underscore.js 学习（二） bijian1013 JavaScript underscore
 Array Functions 所有数组函数对参数对象一样适用。1.first _.first(array, [n]) 别名: head, take 返回array的第一个元素，设置了参数n，就

plSql介绍 bijian1013 oracle 数据库 plsql
/* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select

【Nginx一】Nginx安装与总体介绍 bit1129 nginx
启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件

spring mvc开发中浏览器兼容的奇怪问题 bitray jquery Ajax springMVC 浏览器上传文件
 最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件. 在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer

Lua的io库函数列表 ronin47 lua io
1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil

java-26-左旋转字符串 bylijinnan java
public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu

《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令
vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。 1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别

[轨道与计算]新的并行计算架构 comsci 并行计算
 我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？

重复执行某段代码 dai_lm android
用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h

Java实现堆栈（list实现） datageek 数据结构——堆栈
public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty

四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DB backup
一：通过备份王等软件进行备份前台进不去？用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。解决方法：学会修改网站配置文件，大多是由co

github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com github git webhook
转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！工具/原料 github 方法/步骤

">的作用" target="_blank">JSP中的作用蕃薯耀
JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

linux下SAMBA服务安装与配置 hanqunfeng linux
局域网使用的文件共享服务。一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients

guava cache IXHONG cache
缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的

Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScript jquery css
这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码： (

美国人的福利和中国人的储蓄 nannan408
 今天看了篇文章，震动很大，说的是美国的福利。 美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。 美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人

N阶行列式计算(JAVA) qiuwanchi N阶行列式计算
package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina

C语言算法之打渔晒网问题 qiufeihu c 算法
如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。代码如下： #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0

XML中DOCTYPE字段的解析 wyzuomumu xml
DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL. 私有DTD <!DOCTYPErootSYST

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

小马哥	18	男	山东
小岳岳	45	男	河南
邓紫棋	23	colspan="2">香港