前端
关注
分享
扫一扫
HTML+CSS+JavaScript笔记
折腾的小飞
Java，HTML，CSS，JavaScript，C语言
个人博客：http://xiaofei.site
展开
-
前端通用Axios 请求拦截配置
前端通用Axios 请求拦截配置原创 2024-11-27 23:16:24 · 639 阅读 · 0 评论 -
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue插件库，用来实现SPA应用（单页面）原创 2022-02-23 10:41:49 · 963 阅读 · 0 评论 -
Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex插件，状态（数据）共享原创 2022-02-15 21:14:49 · 1241 阅读 · 0 评论 -
Vue教程4【vue中的ajax】devServer.proxy axios vue-resource插槽
配置代理 跨域问题通过 vue.config.js 中的 devServer.proxy 选项来配置module.exports = { devServer: { proxy: 'http://localhost:4000' }}⚠️ 问题：不能配置多个代理本机存在与public里面的文件如果和请求地址相同，则不会发送请求到代理服务器如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象module.exports = { devS原创 2022-02-09 21:09:12 · 1650 阅读 · 0 评论 -
Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布 动画
npm全局安装切换淘宝npm镜像npm config set registry https://registry.npm.taobao.org全局安装npm install -g @vue/cli切换到要创建的目录vue create xxx启动项目npm run servevue脚手架结构加入School和Student组件到components目录下修改App.vue修改main.js。注册app组件，加入template运行npm run serve原创 2022-01-28 21:26:14 · 1022 阅读 · 0 评论 -
vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件1.定义组件（创建组件）2.注册组件3.使用组件（写组件标签）定义使用Vue.extend(options)创建，其中options和new Vue(options)时传入的有点区别el不写。最终所有的组件要经过vm的管理，有vm中的el决定哪个容器data必须写成函数。避免组件复用时，数据存在引用关系使用template配置组件结构注册局部注册：new Vue时传入components选项全局注册：使用Vue.componen原创 2022-01-19 22:22:44 · 998 阅读 · 1 评论 -
Vue教程1 【Vue核心】
Vue.js 中文文档 (bootcss.com)使用vue插件GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.关闭生成环境Tip⛔️ 此笔记适用于vue 2.x ！！！vue核心helloworld<!DOCTYPE html><html lang="en"><head> <meta charset="U原创 2022-01-13 21:56:31 · 659 阅读 · 0 评论 -
如何在页面上实现一个圆形的可点击区域？
map+area 或者 svgborder-radius纯 javascript 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等参考代码：https://blog.youkuaiyun.com/yaodebian/article/details/84778425转载 2021-05-13 23:25:37 · 142 阅读 · 0 评论 -
.如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker；也可以调用 localstorage、cookies 等本地存储方式；SharedWorker接口代表一种特定类型的worker，可以从几个浏览上下文中访问localstorage 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常；...原创 2021-05-12 22:53:03 · 278 阅读 · 0 评论 -
Label 的作用是什么，是怎么用的？
label 标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。<label for='Name'>Number:</label><input type=“ text “ name='Name' id='Name'/><label>Date:<input type='text' name='B'/></label>注意label 的 for 属性值要与后面对应的 input 标原创 2021-05-12 22:49:38 · 1069 阅读 · 0 评论 -
iframe 有那些缺点？
HTML内嵌框架元素。另一个页面嵌入当前页面(1) iframe 会阻塞主页面的 Onload 事件；(2) 搜索引擎的检索程序无法解读这种页面，不利于 SEO;(3) iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe解决：通过 javascript动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。...原创 2021-05-12 22:45:39 · 356 阅读 · 0 评论 -
介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引 擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎：解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS原创 2021-05-12 22:40:46 · 807 阅读 · 0 评论 -
data-属性的作用是什么？
data-为 H5 新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取，需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。驼峰data-list-nameelement.setAttribute('data-index',2)element.getAttribute('data-index')H5新增的 ie11才开始支持element.dataset.i原创 2021-05-12 22:38:05 · 4519 阅读 · 0 评论 -
说说超链接 target 属性的取值和作用？
target这个属性指定所链接的页面在浏览器窗口中的打开方式。它的参数值主要有：_blank：在新浏览器窗口(新标签)中打开链接文件；_parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self：在同一框架（iframe）或窗口中打开所链接的文档。此参数为默认值，通常不用指定。_top：**在当前的整个浏览器窗口（此标签）**中打开所链接的文档，因而会删除所有框架；...原创 2021-05-12 22:29:24 · 4701 阅读 · 0 评论 -
HTML 全局属性(global attribute)有哪些?
MDN: html global attribute 或者 W3C HTML global-attributesaccesskey:设置快捷键，提供快速访问元素如 aaa 在 windows 下的 firefox 中按alt + shift + a 可激活元素;class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素;contenteditable: 指定元素内容是否可编辑;contextmenu: 自定义鼠标右键弹出菜单内容 data-*: 为元素原创 2021-05-12 22:09:22 · 472 阅读 · 0 评论 -
说说你对 SVG 理解?
SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML）， 用于描述二维矢量图形的一种图形格式。SVG 是 W3C(‘World Wide Web ConSortium’即’国际互联网标准织’)在 2000 年 8 月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。原创 2021-05-12 21:54:20 · 222 阅读 · 0 评论 -
link 和@import 的区别?
link<link rel='stylesheet' rev='stylesheet' href='CSS 文件 'type='text/css' media='all' />import<style type='text/css' media='screen'>@import url('CSS 文件 ');</style>两者都是外部引用 CSS 的方式，但是存在一定的区别：@import属于css范畴，只能加载css需要页面完全载入后再加载原创 2021-05-07 13:33:53 · 96 阅读 · 0 评论 -
说说你对 HTML 语义化的理解?
（1）什么是语义化？基本上都是围绕着几个主要的标签，像标题（ H1~H6 ）、列表（li）、强调（strong em）等等根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析(2)为什么要语义化？为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构用户体验：例如 title、 alt 用于解释名词或解释图片信息、 label 标签的活用；有利于 SEO：依赖于标签来确定上下文和各个关键字的权重；方便其他原创 2021-05-07 13:18:55 · 621 阅读 · 0 评论 -
请你描述一下 cookies，sessionStorage 和 localStorage 的区别?
前端面试题（10）打卡： 2021-5-5HTML请你描述一下 cookies，sessionStorage 和localStorage 的区别?sessionStorage+-| |==> HTML5 Web Storage API提供localStorage +-| web请求之间保存数据，避免数据不必要的来回传输sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据sessionStorage是在同源的同窗口（或 ta原创 2021-05-05 13:05:38 · 438 阅读 · 0 评论 -
什么是 WebGL,它有什么优点?
前端面试题（9）打卡： 2021-5-4HTML什么是 WebGL,它有什么优点?WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件3D加速渲染更流畅展示 3D 场景和模型，创建复杂的导航和数据视觉化免去了开发网页专用渲染插件的麻烦解决了现有的 Web 交原创 2021-05-04 19:27:48 · 2224 阅读 · 0 评论 -
HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些?
前端面试题（8）打卡： 2021-5-2HTMLHTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些?(1)行内元素 inline elementa - 锚点b - 粗体 ( 不推荐 )strong - 粗体强调br - 换行em - 强调i - 斜体img - 图片input - 输入框label - 表格标签select - 项目选择span - 常用内联容器，定义文本内区块s - 删除线 ( 不推荐 )strike - 删除线sub - 下标sup -原创 2021-05-02 22:49:01 · 1904 阅读 · 0 评论 -
对 WEB 标准以及 W3C 的理解与认识?
前端面试题（6）打卡： 2021-4-30HTML对 WEB 标准以及 W3C 的理解与认识?标签闭合标签小写不乱嵌套提高搜索机器人搜索几率使用外链 css 和js 脚本、结构行为表现的分离文件下载与页面速度更快内容能被更多的用户所访问内容能被更广泛的设备所访问更少的代码和组件，容易维护、改版方便，不需要变动页面内容提供打印版本而不需要复制内容、提高网站易用性...原创 2021-04-30 12:54:32 · 135 阅读 · 0 评论 -
HTML5认识
前端面试题（5）打卡： 2021-4-30HTML说说你对 HTML5 认识?（是什么,为什么）是什么HTML5 指的是包括 HTML、CSS 和 JavaScript 在内的一套技术能够减少网页浏览器对于需要插件的丰富性网络应用服务，并且提供更多能有效加强网络应用的标准集HTML ---> HTML51999年 ---> 2014.10HTML4.01 W3CXHTML1.0为什么移动端 HTML4 Flash不安全、不稳定HTML5增强浏览器原生功能减原创 2021-04-30 12:50:03 · 116 阅读 · 0 评论 -
浏览器内核
前端面试题（5）打卡： 2021-4-30HTML你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?IE: trident 内核 —> 微软开发 W3C、跨平台Firefox：gecko 内核 —> c++ 跨平台 开源Safari: webkit 内核 —> 苹果Opera: presto 内核->Blink 内核Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发 )...原创 2021-04-30 12:41:49 · 81 阅读 · 0 评论 -
HTML5有哪些新特性、移除了哪些元素？
每日一题（4）打卡 2021-4-28HTMLHTML5 有哪些新特性、移除了哪些元素？HTML5新增27个元素移除16个元素根据现有的标准规范，把 HTML5的元素按 优先级 定义为+---结构性属性|---级块性元素 4大类|---行内语义性元素+---交互性元素结构性元素 --> 负责上下文结构的定义section：用于区域的章节描述header：页面主体上的头部footer：页面的底部（页脚），通常会标出网站的相关信息nav：专门用于菜单导航、链接导原创 2021-04-28 20:56:43 · 378 阅读 · 0 评论 -
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义
每日一题（3）打卡： 2021-4-27HTMLDoctype 作用? 严格模式与混杂模式如何区分？它们有何意义?Doctype作用（1）位于文档最前面，处于标签之前。告诉浏览器用什么文档类型和规范(HTML或XHTML)来解析文档阅读程序 规则集?| -----| -> 解释 文档中的标记| |浏览器/校验器 | -> w3c发布的文档类型定义中 包含的规则（DTD 3种） 表现层× ->（1）严格版本 HTML4.01-原创 2021-04-27 12:47:50 · 657 阅读 · 0 评论 -
HTML5 的优点与缺点
每日一题（2）打卡： 2021-4-26HTMLHTML5 的优点与缺点？优点（1）网络标准统一，html5是由w3c提出（建立网站的技术统一）（2）多设备，跨平台（3）即时更新⏲（4）可用性高（友好用户体验）（5）新增（语义化）标签，便于开发人员定义重要的内容（6）增加多媒体元素，更好替代 Flash、Silverlight（7）网站抓取和索引，对SEO友好（8）大量用于移动应用程序和游戏Adobe Flash（过时）支持Web应用程序、矢量图形、多媒体Silverl原创 2021-04-26 14:35:24 · 1674 阅读 · 0 评论 -
浏览器页面有哪三层构成，分别是什么，作用是什么
每日一题（1）打卡： 2021-4-25HTML浏览器页面有哪三层构成，分别是什么，作用是什么?构成：结构层、表示层、行为层分别为：html、css、JavaScript作用：（1）html实现网页元素结构（2）css实现网页元素的外观样式（3）JavaScript实现客户端的功能与业务（交互效果）...原创 2021-04-25 13:34:33 · 703 阅读 · 0 评论