HTML+CSS面试题

1. 每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？
   答案：声明位于文档中最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）

2. 请讲一下HTML5的特点。
   答案：（1）HTML5的跨平台技术。传统移动终端上Native App，开发者的研发工作必须针对不同的操作系统进行，成本相对较高。Native App对于用户还存在着管理成本、存储成本以及性能消耗成本。HTML/JavaScript/CSS语言所开发的应用只要一次开发就能进入所有浏览器进行分发。即使是走传统的App Store应用商店渠道，只需要再将底层用HTML5开发的应用“封装”为App，从时间和资金成本上讲远远小于跨系统移植。
   （2）HTML5更佳的用户体验。提高了用户体验，加强了视觉感受。HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。HTML5的视音频新技术解决了移动端苹果和安卓4.0+对Flash的不支持问题，HTML5在性能上要比Flash更好，让用户拥有更好的体验。HTML5中的CSS3特效样式、Canvas、WEBGL的介入，不仅加强了网页的视觉效果，甚至能够使用户在网页当中看到三维立体特效。

3. 你知道的语义化的标签有哪些？
   答案：一个语义元素能够清楚的描述其意义给浏览器和开发者。语义元素实例：

   , , and - 清楚的定义了它的内容。HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

   、

   、

   、

   、

   、

   、

   、

   CSS3新增了哪些特性？
   答案：(1) CSS3实现圆角- border-radius
   (2) 盒子阴影- box-shadow
   (3) 文本阴影- text-shadow
   (4) 线性渐变- gradient
   (5) 变化样式- transform：roatate-旋转、scale-缩放、translate- 定位、skew- 倾斜
   (6) 增加了更多css选择器
   (7) 多背景、rgba
   (8) 新增加的伪元素：：selection
   (9) 媒体查询与多栏布局
   (10) border-image
   (11) 新增的伪类选择器：first-of-type、last-of-type、only-of-type、only-child、nth-child（num）、enabled、disabled、checked

   请讲一下CSS3动画的优点。
   答案：代码比较简单，再就是性能好，浏览器会对其进行优化。

   请讲一下圣杯布局和双飞翼布局。
   圣杯布局与双飞翼布局都是双边固定宽度，中间自适应的布局。

   如何写宽高自适应的APP？
   答案：前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题的，那就是要一种自适应不同移动端的方法，使用vw，vh单位。vw和vh是根据设备的宽度和高度来决定的，设备的宽就是100vw，设备的高就是100vh。一般情况下宽度，字体大小和左右边距间距等都是用vw单位。高度，行高，上下边距间距等都是用vh单位。

   div+css的布局较table布局有什么优点？
   答案： 改版的时候更方便，只要改css文件。页面加载速度更快、结构化清晰、页面显示简介。表现与结构相分离。易于优化（seo）搜索引擎更友好，排名更容易靠前。

   grid布局有过了解么？
   答案：CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。

   img的alt与title有何异同？strong与em的异同？
   答案：alt：用来指定替换文字【图片加载失败展示】。title：用来提供建议性文字【移入显示】。strong：粗体强调标签。em：斜体强调标签。

   请描述一下渐进增强与优雅降级。
   答案：渐进增强是向前【高版本浏览器】兼容。优雅降级是向后【低版本浏览器】兼容。

   知道什么是微格式吗？谈谈理解。
   答案：微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。优点：将智能数据添加到网页上，让网页内容在搜索引擎结果页面可以显示额外的提示。（应用范例：豆瓣）

   为什么利用多个域名来存储网站资源会更有效？
   答案：CDN缓存更方便；突破浏览器并发限制；节约cookie带宽；节约主域名的连接数，优化页面相应速度；防止不必要的安全问题；

   一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更高的体验。
   答案：使用精灵图，将小规格的图片整合为一张精灵图，减少浏览器请求次数。【http2.0可以不考虑此问题】

   CSS有哪些选择器？
   答案：(1) 标签选择器（如body，html，div,p,ul,li)
   (2) 类选择器（如：class=”head”)
   (3) ID选择器（如：id=”name”)
   (4) 全局选择器（如：*号）
   (5) 组合选择器（如.head .head_logo)
   (6) 继承选择器（如：div p）
   (7) 伪类选择器（如：就是链接样式a元素的伪类，4种不同的状态：link、visited、active、hover）

   CSS中可以通过哪些属性，使得一个DOM元素不显示在浏览器的可视范围内？
   答案：display: none;visibility: hidden;opacity: 0;

   为什么要使用HTML5的语义化标签？
   答案：去掉或样式丢失的时候能让页面保留基本样式呈现清晰的结构。利于SEO。减少团队差异化。

   行内元素和块级元素的区别是什么？行内元素的padding和margin可设置么？
   答案：块级元素总是独占一行。width，height，padding，margin都可以控制。行内元素和相邻的行内元素在同一行，width，height与padding-top,padding-bottom,还有margin-top,margin-bottom不可控制，其余可控制。

   超链接被访问过后hover样式就不出现的问题是什么？如何解决？
   答案：被点击访问过的超链接样式不在具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）。

   rgba()和opacity的透明效果有什么不同？
   答案：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

   请描述display:none；visibility:hidden；opacity:0;三者的区别；
   答案：三者共同点都是隐藏。
   不同点：
   (1) 是否占据空间。display：none;隐藏后不占位置；visibility:hidden;和opacity:0;隐藏之后还占据空间。
   (2) 子元素是否继承。display:none;-----不会被子元素继承，父元素不存在了，子元素也不会显示出来Visibility: hidden;--------会被子元素继承，通过设置子元素visibility：visible来显示子元素opacity：0；----------会被子元素继承，但是不能通过设置子元素opacity：0来重新显示
   (3) 事件绑定。display:none;的元素都已经不再页面存在了，因此无法触发它绑定的事件Visibility: hidden;不会触发它上面绑定的事件opacity：0；元素上面绑定的事件是可以触发的

   你知道的css让元素垂直水平居中的方法有哪些？(这里答案我也让水平居中）
   答案：假如html代码为以下：

   <div class="wrap"><div class="inner">div>div>

   则有3种方法：前两种首先让wrap类选择器的css样式定位为relative

   (1) 
   .inner{ 
   	//未知父元素宽高
   	position:absolute;
   	Left:0;
   	Right:0;
   	Top:0;
   	Bottom:0;
   	Margin:auto;
   	}
   
   	
   (2) 
   
   .inner {      
   	 Width:40px;      
   	 Height: 40px;  
   	Position: absolute;  
   	Left: 50%;
   	Top: 50%;        
   	Margin-left: -20px; //已经知道元素高宽,这里取宽高的二分之一       
   	Margin-top: -20px;
   	或者用  transform：translate(-50%,-50%);代替margin的设置也可以
   	}
   
   (3) .wrap { 
          Display: flex; 
          Justify-content:center;       
           Align-items:center;
           } 

   23. 如何垂直居中一个浮动元素？
       答案：答案同上

   24. 请讲一下px，em的区别。
       答案：px和em都是长度单位。但是px是固定的，指定多少就是多少。em是根据父级元素的大小变化的。拓展：浏览器默认字体大小是16px。所以未经调整的浏览器都符合：1em=16px这个计算规则。

   25. SASS和LESS是什么？为什么要使用它们？
       答案：CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等。使用它们是因为：结构清晰，便与拓展、减少无意义的机械劳动、可以轻松实现多重继承。

   26. CSS的link和import的区别是什么？
       答案：(1) link属于html标签，所以没有兼容性，而@import是css2.1才出的语法，@import只有在IE5以上才能识别。
       (2) 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
       (3) Link方式的样式权重高于@import的权重：在link标签引入的CSS文件中，使用@import时需要注意，如果已经存在相同样式，@import引入的这个样式将被CSS文件本身的样式覆盖掉。 style 嵌入方式引入，减少页面请求(优点)，但只会对当前页面有效，无法复用、会导致代码冗余，不利于项目维护(缺点)，此方式一般只会项目主站首页使用（腾讯、淘宝、网易、搜狐）等大型网站主页，之前有看到过都是这种方式，但后来有些也舍弃了

   27. 请讲一下盒模型。
       答案：css盒模型分俩种：IE盒子模型和标准盒子模型。在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

   28. BFC是什么？
       答案：BFC是指浏览器中创建了一个独立的渲染区域。

   29. 对WEB标准以及W3C的理解与认识。
       答案：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、能被更多的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

   30. 前端页面有哪三层构成？分别是什么？作用是什么？
       答案：结构层(HTML - - 设置页面的基本结构)、样式层(CSS - - 修改页面展示给用户的样式加一些小交互)、行为层(JS - - 使用户与页面完美交互)

   31. CSS选择符有哪些？块级元素有哪些？空元素有哪些？
       答案：选择符也就是选择器，前面答案有写到。
       1.id选择器(# myid)
       2.类选择器(.myclassname)
       3.标签选择器(div, h1, p)
       4.相邻选择器(h1 + p)
       5.子选择器(ul > li)
       6.后代选择器(li a)
       7.通配符选择器( * )
       8.属性选择器(a[rel = “external”])
       9.伪类选择器(a: hover, li:nth-child)首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。(1) 行内元素有：a b span img input select strong(2) 块级元素有：div ul ol li dl dd h1 h2 h3 h4…p(3) 常见的空元素：
       

       ---

       (水平分割线)

   32. 哪些CSS属性可以继承？CSS新增伪类有哪些？
       答案：可继承的样式：
       1.font-size
       2.font-family
       3.color
       4.text-indent不可继承的样式：
       1.border
       2.padding
       3.margin
       4.width
       5.height

   33. 请说出position的属性值有哪些。每个值的特点作用。
       1. position: relative;相对定位
       1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原 本特性）
       2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）
       3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）
       4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位）
       2. position: absolute;绝对定位
       1> 使元素完全脱离文档流（在文档流中不再占位）
       2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）
       3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）
       4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）
       5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
       6> 提升层级（同相对定位）
       3. position: fixed;固定定位 fixed生成固定定位的元素，相对于浏览器窗口进行定位。
       4. position:static：默认值默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
       5. position: sticky 粘性定位粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
       6. position: inherit规定应该从父元素继承 position 属性的值。
       7. position: initial 设置该属性为默认值，详情查看CSS initial 关键字initial 关键字用于设置 CSS 属性为它的默认值。initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

   34. display的属性值有哪些？可以做什么？
       答：inherit：规定应该从父元素继承 display 属性的值。
       block：变成一个块元素，单独占一行，可以设置width,height，maigin四个方向，padding四个方向；
       inline：变成一个行内元素，元素的宽度就是它内容的宽度，不可改变。inline-block：变成一个行内块元素，和内联元素在同一行，但自身相当于块级元素，可以设置width,height等属性。
       none：隐藏该元素，不占空间。但对开发来说真实存在，可以获取被隐藏的元素。 list-item：此元素会作为列表显示。
       table：此元素会作为块级表格来显示（类似 < table >），表格前后带有换行符。
       table-row：此元素会作为一个表格行显示（类似 < tr >）。
       table-cell：此元素会作为一个表格单元格显示（类似 < td > 和 < th >）。

   35. css样式优先级算法如何计算？
       答案：
       (1) !important > id > class > 标签
       (2) !important比内联样式优先级高，内联样式比id优先级高；
       (3) 优先级就近原则，样式定义最近者为准；
       (4) 以最后载入的样式为准；

   36. 你开发过程中遇到过最棘手的html与css问题是什么？
       参考答案：自己想啦（哈哈哈哈哈）

   37. 说说 cookies，sessionStorage 、 localStorage 你对它们的理解？ cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
       大小： cookie数据大小不能超过4k,sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
       时效：localStorage 存储持久数据，浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存；sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭部分面试官可能还会再深入一些：

   38. 1)、如何让cookie浏览器关闭就失效？——不对cookie设置任何正、负或0时间的即可;
       2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage会共享;
       3)、能让localStorage也跟cookie一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较

   39. 什么是外边距合并,项目中是否有遇到过?
       答案：有，外边距合并指的是，当两个垂直元素的都设置有margin外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的值中的较大那个。

   40. :before 和 :after两伪元素，平时都是使用双冒号还是单冒号？有什么区别？以及它们的作用：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）;
       :before/:after 的兼容性要比::before/::after好 ， 不过在H5开发中建议使用::before/::after比较好。想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
       在代码顺序上，::after生成的内容也比::before生成的内容靠后；
       如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

   你可能感兴趣的:(前端面试相关)

   • 25-5 SQL 注入攻击 - insert注入 技术探索 Web安全攻防全解析sql数据库
     环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客一、注入原理描述：insert注入是指通过前端注册的信息被后台通过insert操作插入到数据库中。如果后台没有做相应的处理，就可能导致insert注入漏洞。原因：后台未对用户输入进行充分验证和过滤，导致恶意用户可以利用特定的输入构造恶意代码，从而影响数据库的插入操作，或者获取敏感数据。二、注入方法注入手段
   • Docker多架构镜像构建踩坑记 一直学下去 docker容器adm64arm64多架构
     背景公司为了做信创项目的亮点，需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行，整个项目通过后端Java，前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建，于是只能手工构建ARM镜像。以下是一些踩坑的记录，希望能帮大家少踩坑构建环境本地电脑DeepinLinux23(Windows的WSL和其他的Linux系统都可以）
   • 前端力扣刷题 | 1：Hot100之 哈希 酒酿泡芙1217 力扣hot100哈希算法leetcode前端
     1.两数之和给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。示例：输入：nums=[2,7,11,15],target=9输出：[0,1]解释：因为nums[0]+nums[1]==9，返回[0,1]。法一：暴力解法vartw
   • vue使用pdf.js实现移动端在线PDF文件预览 yujin0213 vuejavascriptvue.js开发语言
     背景产品需求涉及到动态的PDF展示，PDF是由后端去生成的，然后下发给前端在线的cdn地址，H5需要实现在线PDF预览的能力方案H5展示合同PDF，有很多实现方式。但是通过尝试后发现在不同操作系统会存在兼容性问题方案表现iframe的形式iOS：只能展示第一页，多页不能展示Android：弹出下载弹窗PC：正常展示embed标签iOS：只能展示第一页Android：弹出下载弹窗PC：显示不出来vu
   • WPF之comboBox可模糊查询 白驹……过隙 WPFwpf
     前言本文采用了prism框架的基础。0、先准备一个类publicclassComboBoxItemModel{publicstringName{get;set;}publicstringValue{get;set;}}一、xaml代码。前端这里需添加两个属性，还有keyUp事件等。1、IsEditable="True"（开启可编辑）2、IsTextSearchEnabled="False"（开启可
   • PC端后台管理系统实现在线预览文件 在下不知好歹 前端javascripthtml
     PC端后台管理系统实现在线预览文件后台管理系统是每个新手前端必然接触的项目，当产品要求在线预览文件的预览的时候，我收集了两种在线预览的方法，希望对一些刚入门的小白有所帮助1.使用iframe标签微软有一个解析地址，Word、Xls、PPT这些文件需要使用微软官方的解析地址，如微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地
   • 如何实现 Handy Control DataGrid 全选功能 东百牧码人 状态模式
     如何实现HandyControlDataGrid全选功能在使用HandyControl的DataGrid控件时，经常会有全选的需求。今天我们就结合一段代码，详细介绍如何实现HandyControlDataGrid的全选功能。代码实现前端XAML代码代码解释DataGrid是主要的表格控件，ItemsSource绑定到TrendTagCollection，这是数据源集合。DataGridCheckB
   • 微前端架构在前端开发中的实践与挑战 桂月二二 前端架构
     随着单页面应用（SPA）和前端框架如React、Vue、Angular的快速发展，现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时，单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战，微前端架构（MicroFrontends）应运而生，它为前端开发提供了一种新的思路，让大型前端应用能够像后端的微服务架构一样，通过拆分模块来降低复杂度。在这篇文章中，我们将探讨微前端架构的
   • Go分布式爬虫笔记(八)_golang分布式爬虫 2401_87299701 golang分布式爬虫
     +爬虫引擎为基础的推送系统+提供-快速的热点事件-事件预警用户需求快速了解自己感兴趣的最新新闻事件预警机制帮助快速决策功能需求用户填写或选择自己感兴趣的话题、感兴趣的网站还有消息接受频率用户接收最新热点事件的推送用户通过点击获取与该事件关联的事件，并得到相关的事件预测、预警，甚至可能在网站中进行快速的交易用户可以查看历史记录，可视化呈现某一个事件的来龙去脉，并进行复盘产品需求前端页面设计用户交互设
   • web速览 qzhqbb web前端web
     web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的
   • Spring MVC 中的 DispatcherServlet：工作流程与应用场景解析 码农小灰 SpringMVC面试题SpringBootspringmvcjava
     目录一、初始化阶段二、请求处理阶段三、异常处理四、使用场景说明在SpringMVC框架中，DispatcherServlet扮演着至关重要的角色，它作为前端控制器（FrontController），负责接收客户端的HTTP请求，并根据配置将其分发给相应的处理器进行处理。以下是对其工作流程的详细解析，并结合使用场景进行说明。一、初始化阶段加载配置文件：DispatcherServlet在启动时会读取
   • 使用 AI 助手提升前端代码质量：自动代码审查实战 技术出海录 远洋录·技术篇人工智能前端
     最近在带团队的时候，发现代码审查（CodeReview）总是成为项目进度的一个瓶颈。一方面，高级工程师的时间很宝贵，不可能审查每一行代码；另一方面，初级工程师又急需及时的反馈来提升。于是我就在想：能不能用AI来解决这个问题？经过一番研究和实践，我搭建了一个AI代码审查助手，效果出乎意料的好！今天就来分享下这个小工具是怎么做的。为什么需要AI代码审查？说实话，最开始团队里有不少质疑的声音：“AI能审
   • 用Python写前端 eternity_ld 前端python开发语言
     分享一个让开发交互式Webapp超级简单的工具。不会HTML，CSS，JAVASCRIPT也没事。交互式Webapp非常实用，比如说做一个问卷调查页面、一个投票系统、一个信息收集表单，上传文件等等，因为网页是可视化的，因此还可以作为一个没有服务端的图片界面应用程序而使用。如果你有这样的开发需求，那用Python真的是太简单了。借助于PyWebIO（pipinstallpywebio），你可以分分钟
   • 【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法 杰九 vue.js前端springboot
     【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法1.v-if,v-else,v-else-if用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。示例TypeATypeBNotA/B2.v-show也用于条件渲染，但它总是会渲染并保留，只是通过CSS的display属性控制可见性。示例显示/
   • SpringBoot3+Vue3+NaiveUI博客后台管理系统源码 | 小蚂蚁云 小蚂蚁开源 后端vue架构低代码
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用Naiv
   • 小蚂蚁云后台管理系统|XiaoMaYi 小蚂蚁开源 后端vue
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用
   • 【前端高频面试题--ES6篇】 码上有前 前端es6学习javascript
     作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言前端高频面试题--ES6篇往期精彩内容ES6ES6概念let和constletConst解构赋值模板字符串对象简化箭头函数形参赋初始值Rest参数扩展运算符扩展运算符的应用Symbol的基本使用对象添加Symbol类型的属性Symbol内置值迭代器生成器PromiseSetMapclass类数值扩展对象扩展模块化往期精彩内容【
   • SpringBoot中使用TraceId进行日志追踪 java15655057970 面试学习路线阿里巴巴springboot状态模式后端
     **查询日志的痛点：**项目中每当我们查询日志的时候都是看前端请求什么接口，根据一些关键字进入服务器查询日志中是否有这个关键字，然而这个关键字在日志里面并不是唯一的，所以要生成一个唯一的标识，每一次请求都是唯一的一串字符，查询会过滤掉很多无用的信息，快捷查找到这次请求。为了解决这个痛点，就使用了TraceId。一、TraceId定义用于标识某一次具体的请求ID。当用户的请求进入系统后，会在RPC调
   • SpringBoot + Vue 前后端分离开发项目源码 左李滢Just
     SpringBoot+Vue前后端分离开发项目源码SpringBootVue前后端分离开发项目源码本仓库提供了一个完整的SpringBoot+Vue前后端分离开发项目的源码。该项目展示了如何使用SpringBoot作为后端框架，Vue作为前端框架，实现前后端分离的开发模式。通过本项目，您可以学习到如何搭建一个高效、可扩展的Web应用架构项目地址:https://gitcode.com/open-s
   • 【前端】--- ES6下篇（带你深入了解ES6语法） 心.c 前端es6ecmascript
     前言：ECMAScript是JavaScript的标准化版本，由ECMA国际组织制定。ECMAScript定义了JavaScript的语法、类型、语句、关键字、保留字等。ES6是ECMAScript的第六个版本，于2015年发布，引入了许多重要的新特性，使JavaScript更加现代化。进制ES6中增加了二进制和八进制的写法：二进制使用前缀'0b'或'0B'，八进制使用前缀'0o'或'0O'二进制
   • java枚举转json 软件老王 枚举json
     1、背景java后端的枚举类型，要展示到前端，提供给用户进行下拉选择，java后端需要封装enum为json字符串提供给前端，需要首先将枚举类型转为list，然后再转为json字符串。2、方案方案也很简单，使用EnumSet.allOf(TestEnum.class)，将数据获取到再塞到list中就可以了。代码如下：importcom.alibaba.fastjson.JSONObject;imp
   • 多功能系统下的专业游戏陪玩小程序，线上开黑陪玩与线下家政服务全囊括
     技术栈与工具前端技术栈UniApp框架：用于开发跨平台的移动应用。Vue.js：用于构建用户界面。微信小程序云函数：用于在微信小程序中实现后端逻辑。后端技术栈PHP：用于开发后端服务。MySQL：用于存储用户数据和陪玩人员信息。TP6框架：用于开发后端服务。开发工具HBuilderX：用于开发UniApp项目。微信开发者工具：用于开发微信小程序。适用行业陪玩行业：游戏陪玩领域国内已经很成熟。陪聊行
   • 浅谈视频智能化的发展与应用 weixin_33692284 前端后端人工智能ViewUI
     视频监控发展到今天，大家对视频系统规模的快速发展是有目共睹的。近年来基于成熟的以太网技术，大规模数字化视频监控系统的建设变得非常简单，很多项目拥有成百上千个前端点位，达到上万个前端点位的超大规模监控系统也不少见。随着视频监控系统规模的增加，在图像质量越来越好的当下，能否让摄像机看懂正在发生的事件并提出告警，这正是近年来非常流行的智能化需求的由来。本文将对目前智能视频分析技术的发展做些简单的阐述。一
   • nginx闲谈 沉默monkey nginx运维
     提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录介绍特点高并发轻量级模块化设计应用场景web服务器反向代理正向代理（类似机场）配置demo负载均衡缓存处理https与ssl/tlsapi网关介绍nginx高性能（同比tomcat性能高20%），轻量的weib服务器和反向代理服务器，能解决大量并发连接（C10K问题），高并发，高可靠，低内存消耗，支持多功能模块（如前端静态资源
   • 制作动态菜单 大磊程序员(“hello world”) Java后端javascript开发语言ecmascript
     动态菜单的说明什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示前端加载流程menu.js修改/src/api/menu.js中的请求地址，如下所示：//获取菜单exportconstGetMenus=params=>{returnrequest({url:'/admin/system/index/menus',method:'get',para
   • Vue.js 单页应用（SPA）开发教程：从零开始构建你的第一个项目 Milk夜雨 vue.jsvue.js前端javascript
     单页应用（SPA，SinglePageApplication）是现代前端开发的主流模式。Vue.js是一个非常适合构建SPA的框架，它通过VueRouter实现页面导航，通过组件化开发和状态管理实现复杂的交互功能。本篇教程将带你了解SPA的基本概念，并一步步创建一个Vue.js单页应用。什么是单页应用（SPA）？单页应用是一种只有一个HTML页面，通过JavaScript动态加载内容的应用。特点包
   • Node.js的解释 web15085415935 面试学习路线阿里巴巴node.js
     1.Node.js入门教程1.1什么是Node.js？1.1.1Node.js是什么？Node.js是一个基于JavaScript的开源服务器端运行时环境，允许开发者用JavaScript编写服务器端代码。与传统的前端JavaScript主要运行在浏览器端不同，Node.js通过提供一个非阻塞的异步模型，允许开发者在服务器端创建高性能的网络应用程序。比喻：想象你把JavaScript看作是一个厨师
   • vue2在线生成二维码 家里有只小肥猫 javascript前端开发语言
     亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳）创建npminstallqrcodejs2pnpminstallqrcodejs2importQRCodefrom'qrcodejs2'data:{qrcode:'',}submitCode(){if(this.$refs.qrcode){this.qrcode='';this.$refs
   • 最受欢迎的WebAssembly Web开发框架：Blazor前端开发 ScriptWELL wasm前端
     WebAssembly（简称Wasm）是一种用于在Web平台上运行高性能代码的二进制格式。它可以在现代Web浏览器中以原生速度执行，并为开发人员提供了使用其他编程语言编写Web应用程序的能力。在WebAssembly的推动下，出现了许多与其兼容的Web开发框架，其中最受欢迎的之一是Blazor。Blazor是一个由微软开发的Web开发框架，它允许开发人员使用C#语言编写前端Web应用程序。Blaz
   • 【前端知识】简单易懂的vue前端页面元素权限控制 问道飞鱼 前端开发技术vue.js前端javascript权限控制
     文章目录设计思路代码实现1.**权限数据管理**2.**权限判断方法**3.**动态控制元素**4.**路由权限控制**5.**无权限页面**总结相关文献在前端实现基于Vue的权限控制，通常需要结合后端返回的用户权限数据，动态控制页面元素的显示与隐藏、按钮的可点击状态等。以下是设计思路和代码实现：设计思路权限数据管理:从后端获取用户的权限数据（如角色、权限列表等），并存储在Vuex或组件的data
   • java线程Thread和Runnable区别和联系 zx_code javajvmthread多线程Runnable
     我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。 模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(
   • 【转】JSON与XML的区别比较 丁_新 jsonxml
     1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标
   • c++ 实现五种基础的排序算法 CrazyMizzz C++c算法
     #include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排
   • 我的软件 麦田的设计者 我的软件音乐类娱乐放松
          这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、
   • linux awk命令详解 被触发 linux awk
     awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val
   • 各种语言比较 _wy_ 编程语言
                         Java Ruby PHP 擅长领域                  
   • oracle 中数据类型为clob的编辑 知了ing oracle clob
     public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db
   • 分布式服务框架 Zookeeper -- 管理分布式环境中的数据 矮蛋蛋 zookeeper
     原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解 本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两
   • tomcat数据源 alafqq tomcat
     数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。 没有使用JNDI时我用要这样连接数据库： 03.  Class.forName("com.mysql.jdbc.Driver");  04.  conn
   • 遍历的方法 百合不是茶 遍历
                                                           遍历 在java的泛
   • linux查看硬件信息的命令 bijian1013 linux
     linux查看硬件信息的命令 一.查看CPU： cat /proc/cpuinfo   二.查看内存： free   三.查看硬盘： df   linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能
   • java常见的ClassNotFoundException bijian1013 java
     1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory   添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization    
   • 【Gson五】日期对象的序列化和反序列化 bit1129 反序列化
     对日期类型的数据进行序列化和反序列化时，需要考虑如下问题：   1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals   默认序列化和反序列化     import com
   • 【Spark八十六】Spark Streaming之DStream vs. InputDStream bit1129 Stream
       1. DStream的类说明文档：   /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st
   • 通过nginx获取header信息 ronin47 nginx header
     1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") {         set $all_cookie $1; }     变量$all_cookie就获得了cookie的值，可以用于运算了
   • java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 bylijinnan java
     参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串
   • Netty源码学习-ReplayingDecoder bylijinnan javanetty
     ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH
   • js特殊字符过滤 cngolon js特殊字符js特殊字符过滤
     1.js中用正则表达式 过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) {    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]"
   • hibernate使用sql查询 ctrain Hibernate
     import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa
   • linux shell脚本中切换用户执行命令方法 daizj linuxshell命令切换用户
     经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下：   1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" 
   • 好的代码里只要一个 return 语句 dcj3sjt126com return
     别再这样写了：public boolean foo() {    if (true) {         return true;     } else {          return false;    
   • Android动画效果学习 dcj3sjt126com android
     1、透明动画效果 方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals
   • linux复习笔记之bash shell (4)管道命令 eksliang linux管道命令汇总linux管道命令linux常用管道命令
     转载请出自出处： http://eksliang.iteye.com/blog/2105461     bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。     上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？     答：非常的经典的一句话，记住了，何为管
   • Android系统中自定义按键的短按、双击、长按事件 gqdy365 android
     在项目中碰到这样的问题： 由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住；
   • asp.net获取站点根目录下子目录的名称 hvt .netC#asp.nethovertreeWeb Forms
     使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" />   那么在页面上显示根目录子文件夹的代码如下： string[] m_sub
   • Eclipse程序员要掌握的常用快捷键 justjavac javaeclipse快捷键ide
       判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。   曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  写道 程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可
   • c++编程随记 lx.asymmetric C++笔记
      为了字体更好看，改变了格式……   &&运算符：   #include<iostream> using namespace std; int main(){      int a=-1,b=4,k;      k=(++a<0)&&!(b--
   • linux标准IO缓冲机制研究 音频数据 linux
     一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，
   • 随想 生活 暗黑小菠萝 生活
     其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。   毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我
   • 我认为POJO是一个错误的概念 windshome javaPOJO编程J2EE设计
                   这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。    &

   按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

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

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