![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识
前端知识
码农阳神
Diligence is like the seedling that springs up in spring, but it does not increase and grows day by day.
展开
-
Vue
Vue.js课程介绍什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发原创 2020-08-24 18:00:28 · 505 阅读 · 0 评论 -
HTMLCSS知识点
HTML/CSS知识点HTML5提供两种新对象,通过javascript API来存储本地数据,这两种对象是()。localStorage和sessionStorage解析:Web Storage分类 Web Storage实际上由两部分组成:sessionStorage与localStorage。 sessionStorage用于本地存储一个会话(session)中的数据...原创 2020-03-09 09:47:17 · 312 阅读 · 0 评论 -
02-attachEvent
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="按钮" id="btn"&...原创 2020-02-18 15:41:55 · 102 阅读 · 0 评论 -
01-注册事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="按钮" id="btn"&...原创 2020-02-18 15:41:24 · 134 阅读 · 0 评论 -
08-简单动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { positi...原创 2020-02-18 15:39:33 · 104 阅读 · 0 评论 -
07-倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .time-item { width: 430px; ...原创 2020-02-18 15:39:11 · 89 阅读 · 0 评论 -
05-删除提示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; padding: 0; } #...原创 2020-02-18 15:38:01 · 129 阅读 · 0 评论 -
04-setTimeout
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="开始" id="btn1"...原创 2020-02-18 15:37:27 · 128 阅读 · 0 评论 -
03-页面加载事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // BOM onload 页面加载完成之后执行 // 页面加载完成 页面上所有的元素...原创 2020-02-18 15:36:56 · 263 阅读 · 0 评论 -
02-对话框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="alert" id="bt...原创 2020-02-18 15:36:26 · 83 阅读 · 0 评论 -
01-window
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> // 当我们是用window的成员的时候,wind...原创 2020-02-18 15:35:57 · 112 阅读 · 1 评论 -
18-选择水果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> select { width:200px; ...原创 2020-02-18 15:33:44 · 180 阅读 · 0 评论 -
17-元素操作的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="按钮" id="btn"&...原创 2020-02-18 15:33:11 · 159 阅读 · 0 评论 -
13-动态创建表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box table { border-collapse: collapse; } ...原创 2020-02-18 15:32:30 · 113 阅读 · 0 评论 -
兄弟节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="box"> <div>这是一个区域1&...原创 2020-02-18 15:31:26 · 1218 阅读 · 0 评论 -
菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #menu ul li { list-style-type: non...原创 2020-02-18 15:29:29 · 102 阅读 · 0 评论 -
03-第一个子节点和最后一个子节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="box"> <div>这是一个广告图片...原创 2020-02-18 15:28:28 · 354 阅读 · 0 评论 -
01-节点层次
01-节点层次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="box"> <span>...原创 2020-02-18 15:23:47 · 494 阅读 · 0 评论 -
WebAPI02
检测用户名和密码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .bg { background-color: yellow; }...原创 2020-02-18 15:14:42 · 173 阅读 · 0 评论 -
WebAPI01
获取页面元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div>hello</div> <di...原创 2020-02-18 14:53:18 · 189 阅读 · 0 评论 -
JavaScript基础
JavaScript基础HTML和CSS网页、网站和应用程序网页:单独的一个页面网站:一些列相关的页面组成到一起应用程序:可以和用户产生交互,并实现某种功能。JavaScript介绍JavaScript是什么HTML CSSJavaScript 编程语言 流程控制Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为J...原创 2020-02-16 19:32:42 · 168 阅读 · 0 评论 -
JavaScript基础
JavaScript基础HTML和CSS 京东网页、网站和应用程序网页:单独的一个页面网站:一些列相关的页面组成到一起应用程序:可以和用户产生交互,并实现某种功能。JavaScript介绍JavaScript是什么HTML CSSJavaScript 编程语言 流程控制Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将...原创 2020-02-16 19:10:20 · 478 阅读 · 0 评论 -
js6
Array对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // 如何创建数组对象 // 1 数组字面量 [] // var ar...原创 2020-02-15 19:40:41 · 590 阅读 · 0 评论 -
js5
数据类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // 数据类型 // 简单数据类型,基本数据类型/值类型 // Numbe...原创 2020-02-15 19:28:55 · 362 阅读 · 0 评论 -
js4
arguments<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // var a = 10; // var b = 20; // v...原创 2020-02-15 19:17:04 · 554 阅读 · 0 评论 -
js3
数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // // 数组 是一种数据类型 // // Number String // v...原创 2020-02-15 18:58:51 · 236 阅读 · 0 评论 -
js2
赋值运算符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> var num = 5; var num1 = num * 5; // 25 ...原创 2020-02-15 18:51:48 · 411 阅读 · 0 评论 -
js1
helloworld<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- 2.页面嵌入js --> <script> alert("Hello W...原创 2020-02-15 18:42:02 · 215 阅读 · 0 评论 -
web移动关于视口的代码操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>视口</title> <style> body { padding: 0; margin: 0; background-color: #F7F7F7...原创 2020-02-15 18:14:36 · 695 阅读 · 0 评论 -
web移动视口
视口(viewport)是用来约束网站中最顶级块元素<html>的,即它决定了<html>的大小。PC设备在PC设备上viewport的大小取决于浏览器窗口的大小,以CSS像素做为度量单位。通过以往CSS的知识,我们都能理解<html>的大小是会影响到我们的网页布局的,而viewport又决定了<html>的大小,所以viewport间接的决定...原创 2020-02-15 17:45:25 · 260 阅读 · 0 评论 -
web关于像素的操作
获取设备独立像素比例值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取独立像素与物理像素比例值</title></head><body><script> // 像素...原创 2020-02-15 17:39:07 · 334 阅读 · 0 评论 -
移动Web基础知识
屏幕移动设备与PC设备最大的差异在于屏幕,这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺寸,实际上指的是屏幕对角线的长度(一般用英寸来度量)如下图所示而分辨率则一般用像素来度量 px,表示屏幕水平和垂直方向的像素数,例如19201080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成,如下图所示长度单位在Web开发中可以使用px(像素)、em、pt(点...原创 2020-02-15 17:35:43 · 153 阅读 · 0 评论 -
canvas实现帧动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:16:17 · 1676 阅读 · 0 评论 -
canvas绘制图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:14:32 · 281 阅读 · 0 评论 -
canvas绘制饼状图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:11:44 · 376 阅读 · 0 评论 -
canvas绘制在画布中心的一段文字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:09:28 · 978 阅读 · 1 评论 -
canvas绘制一个根据数据的饼图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:06:56 · 436 阅读 · 1 评论 -
canvas绘制一个圆分成六等分颜色随机
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:04:23 · 1440 阅读 · 0 评论 -
canvas绘制四分之一个圆弧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:02:44 · 1210 阅读 · 0 评论 -
canvas实现转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; ...原创 2020-02-15 17:00:49 · 163 阅读 · 0 评论