前端三把利器
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
 
大致分类:
块标签 (自己占一行)
内连(行内)标签 (内容有多少就占多少)
 
特殊符号有特殊代码展示
 
标签:
段落:
     <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 (块级变内连)
 
纯内连标签高度宽度不生效
 

cursor:
          pointer
          help
          wait
          crosshair
          move
 
 
边距:
     内边距 margin (本身不增加)
     外边距 padding (本身增加)
 
漂浮:
     float
 
position:
     relative  和absolute配合
     absolute --固定窗口,滚动移动,会寻找父级的absolute
     fixed  --固定 窗口
 
 

一、“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。

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

  1. Python一路走来 DAY15 Javascript

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一 如何编写     ...

  2. Python 一路走来 DOM & Jquery

    DOM           查找:                直接查找                间接查找                —getElementById             ...

  3. Python一路走来 RabbitMQ

    一:介绍:(induction) Rabbitmq 是一个消息中间件.他的思想就是:接收和发送消息.你可以把它想成一个邮政局.当你把你的邮件发送到邮箱的,首先你需要确认的是:邮政员先生能把你的邮件发送 ...

  4. Python一路走来 - python基础 数据类型

    对于Python,一切事物都是对象,对象基于类创建 Python数据类型 python主要的数据类型主要包括以下几种类型: (1) 数字型 (2) 字符串 (3) 列表 (4) 元组 (5) 字典 ( ...

  5. Python 一路走来 Django

    Web 框架 (本质:socket) Python web框架           自己实现socket                - Tornado           基于wsgi       ...

  6. Python一路走来 线程 进程

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #!/usr/bin/env pytho ...

  7. Python一路走来 面向对象1

    面向对象: 类,对象 函数放在类里,叫方法 封装 #如何调用 1. 创建对象, 类名() obj= Foo() 2. 通过对象去执行方法 obj.mail("leon@me.com" ...

  8. Python一路走来 - 模块

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  9. Python一路走来 Python算法

    冒泡排序: 1,2位置左右比较.大的排右边,继续比较2,3 ...... list=[5,7,2,8,12,1] #print(len(list)) for j in range(len(list)) ...

随机推荐

  1. cf509A Maximum in Table

    A. Maximum in Table time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. Android视频录制

    public class MainActivity extends Activity { private MediaRecorder videoRecorder=null; private Butto ...

  3. 第一个ServiceStack程序

    1. https://github.com/ServiceStack/ServiceStack/wiki/Create-your-first-webservice 2. http://tech.pro ...

  4. JDBC编程之事务处理

    JDBC中的事务处理指的是事务的一致性等问题,例如插入一条数据(id,name,password)到表中,另一条数据(address,id)到另一张表中,并且两条数据是相关联的,那么假设第一条数据插入 ...

  5. android 限制adb的访问目录

    最近有个特殊的要求,engneer版本既要可以adb访问,且adb有的目录不能访问 如/data/目录. 用传统的chmod chgrp等无法满足客户需求,只能修改内核文件系统部分. 添加函数,检查路 ...

  6. MySQL 加密/压缩函数

    这些问题可能导致数据值的改变.一般而言,上述问题可能在你使用非二进制串数据类型(如char,varchar,text等数据类型)的情况下发生. AES_ENCRYPT()和AES_DECRYPT() ...

  7. SPOJ 416 - Divisibility by 15(贪心)

    糟烂的代码啊...  这个题目思路很简单——末位只可能为0和5,所有数字的和肯定被3整除 没有0和5的肯定不行 否则,把所有数字求和 如果被3整除,则从大到小输出 如果除3余1,则按以下顺序——删1: ...

  8. HDU4612(Warm up)2013多校2-图的边双连通问题(Tarjan算法+树形DP)

    /** 题目大意: 给你一个无向连通图,问加上一条边后得到的图的最少的割边数; 算法思想: 图的边双连通Tarjan算法+树形DP; 即通过Tarjan算法对边双连通缩图,构成一棵树,然后用树形DP求 ...

  9. REST深入浅出

    不知你是否意识到,围绕着什么才是实现异构的应用到应用通信的“正确”方式,一场争论正进行的如火如荼:虽然当前主流的方式明显地集中在基于SOAP.WSDL和WS-*规范的Web Services领域,但也 ...

  10. vs2013+EF6+Mysql

    1.首先需要在整个项目中添加一个Model类库,在类库中引用EF 我需要在该项目下添加EF的MYSQL对象实体 首先需要引入几个相关引用,我通过NuGet来添加,如下图 接下来我需要通过ADO.NET ...