web基础篇_笔记

SEO优化之HTML代码优化最重要的5个标签

1.Title 标签,Title 标签能够告诉用户和搜索引擎网页页面的主题思想是什么，一直是搜索引擎的抓取重点,3-6个词。

2.Meta Description标签,对Title标签优化之后，接下来就是对Meta Description标签的优化。Meta Description标签可以说是对Title标签的进一步解释.

3.Heading标签,合理使用H1、H2、H3等不同级别的标签能够使得页面结构更加清晰，有利于搜索引擎的抓取。

4.Strong和B标签,strong标签搜索引擎会抓取,b标签只是单纯的样式.

5.ALT标签,ALT标签是对图片的描述.

js引入时机

1.javascript代码最好不要放在head里面，因为浏览器加载js代码需要时间，这段时间浏览器会显示空白，影响用户体验！

解决方案一：推荐放在</body>里面，即footer的文件里面，这要会加快页面打开速度。

解决方案二：

    <script type="text/javascript" defer="defer" src="phpddt.js"></script>

   defer属性的效果与方案一一样，但是不是所有浏览器都支持defer属性，只有IE和FF支持defer属性，这两种浏览器用户很多！

2.js文件引入方式：最好从外部引入，这样会使代码有很好的维护性，并且浏览器加载过一次js文件后，存在缓存，此后访问速度

css选择器

CSS的选择器其实大类的话可以分为三类，即id选择器、class选择器、标签选择器。
用法如下：
    #id名 { 属性名:属性值; }
    .class名 { 属性名:属性值; }
    标签名 { 属性名:属性值; }
其中，他们之间又可以以不同的方式进行组合，如下：
    后代选择器: 父代名 后代名 { 属性名:属性值; }
    子代选择器: 父代名>子代名 { 属性名:属性值; }
    群组选择器: #name1, .name2, #name div { 属性名:属性值; }
    伪类选择器: name:伪类
    通用(通配符)选择器: * { 属性名: 属性值; }……

javascript同步异步的使用场合

ajax 的含义就是异步javacript 和xml
ajax的调用方式有两种 同步 和异步
大部分的互联网应用都是采用异步调用的方式，因为，在客户端调用的同时用户可以做其他操作。
异步调用是页面不停的发送请求，监听状态，这个过程中某些请求有可能发送不成功。
同步调用：页面进行同步调用时，客户端用户不能进行其他操作。页面发送一次请求并且等待返回。 某些特殊的场合会用到同步调用，例如关闭浏览器的时候。

                                                                                   js 中复用代码

说道代码复用，一般都会涉及到对象继承。在js中有许多可以选择的继承方法。这些方法对于学习和理解多种不同的模式有很大的好处，因为它们有助于提供对语言的掌握程度。

但是在开发的过程中，并不是所有的代码复用都会使用到继承。其中一部原因在于，事实上使用的js库可能以这样的或那样的方式解决了该问题。而另一方面的原因就在于很少需要在js中建立长而且复杂的继承链。在静态强类型语言中，继承可以能是唯一复用代码的方法。在js中，经常有更加简洁而且优美的方法。包括：借用方法、绑定、复制属性以及从多个对象中混入属性等许多方法。

       混入是针对通过属性复制实现继承的思想做进一步的扩展，mix-in模式并不是复制一个完整的对象，而是从多个对象中复制出任意的成员并将这些成员组合成新的对象。

function mix() {    var arg, prop, child = {};    for (arg = 0; arg < arguments.length; arg += 1) {        for (prop in arguments[arg]) {            if (arguments[arg].hasOwnProperty(prop)) {                child[prop] = arguemnts[arg][prop];            }        }    }    return child;}

      有的时候，我们只需要对象中的一两个方法，但是又不想和对象形成父-子继承关系。只是想是用所需要的方法，而不希望继承所有那些永远用不到的属性和方法。在这种情况下，可以通过使用借用方法模式来实现。

而这个方法是受益于call()和apply()的。js中函数也是对象，并且它们自身也存在一些属性和方法，比如call和apply()。

使用call()和apply()分别借用方法：

// callnotmyobj.doStuff.call(myobj, param1, p2, p3);// applynotmyobj.doStuff.apply(myobj, [param1, p2, p3]);

在知道notmyobj对象上有doStuff方法的情况下，又想不继承notmyobj来使用doStuff方法。这个使用call()和apply()就派上用场了。

还有一个场景是经常使用到借用方法的。那就是借用数组方法。因为数据具有许多很强大的方法，而且有时候需要操作arguments的时候会用上。但是arguments是一个伪数组，不具有原生数组强大的方法。这个使用借用方法就派上用场了：

function f() {    var args = [].slice.call(arguemnts, 1, 3);    return args;}

借用和绑定

考虑到借用方法不是通过调用call和apply()就是通过简单的复制，在借用方法的内部，this所指向的对象是基于调用表达式而确定的，但是有的时候“锁定”this的值，或者将其绑定到特定的对象并且预先确定该对象。

举一栗子：

var one = {    name: 'object',    say: function (greet) {        return greet + ", " + this.name;    }};// 测试one.say('hi'); // hi, object

接着另一对象two中没有say()方法，借用one的say()方法：

var two = {    name: 'another object'}// 测试one.say.call(two, 'hi'); // hi, another object

在上面的例子中，借用的say()方法的this是指向two的。但是在什么样的场景中，应该将函数指针赋值给一个全局变量，或者将该函数做为回调函数来传递？在客户端编程中有许多事件和回调，因此确实发生了许多这样混淆的事件。

举一个栗子：

// 给变量赋值// this 将指向全局变量var say = one.say;say('hello') // hello, undefined// 作为回调传递var yetanother = {    name: 'yet another object',    method: function (callback) {        return callback('hola');    }};// 测试yetanother.method(one.say) // holla, undefined

在上面的两种情况下，say()方法的this值都是指向全局对象。而且整个代码都无法按照预期来运行。为了修复（绑定）对象与方法之间的关系。可以使用一个简单的函数来实现：

function bind(o, m) {    return function () {        return m.apply(o, [].slice.call(arguments))    }

上面的bind()方法接受两个参数。一个是对象o，另一个是方法m，并将两者绑定起来。然后返回一个函数。

使用bind()来解决问题：

var twosay = bind(two, one.say);twosay('yo'); // yo another object

奢侈的拥有绑定所需要辅助的代价就是额外的闭包的开销。

                                                                 jquery学习

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){--- jQuery functions go here ----});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery 选择器

Query 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

更多的选择器实例

语法描述$(this)当前 HTML 元素$("p")所有 <p> 元素$("p.intro")所有 class="intro" 的 <p> 元素$(".intro")所有 class="intro" 的元素$("#intro")id="intro" 的元素$("ul li:first")每个 <ul> 的第一个 <li> 元素$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数绑定函数至$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function)触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件