html+css+javascript基礎

1 Web(萬維網)

web原理：服務器和客戶端（瀏覽器）之間的對話
客戶端：連接到服務器併發送請求（一般指瀏覽器）
服務器：運行着服務器軟件，根據請求提供頁面（就像一個服務員一樣）。永遠在線。
url: Uniform Resourse Locator, 統一資源定位符。也叫URI, Uniform Resourse Identifier, 統一資源標識符。URL一般以www開頭。

完整的URL構成:
      - 通信協議: 如http或者https
      - 資源所在域名：如blankspace.cn
      - 端口號：表示要連接到服務器的哪個端口上
      - 其他定位信息：如請求文件的路徑或者查找信息

舉個栗子：一個完整的url，http://www.blankspace.cn:80/tutorials/d3/ 服務器經過配置，www可以不寫；瀏覽器默認連接到服務器的80端口；協議和域名之間的雙斜槓算是一種失誤； HTTP: Hypertext Transfer Protocol(超文本傳輸協議)；加s代表Secure（安全），Https一般用於傳輸加密信息。上面的url等效爲,http://blankspace.cn/tutorials/d3/

訪問某站點時的過程
1. 打開瀏覽器，在地址欄中輸入URL，例如blankspace.cn/tutorials/d3/。沒有制定通信協議，瀏覽器採用默認的HTTP協議，在URL前方補上http://
2. 瀏覽器嘗試通過互聯網連接到blankspace.cn所在的服務器，連接其80端口
3. 與blankspace.cn關聯的服務器表示同意與瀏覽器的鏈接，並準備接受來自瀏覽器的請求 >4. 瀏覽器請求訪問位於目錄/tutorials/d3/下的頁面
5. 服務器把那個頁面的HTML內容發給瀏覽器
6. 瀏覽器接收到HTML後，根據其中引用的其他文件(包括CSS樣式表和圖片)再次聚合並顯示出完整的頁面。爲此它還要再連接到同一臺服務器，每次請求並取得一個文件
7. 服務器響應，根據請求發回每個文件
8. 網頁文檔傳輸完畢。瀏覽器履行其最費勁的職責——渲染內容。首先通過解析HTML確定文件結構，然後根據CSS選擇符爲匹配的元素應用樣式，最後把圖片插入到頁面中，並執行JavaScript代碼

2 HTML

HTML(Hypertext Markup Language，超文本標記語言), 用來向瀏覽器說明內容的結構。

核心功能：標記內容，爲內容添加語義結構（層次，關係和含義。不需要考慮外觀，這是CSS的工作）。

通過元素添加結構

給內容添加標籤來創建元素的過程。HTML的標籤以<開頭，以>結束。標籤一般成對出現，一個開始標籤和一個結束標籤就在文檔中創建了一個元素。
結束標籤用一個斜槓表示元素的關閉或結束。
有些元素是可以嵌套的，嵌套元素在文檔中會形成層次。元素嵌套時，子元素不能超出父元素之外。
有些標籤永遠不會成對出現，比如指向圖片的img，經常會看到其自閉寫法，即在末尾的>之前加一個斜槓，如<img src="photo.jpg" />。H5之後這種自閉標籤是可選的。

常用元素

HTML中有上百種標籤，經常用的不過幾十種而已。想了解更多，請閱讀Mozilla Developer Network

元素	說明
`<!DOCTYPE html>`	標準的文檔類型說明，必須在文檔的第一行
html	包含文檔中所有的HTML內容
head	包含文檔所有的元數據，比如標題，對外部樣式表，腳本和引用
title	文檔的標題。瀏覽器會把這個元素的內容顯示在窗口標題欄中，並在收藏網頁的時候使用這個標題
body	所有不包含在head中的內容都包含在body中
h1 h2 h3 h4	用於標記不同級別的標題。`h1`表示頂級標題，`h2`表示二級標題，依此類推。
p	段落！
ul ol li	ul用來標記無序列表，帶項目符號的列表；ol用來標記有序列表；ul和ol都帶有li元素，用於標記列表項
em	強調，一般顯示爲斜體
strong	額外強調，一般顯示爲粗體
a	鏈接，一般爲帶下劃線的藍色文本，可以另外設置
span	任意文本，一般包含在p這樣的大容器元素中
div	任意文本快，用於分組相關元素

