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生成的内容之上。

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

   • Long类型前后端数据不一致 igotyback 前端
     响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
   • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
     ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
   • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
     加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
   • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
     ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
   • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
     Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
   • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
     这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
   • 博客网站制作教程 2401_85194651 javamaven
     首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
   • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
     最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
   • 补充元象二面 Redstone Monstrosity 前端面试
     1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
   • 微信小程序开发注意事项 jun778895 微信小程序小程序
     微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
   • 字节二面 Redstone Monstrosity 前端面试
     1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
   • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
     点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
   • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
     第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
   • 360前端星计划-动画可以这么玩 马小蜗
     动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
   • Vue + Express实现一个表单提交 九旬大爷的梦
     最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
   • 前端知识点 ZhangTao_zata 前端javascriptcss
     下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
   • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
     1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
   • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
     1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
   • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
     数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
   • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
     最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
   • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
     边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
   • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
     前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
   • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
     【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
   • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
     在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
   • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
     前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
   • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
     在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
   • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
     一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
   • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
     一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
   • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
     1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
   • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
     title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
   • 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.