HTML
文章平均质量分 82
Michael18811380328
常与同好争高下,不与傻瓜论短长。
展开
-
DOMException: Failed to execute ‘querySelectorAll‘ on ‘Document‘ is not a valid selector 报错处理
DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’ is not a valid selector 报错处理问题过程今天开发过程中,遇到一个报错信息:react-dom.production.min.js:5058 DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘0bb64d67-b455-4130-9b73-55eda6a1975c8Bu原创 2021-07-16 14:49:59 · 14553 阅读 · 0 评论 -
最全面计算机英语单词列表(三)
702.general,a.通用的[ˈdʒɛnərəl]703.associated,a.联合的,相联的[əˈsoʊʃieɪtɪd]706.partition,v.划分,分区,部分[pɑrˈtɪʃn]707.hexadecimal,a.十六进制的[ˌhɛksəˈdɛsəməl]709.specification,n.说明书,规则说明书[ˌspɛsəf...原创 2018-07-15 07:49:22 · 7398 阅读 · 0 评论 -
XML中Range 对象说明(slate适用)
Range 对象定义概念Range (范围)是文档中连续范围区域,例如用鼠标选中的区域。主要用途:文档中的删除、剪切、复制、粘贴文本。deleteContents()extractContents()cloneContents()insertNode()一个 range 具有两个边界点(anchor-focus)。每一个边界点由一个节点(anchor-node focus-nod...原创 2018-12-03 11:42:23 · 446 阅读 · 0 评论 -
前端如何提高网站品质
如何提高网站品质1. 符合主流标准H5 C3 web验证(代码经过官方的验证通过)2. HTML DOCTYPE 确定当前正在适用的界面的版本;这样浏览器会快速一致的显示当前页面。主要包括 HTML 4.0.1 XML 1.0 HTML5 三个大类;每一个大类包括严格模式、传统模式、框架集模式等(对于代码严格程度不一样)。 title 网页的标题:描述网页的功能——尽量...原创 2018-12-03 15:42:28 · 331 阅读 · 2 评论 -
stopImmediatePropagation 事件
复习:2019-1-25event.stopImmediatePropagation() 方法阻止剩下的事件处理程序被执行。该方法阻止事件在 DOM 树中向上冒泡。停止当前节点,和所有后续节点的事件处理程序的运行。stopPropagation 会阻止事件向上层元素冒泡。如果同一个元素绑定了多个事件(addEventListener),那么不会阻止其他事件的执行。stopImmedia...原创 2018-12-06 10:12:53 · 2978 阅读 · 0 评论 -
前端绘制小猪佩奇(CSS)
绘制小猪佩奇的方法有很多。从前端的角度,可以在 canvas 中绘制,或者直接使用 css3 绘制。这里就练习最基本的CSS绘制小猪佩奇。<!DOCTYPE html><html><head> <title>用css画一个小猪佩奇</title> <style type="text/css">原创 2019-01-19 15:28:53 · 2556 阅读 · 0 评论 -
使用 Python 自动生成 HTML
python 自动化批量生成前端的HTML可以大大减轻工作量下面演示两种生成 HTML 的方法方法一:使用 webbrowser#coding:utf-8 import webbrowser#命名生成的htmlGEN_HTML = "test.html" #打开文件,准备写入f = open(GEN_HTML,'w') #准备相关变量str1 = 'my name ...原创 2019-02-18 11:36:12 · 41466 阅读 · 11 评论 -
斐波那契数列('兔子数列')的性能问题
斐波那契数列是典型的递归函数解决问题的算法。普通的斐波那契数列具有很大的性能问题 // 默认没有缓存时 let tesetNum = 30; console.time('NoCache'); function fibonacci1(n) { if(n==0 || n == 1) return n; re...原创 2019-06-18 17:21:20 · 250 阅读 · 0 评论 -
超级实用的chrome浏览器调试技巧
在前端测试时,使用浏览器调试基本的结构、样式、网络是基本功。Chrome 谷歌浏览器调试界面友好,性能强大,下面简单介绍开发者工具的几个超级使用的调试技巧。一、快速预览文件如果你使用过sublime 编辑器,那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按Ctrl+P(cmd+p on mac)...原创 2019-06-28 11:12:41 · 6645 阅读 · 0 评论 -
超级实用前端知识点和面试题
这是搜集网上的多个前端经典知识点,不断更细中。虽然忙着每天的工作,但是基础知识要熟练掌握不断温习。CSSCSS 常见布局方式【整理】CSS布局方案CSS查漏补缺[布局概念] 关于CSS-BFC深入理解[译]这些 CSS 命名规范将省下你大把调试时间CSS知识总结前端开发规范:命名规范、html规范、css规范、js规范HTTPHTTP状态码(HTTP Status Cod...原创 2019-06-28 11:22:29 · 289 阅读 · 0 评论 -
7月前端知识点总结
今天已经7月31号,简单总结这个月的知识点和个人想法:1、前端架构设计 view-model 分离思想:现在前端使用 React 框架。React 框架通过状态驱动,父子组件之间通过 props 进行数据传递,组件内部使用 state 控制行为。如果是组件自身的行为,控制行为的状态(state)需要存放在当前组件。如果是多个并行组件的行为,控制行为的状态需要放在公共的父组件中。界面状态(sta...原创 2019-07-31 22:01:02 · 200 阅读 · 0 评论 -
最全面计算机英语单词列表(一)
作为一名开发者,不管是自己写代码还是阅读英文文档,英语水平对于开发进度有很大的影响。业余时间简单整理了计算机开发中常见的英语单词(不限于前端开发),再此和朋友们分享。单词较多,为了阅读体验良好分成几个部分。1.file,n.文件;v.保存文件[faɪl]2.command,n.命令,指令[kəˈmænd]3.use,v.使用,用途[jus]4.program,n.程序[ˈproʊgræm]5.li...原创 2018-07-15 07:46:01 · 53258 阅读 · 30 评论 -
Web前端开发标准规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。A.基本原则符合web标准(UTF-8,HTML5),语义化html(HTML5新增要求,减少div和span等无特定语义的标签使用),结构表现行为...原创 2018-07-15 07:32:40 · 34227 阅读 · 1 评论 -
前端图片格式与浏览器性能优化
在当前的静态或者动态界面中,图片是用户体验提升的重要的一部分。良好的图片设计会提升用户体验,并且对于浏览器优化具有很好的效果。接触图片设计和前端开发已经有两年时间,下面简单总结几点:1.图片格式传统的网页开发主要使用三种格式的图片:jpg、png、gif。这三种图片都是栅格图片(图片信息使用像素点进行存储),如果进行缩放会影响图片的视觉效果。jpg(jpeg)格式使用范围最广。通常情况...原创 2018-07-20 10:06:20 · 948 阅读 · 0 评论 -
前端设计与用户体验
清明节假期,突然想起一点东西:一个网页的复杂程度,和网页的传输效率,网页的打开速度有直接的关系。网页传输效率和网页打开速度对于用户体验至关重要。一个好的设计,不仅仅把产品的特点表现的淋漓尽致,同时需要给用户最佳的用户体验。如何不断优化自己的网站设计呢?1.网站多媒体的设置:多媒体是网站传输的重要的载体。现在用户耐心看完网站的文字内容很难,快速阅读的社会需要提供更多的图片视频音频等多媒体。对于图...原创 2018-04-06 17:22:54 · 4723 阅读 · 2 评论 -
移动端web界面开发
根据2017年大公司的市场分析报告,移动端用户上网人数和上网时间已经突飞猛进,相信在5G的环境中,更多人会选择便捷的移动端进行浏览网页获取信息。移动端界面开发也更加重要。移动端网页前端开发和传统PC端开发有不少异同点。1.移动端由于屏幕较小,为提高用户体验,设置单个网页内容远远小于PC端(网页HTML结构相对简单),小部件和格式处理更便捷。PC端富含更多信息,细节更丰富(导航网站或者购物网...原创 2018-04-24 20:30:14 · 2422 阅读 · 0 评论 -
前端canvas制作微信小游戏(一)
canvas是HTML5中新加入的标签。使用canvas可以创造完全独立于css的图形界面。canvas完全依靠js代码实现矢量图形界面的显示和变换。目前canvas在移动端界面中广泛使用。微信小游戏和小程序很多都是基于canvas进行创作(例如经典的最强弹一弹、经典跳一跳)这些小游戏不需要下载APP,直接在微信平台中运行即可进行游戏,受到不少用户的追捧。下面是一个元宵节祝福的 demo 和详...原创 2018-06-21 15:36:55 · 2944 阅读 · 0 评论 -
前端canvas制作微信小游戏(二)
这次简单分享一个canvas坐标效果和矩形动画效果,这是制作小游戏的基础组件。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><scrip...原创 2018-06-21 15:40:48 · 1465 阅读 · 0 评论 -
JS的正则表达式
2019-1-28 复习还记得刚开始接触JS中的正则表达式,是源代码中压缩后的一大段正则表达式(对于强迫症的我就是一种考验):一方面惊叹这部分代码的神奇之处(可以进行用户表单验证),同时对着一堆“乱码”无从下手。正则表达式,如果没有标注,没有换行,直接阅读,困难很大。当时在CSDN上一个一个查也没找到合适的结果。。。于是暂时放下来看其他代码if(RegExp 没有换行){ if(...原创 2018-06-15 15:22:34 · 166 阅读 · 0 评论 -
前端旋转木马效果
轮播图,俗称“旋转木马”,前端设计经典的一个案例。通常电商首页会使用轮播图或者旋转木马。废话不多说,直接上代码。主要逻辑:静态界面:中部是图片,左右分别是前进和后退按钮,下面是不同的页码。功能分析:不操作时,界面会自动向某个防线滚动;点击左右上下按钮会切换,直接点击下面的页码会直接跳到对应界面中。技术难点:页面切换的动画;点击按钮时默认的滚动暂停;第一个图片和最后一个图片的滚动...原创 2018-06-15 15:24:48 · 3754 阅读 · 0 评论 -
input输入框number类型用户优化
今天和朋友交流input框number类型的显示状况。浏览器默认的input输入框显示不好,对于用户输入的部分非法值不能合理进行判断,所以需要在JS进行操作。在移动端H5页面开发中,有时候会有一些数值输入方面的需求。如果需要让用户比较方便地输入小数、负数,最简单的方式是使用number类型的input框,输入时软键盘会切换为数字键盘方便输入(ios是带数字的全键盘,并允许1e5这类的表示方法)...转载 2018-06-23 21:04:03 · 2231 阅读 · 6 评论 -
web前端设计思路和用户新体验
1.实验室管理系统:个人预约实验室,实验室智能5G网络和物联网时代。实际上就是对数据库的增删改查。分析方法:流程图(产品分析)局限:学校中模拟的产品,没有进入社会实际使用,市场价值需要分析。组成部分:数据库-管理员入口-用户入口-产品信息-界面交互下图是现场演示2.空闲帮:一个社交功能的网站:用户交互社交平台,分为前端界面和后台数据交互。后端使用 Java 前端使用 JS。网页根...原创 2018-06-18 13:27:04 · 3689 阅读 · 0 评论 -
Cannot read property innerHTML of null 报错信息
Cannot read property 'innerHTML' of null ——这个报错的字面含义是:不能读取空的内部HTML。这个报错是一个初学者的问题。实际上,在页面的HTML结构中,innerHTML是有实际的值并可以在console进行获取查询到。问题:script中关于DOM部分放在和body标签前。根据浏览器的渲染原理,HTML代码从上到下执行代码,当浏览器JS解析器...原创 2018-07-20 09:29:19 · 24203 阅读 · 4 评论 -
前端 Ajax 异步get-post方法分析
在Ajax中请求的类型可以分为GET和POST两种方法。get方法效率更高,大部分网站会选择get方法。post方法由于大小不做限制,在某些情况也会使用post方法。get方法的优点不多叙述,代码简单,效率高,不需要设置content-type等等。//1 get method var xhr = new XMLHttpRequest; xhr.open("get",...原创 2018-04-03 15:18:24 · 525 阅读 · 1 评论