屬性

可以爲任何HTML元素指定屬性，形式如下(在開始標籤中)： <標籤名屬性="值"></標籤名> 不同的元素有不同的屬性。有些屬性可以指定給任何元素，如class和id。

類和ID

class 和 id是最有用的兩個屬性，通過它們可以找到特定的內容。而且css和JavaScript代碼也依賴它們定位元素。可以給一個元素指定多個類，多各類之間使用空格分隔；也可以給多個元素指定一個類； ID的使用方法類似，但是每個元素只能有一個ID，而且這個ID在整個頁面中只能出現一次。在某個元素比較特殊的情況下，使用ID比較合適。比如想讓一個div像按鈕一樣，或者作爲頁面中的其他內容的容器。提示：類和ID的值都不能以數字開頭，而必須使用字母開頭！

註釋

HTML中的註釋寫法。位於之間的內容都會被瀏覽器忽略

3 DOM

DOM(Document Object Model, 文檔對象模型)指的是HTML標籤的層次結構。每一對HTML標籤（有的時候是一個標籤）都是一個元素。這些元素，我們一般用擬人化的方法來稱呼它們，比如: 父元素，子元素，同胞元素，祖先元素，後代元素。瀏覽器同構解析DOM來操作頁面內容。

4 開發者工具

開發者工具十分強大，不同瀏覽器的開發者工具調出和功能，大同小異。 Chrome調出方法爲按F12。

5 渲染和盒模型

渲染：瀏覽器解析HTML並生成DOM後，對DOM應用視覺規則並將像素繪製到屏幕的過程。瀏覽器把一切都看作盒子(Box). 上圖藍色箭頭指向的就是上面圖片的盒模型。

6 CSS

CSS(Cascading Style Sheets, 層疊樣式表)，控制DOM元素的視覺外觀。 CSS樣式由選擇符和屬性組成，選擇符後面跟着屬性，但被一對花括號所包圍。屬性和值由冒號分隔，每個屬性聲明以分號結尾。例如

body {    backgound-color:white;    color:black;    <屬性>：<值>;}

相同的屬性可以應用多個選擇符，只要用逗號分隔符即可。

選擇符

類型選擇符就是匹配同名的DOM元素的標籤名：

h1 /* 選擇所有一級標題 / p / 選擇所有段落 / strong /匹配所有的strong標籤/ em /匹配所有的em標籤/ div /匹配所有的div標籤*/

後代選擇符後代選擇符匹配包含在(或者”出生於”)另一個元素中的元素。

h1 em /* 選擇包含在h1 標籤中的em 元素/ div p / 選擇包含在 div中的p元素*/

類選擇符類選擇符匹配具有指定類的所有元素。類名之前要加一個英文句點。

.caption /* 選擇帶”caption”類的元素/ .label / 選擇帶“label”類的元素/ .axis / 選擇帶“axis”類的元素 */

有些元素可能屬於多個類，爲此可以將多個類串起來選擇它們。

.bar.highlight .axis.x .axis.y

ID 選擇符 ID 選擇符匹配具有給定ID的一個元素。ID之前要待一個＃號。

#header /選擇所有ID爲header的元素 / #hav /* 選擇ID爲”hav”的元素 */

選擇符也可以通過各種組合來達到選擇特定元素的目的。比如把兩個選擇符串起來，選擇一個更具體的元素。

div.sidebar /* 只選擇帶有”sidebar”類的div，而不選擇帶其他類的div / #button.on / 只選擇on類的，ID爲“button”的元素 */

屬性和值

多個屬性和值累積起來，就會構成特定的樣式：

margin: 10px; padding: 25px; background-color: yellow; color: pink; font-family: Helvetica, Arial, sans-serif;

每個屬性匹配不同的信息。關於顏色格式：

