Hello_Git
Hello_Git

前端八股文--HTML篇

版本—代码随想录知识星球精华第五版

HTML

DOCUTYPE的作用

DOCTYPE是document type (文档类型) 的缩写。是HTML5中一种标准通用标记语言的文档类型声明，告诉浏览器文档的类型，便于解析文档。不同的渲染模式会影响浏览器对 CSS 代码甚至 JavaScript 脚本的解析。它必须声明在HTML文档的第一行。

浏览器渲染页面的两种模式

  • CSS1 Compat：标准模式（Strick mode），浏览器使用W3C的标准解析渲染页面。浏览器以其支持的最高标准呈现页面。

  • BackCompat：怪异模式(混杂模式)(Quick mode)，默认模式，页面以一种比较宽松的向后兼容的方式显示。

DOCTYPE
不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视。

HTML语义化

根据内容的结构选择合适的标签

优点

  • 增加代码可读性，结构清晰，便于开发和维护
  • 对机器友好，文字表现力丰富，有利于SEO。SEO（Search Engine Optimization）是搜索引擎优化，为了让用户在搜索和网站相关的关键词时，可以使网站在搜索引擎的排名尽量靠前，从而增加流量。
  • 方便设备解析（如盲人阅读器等），可用于智能分析
  • 在没有 CSS 样式下，页面也能呈现出很好的内容结构、代码结构

常见的语义化标签

  • title：页面主体内容
  • header：页眉，通常包括网站标志、主导航、全站链接以及搜索框。
  • nav：标记导航，仅对文档中重要的链接群使用。
  • section：定义文档中的节（section、区段），比如章节、页眉、页脚或文档中的其他部分。
  • main：帮助搜索引擎以及搜索工程师找到网站的主要内容，本身并不承载特殊的功能和意义。
  • article：定义外部的内容，其中的内容独立于文档的其余部分。
  • aside：定义其所处内容之外的内容，如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
  • footer：页脚，只有当父级是 body 时，才是整个页面的页脚。
  • address：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

meta标签

meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

meta标签的作用有：

  • 搜索引擎优化（SEO）
  • 定义页面使用语言
  • 自动刷新并指向新的页面
  • 实现网页转换时的动态效果
  • 控制页面缓冲
  • 网页定级评价
  • 控制网页显示的窗口等

meta分类

  1. 页面描述信息 (NAME)：常用的选项有：

    • Keywords（关键字）
    • description（网站内容描述）
    • author（作者）
    • robots（机器人人向导）等。

  2. HTTP标题信息 (HTTP-EQUIV)：可用于代替name项，常用的选项有：

    • Expires（期限）
    • Pragma（cache模式）
    • Refresh（刷新）
    • Set-Cookie（cookie设定）
    • Window-target（显示窗口的设定）
    • content-Type（显示字符集的设定）等。

  3. content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。

HTML5特性

新增

  • 新的选择器 document.querySelector、document.querySelectorAll
  • 媒体播放的 video 和 audio 标签
  • 以前用的 Flash 实现
  • 本地存储 localStorage 和 sessionStorage
  • 浏览器通知 Notifications
  • 语义化标签，例如 header、nav、footer、section、article 等标签
  • 地理位置 Geolocation
    • 鉴于隐私性，除非用户同意，否则不可获取用户地理位置信息
  • 离线应用 manifest
  • 全双工通信协议 websocket
  • 浏览器历史对象 history
  • 多任务处理 webworker
    • 运⾏在后台的 JS，独立于其他脚本，不影响性能
  • 拖拽相关 API
  • 增强表单控件 url、date、time、email、calendar、search
  • 页面可见性改变事件 visibilitychange
  • 跨窗口通信 PostMessage
  • 表单 FormData 对象
  • canvas + SVG

移除

  • 纯表现的元素：basefont、big、center、font、s、strike、tt、u
  • 对可用性产生负面影响的元素：frame、frameset、noframes

src 和 href 的区别

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

一、src

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时，会将其指向的资源下载并应用到文档内，例如 js 脚本、img 图片和 frame 等元素。

当浏览器解析到该元素时，浏览器会对这个文件进行解析、编译和执行，从而导致整个页面加载会被暂停，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

二、href

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。浏览器遇到 href 就会并行下载资源，并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用 @import。

三、总结来说

src 代表这个资源是必备的，必不可少的，最终会嵌入到页面中，而 href 是资源的链接。

行内元素 和 块级元素有哪些

一、元素种类

  1. 行内元素

    • 和其他元素都在一行上；
    • 高，行高及外边距和内边距部分可改变；
    • 宽度只与内容有关；
    • 行内元素只能容纳文本或者其他行内元素。
    • 不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在 IE6 中不对上下起作用，只能对左右起作用。
    <a>a>
<strong>strong>
<b>b>
<em>em>
<del>del>
<span>span>
<img />
<input />
<select>select>

  2. 块级元素

    • 总是在新行上开始，占据一整行；
    • 高度，行高以及外边距和内边距都可控制；
    • 宽带始终是与浏览器宽度一样，与内容无关；
    • 它可以容纳内联元素和其他块元素。
    <h1>h1> ~ <h6>h6>
