前端基础
后来的我们没有了后来
这个作者很懒,什么都没留下…
展开
-
六,表格和表单
一、表格table>tbody>tr/th>tdcolspan:横向合并单元格、rowspan:纵向合并单元格,可以body,td设置border之间会有默认的空隙,border-spacing:0px设置边框之间 的空隙,border-collapse:collapse设置表格边框合并,此时border-spacing自动失效;tr:nth-child{}:可设置隔...原创 2020-02-28 21:17:20 · 169 阅读 · 0 评论 -
五,浏览器兼容性问题及解决方法
一,IE6中存在的兼容性问题1.IE6 中不支持子元素选择器(语法:父元素>子元素),只能通过JS来解决2.IE6中不支持对超链接以外的元素设置hover和active伪类:link 表示普通超链接(没访问过的):visited 表示访问过的超链接,:visited 表示访问过的超链接(涉及到用户隐私,只能设置字体颜色),:active 表示鼠标点击时的状态,被激活状...原创 2020-02-24 18:26:09 · 752 阅读 · 0 评论 -
四,HTML和CSS中常见的面试题(重点)
一,长度单位1.px 像素,一个像素就相当于屏幕中一个小点,屏幕是由这些像素点构成的。对于不同的显示器来说一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大(手机屏幕像素最小,默认把像素乘以4)。2.百分比:浏览器会根据其父元素的样式计算该值,使用百分比,当父元素的属性值发生变化时,子元素也会按照比例发生变化,在创建自适应页面时,经常使用百分比。3.em:相对于当前元...原创 2020-02-24 16:58:37 · 271 阅读 · 0 评论 -
三,盒子模型
一,原创 2020-02-24 13:36:36 · 138 阅读 · 0 评论 -
二,CSS简介
一,CSS层叠样式表网页是多层堆叠起来的,我们用户看到的是最上面一层,下面的都被上面的这一层盖住了。Tit插件可以查看网页层次。1.可以将CSS样式写在元素的style属性中(内联样式),只对当前标签起作用,属于结构和样式的耦合不推荐使用。2.可以将CSS样式写在head中style标签中(内部样式),通过CSS选择器选中指定元素,可同时为这些元素一起设置样式,可以使样式进一步复用。表...原创 2020-02-24 12:50:45 · 233 阅读 · 0 评论 -
一,HTML简介
一、软件架构1、C/S架构:客服端/服务器,比如系统中的QQ,360等;C:用户通过客户端来使用软件,S服务器负责处理软件业务逻辑。当我们电脑没有连接网络时,我们就不能使用qq发送消息,因为没有连接到qq的服务器(纯单机游戏没有服务器)。1)C/S架构软件必须得安装;2)软件更新时服务器和客户端得同时更新3)C/S架构软件不能跨平台(.windows、lunix、android...原创 2020-02-23 21:48:45 · 287 阅读 · 0 评论 -
二十五,BOM浏览器对象模型
一,什么是BOM我们学习JS主要就是学习这个三个ES标准,DOM对象,BOM对象。DOM是文档对象模型,是通过JS操作网页(文档)的,BOM:浏览器对象模型,使我们可以通过JS来操作浏览器。在BOM中为我们提供了一组对象,用来完成对浏览器的操作。BOM对象:,Window:代表的是整个浏览器窗口,同时window也是网页中的全局对象。在全局作用域中变量作为window的属性保存,函...原创 2020-02-16 17:09:26 · 131 阅读 · 0 评论 -
二十四,滚轮事件,键盘事件,键盘移动元素
一,滚轮事件效果: * 鼠标点击box1向下滚动滚轮box1向下变长 * 鼠标滚轮向上滚动box1变短二,键盘事件三,键盘移动元素...原创 2020-02-16 14:22:34 · 182 阅读 · 0 评论 -
二十三,事件联系——拖拽
一,拖拽box1元素 * 拖拽流程: * 1.当鼠标在拖拽元素上按下时,开始拖拽onmousedown * 2.当鼠标移动时被拖拽元素跟随 鼠标移动onmousemove * 3.当鼠标松开时,被拖拽元素固定在当前位置onmouseup看似功能实现了...原创 2020-02-14 20:04:08 · 290 阅读 · 0 评论 -
二十二,事件的冒泡,委派,绑定,传播
一,事件冒泡如下所示代码:span是div的子元素,div是body的子元素,我们分别为这三个元素绑定响应事件。当我们点击...原创 2020-02-13 12:55:53 · 119 阅读 · 0 评论 -
二十一,DOM操作CSS
一,DOM操作内联样式前面我们操作DOM都是操作HTML标签,也就是在操作结构。那我们也可以通过DOM操作表现CSS样式。通过JS修改元素的样式,语法:元素.style.样式名 = 样式值注意:如果CSS的样式名中含有“-”,这在JS中是不合法的比如:background-color需要将这种样式名修改为驼峰命名法。我们通过style属性设置的样式都是内联样式,内联样式的优...原创 2020-02-11 20:35:50 · 225 阅读 · 0 评论 -
二十,DOM查询的其他方法(table增删改练习,a的索引问题)
一,DOM查询的方法1、在document中有一个属性body ,它保存的是body引用。document.documentElement保存的是html标签2、document.all获取页面中所有的元素, *也是获取页面中所有的元素。可以获取body标签3、根据className获取元素,getElementByClassName()可以根据class属性获取一...原创 2020-02-11 12:49:41 · 181 阅读 · 0 评论 -
十九,DOM操作练习(图片切换,全选练习 this)
一,实现效果要求如下:表现和样式如下:实现逻辑:1.分别为两个按钮绑定单击事件,切换图片就是要修改img的src属性,我们需要切换的图片有多张,所以我们需要一个数组来保存图片路径。 创建一个变量index来保存当前图片的索引, imgs.src = imgArr[index];当点击下一张图片时index++,但是需要注意的是,当自增到数...原创 2020-02-10 17:23:51 · 432 阅读 · 0 评论 -
十八,宿主对象DOM
一,DOM简介在JS中对象分为3类:内建对象,宿主对象,自定义对象。宿主对象:浏览器(运行环境)提供的对象。DOM:文档对象模型,JS 中通过DOM来对HTML文档进行操作,操作WEB页面。Doumnet文档:表示整个HTML网页的文档Objec对象:表示将网页中的每一个部分转换为一个对象Model模型:使用模型来表示对象之间的关系,这样方便我们获取对象。节点Nod...原创 2020-02-10 11:43:33 · 207 阅读 · 0 评论 -
十七,正则表达式RegExp
一,正则表达式简介正则表达式用于定义 一些字符串的规则,计算机可以根据正则表达式,来检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来。正则表达式是一个对象。使用typeof检查正则对象,返回object 。正则表达式的方法:test():使用这个方法可以检查一个字符串是否符合正则表达式的规则。在构造函数中可以传递一个匹配模式作为第二个参数,可以是i:...原创 2020-02-08 18:36:40 · 224 阅读 · 0 评论 -
十六,包装类,字符串的方法
一,什么是包装类JS中数据分为两类,基本数据类型和引用数据类型(对象)。基本数据类型:String Number Booleann Null Undefined引用数据类型:Object在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象。String():可以将基本数据类型转换 为String对象Number():可以将基本数据类型的数字转换...原创 2020-02-07 16:51:08 · 145 阅读 · 0 评论 -
十五,JS内建对象之Date和Math
一,Date对象在JS中使用Date对象来表示一个时间,1)如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间2)创建一个指定的时间对象,需要在构造函数中传递一个表示时间的字符串作为参数。日期格式:月份/日/年 时:分:秒3)创建日期对象后就是找对象了getDate()获取当前日期是几号getDay()获取当前日期 对象是周几,会返回0-...原创 2020-02-07 15:47:15 · 201 阅读 · 0 评论 -
十四,函数的call(),apply()方法,arguments参数列表
一,函数call()和apply()方法1.这两个方法都是函数对象的方法, 需要通过函数对象来调用 2.当对函数调用这两个方法时都会调用函数执行3.调用call和apply可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的thiscall()和apply()中传入的参数是谁this就是谁call()和apply()二者的区别:call()方法...原创 2020-02-06 19:55:36 · 1168 阅读 · 0 评论 -
十三,垃圾回收,数组
一,概念垃圾回收GC:程序运行过程中也会产生垃圾,垃圾积攒过多以后会导致程序的运行速度过慢,所以我们需要一个垃圾回收机制来处理程序运行过程中产生的垃圾。当一个对象没有任何的变量属性对它进行引用,此时我们将永远无法操作该对象,此时这种对象就是垃圾。这种对象过多就会占用大量的内存空间,导致出现运行变慢,所以这种垃圾必须进行清理。在JS中有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁...原创 2020-02-06 17:39:36 · 564 阅读 · 0 评论 -
十二,原型对象
一,原型前面介绍了通过工厂方法和构造函数来创建对象,工厂方法在创建大量对象时内存消耗较大,构造函数可以减少内存消耗。但是在构造函数内部添加方法也会消耗大量内存,将方法写在构造函数外部,写在全局作用域又会污染全局作用域命名空间(同一个项目可能别人函数的名字跟自己的取得一样),也不安全。因此我们来了解一个新的概念原型prototype。当我们访问对象的一个属性或方法时,它会先在对象中寻...原创 2020-02-04 16:17:24 · 148 阅读 · 0 评论 -
十一,创建对象(工厂方法,构造函数两种方法对比以及this)
如何大批量创建对象?使用工厂方法来创建大量的对象:创建狗的对象也是一样缺点:使用工厂方法创建的对象,使用的构造函数都是Object,所以创建的对象都是Object这个数据类型,就导致我们无法区分出多种不同类型的对象。二,构造函数构造函数就是一个普通函数,它与普通函数区别是调用方式不同,普通函数是直接调用,构造函数是加关键字new 来调用构造函数执行流程: *...原创 2020-02-03 21:09:19 · 244 阅读 · 0 评论 -
十,JS经典面试题目,this指针
一,经典面试题目先直接粘贴代码和运行结果二,this解析器在调用函数时每次都会向函数内部传递一个隐含的参数this,this参数与普通参数a,b没有区别;this指向的是一个对象,这个对象我们称为函数执行上下文对象,根据函数的调用方式不同,this会指向不同的对象。1.以函数形式调用时,this永远都是指向window2.以方法形式调用时,this就是调用方法的对象...原创 2020-02-03 18:43:29 · 304 阅读 · 0 评论 -
(五)前端基础之盒子模型中的问题
一.垂直外边距的重叠(兄弟元素)在网页中垂直方向的相邻外边距会发生外边距的重叠(兄弟元素)取最大值而不是两个之和 ,父盒子的高度是217=100+100+15+2解决垂直外边距重叠:1)中间添加一个元素如a让其不相邻外边距就会使两个外边距之和240=100+100+15+5+18(a的宽度)+2二,垂直外边距(父子元素)如果父子元素的垂直外边距相邻,则子元素的外...原创 2020-01-03 11:20:26 · 474 阅读 · 0 评论 -
(十)CSS hack
一, hack条件hack: 指一个特殊的代码,这段代码只在某些浏览器中可以识别,而其他浏览器不能识别<!–[if IE 6]>只在IE6中显示 <![endif]–>IE10以上不支持条件判断lt小于,lte小于等于,gt大于属性hack:_:IE6及以下浏览器,\9:选择IE6+,*:IE7及以下浏览器 \0IE8+和opera15以下...原创 2020-01-03 16:06:34 · 121 阅读 · 0 评论 -
(九)前端基础之表单
一,表单form1 表单:将内容提交给服务器(最常见的例子就是百度搜索框)action:指向服务器地址,如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个Name属性提交后的网址.../taeget.html?username=你输入的内容,用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器格式:属性名=属性值&属性名=属性值。。。。。...原创 2020-01-03 13:10:30 · 119 阅读 · 0 评论 -
(八)前端基础之表格
一,table以前表格更多的情况是用来网页布局,但这种方式被CSS淘汰,因为table没有语义,不便于搜索引擎检索实现table隔行变色和选中某行变色:注意:这样是无法选中tr 的因为tr不是table的直接子元素,虽然没有写tbody但是浏览器在解析的时候是会自动加上的IE6不支持除a以外的伪类,IE8不支持nth-child()选择器,实现table隔行变色和选中变...原创 2020-01-03 12:28:37 · 134 阅读 · 0 评论 -
(七)前端基础之背景图片,图片超链接存在的问题
一,backgroundbackground-color和background-image可同时设置,背景颜色会作为背景图片的底色,背景图片默认在元素的左上角显示background-position:定位背景图片在元素中的位置,1)top ,right,left,bottom ,center。后面有2个参数,如果只写一个则第二参数默认center2)通过xpos,ypos指定水平...原创 2020-01-03 12:08:49 · 869 阅读 · 0 评论 -
(六)前端基础之定位,层级
一,定位定位:将制定元素放到页面任意位置position:static(默认值),没有定位, 1)元素出现在正常文档流中(忽略top,left,right,bottom,z-index声明) 2)当position非static时可以通过top ,left,right,bottom 四个属性来设置元素的偏移量, :relative(相对定位),...原创 2020-01-03 11:42:48 · 516 阅读 · 0 评论 -
(四)前端基础之CSS层叠样式表
一.CSS简介CSS层叠样式表,内联样式:只对当前的元素中的内容起作用,不方便使用,属于结构与表现的耦合,不方便后期的维护内部样式:只能在当前页面中使用,可以使页面和表现分离外部样式:通过link标签引入,进一步使表现和结构分离,可以利用浏览器的缓存加快用户访问的速度,提高了用户体验firefox插件:tirt-3d-1.0.1-fx.xpi可以查看网页的3d效果二.块...原创 2020-01-02 21:31:17 · 278 阅读 · 1 评论 -
(三)前端基础之图片,浏览器引擎,meta,内联框架
一.HTML差缺补漏1)h1-h6的重要性依次降低,对于搜索引擎来说,h1的重要性仅次于title,搜索引擎检索完title会立即查看h1中的内容,h1会影响到网页在搜索引擎中的排名,一个页面只能写一个h1标签2)在HTML中字符之间写再多的空格,浏览器也会当成一个空格解析,换行也当成一个空格3)实体:转义字符在浏览器中显示ac, 如<,>特殊字符不能直接使用,特...原创 2020-01-02 20:23:14 · 332 阅读 · 1 评论 -
(二)前端基础之页面乱码问题,实体,meta元信息
1.两个标准W3C万维网联盟(专门为定义网页相关标准而成立的,定义了网页中HTML,CSS,DOM,HTTP,XML等标准)WHATWG网页超文本应用技术工作小组,是一个以推动网络HTML5标准为目的而成立的组织,调试工具fireBug2.HTML超文本标记语言文本:.txt文件超文本:可以显示图片,视频,音频等文件标记:使用标签来标记网页中的内容ASCII编...原创 2020-01-02 19:58:03 · 240 阅读 · 0 评论 -
(一)前端基础之软件架构
1.软件架构总的来说B/S架构开发的成本高(Android,win,IOS等),安全性高;C/S架构开发的成本低,通用性高,维护起来更容易2.软件开发流程产品经理对整个项目进行需求分析(客户是谁,有什么样的需求,网页设计师根据需求设计网页);前端工程师将设计做成静态网页(在数量大时,静态网页是不能使用的);后台工程师将静态网页修改为动态网页(将数据从数据库服务器里面取出来,...原创 2019-11-03 13:12:34 · 716 阅读 · 0 评论