顏色名： orange; green; 十六進制值：#2288aa或者#38a RGB值：rgb(10, 150, 20) 帶透明通道的RGB值：rgba(10, 150, 20, 0.5)

註釋

/*css中的註釋長成這個樣子，和C++的註釋完全一樣。*/

引用樣式

在HTML中嵌入CSS：可以把css代碼放到style元素中。
可以把CSS保存到一個純文本文件中，擴展名爲.css, 比如style.css。讓後在HTML通過頭部的link元素引用外部樣式文件。

<lingk rel="stylesheet" href="style/css">

插入行內樣式：直接將CSS規則插入到HTML元素標籤中，使用style屬性作爲元素指定規則。

<p style ="color:blue; font-size: 48px; font-style:italic;">啦啦啦啦啦</p> 太多的行內樣式會導致HTML代碼混亂。但當想對某個元素應用特殊效果，又不方便將它們寫進更大的樣式表文件時，使用行內樣式是可以接受的。

繼承、層疊和特製度

繼承：css中子元素會擁有父元素的特徵。後定義的規則一般會覆蓋先定義的規則，具體要看特指度（specificity），一般越詳細的選擇符特指度越高，相同特指度的選擇符，後定義的會勝出。總的原則：把通用選擇符放在最前面定義，把更具體的放在後面定義。

7 JavaScript

JavaScript 是動態腳本語言，通過操作DOM動態修改頁面。學習D3就是學習JavaScript。

Console

可以直接通過瀏覽器控制檯來輸入JavaScript代碼。

在開發者工具中。

變量

變量是數據的容器。 JS中使用賦值符號=來對變量賦值，變量可以保存數值，也可以保存布爾型。

var number = 5; var isMiao = true;

其他數據類型

數組：var numbers = [1, 2, 4, 5, 0]; var names= [“LQ”, “YQ”, “MZ”, “WH”, “XB”];
對象: 保存一系列的值。使用花括號來構造對象。在花括號中間是對象的屬性和值，兩者以冒號分隔。

var fruit ={ kind: “apple”; color:”red”; quantity:12; tasty:true;
} 引用對象中的某個值，使用點操作符。後面緊跟屬性名。

對象+數組：[]表示數組，{}表示對象。有多種組合方式。
JSON: JavaScript Object Notation， JavaScript 對象表示法。和對象的唯一區別就是其中的屬性名用雙引號闊上。
GeoJSON：專門用來保存地理數據。所有的GeoJSON都是JSON帝鄉，所有的JSON對象都是JavaScript對象。

數學運算符

加減乘除：+ - * /

比較運算符

等於：==
不等於：！=
小於：<
大於：<
小於等於：<=
大於等於：>= 這些運算符都是將左邊的值和右邊的值進行比較，如果結果爲真，就返回true，否則就返回false。

控制結構

