- 博客(95)
- 收藏
- 关注
RSS订阅原创 重启：HTML的开始
HTML是一种文本标记语言，它的全称是**Hpyter Text Markup Labguage**。文档声明：声明当前网页的版本，eg:，（这里不区分大小写），用于声明文档采用哪个版本的HTML进行编写，这里代表的是html5。注意：声明必须要放在标签之前，主要是为了让浏览器知道我们用的是那种HTML或者XHTML规范。网页中的所有内容必须写在html根标签（元素）中，在中包含了head头部标签和body身体标签。...
2022-01-06 11:20:17
372
原创 字符编码，字符集的介绍及使用（charset=“UTF-8“）
字符编码:所有数据在计算机中都是以二进制的方式进行存储，即便是一段文字，在内存中存储时，也需要转换为二进制。需要读取文字信息的时候，计算机会将编码转换为字符。编码：将字符转换为二进制码的过程---- 我是谁 --> 010101110解码：将二进制码转换为字符的过程---- 010101110 -->我是谁字符集（charset）：编码或者解码需要遵循的规则。乱码问题，如果编码和解码采用的字符集不同，就会出现乱码的问题常见的字符集;ASCII（美国的
2021-08-28 16:51:11
2239
原创 计算器在程序员模式下的HEX、DEC、OCT、BIN
BIN：二进制（1111）OCT：八进制（17）DEC：十进制（15）HEX：十六进制（F）
2021-08-28 16:04:43
4809
原创 关于进制（十进制，二进制，八进制，十六进制）
进制十进制，在日常生活中使用。满10进1，计数：0 1 2 3 4 5 6 7 8 9 10 11 12 …18 19 20…，单位数字有10个（0-9）。二进制，满2进1，计数：0 1 10 11 100 101 110 111，单位数字有2个（0、1）。计算机底层使用的进制（在计算机的底层，所有的数据都会以二进制的形式保存，可以将内存比喻为有多个小方格的容器，每个小方格中可以一个0或一个1，每个小方格在内存中被称为1位（1bit））。8bit = 1byte（字节）1024
2021-08-28 15:57:47
1994
原创 文档声明（!DOCTYPE html）
迭代：交换替代，版本的更新。网页的版本：HTML4、XHTML2.0、HTML5…文档声明（DOCTYPE）：用来告诉浏览器当前网页的版本。html5的文档声明：< !DOCTYPE html >，文档声明要写在网页的最顶部， 因为不严格的区分大小写，所以也可以写成：<!doctype HTML><!DOCTYPE html><html><head> <title>网页声明</title><
2021-08-28 15:29:36
517
原创 标签中属性的简介及使用方法
属性：用来设置标签内容的显示在标签（开始标签或者自结束标签）中能设置属性，属性是名值对结构。color="red"这里的color是属性名，red是属性值。在书写属性的时候，应该和标签名或者其他属性用空格隔开，属性名根据W3C的规范来书写。<font color="red">文字内容</font>有的属性有属性值，有的属性没有属性值。如果有属性值应该用引号引起来，要么都是双引号，要么都是单引号，且使用英文符号。<html> <
2021-08-28 13:02:22
1004
原创 HTML中的自结束标签及注释
标签一般会成对出现，但是也存在自结束标签，例如：自结束标签以下两种写法都是对的，要不要斜杠都能正常运行。< img >< img/ >< input >< input/ >html注释：语法：注释可以对代码进行解释说明，其内容在网页中不会显示，可以在源代码中查看注释。多写注释可以帮助同事或者自己在一段时间后更容易理解代码。<!-- 以下是一级标题的写法 --><h1> 一级标题</h1>
2021-08-28 12:45:32
1046
原创 编写网页的基本格式（标签）
标记的作用：告诉网页相应的内容是什么，标签：成对出现，<标签名>标签内容</标签名><html><!-- 网页根标签 --> <head><!-- head是html根标签的子标签 --> <title><!-- tilte是html根标签的根标签 --> 网页的标题 </title> </head> <b
2021-08-28 12:03:57
661
原创 HTML简介及使用记事本写第一个网页
HTML（超文本标记语言）的全称是：Hypertext Markup Language。作为网页中三要素的结构部分文本：使用纯文本编辑器写的代码，例如：记事本、Hbuilder、Nodepad++等。第一个网页：可以使用记事本写入一些内容，然后保存为后缀名为html的文档，点击打开就能在浏览器中看见写进去的内容。操作流程如下：1.新建文本文档，写入内容2.另存为后缀名为html的文档3.打开html文档，在浏览器中显示在文本编辑器中写入的内容...
2021-08-28 11:31:14
515
原创 网页的简介
历史：蒂姆·伯纳斯·李（爵士），是万维网的发明人。1991年8月6日，世界上的第一个服务器和第一个网站在欧洲核子研究中心正式上线。第一个网站：http://info.cern.ch/hypertext/wwW/TheProject.htmlWWW：World Wild Web浏览器的作用：将网页渲染（就好比有一个画家，你给他提供思路，将需要绘制的东西用语言描述出来，他提供给你画面）出来呈现给用户。 在万维网出现的初期，网页并没有一定的标准，在浏览器对网页源代码进..
2021-08-28 10:49:13
279
原创 HTML5+CSS3入门简介
***软件***分为三大类：系统软件：Windows、Linux、macOS等。应用软件：office、qq等。游戏软件：王者荣耀、绝地求生。软件的组成：通常情况下，软件由客户端和服务器组成。客户端：客户能看见的部分，用户能通过客户端来使用相应的软件，客户端在本地。服务器：为客户端提供服务的后台，负责处理业务逻辑，服务器在远程。客户端存在的形式：文字形式的客户端：通过命令来使用软件。例如：cmd命令行、dos命令行。图形化界面：windows、macOS、Android等
2021-08-28 09:57:19
102
原创 JS中如何制作二级菜单，（代码及重要思路，前半部分），querySelectorAll()、
制作二级菜单的代码如下（前半部分）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-08-20 12:00:44
1119
原创 JS中类的操作（类的增、删、改、查）
修改元素的样式当我们需要修改元素的样式的时候，往往可以通过style属性的对相应的样式进行修改，但是使用这种方式进行修改有缺点：每修改一次样式，浏览器就需要重新渲染一次页面，这样修改起来会降低代码执行的效率，在需要同时对多个样式做修改的时候也极为不方便。元素名.style.样式名 = “对应的样式”;//如果修改的是像素值，要在末尾拼串，加上“px”相比通过style属性来对元素的样式进行修改，我们可以将一个或多个样式写在另外一个class类里面，在通过修改class来达到修改元素样式的目的
2021-08-19 17:52:00
372
原创 JS中轮播图的完成
完整的练习代码如下：（结合注释，理清思路），完整代码后面是具体的思路。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
2021-08-19 15:05:01
233
原创 JS中按钮控制div左右移动、移动到固定位置以及暂停移动（3）
页面代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2021-08-16 21:28:14
1511
原创 JS中按钮控制div左右移动、移动到固定位置以及暂停移动（2）（优化部分，将移动的方法封装成了divMove函数，方便调用）
优化部分：将按钮控制div移动的方法封装到函数里面，更加方便调用。优化后的代码如下（结合注释，理解思路）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
2021-08-16 13:43:45
1201
原创 JS中按钮控制div左右移动、移动到固定位置以及暂停移动（1）
具体练习代码如下：说明：以下代码实现了简单的使用按钮控制div，燃div左右移动，或者移动到固定的位置，以及在移动过程中暂停移动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
2021-08-15 21:56:16
3782
原创 JS中的延时调用（setTimeout()、clearTimeout()）
延时调用setTimeout()，不会立即执行函数，会隔一段时间在调用函数。var timer = setTimeout(function(){},5000);//在5秒之后调用函数clearTimeout(标识)，关闭延时调用clearTimeout(timer);//关闭timer定时器延时调用和定时调用的区别：定时调用会自动执行函数多次，延时调用只会执行一次函数。延时调用和定时调用可以相互代替，在开发中可以自由选择。练习代码如下：<!DOCTYPE html>
2021-08-15 14:57:29
1928
原创 JS中键盘方向键移动div（使用setInteral定时器优化后，按键按下div不会停滞，移动顺畅）
分析：如果让方向键同时控制方向和速度，那么无法有好的使用效果，所以要将方向和速度分开控制。使用定时器来控制方向，获取到对应的方向键的keyCode值就向不同的方向移动。在按键松开的时候将方向清空，确保在按键松开时div不会在继续移动。练习代码如下，对比分析，理清思路：这是之前没有优化的代码，按键按下之后，div会停滞一会才开始移动<!DOCTYPE html><html lang="en"><head> <meta charset="U
2021-08-15 14:29:41
302
原创 基于定时器的图片切换练习（按钮操作开始及暂停切换，setInteral()、clearInteral()）
基于定时器的图片切换练习思路：将图片放置在页面相应的位置，为其设置id。获取图片元素，新建一个imgArr数组来保存需要进行切换的图片，声明变量index来保存数组的索引。开启定时器，设置延时为1秒，在定时器中使index自增，然后修改图片的src为imgArr数组的相对索引值。用按钮来控制图片开始切换或者暂定切换：添加两个按钮，并设置id。获取两个按钮元素，分别为其绑定单击事件，将开始切换的定时器移至开始按钮的单击事件下，在暂停单击按钮的时间下关闭对应定时器注意：定时器的标识在全局变量中声明
2021-08-15 10:43:39
351
原创 JS中的计时器（setInteral()、clearInteral()、setTimeout()、clearTimeout()）
1.setInteral()：可以定时调用一个函数，让函数每隔一段时间被调用一次，这个方法需要两个参数：回调函数调用函数所间隔的时间，单位：毫秒setInteral(function(){},1000);//每隔一秒调用一次函数setInteral()方法会返回一个Number类型的值，这个返回值会作为定时器的唯一标识clearInteral()：可以利用这个方法来关闭定时器，将定时器的标识传入这个方法，就能关闭对应的定时器。当然不能直接将其关闭，那样会让开启定时器的函数无法正常
2021-08-14 18:20:45
859
原创 JS中BOM的Location对象的用法（assign()、reload()、replace()）
Location：地址栏的信息封装在该对象中，直接打印location能够获取到当前页面的地址栏信息（完整路径）。alert(location);//会得到当前页面的完整路径将location修改为一个完整的绝对路径或者相对路径，当前页面会自动跳转到修改路径的页面，并生成相应历史记录。location = "http://www.baidu.com";//绝对路径，跳转到百度首页location = "js测试.html";//相路径，跳转到js测试.html页面Location对象中
2021-08-14 16:18:11
943
原创 JS中BOM的History对象的用法（length属性、back()、forward()、go()）
History:可以用来操作浏览器，使其向前或向后翻页length属性可以获取到当次访问链接的数量alert(history.length);back(),可以回退到上一个页面，作用和浏览器的回退按钮一样。history.back();forward()，可以跳转到下一个页面，作用和浏览器的前进按钮一样。history.forward();go()，可以用来跳转打指定的页面，需要一个整数作为参数，1表示向前跳转一个页面，2表示向前跳转两个页面，以此类推。-1表示向后跳转一
2021-08-14 15:11:05
905
原创 JS中的BOM及BOM中的Navigater（UserAgent来识别浏览器，IE中特有的属性ActiveXObject）
BOM(Browser Object Model)：浏览器对象模型，它提供了一组对象，让开发者可以通过JS来操作浏览器。BOM中的浏览器对象如下：Window：浏览器的整个窗口，window也可以作为全局对象进行使用。Navigater（字面翻译为：航海家）：这个对象中包含有浏览器的信息，可以通过其中的信息来对浏览器进行识别。Location：浏览器的地址栏信息，可以通过其来获取地址栏的信息，或者操作浏览器跳转页面。History：浏览器中的历史记录，可以通过这个对象来对浏览器的历史记录进行操作
2021-08-14 11:27:19
531
原创 JS中用键盘的方向键来移动div（switch...case）
使div随着键盘上下左右键的触发而移动，思路：获取div，为document绑定键盘按下事件，在事件中使用switch…case来判断键盘按下的是哪一个键，对应的keyCode对应着不同的方向键：左键被按下：在div现有的坐标值中，left的值减掉对应的值即可，值越大，移动的速度越快。box.style.left = box.offsetLeft - speed +"px";上键被按下：在div现有的坐标值中，top的值减掉对应的值即可，值越大，移动的速度越快。box.style.top
2021-08-14 09:36:58
896
原创 JS中的键盘事件（onkeydown、onkeyup、keyCode）
键盘事件：okeydown:键盘被按下，如果一直按着键盘的按键，则okeydown事件会一直被触发。- 当键盘按键一直被按住的时候，事件被连续触发，第一次和第二次以及后面的n次之间，触发的时间间隔会稍长，在0.5秒左右（一直按着按键，事件连续触发，第一次触发之后会有0.5秒左右的延迟，后面的连续触发事件不会有延迟，延迟只在第一次和第二次之间）。这种设计是为了防止误操作。在页面中需要判断按键是否被按下，可以用一个简单的例子进行测试，如下：<script type="text/javasc
2021-08-14 08:28:23
19046
2
原创 JS中的鼠标滚轮事件（onmousewheel、判断滚动的wheelDelta、detail，取消浏览器默认行为的preventDefault()方法）
onmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。DOMMouseScroll可以为火狐浏览器绑定滚动事件，它需要通过addEventListener函数来绑定。event.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。火狐浏览器不支持这个方法，需要会用event.detail来获取滚轮的滚动方向，向上是负值，向下是正值。在页面有滚动条的时候，滚动条会随着鼠标滚轮滚动..
2021-08-11 23:18:43
9234
原创 JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div（1）解决问题，当在拖拽事件所在的页面按下键盘的ctrl+A全选后，再去拖拽div，浏览器会默认去搜索网页中的内容，拖拽功能就会失效，（搜索网页内容是浏览器的默认行为，所以要想不发生这种情况，就得将其取消，是谁执行之后触发了浏览器的默认行为，就在谁里面return false即可取消浏览器的默认行为，但这种方式ie8及以下的版本不支持。）在ie8及以下版本浏览器中，如果调用了元素的setCapture()方法，那么点击任何事物都会来执行这个元素绑定的响应函数。例如：btn.oncl
2021-08-11 19:07:16
675
原创 JS中鼠标拖拽div（1）（优化div在鼠标按下时平移的问题）
在前一节内容中，涉及到了鼠标如何拖拽div，但是在前一节的内容中，按下鼠标左键要拖动的div的时候，div的右上角总会跑到鼠标点击的位置，为了优化拖拽的体验，做了如下修改：在点击鼠标拖拽div的时候，div的左上角不会跑到鼠标点击的位置来，点击的是div的什么位置，就在什么位置拖拽div。分析图如下：思路分析：在鼠标点击div的之前，div处于红色框的位置，在鼠标触发mousedown的那一刻，前一节的内容中，如果鼠标点击的是蓝色点的位置，红色div框会根据鼠标单击的位置做平行移动，红色框的左上
2021-08-11 17:15:21
1087
原创 JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown：鼠标的按下事件onmouseove：鼠标的移动事件onmouseup：鼠标的松开事件思路：想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
2021-08-11 16:00:35
4158
原创 JS中事件的传播
事件的传播：介绍：最初，微软和网景两个公司有不同的见解，前者认为事件的触发由内而外，先触发当前元素的事件，再向当前事件的祖先元素上传播，事件应该在冒泡阶段被触发。后者认为事件的触发是由外向内的，当事件被触发时，应该先触发当前元素的事件，随后再向当前元素的后代元素传播。W3C的决定：其综合了两家公司的不同理解，将事件的传播分为三个阶段：捕获阶段：从最外层的祖先元素开始，(W3C规定的最外层祖先元素为document，一般浏览器将最外层的祖先元素设置为window)，想目标元素进行事件的捕获，在此捕
2021-08-10 19:02:47
776
原创 JS中事件的绑定（addEventListener和attchEvent）
在一般情况下，使用“对象.事件 = 函数”来绑定响应函数，这种绑定的方式只能同时为一个元素的一个事件绑定一个响应函数，若绑定多个函数，后面绑定的函数就会覆盖掉前面的。例如以下代码，在执行的时候输出的结果为 2：<script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick =.
2021-08-10 16:10:06
476
原创 JS中事件的委派及小练习
所谓事件的委派，就是利用事件的冒泡，将事件统一绑定给指定元素所共有的、离指定元素最近的祖先元素，当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。通过事件的委派，可以减少事件的绑定次数，提高整体程序的性能。练习代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
2021-08-10 13:02:35
103
原创 JS中事件的冒泡与冒泡的取消
事件的冒泡：（Bubble） 所谓的事件冒泡，就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。注意：是相同的事件，而不是相同的响应函数内容，比如大家都绑定了onclick单击事件，叫做相同的事件。以下是练习的小例子：在以下代码中，span是div元素的子元素，而div是body的子元素，他们都绑定的是一样的事件，所以当span元素的响应函数被触发时，绑定了相同事件的的父元素以及祖先元素的响应函数也会被触发。所谓的向上传递，指的是向当前元素的父元素或
2021-08-09 18:26:36
2165
原创 VSCode解决设置默认浏览器方法（open with live server）
这个设置之后和open in browser的选线不一样，使用open in browser打开浏览器看效果的话每次修改代码都需要刷新网页才会生效，但是如果使用open with live server查看网页效果，所编写的代码只需保存即可在浏览器中看见实时效果。VS Code中修改open with live server默认浏览器的方式如下： 点击设置–>在搜索栏输入“open in browser:defaul
2021-08-09 16:47:36
6615
1
原创 JS中div跟随鼠标移动的练习
chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取，火狐等浏览器认为浏览器的滚动条是html的pageX和pageY可以获取相对于当前页面的坐标，这两个属性在ie8中不兼容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed.
2021-08-09 14:53:31
142
原创 JS中的事件对象
事件对象：当事件的响应函数被触发时，浏览器每次都会将事件对象作为实参传递进响应函数，在事件对象中，封装了事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下了，或者鼠标滑轮滚动的方向…clientX可以获取鼠标指针的水平坐标clientY可以获取鼠标指针的垂直坐标练习：鼠标在id为quyu的div中移动的时候，在id为zhanshi的div中显示鼠标的坐标，代码如下：<!DOCTYPE html><html lang="en"><head>
2021-08-09 11:36:10
112
原创 JS中其他样式相关的属性及滚动条练习
clientWdith和clientHeight这两个属性可以获取元素的可见宽度和可见高度，包括内容区和内边距，返回的是数值，可以直接用来进行运算。通过这两个属性只能读取，不能修改。clientWdith属性，返回可见宽度，例子如下：语法：元素.clientWidthbox.clientWidth;clientHeight属性，返回可见高度，例子如下：语法：元素.clientHeightbox.clientHeight;offsetWidth和offsetHeight这两个属性可以获.
2021-08-09 10:46:10
215
原创 JS中元素的属性读取（初识版本兼容问题）
因为currentStyle只兼容ie8及以下的版本，不支持其他的浏览器，而getComputedStyle()只兼容ie9及以上的浏览器，所以需要定义一个函数，使ie8及以下的版本和不同的浏览器能在不同的情况下正常读取到数据。 注意理解，当getComputedStyle被判时，作为变脸，它在函数作用域和全局作用域都找不到，在作为变量的情况下，找不到响
2021-08-07 11:28:01
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人