国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

1 Web(萬(wàn)維網(wǎng))

• web原理：服務(wù)器和客戶端（瀏覽器）之間的對(duì)話
• 客戶端：連接到服務(wù)器并發(fā)送請(qǐng)求（一般指瀏覽器）
• 服務(wù)器：運(yùn)行著服務(wù)器軟件，根據(jù)請(qǐng)求提供頁(yè)面（就像一個(gè)服務(wù)員一樣）。永遠(yuǎn)在線。
• url: Uniform Resourse Locator, 統(tǒng)一資源定位符。也叫URI, Uniform Resourse Identifier, 統(tǒng)一資源標(biāo)識(shí)符。URL一般以www開(kāi)頭。

完整的URL構(gòu)成:
- 通信協(xié)議: 如http或者h(yuǎn)ttps
- 資源所在域名：如blankspace.cn
- 端口號(hào)：表示要連接到服務(wù)器的哪個(gè)端口上
- 其他定位信息：如請(qǐng)求文件的路徑或者查找信息

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

訪問(wèn)某站點(diǎn)時(shí)的過(guò)程
1. 打開(kāi)瀏覽器，在地址欄中輸入U(xiǎn)RL，例如blankspace.cn/tutorials/d3/。沒(méi)有制定通信協(xié)議，瀏覽器采用默認(rèn)的HTTP協(xié)議，在URL前方補(bǔ)上http://
2. 瀏覽器嘗試通過(guò)互聯(lián)網(wǎng)連接到blankspace.cn所在的服務(wù)器，連接其80端口
3. 與blankspace.cn關(guān)聯(lián)的服務(wù)器表示同意與瀏覽器的鏈接，并準(zhǔn)備接受來(lái)自瀏覽器的請(qǐng)求 >4. 瀏覽器請(qǐng)求訪問(wèn)位于目錄/tutorials/d3/下的頁(yè)面
5. 服務(wù)器把那個(gè)頁(yè)面的HTML內(nèi)容發(fā)給瀏覽器
6. 瀏覽器接收到HTML后，根據(jù)其中引用的其他文件(包括CSS樣式表和圖片)再次聚合并顯示出完整的頁(yè)面。為此它還要再連接到同一臺(tái)服務(wù)器，每次請(qǐng)求并取得一個(gè)文件
7. 服務(wù)器響應(yīng)，根據(jù)請(qǐng)求發(fā)回每個(gè)文件
8. 網(wǎng)頁(yè)文檔傳輸完畢。瀏覽器履行其最費(fèi)勁的職責(zé)——渲染內(nèi)容。首先通過(guò)解析HTML確定文件結(jié)構(gòu)，然后根據(jù)CSS選擇符為匹配的元素應(yīng)用樣式，最后把圖片插入到頁(yè)面中，并執(zhí)行JavaScript代碼

2 HTML

HTML(Hypertext Markup Language，超文本標(biāo)記語(yǔ)言), 用來(lái)向?yàn)g覽器說(shuō)明內(nèi)容的結(jié)構(gòu)。

核心功能：標(biāo)記內(nèi)容，為內(nèi)容添加語(yǔ)義結(jié)構(gòu)（層次，關(guān)系和含義。不需要考慮外觀，這是CSS的工作）。

通過(guò)元素添加結(jié)構(gòu)

• 給內(nèi)容添加標(biāo)簽來(lái)創(chuàng)建元素的過(guò)程。HTML的標(biāo)簽以<開(kāi)頭，以>結(jié)束。標(biāo)簽一般成對(duì)出現(xiàn)，一個(gè)開(kāi)始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽就在文檔中創(chuàng)建了一個(gè)元素。
• 結(jié)束標(biāo)簽用一個(gè)斜杠表示元素的關(guān)閉或結(jié)束。
• 有些元素是可以嵌套的，嵌套元素在文檔中會(huì)形成層次。元素嵌套時(shí)，子元素不能超出父元素之外。
• 有些標(biāo)簽永遠(yuǎn)不會(huì)成對(duì)出現(xiàn)，比如指向圖片的img，經(jīng)常會(huì)看到其自閉寫(xiě)法，即在末尾的>之前加一個(gè)斜杠，如<img src="photo.jpg" />。H5之后這種自閉標(biāo)簽是可選的。

常用元素

HTML中有上百種標(biāo)簽，經(jīng)常用的不過(guò)幾十種而已。想了解更多，請(qǐng)閱讀Mozilla Developer Network

屬性

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

類(lèi)和ID

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

注釋

HTML中的注釋寫(xiě)法<!-- 我是注釋，你有沒(méi)有愛(ài)上我 -->。位于<!--和-->之間的內(nèi)容都會(huì)被瀏覽器忽略

3 DOM

