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 (塊級變內連)

 

純內連標籤高度寬度不生效

 

cursor:

          pointer

          help

          wait

          crosshair

          move

 

 

邊距：

     內邊距 margin (自己不增長)

     外邊距 padding （自己增長）

 

漂浮：

     float

 

position:

     relative  和absolute配合

     absolute －－固定窗口，滾動移動，會尋找父級的absolute

     fixed  －－固定 窗口

 

 

1、「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 關鍵字，用於指定變量屬於塊級做用域。

2、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

3、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)時，其尋找順序爲根據做用域鏈從內到外的優先級尋找，若是內層沒有就逐步向上找，直到沒找到拋出異常。

4、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函數做用域，因此，執行時會根據已經存在的做用域鏈去尋找。

5、聲明提早

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