方案策划,做网站优化推广的好处,wordpress英文显示改中文字体,怎么注册微网站吗网页前端编程基础 HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言#xff0c;而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页html
body…网页前端编程基础 HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页html
bodyh1My First Heading/h1pMy first paragraph./p/body
/html典型块级元素与行内元素 块元素(block element)divhx - 标题p - 段落table - 表格ul - 非排序列表内联元素(inline element) *span - 常用内联容器定义文本内区块 a - 锚点i - 斜体img - 图片input - 输入框行内、块状元素区别 (1).块级元素会独占一行其宽度自动填满其父元素宽度行内元素不会独占一行相邻的行内元素会排列在同一行里直到道一行排不下才会换行其宽度随元素的内容而变化 (2). 一般情况下块级元素可以设置 width, height属性行内元素设置width, height无效(注意块级元素即使设置了宽度仍然是独占一行的) (3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。水平方向有效竖直方向无效 行内元素和块状元素的说明 根据CSS规范的规定每一个网页元素都有一个display属性用于确定该元素的类型每一个元素都有默认的display属性值比如div元素它的默认display属性值为“block”成为“块级”元素(block-level)而span元素的默认display属性值为“inline”称为“行内”元素。div这样的块级元素就会自动占据一定矩形空间可以通过设置高度、宽度、内外边距等属性来调整的这个矩形的样子与之相反像“span”“a”这样的行内元素则没有自己的独立空间它是依附于其他块级元素存在的因此对行内元素设置高度、宽度、内外边距等属性都是无效的。 CSS层叠样式表 层叠样式表(英文全称Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用或XML标准通用标记语言的一个子集等文件样式的计算机语言。CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。 # CSS 规则由两个主要的部分构成选择器以及一条或多条声明
h1 {color:red; font-size:14px;} CSS盒子模型 CSS中 Box Model叫盒子模型或框模型Box Model规定了元素框处理元素内容element content、内边距padding、边框border 和 外边距margin 的方式。在HTML文档中每个元素element都有盒子模型所以说在Web世界里特别是页面布局Box Model无处不在。 Javascript JavaScript一种直译式脚本语言是一种动态类型、弱类型的语言。它的解释器被称为JavaScript引擎为浏览器的一部分广泛用于客户端的脚本语言最早是在HTML网页上使用用来给HTML网页增加动态功能。 在1995年时由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作Netscape管理层希望它外观看起来像Java因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 为了取得技术优势微软推出了JScriptCEnvi推出ScriptEase与JavaScript同样可在浏览器上运行。为了统一规格因为JavaScript兼容于ECMA标准因此也称为ECMAScript。 直译语言Interpreted language又称直译式语言是一种编程语言它不需要经过编译器先行编译为机器码之后直接在CPU中执行相反的这种编程语言需要通过直译器在执行期动态直译interpreted JavaScript 数据类型 JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型 实例 var x // x 为 undefined
var x 6; // x 为数字
var x Bill; // x 为字符串 字符串 字符串是存储字符比如 Bill Gates的变量。 字符串可以是引号中的任意文本。您可以使用单引号或双引号 实例 var carnameBill Gates;
var carnameBill Gates; 数字 JavaScript 只有一种数字类型。数字可以带小数点也可以不带 实例 var x134.00; //使用小数点来写
var x234; //不使用小数点来写 布尔 布尔逻辑只能有两个值true 或 false。 var xtrue
var yfalse 数组 下面的代码创建名为 cars 的数组 var carsnew Array();
cars[0]Audi;
cars[1]BMW;
cars [2] Volvo;
或者 (condensed array):
vary carsnew Array(Audi,BMW,Volvo);
或者 (literal array):
实例
var cars[Audi,BMW,Volvo]; 对象 对象由花括号分隔。在括号内部对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔 var person{firstname:Bill, lastname:Gates, id:5566}; 对象属性有两种寻址方式 实例 nameperson.lastname;
nameperson[lastname]; Undefined 和 Null Undefined 这个值表示变量不含有值。 可以通过将变量的值设置为 null 来清空变量。 typeof 可以使用typeof操作符检测变量的数据类型 类型 结果 Undefined undefined
Null object
Boolean boolean
Number number
String string 函数对象 ( [[Call]] 在ECMA-262条款中实现了) function 任何其他对象 object JavaScript中number、string、boolean、null和undefined型数据都是值类型由于值类型数据占据的空间都是固定的所以可以把它们存储在狭窄的内存栈。object、function和array等对象都是引用型数据 创建对象的方式 Object
var p new Object();
p.name jack;
p.age 20;
p.sayName function(){alert(this.name);
} 字面量 var p {name:jack,age:20,sayName:function(){alert(this.name);}}; 工厂模式 function createPerson(name,age){var o new Object();o.name name;o.age age;o.sayName function(){console.log(this.name);}return o;
}var c createPerson(jason,30); 构造函数 function Person(name,age){this.name name;this.age age;this.sayName function(){alert(this.name);}
}var p new Person(jack,20);
alert(p instanceof Person); 构造函数的不同之处 没有显示的创建对象 直接将属性和方法赋给了this对象 没有return语句 构造函数的问题 每个函数都在每个实例上重新创建一遍person1和person2都有一个名为sayName的函数但是两个sayName函数是两个不同的Function实例 原型模式 function Person(){}Person.prototype.name jack;
Person.prototype.age 20;
Person.prototype.sayName function(){alert(this.name);
}var p new Person();
p.sayName(); 理解原型对象prototype 我们创建的每个函数都有一个prototype属性这个属性是一个指针指向一个对象而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
alert(Person.prototype.isPrototypeOf(p));
alert(Object.getPrototypeOf(p) Person.prototype); 如何实现继承 Javascript实现继承主要依靠原型链 原型链 上面的代码中我们没有使用SubType默认提供的原型而是给它换了一个新原型这个新原型就是SuperType的实例。于是新原型不仅具有作为一个SuperType的实例所有拥有的全部属性和方法而且其内部还有一个指针指向了SuperType的原型。 原型链的问题 当原型包含引用类型的属性时这些属性会被所有实例共享 function SuperType(){this.colors [red,green,blue];
}function SubType(){
}
//继承了SuperType
SubType.prototype new SuperType();var instance1 new SubType();
instance1.colors.push(white);
alert(instance1.colors);var instance2 new SubType();
alert(instance2.colors);借用构造函数 在子类型构造函数内部调用父类型构造函数 call函数 语法call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。 说明call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 function SuperType(){this.colors [red,green,blue];
}function SubType(){//继承了SuperTypeSuperType.call(this);
}var instance1 new SubType();
instance1.colors.push(white);alert(instance1.colors);var instance2 new SubType();
alert(instance2.colors); 借用构造函数的问题 方法都在构造函数中定义函数复用是个问题而且在父类原型中定义的函数对于子类也是不可见的。 组合继承 function SuperType(name){this.name name;this.colors [red, green, blue];
}SuperType.prototype.sayName function(){alert(this.name);
}function SubType(name,age){//继承属性SuperType.call(this,name);this.age age;
}//继承函数
SubType.prototype new SuperType();
SubType.prototype.constructor SubType;
SubType.prototype.sayAge function(){alert(this.age);
}var instance1 new SubType(Jack,20);
instance1.colors.push(white);
alert(instance1.colors);
instance1.sayName();
instance1.sayAge();var instance2 new SubType(Rose,22);
alert(instance2.colors); 闭包 变量的作用域 根据作用域划分变量有两种类型全局变量和局部变量。 在函数内部访问全局变量 var n100;
function f1(){alert(n);
}
f1(); // 100函数外部自然无法读取函数内的局部变量
function f1(){var n100;
}
alert(n); // error 如何从外部读取局部变量 出于种种原因我们有时候需要得到函数内的局部变量。但是前面已经说过了正常情况下这是办不到的只有通过变通方法才能实现。 那就是在函数的内部再定义一个函数。 function f1(){var n100;function f2(){alert(n); // 100}
} 在上面的代码中函数f2就被包括在函数f1内部这时f1内部的所有局部变量对f2都是可见的。但是反过来就不行f2内部的局部变量对f1就是不可见的。这就是Javascript语言特有的链式作用域结构chain scope子对象会一级一级地向上寻找所有父对象的变量。所以父对象的所有变量对子对象都是可见的反之则不成立。 既然f2可以读取f1中的局部变量那么只要把f2作为返回值我们不就可以在f1外部读取它的内部变量了吗 function f1(){var n100;function f2(){alert(n);}return f2;
}
var resultf1();
result(); // 100 闭包的概念 上面代码中的f2函数就是闭包。 闭包指有权访问另一个函数作用域中的变量的函数在本质上闭包就是将函数内部和函数外部连接起来的一座桥梁。 闭包的用途 闭包可以用在许多地方。它的最大用处有两个一个是前面提到的可以读取函数内部的变量另一个就是让这些变量的值始终保持在内存中。 function f1(){var n999;nAddfunction(){n1}function f2(){alert(n);}return f2;
}
var resultf1();
result(); // 999
nAdd();
result(); // 1000 DOM编程 DOM就是HTML页面的模型将每个标签都做为一个对象JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象就可以读取文本框中的值、设置文本框中的值。 HTML DOM定义了访问和操作HTML文档的标准方法。他把HTML文档呈现为带有元素、属性和文本的树结构。在层次图中每个对象是它的父对象的属性如Window对象是Document对象的父对象所以在引用Document对象就可以使用Window.Document相当于document是window对象的属性。对于每一个页面浏览器都会自动创建Window对象、Document对象、Location对象、Navigator对象、History对象。 window.onload function(){var child document.createElement(span);child.innerHTML ijason/i;var node document.getElementById(wrapper);node.appendChild(child);
} 转载于:https://www.cnblogs.com/flyhgx/p/6526145.html