if(條件){//要執行的代碼}：若條件爲true就執行花括號中的代碼
for(初始條件; 條件; 更新){//每次循環要執行的代碼}：初始條件，對條件求值，最後運行更新規則，再重新對條件求值。

函數

在JS中有多種定義函數的方式，這裏介紹一種比較簡單的方式：

var calculateGratuity = function(bill){    return bill*0.l2;}

調用函數calculateGratuity(100);返回12。

註釋

JS支持CSS風格的註釋和//註釋。

引用腳本文件

腳本可以直接放在HTML中，位於一對script標籤之中；

<body>    <script type="text/javascript">        alert("Red, alert!");    </script></body>

或者保存在一個獨立的文件中，以.js作爲擴展名。可以再head標籤中，或者在body結束標籤之前：

<head>    <title>震驚！這個居然也能當標題</title>    <script type="text/javascript" src="hi_script.js"></script></head>

JavaScript的陷阱

動態類型：不需要提前聲明變量的類型，自動判斷其類型。好處是可以隨便改變變量類型，壞處是變量類型混亂。在不確定的時候，使用typeof操作符進行檢查。
變量提升：JavaScript中變量會提升到函數上下文的頂部，就相當於C語言中變量必須要在最前面聲明一樣。這在變量名有衝突的時候可能帶來問題。
函數級作用域：JavaScript中變量只能限制在函數中，即在函數中聲明的變量只能在函數內部訪問。因此想要封裝某個值，就需要把它放進函數裏。
全局命名空間：在全局作用域中輸入的變量，會被添加到window對象下(輸入 window可查看)。當變量比較多，肯能會出現重名衝突。解決辦法：1.只在函數裏聲明變量；2.只聲明一個全局對象，然後將本來作爲全局變量的值都作爲全局對象的屬性。舉例：

var Vis={};//聲明空的全局對象 Vis.gou=”Exciting!!”; Vis.li = “I am not angry.”; Vis.guo = “Too simple!;

這樣”就把變量關進籠子”，不會再污染全局命名空間。

SVG

SVG: Scalable Vector Graphics，可伸縮矢量圖形。舉例：

<svg  width="50px" height = "50px">    <circle cx="25" cy ="25" r ="22" fill="blue" stroke="gray" stroke-width="2"/></svg>

SVG元素

SVG屬於一種文本格式，每個SVG圖形都是使用與HTML類似的標記來定義的。SVG也是一種XML語言，所以那些不包含結束標籤的一定要自閉。在繪圖之前，需要創建SVG元素。至少需要指定，width和height值，默認都是像素爲單位。

簡單的圖形

在SVG中可以繪製多種元素，有矩形，圓形，橢圓，直線，文字和軌跡

他們都遵循同一個座標系統，即屏幕的左上角是座標的原點，水平向右爲x軸正方向，豎直向下爲y軸的正方向。

rect: 繪製矩形。<rect x="0" y="10" width="500" height="30"/>

circle: 繪製圓形

代碼如下：

<!doctype html><!DOCTYPE html><html><head>    <title>SVG Demos</title></head><body>    <svg width="500" height="500">        <circle cx= "250"  cy= "250" r ="50" fill="blue" stroke="gray" stroke-width="5"/>    </svg></body></html>

ellipse: 繪製橢圓，和繪製圓形類似，需要指定兩個軸的長度。半徑用”rx”和”ry”來代替”r”.
line: 繪製直線。<line x1="0" y1="4" x2="500" y2="40" stroke="black"/>,兩點確定一條直線，需要用stroke確定直線的顏色才能看到。
text: 繪製文本。<text x="130" y="30">Take it easy!</text>，x用於指定文本左上角的位置，y用於指定文本的基線，即所有字以之爲對齊標準。
path: 用於繪製比較複雜的圖形。用到了再說。

爲SVG元素添加樣式

SVG默認黑色填充，沒有描邊。常見的屬性爲：

fill：顏色值。與使用CSS一樣，可以使用顏色名，十六進制值，或者RGB，RGBA。
stroke：描邊顏色值。
stroke-width: 描邊的寬度。
opacity：0.0 完全透明到 1.0 完全不透明之間的數值。對於文本，也可以使用如下屬性：
font-family: 字體
font-size: 字體大小

可以使用CSS來爲SVG制定屬性，在選擇符之前增加SVG標記.avg .apple{/**/}

分層和繪製順序

繪製多個SVG，它們會產生重疊，出現越早越先繪製。一般繪製散點圖，會將數軸和標籤凡在最後繪製。

透明度

在元素相互遮擋，但又不能完全遮擋，或者用於強化或者弱化某部分元素，可以使用透明度來調節。

    <svg width="800" height="500">        <circle cx= "150"  cy= "250" r ="100" fill="rgba(0, 0, 255, 1.0)" />        <circle cx= "300"  cy= "250" r ="100" fill="rgba(0, 255, 255, 0.80)" />        <circle cx= "450"  cy= "250" r ="100" fill="rgba(255, 0, 255, 0.50)" />    </svg>

也可以添加opacity屬性，爲stroke添加透明屬性,strocke="rgba(0,0,200, 0.7)"

描邊和每個圓邊緣對齊，一半在內，一半在外。

兼容性

建議使用新的瀏覽器，使用Modernizr可以用來檢查是否支持SVG。