<p>p>
<div>div>
<ul>ul>
<ol>ol>
<li>li>
<dl>dl>

  3. 空元素

    <br />
<hr />
<img />
<input />
<link />
<meta />

二、行内元素和块级元素的转换

// 定义元素为块级元素
display: block;

// 定义元素为行内元素
display: inline;

// 定义元素为行
display: inline-block;

三、块级元素和行内元素的区别

我们区分块级元素和行内元素，首先行内元素是在一行中能有多个的，块级元素是自己占一行的。接着可以从三个方面来查看：

  • 是否占据一行，还是能多个处于一行中，行内是可以的；
  • 是否可以设置宽高，行内是不可以的；
  • 行内元素只可以容纳文本和其他行内元素，块级元素啥都可以容纳。

总结

行内元素和块级元素很好区分，顾名思义，行内就是能都在一行里的，一行可以有多个 标签，可以有多个 标签，而同类的还有 / / 等，这不就很容易记住了。而块级元素就是要自己占一行的，那不就有

，还有我们使用的列表
    /
      ，除此之外还有

      等等。

      link 与 @import 的区别

      一、语法结构

      //link
<link href="路径" rel="stylesheet" type="text/css" />
//import
@import url(路径地址);

      二、区别

      1. 从属关系区别
        @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

      2. 加载顺序区别
        加载页面时，link 标签引入会和 HTML 同时加载；而 @import 引入的 CSS 将在页面加载完毕后被加载。

      3. 兼容性区别
        @import 是 CSS2.1 才有的语法，可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。

      4. DOM 可控性区别
        可以通过 JS 操作 DOM，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

      5. 权重
        link 方式的样式权重高于 @import 的权重。

      总的来说，使用 link 会比 @import 好，首先兼容性，link 作为 HTML 的标签是不会存在这个问题的。而且如果使用 @import 是在 DOM 树渲染完才会进行渲染的，所以是不被 JavaScript 动态修改的。

      常见的图片格式

      图片格式对比

      格式 优点 缺点 使用场景
      GIF 文件小，支持动画、透明，无兼容性问题 只支持256种颜色 彩色简单的logo、icon、动图
      JPG 色彩丰富，文件小 有损压缩，反复保存图片质量下降明显 色彩丰富的图片/渐变图像
      PNG 无损压缩，支持透明，简单图片尺寸小 不支持动画，色彩丰富的图片尺寸大 logo/icon/透明图
      WEBP 文件小，支持有损和无损压缩，支持动画、透明 浏览器兼容性相对而言不好 支持webp格式的app和webview

      iframe

      iframe 元素可以在一个网站里面嵌入另一个网站内容。

      优点

      1. 实现一个窗口同时加载多个第三方域名下内容
      2. 增加代码复用性

      缺点

      1. 搜索引擎无法识别
      2. 影响首页首屏加载时间
      3. 兼容性差

      限制 iframe 访问另一个页面

      设置 X-Frame-Options 响应头 —— 是否允许网页通过 iframe 嵌套：

      1. deny：完全禁止任何网页嵌套
      2. sameorigin：只允许同源域名访问
      3. allow-from url：允许指定 URL 的域名可嵌套

      设置 Content-Security-Policy

      CSP，内容安全策略，限定网页允许加载的资源，防范 XSS 攻击。

      "Content-Security-Policy": "frame-ancestors 'self'" // 限定 iframe 的嵌套

      判断 window.top 页面顶级窗口和自身窗口 window.self 是否相等，若不等则是嵌入了 iframe。

      defer 和 async

      defer 和 async 是

