![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
「已注销」
仗剑天涯,从摘要开始
展开
-
html 行内元素和块级元素
行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。因此,行内元素适合显示具体内容,而块级元素适合做布局。常用的行内...原创 2019-12-15 08:50:35 · 165 阅读 · 0 评论 -
HTML5的新增标签有哪些?
2019-07-30 09:46我们都知道,想要成为一名合格的前端开发人员,掌握好HTML5是一个重要的先决条件,相比较于HTML,HTML5中新增了许多功能标签,那么这么标签都有哪些呢?格式:<bdi>定义文本的文本方向,使其脱离其周围文本的方向设置。<mark>定义有记号的文本。<meter>定义预定义范围内的度量。<pr...原创 2019-11-27 10:54:26 · 2482 阅读 · 0 评论 -
HTML5新增的标签及使用
HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签。一、定义文档类型在文件的开头总是会有一个标签 1 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...原创 2019-11-27 10:49:29 · 402 阅读 · 0 评论 -
JS函数的参数声明中用 var 与不用 var的区别
1、var 声明的变量,作用域是当前 function2、没有声明的变量,直接赋值的话, 会自动创建变量,但作用域是全局的.例如: function doSth() { a = "AAA"; } doSth(); // 执行一次 doSth alert...原创 2019-11-27 00:17:59 · 404 阅读 · 0 评论 -
JavaScript 保留关键字
在 JavaScript 中,一些标识符是保留关键字,不能用作变量名或函数名。JavaScript 标准所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript 的第三版,从 1999 年开始)。ECMAScript 4(ES4)未通过。ECMAScript 5(ES5,2009 年发布),是 JavaScript 最新的官方版本。随着时间的推移,我们开...原创 2019-11-26 22:57:11 · 90 阅读 · 0 评论 -
HTML5浏览器支持及兼容性处理
1、现代的浏览器都支持HTML5。2、所有浏览器不管是新的还是旧的对无法识别的元素会作为内联元素自动处理。3、HTML5定义了8个HTML语义元素,所有这些元素都是块级元素,为了能让旧版本的浏览器正确显示这些元素,你可以设置css的display属性值为block,如下:header, section, footer, aside, nav, main, article, fi...原创 2019-11-26 22:47:17 · 164 阅读 · 0 评论 -
ES6之模版字符串
最近在项目中使用了ES6的模版字符串,在这里加以总结。 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: $("#result").append( "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is a...原创 2019-11-24 17:38:27 · 132 阅读 · 0 评论 -
margin-top塌陷问题的现象与解决的具体方法
这篇文章主要介绍了margin-top塌陷问题的现象与解决的具体方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧什么是margin-top塌陷margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想让子元素的边框距离父元素边框有一段距离,而却出现...原创 2019-11-22 15:56:44 · 126 阅读 · 0 评论 -
webstom快捷键
默认配置-Eclipse的常用快捷键对照表查找/代替Webstorm快捷键 Eclipse快捷键 说明ctrl+shift+N ctrl+shift+R 通过文件名快速查找工程内的文件(必记)ctrl+shift+alt+N ctrl+shift+alt+N 通过一个字符快速查找位置(必记)ctrl+F ctrl+F 在文件内快速查找代码...原创 2019-11-14 17:13:26 · 83 阅读 · 0 评论 -
forEach,for in,for of循环的用法
一、一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,array[i]); } 二、用for in的方遍历数组 for(let index in array) { ...原创 2019-11-14 11:54:00 · 143 阅读 · 0 评论 -
JS绑定事件三种方式
三种方式1、在DOM中直接绑定2、在JS代码中直接绑定3、使用事件监听函数绑定事件一、在DOM中直接绑定也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子:<input type="button" value="点我呦" onclick="alert("hello world!")"/><!--或者--><input type="bu...原创 2019-11-06 08:58:08 · 219 阅读 · 0 评论 -
javascript执行机制
在掘金上讲解js执行机制的文章,收获很多。故复制过来,做复习笔记用不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。因为javascript是一门单线程语言,所以我们可以得出结论:javascript是按照语句出现的顺序执行的看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?...原创 2019-11-06 08:42:24 · 52 阅读 · 0 评论 -
关于在for循环中绑定事件打印变量i是最后一次!
其实函数引用的外部变量都是最后一次的值。image.png再来看一个例子:image.png如果你知道作用域链就好办多了,在这个函数里面的i其实引用的是最后一次i的值,为什么不是1,2,3,4...呢?因为在你for循环的时候,并没有执行这个函数,你这个函数是在你点击的时候才会执行的,当执行这个函数的时候,它发现它自己没有这个变量i,于是向它的作用域链中查找这个变量i...原创 2019-11-02 13:59:47 · 262 阅读 · 0 评论 -
简述浏览器渲染机制
一 : 为什么要了解浏览器渲染页面的机制,主要还是性能的优化。了解浏览器如何进行加载,我们可以在引用外部样式文件,外部JS时,将它们放到合适的位置,是浏览器以最快的速度,将文件加载完毕。 了解浏览器如何进行解析,我们可以在构建DOM结构,组织CSS选择器的时候,选择最优的写法,提高浏览器的解析速率。 了解浏览器如何进行渲染,明白渲染的过程,我们在设置元素属性,编写JS文件时,可以减少“重绘...原创 2019-11-02 13:59:54 · 61 阅读 · 0 评论 -
css 编码规范
1.前言CSS编码规范目的是使CSS代码风格保持一致,容易被理解和被维护。2.代码风格2.1 文件:[ 建议 ] 文件使用无BOM的 UTF-8编码解释:UTF-8 编码具有更广泛的适应性。BOM在使用程序或工具梳处理文件时,可能会造成不必要的干扰。2.2 缩进[强制] 使用4个空格作为一个缩进层级,不允许使用2个空格或tab字符 示例:.selector { ...原创 2019-11-02 14:00:00 · 177 阅读 · 0 评论 -
如何区分浏览器类型
开发过程中,有时候需要获取浏览器的类型,达到兼容的目的。一个很简单的例子,remove()不能在IE中运行,这就需要对IE进行单独的处理。于是就要获取浏览器的类型:var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var ifOpera = userAgent.indexOf("opera") > -1;// ...原创 2019-11-01 00:00:29 · 282 阅读 · 0 评论 -
理解Ajax
什么是Ajax?AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。意思就是用JavaScript执行异步网络请求。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件,但需要用户允许Jav...原创 2019-11-01 00:00:39 · 76 阅读 · 0 评论 -
使用mock.js生成前端测试数据
image.png概述:Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发。如果你正在开发一个前端页面,可是后台还没有完成供你调用的API,并且数据格式已经确定,那么你就可以使用Mock.js模拟相关的接口,生成假数据来查看页面的效果。Mock.js的功能,生成随机数据,拦截Ajax请求。如何mock数据?1. 安装Node.js,通过http-server...原创 2019-11-01 00:00:47 · 255 阅读 · 0 评论 -
理解作用域链
先来看两个例子var x = 10;bar(); //10function foo(){ console.log(x);}function bar(){ var x = 30; foo();}解析 执行bar,相当于执行foo(),foo里面要输出x,我们首先要从foo自己的作用域下面去找 foo里边是没有声明x的,然后我们会到foo的...原创 2019-11-01 00:00:53 · 77 阅读 · 0 评论 -
js的onload
区别一:执行时间不同 window.onload()是在页面所有元素(包括图片,引用文件)加载完成后再执行。也就是说页面所有的东西都加载完成之后再加载。 $(document).ready()是DOM结构绘制完毕就执行,不必等到加载完毕,意思就是,DOM数加载完毕,不必等到页面中的图片或其他外部文件都加载完毕。所以$(document).ready()执行更快 区别二:编写个数...原创 2019-11-01 00:01:30 · 662 阅读 · 0 评论 -
图片懒加载原理及实现
原理:先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗口时,将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求,导致服务器响应面,页面卡顿崩溃等。实现:<!DOCTYPE html...原创 2019-11-02 14:00:26 · 63 阅读 · 0 评论 -
vscode常用插件
vscode常用插件View In Browser :浏览器打开 ctrl +f1vscode-icons: 图标Path Intellisense:路径px to rem:相互转换Auto Rename Tag :写html神器fileheader: 注释 ctrl+alt+iAuto Rename Tag — 修改HTML标签时,自动修改匹配的标签beautif...原创 2019-11-02 14:01:03 · 174 阅读 · 0 评论 -
2019前端面试总结
HTML面试题你是如何理解HTML语义化的?比较简单的回答:我理解的语义化就是 标签用在合适的位置,比如段落要用p标签,标题要用h1-h6标签. 更细点的回答:我理解的HTML语义化是正确的标签做正确的事情,能够便于开发者阅读和写出更优雅的代码的同时,让网络爬虫更好的解析。为什么要做到语义化?有利于SEO,有利于搜索引擎爬虫更好的解析我们的页面,从而获取更多的有效信息,提升网页的权重。...原创 2019-11-02 14:01:11 · 222 阅读 · 0 评论 -
用户注册登录的逻辑
image.pngsession相当是服务器的一个记录表,记录着所有用户的token和过期时间,cookie相当于是每一个客户端的门票,门票上记录着当前访问时间和用户的token,服务器通过门票上的token查找记录表中的记录,得到相应的数据映射和过期时间,进行判断作者:泡杯感冒灵链接:https://www.jianshu.com/p/7e57c9c1bddf来源:简书...原创 2019-11-02 14:01:16 · 562 阅读 · 0 评论 -
资源加载过程
无论是地址栏输入,还有代码里加载的,都会有一个URL,所以加载资源的第一步是 :URL解析——(提取出URL包含的信息,比如域名) DNS查询——(根据解析出的域名,到DNS服务器上查找该域名对应的IP) 请求资源——(带有所有的请求信息,到这个IP地址上去请求资源,然后再从服务器上把请求的资源下载下来) 浏览器解析——(浏览器拿到这些资源以后,根据不同的类型,做不同方式的解析)上边4...原创 2019-11-04 08:12:35 · 183 阅读 · 0 评论 -
了解JS单线程和任务队列!
一、单线程和任务队列单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等待。 如果排队是因为计算量过大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行! JavaScript语言的设计者意识到,这时主线程完全可以不管IO...原创 2019-11-04 08:13:03 · 85 阅读 · 0 评论 -
Vue2 路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="Vue-v2.5.22.js"></script> <script type="text/javas...原创 2019-11-03 07:50:07 · 108 阅读 · 0 评论 -
网页一次滚动一屏幕效果
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></ti...原创 2019-11-03 07:50:13 · 444 阅读 · 0 评论 -
JavaScript作用域-声明提升(个人总结)
声明提升(hoisting)分为变量声明提升和函数声明提升。声明从它们在代码中出现的位置被“移动”到最上面的过程,被称作声明提升。每个作用域都会有声明提升。在介绍作用域的内部原理时有提过,引擎在解释JS代码前首先进行编译,编译过程中会找到所有的声明,并用合适的作用域将它们关联起来。以var a = 1;说明,这行代码包含了两步操作:var a和a = 1。定义声明是在编译阶段进行的,赋值操...原创 2019-11-05 10:43:47 · 78 阅读 · 0 评论 -
JS函数作用域提升
当你看到var a=2;时,可能会认为这是一个声明。但js实际上回将其看成两个声明:var a;和a=2;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。? 1 2 3 a=2; var a; console.log(a);//2 ? 1 2 cons...原创 2019-11-04 08:12:46 · 98 阅读 · 0 评论 -
ajax跨域简单请求与复杂请求
开发网站时经常会用到跨域资源共享(简称cors,后面使用简称)来解决跨域问题,但是在使用cors的时候,http请求会被划分为两类,简单请求和复杂请求,而这两种请求的区别主要在于是否会触发cors预检请求。首先我们要明白cors的原理(引自MDN):跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生...原创 2019-10-31 15:05:55 · 267 阅读 · 0 评论 -
javaScript遍历对象、数组总结
在日常工作过程中,我们对于javaScript遍历对象、数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结1、使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).var obj = {'0':'a','1':'b',...原创 2019-10-31 15:04:49 · 62 阅读 · 0 评论 -
JavaScript简介
第一章 JavaScript 是什么JavaScript是一门编程语言,虽然含有Java这个字眼,但是它和java没有半毛钱关系,就跟雷锋和雷峰塔关系一样;如果说html是一个网页的骨架,那么css即为网页绚丽的外衣;我们的网站想要动起来,有一些动画效果,就需要js这个灵魂;js能够帮我们完成一些页面的效果,比如轮播,回到顶部,弹出广告等等;第二章 js如何引入2.1 正确的引...原创 2019-10-31 11:26:30 · 98 阅读 · 0 评论 -
js的内置对象
##1.1 Array对象 ##1.1.1定义数组的两种方式var arr1=[2,3,4]; var arr2=new Array(2,3,4); console.log(arr1); console.log(arr2);1.1.2 获取的数组的长度arr.length1.1.3 数组的个数//i是数组的下标,是从0开始的arr[i]1.1.4 数组的添...原创 2019-10-31 11:16:52 · 64 阅读 · 0 评论 -
js函数作用域&&对象的概念
1.1 作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JavaScript(es6前)中的作用域有两种:- 全局作用域- 局部作用域(函数作用域)1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者...原创 2019-10-31 11:13:38 · 109 阅读 · 0 评论 -
JavaScript函数
JavaScript第一章 函数函数是完成某个特定功能的一组语句函数的主要作用是减少重复编写程序,也就是说一段代码可能在多个地方都要用到,可以将这段代码封装到函数中,在各处只需要根据名称调用函数即可函数无形中还有一个作用,那就是如果某个模块代码非常多,可以提取几个函数,然后通过调用函数完成模块功能,这样代码看起来更加简洁,可读性更强例如alert('hello');al...原创 2019-10-30 15:38:05 · 260 阅读 · 0 评论 -
js中的splice方法和slice方法简单总结
js中的splice方法和slice方法简单总结slice(start,end):参数:start:开始位置的索引end:结束位置的索引(但不包含该索引位置的元素)例如:splice具有删除,插入,替换的功能===================================================================1:删除的功能sp...原创 2019-10-30 15:19:09 · 269 阅读 · 0 评论 -
JS函数种类详解
JS函数种类详解1. 普通函数1.1 示例 1 2 3 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖在Js中函数是没有重载,定义相同函数名、不同参数签名的函数,后面的函数会覆盖前面的函数。调用时,只会调用后面的函数。 1 2...原创 2019-10-30 14:54:51 · 223 阅读 · 0 评论