博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML CSS js jQuery
阅读量:5017 次
发布时间:2019-06-12

本文共 4111 字,大约阅读时间需要 13 分钟。

html负责内容,css负责提供关于表示的信息,js负责关于"行为"的信息.(结构层→表示层→行为层)

HTML

1 盒子模型 margin padding

 

2、display:none和visibility:hidden区别

CSS display:none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

 

3、

我只是添加了一行

看文章,其实只要添加

  

4、

先自己画好了logo,大小为16×16像素的图片,然后利用站点将你的图片转换成ico格式的,最后在你的文档中增加上面一句话就OK啦!

 

 

 

 

CSS

1、 在进行float设置之后会影响后面的div或者其他标签的float属性,这时的解决方法是在后面加一个div

这行代码纯粹是为了消除float属性

 

2、文档流,css中很重要的一个属性

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
position:absolute;绝对定位,
  •即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
position:fixed;固定定位,IE6及以下版本不支持。在
网页中走不掉的广告
  •即完全脱离文档流, 相对于视区进行偏移.
position:relative;相对定位,
  •这个属性值保持对象所在文档流中的位置,相对于元素在文档流中位置进行偏移. 但保留原占位.可以设置top, left, right, bottom定位
position:static; 默认值  文档流
 
3、z-index
程序员让屏幕变成了三维的了
z-index大的在上面,它的值越大,就越靠近浏览者的眼睛
 

4、margin标记可以带一个、二个、三个、四个参数,各有不同的含义

margin: 20px;(上、下、左、右各20px。)
margin: 20px 40px;(上、下20px;左、右40px。)
margin: 20px 40px 60px;(上20px;左、右40px;下60px。)

margin: 20px 40px 60px 80px;(上20px;右40px;下60px;左80px。)

 

5、将ul变成一行

    将ul变成一行        
  • the first line
  • the second line
  • the third line
  • the fourth line
  • the fifth line

 这样变成:

前面总是有个小的空隙(如上图的红色方框),根据查询,需要将样式设置为

ul,li {margin:0;padding:0;}

 于是样式修改为:

 这样就行了。

 

6、display的作用

纵向排列的元素,display:inline之后就在一行了

横向排列的元素,display:block之后每一个元素就是一行了

display:none消失不见

 

7、position 属性值的含义(来自w3school,这个要记录一下,因为之前搞错,还有float属性):

static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块(
容器)定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块(
容器是视窗本身。

static、relative是在文档流中的,absolute、fixed是脱离文档流的。

 

8、一开始没理解好的css属性:display、position、float

 

js(DOM脚本)

1、方法直接调用为函数,用new调用为对象

2、

简单理解:闭包就是能够读取其他函数内部变量的函数。  闭包有两个很重要的作用:一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

NOTE:理解了函数也是值。所以返回的是一个函数以及他的上下文,其实就是返回了一堆数值。这堆数值就是闭包

3、一个节点的结构

Don't forget to buy this stuff

 

DOM节点包含着其他类型的节点,这里就列举了其中的三种:元素节点、文本节点、文本节点。要注意的是,包含在<p>元素里的文本是另一种节点,他是<p>元素的第一个子节点。所以用alert(discription.nodeValue)返回的是null值,alert(discription.childNodes[0].nodeValue);或者alert(discription.firstChild.nodeValue);是可以正常显示文本节点中的内容的。

4、用return false可以阻止js的动作

 这样按下“百度”,是不会跳转到http://www.baidu.com,因为有了return false;

所以,οnclick="showpic(this);return false;"  当然这里的showpic(showwhat)已经在js中被定义,这样就可以执行了showpic的动作,并且不进行其他的动作。

5、事件绑定

要注意一点在进行事件绑定的时候不能写上参数上的括号,那样是接受函数的返回值,而不是进行事件绑定。

//定义了一个函数function firstFunction(a,b){....}//定义第二个函数function secondFunction(c,d){....}//将函数绑定在window.onload事件上window.οnlοad=firstFunction;//下面这样写是不正确的window.οnlοad=firstFunction();//要是绑定了两个函数可以这样写window.οnlοad=function(){    firstFunction();    secondFunction();}//这样写是错误的window.οnlοad=firstFunction;window.οnlοad=secondFunction;     //这样只是将secondFunction绑定在了window.onload上

 6、为了将“动作”与内容分离

在.js文件中定义事件

object.οnclick=function(){.....}

7、在DOM看来,一个文档就是一棵节点树

8、动态创建标记

传统的方法有:document.write()、innerHTML

DOM方法:先创建元素或者文本节点(createElement方法、createTextNode方法),再将他们加载到文档中(appendChild方法、insertBefore方法)。所以总结DOM方法动态创建就是:创建元素节点用createElement、创建属性节点用object.setAttribute("","")、创建文本节点用createTextNode方法

9、对象关系

parentNode、nextSibling、previousSibling、childNodes、firstChild、lastChild

10、html标签的style属性以及用js设置样式

typeof element.style得到的结果不是一个string,而是object。可以用element.style.color获取对象的color属性。

注意:style="font-family:.."  获取font-family不能用element.type.font-family这样会吧-解析成减号,应写成element.type.fontFamily。

这样在js中设置样式的格式就清晰了。比如:element.style.color="red";

另一种思路:改变className属性。不通过js改变样式,样式还是由css写,但是可以通过js改变元素的className,或者增加他的class。

11、动画

动画就是随着时间改变样式的例子。

12、为了使browser不会变得很复杂,js是一个单线程模型。为了解决"等待中的任务占用线程后面的任务不能及时进行"的困境,js利用了Event Loop

13、函数也是值

所以在js的构造函数中,理解js面向对象编程,对象是一个容器,包括对象的属性方法方法也可以理解为一个属性,所以用一个JSON就可以理解一个对象,记得用this。JavaScript语言没有“类”,而改用构造函数(constructor)作为对象的模板

 

jQuery

1、jQuery很重要的一个概念就是jQuery的对象,又称包装集。可以理解为一个DOM对象集合。所以,一个jQuery对象可以用“加一个中括号,并填入相应的下标”,将一个jQuery对象转化为一个DOM对象。而一个DOM对象则直接将其放在$()中就可以成为一个jQuery对象。$("")中放一个css的选择器也是jQuery对象。

  

转载于:https://www.cnblogs.com/chenbuer/p/4225338.html

你可能感兴趣的文章
Mac必备软件推荐
查看>>
Android Gson深入分析
查看>>
display:flow-root
查看>>
判读字符串是否为空的全局宏-分享
查看>>
22-reverseString-Leetcode
查看>>
Centos 开机自动联网
查看>>
cocos2dx使用lua和protobuf
查看>>
HDOJ 5630 Rikka with Chess
查看>>
netcore2.1 在后台运行一个任务
查看>>
DOCKER 从入门到放弃(五)
查看>>
Python 多线程学习
查看>>
获取NVIDIA显卡的温度
查看>>
Dijkstra算法
查看>>
Deep Learning 9: Performance
查看>>
面试题61 把二叉树打印成多行
查看>>
树-线索二叉树
查看>>
JAVA遇见HTML——Servlet篇:Servlet基础
查看>>
第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除...
查看>>
Java单例模式
查看>>
重温WCF之消息契约(MessageContract)(六)
查看>>