Python 一路走来 HTML CSS Javascript

前端三把利器

HTML

-标签 (成对写不容易忘记闭合)

自闭和标签

标签里写个 xx=xx, 表示标签的属性

<!— —> 注释

Head:

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1. 页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

2刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

3关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

4描述

例如：cnblogs

5 X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Title

网页头部信息

Link

css

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon (title框里)

< link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>

Script

引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

写js代码

< script type="text/javascript" > ... </script >

HTML

常用标签

h,p,br: id

a: id href target

div:id

大致分类：

块标签（自己占一行）

内连（行内）标签（内容有多少就占多少）

特殊符号有特殊代码展示

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

标签：

段落：

<p></p>

换行:

<br />

属性：

<a href=“http://www.sohu.com"></a>

<a hred=“http://www/sohu.com” target=“_blank”>跳转2</a>

a锚

(寻找页面中id=i1的标签，将其标签放置在页面顶部，id不允许重复)

标题:

….

<hr /> 生成横线

标签可以嵌套

<input />系列标签:

text

password

radio

checkbox

file

button 按钮

submit 提交当前表单 value：显示的字

reset 重置表单

-option 提交时候也用value,可以节省

-optgroup

<textarea> -多行文本

<form> action=“url” 要提交的内容放置在form标签中上传文件注意加上：enctype=“multipart/form/data"

name相当于提交 key:value, name是key，输入是value

提交checkbox,radio 等选择时要写 value, 默认会出现不可预知的错误

<label for=“”> 关联光标 id

ul<li>,ol<li>,dl<dt><dd>

Table:

colspan 合并单元

rowspan 合并单元

</tr>
</thead>
<tbody>

</tr>

</tbody>

fieldset

iframe

CSS

存在形式:

优先级:

标签属性 >html头部(<style>)>单独文件.css (link引用)

选择器

标签选择器

div选择器

id选择器

class选择器

层级选择器

组合选择器

样式

</style>

边框

border(-top/left/right bottom) px solid/dotted/ color

展示 display

display:none （隐藏标签）

display:block （内连变块级）

display:inline (块级变内连)

纯内连标签高度宽度不生效

cursor:

pointer

help

wait

crosshair

move

边距：

内边距 margin (本身不增加)

外边距 padding （本身增加）

漂浮：

float

position:

relative 和absolute配合

absolute －－固定窗口，滚动移动，会寻找父级的absolute

fixed －－固定窗口

一、“JavaScript中无块级作用域”

在Java或C#中存在块级作用域，即：大括号也是一个作用域。

 Java

C#

在JavaScript语言中无块级作用域

function Main(){

if(1==1){

var name = 'seven';

}

console.log(name);

}

// 输出： seven

补充：标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字，用于指定变量属于块级作用域。

二、JavaScript采用函数作用域

在JavaScript中每个函数作为一个作用域，在外部无法访问内部作用域中的变量。

function Main(){

var innerValue = 'seven';

}

Main();

console.log(innerValue);

// 报错：Uncaught ReferenceError: innerValue is not defined

三、JavaScript的作用域链

由于JavaScript中的每个函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。

xo = 'alex';

function Func(){

var xo = "seven";

function inner(){

var xo = 'alvin';

console.log(xo);

}

inner();

}

Func();

如上述代码则出现三个作用域组成的作用域链，如果出现作用域链后，那么寻找变量时候就会出现顺序，对于上述实例：

当执行console.log(xo)时，其寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常。

四、JavaScript的作用域链执行前已创建

JavaScript的作用域在被执行之前已经创建，日后再去执行时只需要按照作用域链去寻找即可。

示例一：

xo = 'alex';

function Func(){

var xo = "seven";

function inner(){

console.log(xo);

}

return inner;

}

var ret = Func();

ret();

// 输出结果： seven

上述代码，在函数被调用之前作用域链已经存在：

全局作用域 -> Func函数作用域 -> inner函数作用域

当执行【ret();】时，由于其代指的是inner函数，此函数的作用域链在执行之前已经被定义为：全局作用域 -> Func函数作用域 -> inner函数作用域，所以，在执行【ret();】时，会根据已经存在的作用域链去寻找变量。

示例二：

xo = 'alex';

function Func(){

var xo = "eirc";

function inner(){

console.log(xo);

}

xo = 'seven';

return inner;

}

var ret = Func();

ret();

// 输出结果： seven

上述代码和示例一的目的相同，也是强调在函数被调用之前作用域链已经存在：

全局作用域 -> Func函数作用域 -> inner函数作用域

不同的时，在执行【var ret = Func();】时，Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”，所以之后再执行【ret();】时，就只能找到“seven”。

示例三：

xo = 'alex';<br>

function Bar(){

console.log(xo);

}

function Func(){

var xo = "seven";

return Bar;

}

var ret = Func();

ret();

// 输出结果： alex

上述代码，在函数被执行之前已经创建了两条作用域链：

全局作用域 -> Bar函数作用域
全局作用域 -> Func函数作用域

当执行【ret();】时，ret代指的Bar函数，而Bar函数的作用域链已经存在：全局作用域 -> Bar函数作用域，所以，执行时会根据已经存在的作用域链去寻找。

五、声明提前

在JavaScript中如果不创建变量，直接去使用，则报错：

1 2	`console.log(xxoo);` `// 报错：Uncaught ReferenceError: xxoo is not defined`

JavaScript中如果创建值而不赋值，则该值为 undefined，如：

var xxoo;

console.log(xxoo);

// 输出：undefined

在函数内如果这么写：

function Foo(){

console.log(xo);

var xo = 'seven';

}

Foo();

// 输出：undefined

上述代码，不报错而是输出 undefined，其原因是：JavaScript的函数在被执行之前，会将其中的变量全部声明，而不赋值。所以，相当于上述实例中，函数在“预编译”时，已经执行了var xo；所以上述代码中输出的是undefined。