Python 一路走来 HTML CSS Javascript

前端三把利器

HTML

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

自闭和标签

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

<!— —> 注释

Head:

Meta(metadata information)

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

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

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

<meta 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锚

<a href=“#i1”></a>

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

标题:

H1

H2

….

H6

<hr /> 生成横线

标签可以嵌套

<input />系列标签:

text

password

radio

checkbox

file

button 按钮

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

reset          重置表单

<select>

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

-optgroup

<textarea> -多行文本

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

<form action="https://www.sogou.com/web" method="get">

<input type="text" name="query" />

<input type="submit" value="提交"/>

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

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

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

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

Table:

colspan 合并单元

rowspan 合并单元

<table border="1">
    <thead>
        <tr>
            <th>第一列</th>
            <td>第二列</td>

</tr>
    </thead>
    <tbody>

<tr>
            <td>第一列</td>

<td>第二列</td>

</tr>

</tbody>

<table/>

fieldset

iframe

CSS

存在形式:

优先级:

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

选择器

标签选择器

div选择器

id选择器

 class选择器

层级选择器

     组合选择器

样式

<style>
    .c1{
        color: red;
        background-color: aqua;
        font-size:32px;
        height: 150px;
        width: 500px;
    }
    .img{
        background-image: url("4.gif");
        height:150px;
        width:500px;
        /*图片的凿洞才能看见*/
        background-repeat: no-repeat;
        background-position: 84px -58px;
    }

</style>

边框

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

展示 display

display:none  （隐藏标签）

display:block （内连变块级）

display:inline (块级变内连)

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

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

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

 Java

 C#

在JavaScript语言中无块级作用域


1

2

3

4

5

6

7

function Main(){

    if(1==1){

        var name = ‘seven‘;

    }

    console.log(name);

}

// 输出： seven

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

二、JavaScript采用函数作用域

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


1

2

3

4

5

6

7

8

9

function Main(){

    var innerValue = ‘seven‘;

}

Main();

console.log(innerValue);

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

三、JavaScript的作用域链

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


1

2

3

4

5

6

7

8

9

10

11

xo = ‘alex‘;

 

function Func(){

    var xo = "seven";

    function inner(){

        var xo = ‘alvin‘;

        console.log(xo);

    }

    inner();

}

Func();

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

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

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

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

示例一：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

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();】时，会根据已经存在的作用域链去寻找变量。

示例二：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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”。

示例三：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

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，如：


1

2

3

var xxoo;

console.log(xxoo);

// 输出：undefined

在函数内如果这么写：


1

2

3

4

5

6

7

function Foo(){

    console.log(xo);

    var xo = ‘seven‘;

}

Foo();

// 输出：undefined

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

时间： 2024-10-10 07:22:06

Python 一路走来 HTML CSS Javascript的相关文章

Python一路走来 RabbitMQ

一:介绍:(induction) Rabbitmq 是一个消息中间件.他的思想就是:接收和发送消息.你可以把它想成一个邮政局.当你把你的邮件发送到邮箱的,首先你需要确认的是:邮政员先生能把你的邮件发送给你想发送的地方.在这个比喻中,rabbitmq就是一个邮箱.一个邮政局.一个邮递员. 在这里rabbitmq和传统邮政局的区别:rabbitmq不处理信纸.取而代之的是:接收.储存.发送二进制数的消息. rabbitmq和消息用如下专业术语: 生产者意思发送.A程序发送消息被称为:producer

Python 一路走来 DOM &amp; Jquery

DOM 查找: 直接查找 间接查找 —getElementById —getElementsByTag 绑定事件 jQuery 模块, 封装Dom和javascript 1.12..—>兼容IE 2.x —>IE9以上 查找: 选择器 #id 标签 类 组合 层级 属性(important) 筛选器 操作: css 属性 文本操作 事件: -优化 扩展: $.login Form表单验证 Ajax:

Python一路走来 - python基础 数据类型(一)

对于Python,一切事物都是对象,对象基于类创建 入门知识拾遗 一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. 1 2 3 if 1==1:     name = 'wupeiqi' print  name 下面的结论对吗? 外层变量,可以被内层变量使用 内层变量,无法被外层变量使用 二.三元运算 1 result = 值1 if 条件 else 值2 如果条件为真:result = 值1如果条件为假:result = 值2 三.进制 二进制,01 八进

Python一路走来 线程 进程

Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #!/usr/bin/env python # -*- coding:utf-8 -*- import threading import time   def show(arg):     time.sleep(1)     print 'thread'+str(arg)   for i in range(10):     t = thr

Python一路走来 Python算法

冒泡排序: 1,2位置左右比较.大的排右边,继续比较2,3 ...... 选择排序: 拿索引比较,最大的放在右边 插入排序: 永远维护着一个有序的列表

web前端开发自学路线是怎样的？html+css+JavaScript的学习方法？

不废话,直接干货 学习前端的几个个阶段: 一阶段:html标签.html5新增标签.css样式.css3样式.媒体查询等 二阶段:JavaScript.jQuery.ajax.面向对象.http传输协议等 三阶段:canvas.js高级应用.JS-SDK.H5新增技术 四阶段:node.js.vue.js 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代

html css javascript 加载的顺序

html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入.所以我们一定要重视. 一.总体原则 加载的总体原则是顺序加载,即从页面的head到body结束顺序加载.浏览器发送请求,服务器返回了这整个页面的代码.所以,下一步是对这个页面代码进行渲染. 二.加载顺序 如果结构是这样写的: 首先会加载link里面的css文件.但是在这里要记住,css文件和imag

网页性能之HTML,CSS,JavaScript

转载自AlloyTeam:http://www.alloyteam.com/2015/05/wang-ye-xing-neng-zhi-html-css-javascript/ 前言 html css javascript可以算是前端必须掌握的东西了,但是我们的浏览器是怎样解析这些东西的呢 我们如何处理html css javascript这些东西来让我们的网页更加合理,在我这里做了一些实验,总结起来给大家看看. 最简单的页面 1 2 3 4 5 6 7 8 9 <!DOCTYPE html>

2015互联网校招总结—一路走来 （移动端开发面经，另有面经汇总）

转载请注明出处:http://blog.csdn.net/ns_code/article/details/40408397 写在前面 结束了在百度的实习,是时候写下校招的总结了,再不写估计很多东西都忘了.在开源社区混迹久了,从别人的学习.求职.工作经历中越发感受到很多的正能量, 也本着攒RP的原则,向学弟学妹们,尤其非名校的学弟学妹们传递点正能量,因为博主也是非名校出身,而且在整个求职的过程中能够很明显地感受到名校学生那 种得天独厚的优势,同样的实力,名校学生进入BAT等一线互联网企业确实要容易