DOM(Document Object Model, 文檔對(duì)象模型)指的是HTML標(biāo)簽的層次結(jié)構(gòu)。每一對(duì)HTML標(biāo)簽（有的時(shí)候是一個(gè)標(biāo)簽）都是一個(gè)元素。這些元素，我們一般用擬人化的方法來(lái)稱呼它們，比如: 父元素，子元素，同胞元素，祖先元素，后代元素。瀏覽器同構(gòu)解析DOM來(lái)操作頁(yè)面內(nèi)容。

4 開(kāi)發(fā)者工具

開(kāi)發(fā)者工具十分強(qiáng)大，不同瀏覽器的開(kāi)發(fā)者工具調(diào)出和功能，大同小異。 Chrome調(diào)出方法為按F12。

5 渲染和盒模型

渲染：瀏覽器解析HTML并生成DOM后，對(duì)DOM應(yīng)用視覺(jué)規(guī)則并將像素繪制到屏幕的過(guò)程。 瀏覽器把一切都看作盒子(Box). 上圖藍(lán)色箭頭指向的就是上面圖片的盒模型。

6 CSS

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

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

相同的屬性可以應(yīng)用多個(gè)選擇符，只要用逗號(hào)分隔符即可。

選擇符

1. 類(lèi)型選擇符 就是匹配同名的DOM元素的標(biāo)簽名：

h1 /* 選擇所有一級(jí)標(biāo)題 / p / 選擇所有段落 / strong /匹配所有的strong標(biāo)簽/ em /匹配所有的em標(biāo)簽/ div /匹配所有的div標(biāo)簽*/

1. 后代選擇符 后代選擇符匹配包含在(或者”出生于”)另一個(gè)元素中的元素。

h1 em /* 選擇包含在h1 標(biāo)簽中的em 元素/ div p / 選擇包含在 div中的p元素*/

1. 類(lèi)選擇符 類(lèi)選擇符匹配具有指定類(lèi)的所有元素。類(lèi)名之前要加一個(gè)英文句點(diǎn)。

.caption /* 選擇帶”caption”類(lèi)的元素/ .label / 選擇帶“l(fā)abel”類(lèi)的元素/ .axis / 選擇帶“axis”類(lèi)的元素 */

有些元素可能屬于多個(gè)類(lèi)，為此可以將多個(gè)類(lèi)串起來(lái)選擇它們。

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

1. ID 選擇符 ID 選擇符匹配具有給定ID的一個(gè)元素。ID之前要待一個(gè)＃號(hào)。

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

選擇符也可以通過(guò)各種組合來(lái)達(dá)到選擇特定元素的目的。比如把兩個(gè)選擇符串起來(lái)，選擇一個(gè)更具體的元素。

div.sidebar /* 只選擇帶有”sidebar”類(lèi)的div，而不選擇帶其他類(lèi)的div / #button.on / 只選擇on類(lèi)的，ID為“button”的元素 */

屬性和值

多個(gè)屬性和值累積起來(lái)，就會(huì)構(gòu)成特定的樣式：

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

每個(gè)屬性匹配不同的信息。 關(guān)于顏色格式：

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

注釋

/*css中的注釋長(zhǎng)成這個(gè)樣子，和C++的注釋完全一樣。*/

引用樣式

• 在HTML中嵌入CSS：可以把css代碼放到style元素中。
• 可以把CSS保存到一個(gè)純文本文件中，擴(kuò)展名為.css, 比如style.css。讓后在HTML通過(guò)頭部的link元素引用外部樣式文件。

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

• 插入行內(nèi)樣式：直接將CSS規(guī)則插入到HTML元素標(biāo)簽中，使用style屬性作為元素指定規(guī)則。

<p style ="color:blue; font-size: 48px; font-style:italic;">啦啦啦啦啦</p> 太多的行內(nèi)樣式會(huì)導(dǎo)致HTML代碼混亂。但當(dāng)想對(duì)某個(gè)元素應(yīng)用特殊效果，又不方便將它們寫(xiě)進(jìn)更大的樣式表文件時(shí)，使用行內(nèi)樣式是可以接受的。

繼承、層疊和特制度

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

7 JavaScript

JavaScript 是動(dòng)態(tài)腳本語(yǔ)言，通過(guò)操作DOM動(dòng)態(tài)修改頁(yè)面。學(xué)習(xí)D3就是學(xué)習(xí)JavaScript。

Console

可以直接通過(guò)瀏覽器控制臺(tái)來(lái)輸入JavaScript代碼。

在開(kāi)發(fā)者工具中。

變量

變量是數(shù)據(jù)的容器。 JS中使用賦值符號(hào)=來(lái)對(duì)變量賦值，變量可以保存數(shù)值，也可以保存布爾型。

var number = 5; var isMiao = true;

其他數(shù)據(jù)類(lèi)型