你可能感兴趣的:(前端八股文,前端)

  • day15｜前端框架学习和算法 universe_01 前端算法笔记
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
  • 在线人数统计业务设计（场景八股文）
    业务问题在当经的网站中，在线人数的实时统计已经是一个必不可少的模块了，并且该统计功能最好能够按不同的时间间隔做的统计，现在需要你设计一个在线人数统计的模块，你应该怎么进行设计的呢？背景一个网校下会有多个学员。目前平台大概有十个，平台对应的网校大概五十几个，平均一个网校会有5w个用户，预计总人数为200w，最该学员的在线人数在10w左右。设计思路最开始的时候，想到的就是使用mysql直接实现，但是明
  • vue element 封装表单 影子信息 vuevue.jsjavascript前端
    背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • 前端数据库：IndexedDB从基础到高级使用指南
    文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
  • 【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三） 笙囧同学 java前端状态模式
    核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
  • 14.tornado操作之应用Websocket协议实现聊天室功能 孤寒者 Tornado框架从入门到实战websockettornado聊天室功能实现python
    目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • 小架构step系列25：错误码 秋千码途 架构java
    1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
  • Java朴实无华按天计划从入门到实战（强化速战版-66天） 岫珩 Java后端java开发语言学习Java时间安排学习计划
    致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
  • 《跨域资源共享CORS的深层逻辑与前端实践精要》
    不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
  • 深入了解 Kubernetes（k8s）：从概念到实践
    目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
  • 大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记 前端缓存ai
    大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
  • 26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSScss前端html
    总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
  • H5UI微信小程序前端框架实战指南 ai
    本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
  • Ubuntu安装LAMP L_h1 测试ubuntulinux
    在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
  • 震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript前端javascripthtml5
    一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
  • Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析 代码简单说 2025开发必备(限时特惠)架构人工智能CozeStudio架构AIAgent开发平台全栈AI工程化图解架构
    CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于
  • 关于前端的性能优化
    性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
  • linux网卡显示未知未托管,linux有线网络显示设备未托管
    NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理
  • 页面开发样式和布局入门：Vite + Vue 3 + Less
    页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践
  • 推客系统小程序机构版开发上线全攻略（2025年最新版） vx_qutudy 推客小程序推客系统开发推客系统源码
    一、开发前准备：筑牢基础，合规先行1.1注册与认证账号注册：登录微信公众平台注册小程序账号，选择“机构版”类型，获取唯一AppID。资质认证：基础资质：企业营业执照、法人身份证、对公账户信息。特殊资质：涉及支付功能：需办理《增值电信业务经营许可证》（ICP证）。涉及教育/医疗内容：需《互联网信息服务许可证》或相关行业资质。1.2技术选型：高效与扩展并重模块推荐方案前端框架微信原生框架（WXML+W
  • 网络安全第14集 不灭锦鲤 web安全安全
    前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
  • 怎么判断一个DAPP是否真正去中心化
    判断一个DAPP（去中心化应用）是否真正去中心化，需要从多个维度进行考察。以下是关键评估标准：1.区块链依赖程度✅真正去中心化：核心逻辑和数据处理完全依赖智能合约，运行在区块链上（如以太坊、Solana等）。❌伪去中心化：依赖中心化服务器处理关键数据或业务逻辑，仅前端去中心化。2.智能合约控制权✅去中心化：合约代码开源，无管理员密钥（adminkey）或可升级后门，治理由DAO（去中心化自治组织）
  • Web前端交互利用Python跟大模型操作 哥本哈士奇 前端交互python
    Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行
  • 尚硅谷微服务尚医通前端npm报错
    尚硅谷微服务尚医通前端npm报错血泪史我的版本的8.0.0，弹幕里说降级npm到6.多就能安装，经过许久挣扎还是各种报错，最后通过一下办法解决解决办法:不需要降低npm版本，办法如下这里需要使用到cnpm：1.导入下载好到的项目2.安装cnpm：npminstallcnpm-g3.安装node-sass：cnpminstallnode-sass4.继续安装：cnpminode-sass-D5.删除
  • Layui核心语法快速入门指南 bemyrunningdog layui前端javascript开发语言
    Layui基本语法学习指南Layui是一个经典的模块化前端框架，以其轻量易用、组件丰富著称。以下是Layui的核心语法结构和使用方法：一、模块加载机制（核心基础）//标准模块加载语法layui.use(['module1','module2'],function(){//回调函数中获取模块varmod1=layui.module1;varmod2=layui.module2;//模块功能调用mod
  • 前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）
    开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue
  • Vue 工程化开发入门 dawn191228 前端学习vue.js前端javascript前端框架
    文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域，Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目，提高开发效率和代码质量。本文将带你了解Vue工程化开发入门知识，包括脚手架、项目运行流程、组件化以及组件注册。一、Vue工程化开发概述工程化开发是一种将软件开发过程规范化、标准化
  • mongodb3.03开启认证 21jhf mongodb
    下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
  • 【Spark103】Task not serializable bit1129 Serializable
    Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
  • 你所熟知的 LRU(最近最少使用) dalan_123 java
    关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
  • Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                       
  • linux下安装apache服务器 g21121 apache
    安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
  • FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
      JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
  • 根据STATUS信息对MySQL进行优化 墙头上一根草 status
    mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
  • 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
    本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
  • 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
    1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
  • 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
    目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
  • 线程的调度 bijian1013 java多线程thread线程的调度java多线程
    1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
  • 查看日志常用命令 bijian1013 linux命令unix
    一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
  • 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
    MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
  • 【Hadoop十五】Hadoop Counter bit1129 hadoop
       1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
  • 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
    近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
  • java-75-二叉树两结点的最低共同父结点 bylijinnan java
    import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
  • 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
    公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
  • [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
          降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
  • Java时区转换及时间格式 Cwind java
    本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
  • readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
    readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
  • LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
    LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
  • [应用结构]入口脚本 dcj3sjt126com PHPyii2
    入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
  • haoop shell命令 eksliang hadoophadoop shell
    cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
  • MultiStateView不同的状态下显示不同的界面 gundumw100 android
    只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
  • jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
    平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
  • kafka offset迁移 kane_xie kafka
    在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
  • android > 搭建 cordova 环境 mft8899 android
      1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
  • java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
     非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
  • 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
    高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
  • sublime text 3 rust wudixiaotie Sublime Text
    1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl