概述
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，它是一種制作萬維網頁面標准語言（標記）。相當於定義統一的一套規則，大家都來遵守他，
這樣就可以讓瀏覽器根據標記語言的規則去解釋它。瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！(例：djangomoan模版引擎)
HTML文檔
Doctype
Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔
有和無的區別
-
- BackCompat：標准兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
- CSS1Compat：標准兼容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]）
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁 面，那么，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那么，那么就等同於開啟了標准模式，那么瀏覽器就得老老實實的按照W3C的標准解析渲染頁面，這樣一來， 你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
有，用什么？
Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則。
Meta(metadata information)
提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
- 頁面編碼（告訴瀏覽器是什么編碼）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
- 刷新和跳轉
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
- 關鍵詞
< meta name="keywords" content="華為，中華有為！" >
- 描述
例如：cnblogs
-
- X-UA-Compatible
微軟的IE6是通過XP、Win2003等操作系統發布出來，作為占統治地位的桌面操作系統，也使得IE占據了通知地位，許多的網站開發的時候，就按照IE6的標准去開發，而IE6自身的標准也是微軟公司內部定義的。到了IE7出來的時候，采用了微軟公司內部標准以及部分W3C的標准，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整后，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標准拋棄了，而全面的支持W3C的標准，由於基於對標准徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種兼容性錯誤。
與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標准提供了更加緊密的支持。 因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。 為了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而允許您指定站點所支持的 Internet Explorer 版本。 文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。 如果您的站點在 Internet Explorer 8 中無法正確顯示，則可以更新該站點以支持最新的 Web 標准（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。 通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，可以實現這一點。
當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 指令來確定如何顯示該網頁。 如果該指令丟失或未指定基於標准的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title
網頁頭部信息
Link
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon
< 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 >
常用標簽
標簽之間可以嵌套
標簽存在的意義，css操作，js操作
ps:chrome審查元素的使用
-定位
-查看樣式
get與post區別？
瀏覽器請求服務器，發請求頭與請求體兩部分數據
數據內容存放的地方不一樣，get是存在url中，post是放在請求體中。
標簽一般分為兩種：塊級標簽 和 行內標簽
行內標簽：a、span、select、img、input、label 等
塊級標簽：div、h1、p、br、fielset、ol、ul 等
各種符號：
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p 和 br
p表示段落，默認段落之間是有間隔的！
br 是換行
a標簽
< a href="http://www.autohome.com.cn"> </a>
1、target屬性，_black表示在新的頁面打開
2、錨 href='#某個標簽的ID' 標簽的ID不允許重復
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height: 600px;">第一章的內容</div> <div id="i2" style="height: 600px;">第二章的內容</div> <div id="i3" style="height: 600px;">第三章的內容</div> <div id="i4" style="height: 600px;">第四章的內容</div> </body> </html>
img標簽
默認img標簽，有一個1px的邊框
{
border:0;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <a href="http://www.xiaohuar.com/"> <img src="http://www.xiaohuar.com/d/file/20141116030511162.jpg" title="大美女" style="..." alt="校花"> </a> </div> </body> </html>
input系列標簽和form標簽的數據可以提交給后台
input標簽
input type='text' -name屬性，value=‘魯班’ input type='password' -name屬性，value=‘魯班’ input type="button" value="登錄" 按鈕 input type="submit" value="提交" 提交按鈕，表單 input type='radio' -單選框 value,checked='checked',name屬性（name相同則排斥） input type='checkbox' -復選框 value,checked='checked',name屬性（批量獲取數據） input type='file' -依賴form表單的一個屬性 enctype="multipart/form-data" input type='reset' -重置 <textarea>默認值</textarea> -name屬性 select標簽 -name,內部option value,提交到后台，size,multiple
H 標簽
H1
H2
H3
H4
H5
H6
select 標簽-下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="city" size="2" multiple="multiple"> <option value="1" selected="selected">英雄聯盟</option> <option value="2">王者榮耀</option> </select> <select name="city" size="2" multiple="multiple"> <option value="1" selected="selected">艾歐尼亞</option> <option value="2">忍者炎影</option> </select> </body> </html>
Checkbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <p>興趣愛好：</p> 運動: <input type="checkbox" name="favor" value="1"/> 游戲: <input type="checkbox" name="favor" value="2"/> 音樂: <input type="checkbox" name="favor" value="3"/> 閱讀: <input type="checkbox" name="favor" value="4"/> 旅游: <input type="checkbox" name="favor" value="5"/> <p>技能：</p> 撩妹: <input type="checkbox" name="skill" value="1"/> 編程: <input type="checkbox" name="skill" value="2"/> </div> </body> </html>
redio
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <p>請選擇性別：</p> 男: <input type="radio" name="gender" value="1"/> 女: <input type="radio" name="gender" value="2"/> 未知: <input type="radio" name="gender" checked="checked" value="3"/> </div> </body> </html>
password
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="password" name="pwd"/> </div> </body> </html>
button
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <form action="https://www.sogou.com/web"> <input type="text" name="query"/> <input type="button" value="搜索1"/> <input type="submit" value="搜索"/> </form> </div> </body> </html>
file
提交文件時： enctype='multipart/form-data' method='POST'
textarea
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <!--可以多行輸入--> <textarea name="meno"></textarea> </div> </body> </html>
label
用於點擊文件，使得關聯的標簽獲取光標
姓名： 婚否：ul ol dl
ul
ul.li
ul.li
ul.li
ol
ol.li
ol.li
ol.li
dl
- 陝西省
- 西安
- 延安
- 寶雞
- 山西省
- 太原
- 平遙
-
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--列表--> <div> <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> <ol> <li>adas</li> <li>adas</li> <li>adas</li> </ol> <dl> <dd>hehe</dd> <dd>hehe</dd> <dt>hehe</dt> <dt>hehe</dt> </dl> </div> </body> </html>
- table
-
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <tr> <td>主機名</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>1.1.1.1</td> <td>22</td> <td> <a href="http://www.baidu.com">查看詳細</a> <a href="#">修改</a> </td> </tr> </table> <table border="1"> <thead> <!--colspan列合並--> <tr> <th colspan="2">表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </thead> <tbody> <!--rowspan行合並--> <tr> <td>a</td> <td rowspan="2">a</td> <td>a</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>c</td> <td>c</td> <td>c</td> </tr> </tbody> </table> </body> </html>
-
fieldset
View Code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <fieldset> <legend>登錄</legend> <label for="username">用戶名:</label> <input id="username" type="text" name="user" /> <label for="pwd">密碼:</label> <input id="pwd" type="text" name="password" /> </fieldset> </body> </html>
- form 表單
-
<--form標簽用來向后台提交數據--> <form action='http://www.baidu.com' method='GET'> <input type='text' name='q'/> <input type='text' name='q'/> <input type='submit'/> </form> 進行文件上傳下載時，必須以下面方法初始化form標簽 <form action='http://wwwasdsd'> method='GET' enctype='multi'></form> -
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.sogou.com/web"> <input type="text" name="query"/> <input type="submit" value="搜索"/> </form> </body> </html>
CSS
css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表，用於對頁面進行美化。
存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。
注釋：/* */
語法：style = 'key1:value1;key2:value2;'
- 在標簽中使用 style='xx:xxx;'
- 在頁面中嵌入 < style type="text/css"> </style > 塊
- 引入外部css文件
必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員則必須知道是如何實現的。
標簽選擇器
div{ background-color:red; }
<div > </div>
class選擇器
.bd{ background-color:red; }
<div class='bd'> </div>
id選擇器
#idselect{ background-color:red; }
<div id='idselect' > </div>
關聯選擇器
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
組合選擇器
input,div,p{ background-color:red; }
屬性選擇器
對選擇到的標簽再進行一次篩選
input[type='text']{ width:100px; height:200px; }
PS:
優先級，標簽style優先；其次是越往下優先級越高
background-背景
background-img:url('xx.gif');#默認，div大,圖片重復放 background-repeat: repeat-y;沿y軸方向重復圖片 background-repeat: repeat-x;沿y軸方向重復圖片 background-position-x:設置圖片x軸位置 background-position-y:設置圖片y軸位置 background-position: 10px 10px; 也可以直接使用CSS簡寫方法，直接填值 background: #dddddd url(image/5.png) 10px 10px no-repeat;
background-color
background-image
background-repeat（no-repeat;repeat-x;repeat-y）
background-position
實例獲取小心心：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--圖片將重復堆滿整個div--> <div style="height: 100px;"></div> <div style="background-image: url(1.png);height: 176px;border: 1px solid red;"></div> <!--background-repeat: no-repeat;該屬性使得圖片在div不重復--> <div style="height: 20px;"></div> <div style="background-image: url(1.png);height: 176px;border: 1px solid red;background-repeat: no-repeat;"></div> <!--得到圖標列圖--> <div style="height: 20px;"></div> <div style="background-image: url(1.png);width: 18px;height: 176px;border: 1px solid red;background-repeat: no-repeat;"></div> <!--獲取第一個小圖標--> <div style="height: 20px;"></div> <div style="background-image: url(1.png);width: 18px;height: 20px;border: 1px solid red;background-repeat: no-repeat;"></div> <!--獲取小心心圖標--> <div style="height: 20px;"></div> <div style="background-image: url(1.png);width: 18px;height: 20px;background-position-x:0;background-position-y: -139px ;border: 1px solid red;background-repeat: no-repeat;"></div> </body> </html>
實例獲取-上邊圖中的購物車圖標：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--獲取購物車圖標--> <div style="background-image: url(buy_car.png); height: 39px;width: 44px;margin-left: 5px;padding:0;border: 1px solid #dddddd;"></div> </body> </html>
實例用戶登錄輸入框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 370px; padding-right: 30px;"> <span style="position: absolute;top: 10px;right: 6px;background-image: url(i_name.jpg);height:16px;width:16px;display: inline-block; "></span> </div> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 370px; padding-right: 30px;"> <span style="position: absolute;top: 10px;right: 6px;background-image: url(i_pwd.jpg);height:16px;width:16px;display: inline-block; "></span> </div> </body> </html>
border-邊框
-寬度，樣式，顏色（border:4px dotted red）
-border-left
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 300px;height:100px;border: 2px solid red;"> <div style="width: 96px;height:20px;border: 1px solid royalblue;"></div> </div> </body> </html>
效果：
margin--外邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 300px;height:100px;border: 2px solid red;"> <div style="width: 64px;height:20px;margin:10px;float: left;border: 1px solid royalblue;"></div> <div style="width: 64px;height:20px;margin:10px;float: left;border: 1px solid lawngreen;"></div> <div style="width: 64px;height:20px;margin:30px;float: left;border: 1px solid royalblue;"></div> <div style="clear: both"></div> </div> </body> </html>
效果：
padding--內邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 300px;height:100px;border: 2px solid red;"> <div style="width: 64px;height:20px;padding:10px;float: left;border: 1px solid royalblue;"></div> <div style="width: 64px;height:20px;padding:10px;float: left;border: 1px solid lawngreen;"></div> <div style="width: 64px;height:20px;padding:30px;float: left;border: 1px solid royalblue;"></div> <div style="clear: both"></div> </div> </body> </html>
效果：
float
讓標簽浪起來，塊級標簽浪起來就可以堆疊了。
父級標簽約束不了子集標簽了，這時必須加下面的語句使得父級標簽可以約束子集標簽：
<<div style="clear: both;"></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 20%;background-color: #ff7117;float: left"> 123456789 </div> <div style="width: 80%;background-color: rebeccapurple;float: left"> 987654321 </div> </body> </html>
這是不加約束的code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 300px;border: 1px solid red;"> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <!--<div style="clear: both;"></div>--> </div> </body> </html>
效果：
加上約束，使得父級標簽重新獲得對子標簽的約束力：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 300px;border: 1px solid red;"> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height: 30px;border: 1px solid green;float: left;"></div> <div style="clear: both;"></div> </div> </body> </html>
效果：
display
行內標簽：無法設置高度，寬度，padding margin
塊級標簽：可以設置高度，寬度，padding margin
display:none;---讓標簽消失
display:block;---成為塊級標簽
display:inline-block;---既有塊級標簽的屬性又有行內標簽的屬性。
position
position: a.fiexd => 固定在頁面的某個位置 b.relative + absolute <div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div>
a實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > .pg-header{ background-color: #1817ef; height: 48px; width: 100%; color: #dddddd; /*position的fixed屬性， 固定在頁面的某個位置*/ position: fixed; top: 0; right: 0; left: 0; } .pg-body{ background-color: #dddddd; height: 5000px; margin-top: 50px; } </style> </head> <body> <!--滑動滑輪時頭部一直存在--> <div class="pg-header">頭部</div> <div class="pg-body">中部</div> </body> </html>
b實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*position的relative屬性與absolute屬性的結合使用*/ .pg-md{ position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto; } .black-pg{ position: absolute; width: 50px; height: 50px; background-color: black; } .left-bottom{ left: 0; bottom: 0; } .right-bottom{ right: 0; bottom: 0; } .left-top{ left: 0; top: 0; } </style> </head> <body> <!--在上邊div的左下角放一個黑色的正方形--> <div class="pg-md"> <div class="black-pg left-bottom"></div> </div> <!--在中間div的右下角放一個黑色的正方形--> <div class="pg-md"> <div class="black-pg right-bottom"></div> </div> <!--在下邊div的左上角放一個黑色的正方形--> <div class="pg-md"> <div class="black-pg left-top"></div> </div> </body> </html>
透明度
opcity: 0.5 透明度
z-index:層級順序
z-index:層級順序
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--z-index:的值越大就越靠近外層--> <div style="z-index: 10;position: fixed;top: 50%;left: 50%; margin-left: -250px;margin-top: -200px;background-color: white;height: 400px;width: 500px;"> <input type="text" /> <input type="text" /> <input type="text" /> </div> <div style="z-index: 9;background-color: black;position: fixed;top: 0; left: 0; right: 0; bottom: 0; opacity:0.5; /*opacity:0-1;設置透明度*/ "> </div> <div style="height: 5000px;background-color: chartreuse;">銘記歷史，吾輩當自強！</div> </body> </html>
overflow
overflow:hidden,auto
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--overflow: auto超過所規划的部分就加上滾動條--> <div style="width: 200px;height: 300px;overflow: auto"> <img src="2.jpg"> </div> <!--overflow: hidden超過所規划的部分就隱藏--> <div style="width: 200px;height: 300px;overflow: hidden"> <img src="2.jpg"> </div> </body> </html>
JS
JavaScript
獨立的語言，瀏覽器就是JavaScript的解釋器
JavaScript的存在形式：
-Head中 <script>
//JavaScript代碼
alert(123); </script>
<script type="text/javascript">
//JavaScript代碼
alert(123); </script> 默認值是type="text/javascript，表示里面的是js代碼，可不寫 -文件 <script src='js文件路徑'></script> 一般存在於HTML中，但是為了更好的用戶體驗， js代碼最好放在body標簽內容的
注釋
當行注釋 //
多行注釋 /* */
學習語言先從基本數據類型入手
變量：
JavaScript中變量的聲明是一個非常容易出錯的點，局部變量必須一個 var 開頭，如果未使用var，則默認表示聲明的是全局變量。
Python：
name = 'luban'
JavaScript:
name = 'luban' #全局變量
var name name = 'luban' #局部變量
寫JS代碼：
-html文件中編寫
-臨時寫，在瀏覽器終端
基本數據類型
// null、undefined
null是JavaScript語言的關鍵字，它表示一個特殊值，常用來描述“空值”。
undefined是一個特殊值，表示變量未定義。
數字（Number）
JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。
轉換：
parseInt(..) 將某值轉換成數字，不成功則NaN
parseFloat(..) 將某值轉換成浮點數，不成功則NaN
特殊值：
NaN，非數字。可使用 isNaN(num) 來判斷。
Infinity，無窮大。可使用 isFinite(num) 來判斷
常量
Math.E
常量e，自然對數的底數。
Math.LN10
10的自然對數。
Math.LN2
2的自然對數。
Math.LOG10E
以10為底的e的對數。
Math.LOG2E
以2為底的e的對數。
Math.PI
常量figs/U03C0.gif。
Math.SQRT1_2
2的平方根除以1。
Math.SQRT2
2的平方根。
靜態函數
Math.abs( )
計算絕對值。
Math.acos( )
計算反余弦值。
Math.asin( )
計算反正弦值。
Math.atan( )
計算反正切值。
Math.atan2( )
計算從X軸到一個點的角度。
Math.ceil( )
對一個數上舍入。
Math.cos( )
計算余弦值。
Math.exp( )
計算e的指數。
Math.floor( )
對一個數下舍人。
Math.log( )
計算自然對數。
Math.max( )
返回兩個數中較大的一個。
Math.min( )
返回兩個數中較小的一個。
Math.pow( )
計算xy。
Math.random( )
計算一個隨機數。
Math.round( )
舍入為最接近的整數。
Math.sin( )
計算正弦值。
Math.sqrt( )
計算平方根。
Math.tan( )
計算正切值。
Math
字符串（String）
字符串是由字符組成的數組，但在JavaScript中字符串是不可變的：可以訪問字符串任意位置的文本，但是JavaScript並未提供修改已知字符串內容的方法。
常見功能：
obj.length 長度
obj.trim() 移除空白
obj.trimLeft() obj.trimRight()
obj.charAt(n) 返回字符串中的第n個字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根據索引獲取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大寫
obj.toUpperCase() 小寫
obj.split(delimiter, limit) 分割
obj.search(regexp) 從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp) 全局搜索，如果正則中有g表示找到全部，否則只找到第一個。
obj.replace(regexp, replacement) 替換，正則中有g則替換所有，否則只替換第一個匹配項，
$數字：匹配的第n個組內容；
$&：當前匹配的內容；
$`：位於匹配子串左側的文本；
$'：位於匹配子串右側的文本
$$：直接量$符號
布爾類型（Boolean）
布爾類型僅包含真假，與Python不同的是其首字母小寫。
== 比較值相等
!= 不等於
=== 比較值和類型相等
!=== 不等於
|| 或
&& 且
數組
JavaScript中的數組類似於Python中的列表
常見功能：
obj.length 數組的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部獲取一個元素
obj.unshift(ele) 頭部插入元素
obj.shift() 頭部移除元素
obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數組的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替換元素
obj.splice(n,1) 指定位置刪除元素
obj.slice( ) 切片
obj.reverse( ) 反轉
obj.join(sep) 將數組元素連接起來以構建一個字符串
obj.concat(val,..) 連接數組
obj.sort( ) 對數組元素進行排序