• 數(shù)組：var numbers = [1, 2, 4, 5, 0]; var names= [“LQ”, “YQ”, “MZ”, “WH”, “XB”];
• 對(duì)象: 保存一系列的值。使用花括號(hào)來(lái)構(gòu)造對(duì)象。在花括號(hào)中間是對(duì)象的屬性和值，兩者以冒號(hào)分隔。

var fruit ={ kind: “apple”; color:”red”; quantity:12; tasty:true;
} 引用對(duì)象中的某個(gè)值，使用點(diǎn)操作符。后面緊跟屬性名。

• 對(duì)象+數(shù)組：[]表示數(shù)組，{}表示對(duì)象。有多種組合方式。
• JSON: JavaScript Object Notation， JavaScript 對(duì)象表示法。和對(duì)象的唯一區(qū)別就是其中的屬性名用雙引號(hào)闊上。
• GeoJSON：專門(mén)用來(lái)保存地理數(shù)據(jù)。所有的GeoJSON都是JSON帝鄉(xiāng)，所有的JSON對(duì)象都是JavaScript對(duì)象。

數(shù)學(xué)運(yùn)算符

• 加減乘除：+ - * /

比較運(yùn)算符

• 等于：==
• 不等于：！=
• 小于：<
• 大于：<
• 小于等于：<=
• 大于等于：>= 這些運(yùn)算符都是將左邊的值和右邊的值進(jìn)行比較，如果結(jié)果為真，就返回true，否則就返回false。

控制結(jié)構(gòu)

• if(條件){//要執(zhí)行的代碼}：若條件為true就執(zhí)行花括號(hào)中的代碼
• for(初始條件; 條件; 更新){//每次循環(huán)要執(zhí)行的代碼}：初始條件，對(duì)條件求值，最后運(yùn)行更新規(guī)則，再重新對(duì)條件求值。

函數(shù)

在JS中有多種定義函數(shù)的方式，這里介紹一種比較簡(jiǎn)單的方式：

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

調(diào)用函數(shù)calculateGratuity(100);返回12。

注釋

JS支持CSS風(fēng)格的注釋和//注釋。

引用腳本文件

腳本可以直接放在HTML中，位于一對(duì)script標(biāo)簽之中；

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

或者保存在一個(gè)獨(dú)立的文件中，以.js作為擴(kuò)展名?？梢栽賖ead標(biāo)簽中，或者在body結(jié)束標(biāo)簽之前：

<head>    <title>震驚！這個(gè)居然也能當(dāng)標(biāo)題</title>    <script type="text/javascript" src="hi_script.js"></script></head>

JavaScript的陷阱

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

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

這樣”就把變量關(guān)進(jìn)籠子”，不會(huì)再污染全局命名空間。

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屬于一種文本格式，每個(gè)SVG圖形都是使用與HTML類(lèi)似的標(biāo)記來(lái)定義的。SVG也是一種XML語(yǔ)言，所以那些不包含結(jié)束標(biāo)簽的一定要自閉。 在繪圖之前，需要?jiǎng)?chuàng)建SVG元素。至少需要指定，width和height值，默認(rèn)都是 像素為單位。

簡(jiǎn)單的圖形

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

他們都遵循同一個(gè)坐標(biāo)系統(tǒng)，即屏幕的左上角是坐標(biāo)的原點(diǎn)，水平向右為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: 繪制橢圓，和繪制圓形類(lèi)似，需要指定兩個(gè)軸的長(zhǎng)度。半徑用”rx”和”ry”來(lái)代替”r”.

• line: 繪制直線。<line x1="0" y1="4" x2="500" y2="40" stroke="black"/>,兩點(diǎn)確定一條直線，需要用stroke確定直線的顏色才能看到。

• text: 繪制文本。<text x="130" y="30">Take it easy!</text>，x用于指定文本左上角的位置，y用于指定文本的基線，即所有字以之為對(duì)齊標(biāo)準(zhǔn)。
  

  

• path: 用于繪制比較復(fù)雜的圖形。用到了再說(shuō)。

為SVG元素添加樣式

SVG默認(rèn)黑色填充，沒(méi)有描邊。 常見(jiàn)的屬性為：

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

可以使用CSS來(lái)為SVG制定屬性，在選擇符之前增加SVG標(biāo)記.avg .apple{/**/}

分層和繪制順序

繪制多個(gè)SVG，它們會(huì)產(chǎn)生重疊，出現(xiàn)越早越先繪制。一般繪制散點(diǎn)圖，會(huì)將數(shù)軸和標(biāo)簽凡在最后繪制。

透明度

在元素相互遮擋，但又不能完全遮擋，或者用于強(qiáng)化或者弱化某部分元素，可以使用透明度來(lái)調(diào)節(jié)。

    <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)"

描邊和每個(gè)圓邊緣對(duì)齊，一半在內(nèi)，一半在外。

兼容性

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