HTML CSS js jQuery

时间 2019-12-01

标签 html css jquery 栏目 HTML 繁體版

原文原文链接

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

HTML

1 盒子模型 margin paddingcss

二、display:none和visibility:hidden区别html

CSS display:none;java

使用该属性后，HTML元素（对象）的宽度、高度等各类属性值都将“丢失”;node

visibility:hidden;程序员

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（彻底透明），而它所占据的空间位置仍然存在，也便是说它仍具备高度、宽度等属性值。编程

三、乱码解决闭包

我只是添加了一行app

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

看文章，其实只要添加函数

<meta charset="utf-8">

四、给网页的标签加上logo

<link rel="shortcut icon" href="/path/to/your/logoico">

先本身画好了logo，大小为16×16像素的图片，而后利用站点http://www.chami.com/html-kit/services/favicon/将你的图片转换成ico格式的，最后在你的文档中增长上面一句话就OK啦！

CSS

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

<div style="clear:both"></div>

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

二、文档流，css中很重要的一个属性

文档流：将窗体自上而下分红一行行, 并在每行中按从左至右的顺序排放元素。

position:absolute;绝对定位,

　　•即彻底脱离文档流, 相对于position属性非static值的最近父级元素进行偏移

position:fixed;固定定位,IE6及如下版本不支持。在 网页中走不掉的广告

　　•即彻底脱离文档流, 相对于视区进行偏移.

position:relative;相对定位,

　　•这个属性值保持对象所在文档流中的位置，相对于元素在文档流中位置进行偏移. 但保留原占位.能够设置top, left, right, bottom定位

position:static; 默认值文档流

三、z-index

程序员让屏幕变成了三维的了

z-index大的在上面，它的值越大，就越靠近浏览者的眼睛

四、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。）

五、将ul变成一行

<head>
    <title>将ul变成一行</title>
    <style type="text/css">
        li{display:inline;padding:0 15px 0 0;}
    </style>
</head>
<body>
    <ul>
        <li>the first line</li>
        <li>the second line</li>
        <li>the third line</li>
        <li>the fourth line</li>
        <li>the fifth line</li>
    </ul>
</body>

这样变成：

前面老是有个小的空隙（如上图的红色方框），根据查询，须要将样式设置为

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

因而样式修改成：

<style type="text/css">
        li{display:inline;padding:0 15px 0 0;}
        ul{padding:0;}
</style>

这样就好了。

六、display的做用

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

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

display:none消失不见

七、position 属性值的含义(来自w3school，这个要记录一下，由于以前搞错，还有float属性)：

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

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

八、一开始没理解好的css属性：display、position、float

js(DOM脚本)

一、方法直接调用为函数，用new调用为对象

二、函数闭包(Closer)

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

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

三、一个节点的结构

<p id="discription" title="a gentle reminder">Don't forget to buy this stuff</p>

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

四、用return false能够阻止js的动做

<a href="http://www.baidu.com" onclick="return false;">百度</a>

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

因此，onclick="showpic(this);return false;" 固然这里的showpic(showwhat)已经在js中被定义，这样就能够执行了showpic的动做，而且不进行其余的动做。

五、事件绑定

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

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

六、为了将“动做”与内容分离

在.js文件中定义事件

object.onclick=function(){.....}

七、在DOM看来，一个文档就是一棵节点树

八、动态建立标记

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

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

九、对象关系

parentNode、nextSibling、previousSibling、childNodes、firstChild、lastChild
十、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。

十一、动画

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

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

1三、函数也是值

因此在js的构造函数中，理解js面向对象编程，对象是一个容器，包括对象的属性和方法。方法也能够理解为一个属性，因此用一个JSON就能够理解一个对象，记得用this。JavaScript语言没有“类”，而改用构造函数（constructor）做为对象的模板。

jQuery

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

<script>
    $(document)     //document是一个DOM对象，这样封装一下就是一个jQuery对象
    $("input")         //括号中间有双引号，中间加一个input，就是全部input标签
    $("input").[0]    //$("input")中的第一个对象，也是一个DOM对象
</script>