web項目javascript
前端網頁web(人體結構)css
HTML負責前端網頁結構html
Css負責網頁樣式前端
css引入java
內聯樣式引入web
內部樣式後端
外部樣式數組
三種基本引入器瀏覽器
id選擇器安全
類選擇器
標籤選擇器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css標籤樣式</title> 6 <!--內聯樣式引入:使用標籤<style>--> 7 <style type="text/css" rel="stylesheet"> 8 h1{ 9 color:red; 10 font-size:10px; 11 } 12 /*id選擇器*/ 13 #id1{ 14 color:blue; 15 font-size:10px; 16 } 17 /*類選擇器*/ 18 .class{ 19 color:blue; 20 font-size:10px; 21 } 22 23 /*內聯樣式*/ 24 。class1{ 25 26 } 27 28 </style> 29 <!--外部引入 link標籤--> 30 <link href="CSS/CSS1.CSS"> 31 32 </head> 33 <body> 34 <div> 35 36 <h1 h1="h1">心之所向</h1> 37 <!-- p 標籤段落 paragraphs 38 <br>自動換行--> 39 <p id="id1"> 40 道可道,很是道<br> 41 名可名,很是名<br> 42 無名天地之始<br> 43 有名天地之母 故常無慾以觀其妙 44 <!-- 空格,,,大於號>;小於號<;版權©;雙引號" ; 水平線<hr>--> 45 </p> 46 <p class=".class">故常無慾以觀其妙</p> 47 <!--內部樣式的引入style屬性--> 48 <p style="color:aquamarine;font-size: large">段落</p> 49 <div> 50 <a href="http://music.163.com/video?id=92808D4BD1E6C04EB6086055CF360F47&userid=1491164241" target="_blank"> 51 點擊 </a> 52 53 </div> 54 </div> 55 </body> 56 </html>
僞類(鼠標與超連接進行交互時的樣式):
鼠標未點擊超連接 a:link{}
a:link,定義正常連接的樣式;
a:visited,定義已訪問過連接的樣式;
a:hover,定義鼠標懸浮在連接上時的樣式;
a:active,定義鼠標點擊連接時的樣式。
1 a:link { 2 color:#FF0000; 3 text-decoration:underline; 4 } 5 a:visited { 6 color:#00FF00; 7 text-decoration:none; 8 } 9 a:hover { 10 color:#000000; 11 text-decoration:none; 12 } 13 a:active { 14 color:#FFFFFF; 15 text-decoration:none; 16 }
背景樣式
注意點:相對路徑如何找到他
找同級
列表
有序列表<ol>
無序列表<ul>
自定義列表<dl>
1 <div> 2 <!--有序列表--> 3 <ol> 4 <li>道</li> 5 <li>可</li> 6 <li>道</li> 7 <li>道</li> 8 </ol> 9 <!--無序列表--> 10 <ul> 11 <li>道</li> 12 <li>可</li> 13 <li>道</li> 14 <li>道</li> 15 </ul> 16 <!--自定義列表--> 17 <dl> 18 <dt>道</dt> 19 <dd>道</dd> 20 <dd>可</dd> 21 <dd>道</dd> 22 </dl> 23 24 </div>
表格
table tr 行 table rows;td table td
合併行 colspan
列 row
1 <div> 2 <!--表格--> 3 <table border="1"> 4 <tr><td colspan="2">道</td><td>可</td></tr> 5 <tr><td row="2">道</td><td>可</td></tr> 6 <tr><td>道</td><td>可</td></tr> 7 </table> 8 </div>
JS/
基本結構
<!DOCTYPE html> //第幾個版本
<html lang="en">//嵌套:標籤+屬性+屬性值
<head>
<meta charset="UTF-8">支持utf-8
<title>Title</title>//標題
</head>
<body>
</body>
</html>
註冊表單註釋標籤:對代碼進行說明
<!-- 單行註釋,也能夠對多行文字進行註釋 -->
../:返回上一級(父級)目錄1 <b>加粗</b> 2 <i>斜體</i> 3 <u>下劃線</u> 4 <s>刪除線</s> 5 <p>段落標籤</p> 6 <hr>:分割線 7 <br>:換行 8 <sup>上標</sup> 9 <sub>下標</sub> 10 <pre>保留當前格式樣式</pre> 11 <strong>(粗字體)強調文本</strong> 12
1 <h1>我是一級標題標籤(最大)</h1> 2 <h2>我是二級標題標籤</h2> 3 <h3>我是三級標題標籤</h3> 4 <h4>我是四級標題標籤</h4> 5 <h5>我是五級標題標籤</h5> 6 <h6>我是六級標題標籤(最小)</h6>
1 <ul type="disc"> <!--disc:圓點;circle:圓圈;square:方塊--> 2 <li>列表項1</li> 3 <li>列表項2</li> 4 <li>列表項3</li> 5 </ul>
1 <ol type="1"> <!--1,a/A,i/I--> 2 <li>列表項1</li> 3 <li>列表項2</li> 4 <li>列表項3</li> 5 </ol>
1 <dl> 2 <dt>標題,圖片</dt> 3 <dd>描述</dd> 4 </dl>
內嵌樣式:放在<head>
標籤之間
語法:
1 <style type="text/css"> 2 選擇器名 { 3 屬性名:屬性值; 4 } 5 </style>
1 全部標籤(*) 2 * { 3 padding:0px; /*清除默認內邊距*/ 4 margin:0px; /*清除默認外邊距*/ 5 } 6
1 line-height:20px; /*行高*/ 2 text-align:center; /*對齊:Left|right|center|justify*/ 3 text-decoration:none; /*文本修飾None:默認|underline:定義文本下的一條線|overline:定義文本上的一條線|line-through:定義穿過文本下的一條線*/ 4 Letter-spacing:5px; /*字母之間的間距*/ 5 Text-indent:40px; /*首行的縮進方式:px/%*/
例:<font size="6" color="#FF0000" face="微軟雅黑">我是字體標籤</font>1 <font>字體標籤</font> 2 3 <!--字體CSS屬性--> 4 <style type="text/css"> 5 font-size:字體大小(經常使用單位:px/%/em...); 6 color:顏色; 7 font-style:字體樣式; 8 font-family:字體系列; 9 font-weight:字體粗細; 10 </style> 11 12
1 background-color: red; /*設置背景顏色*/ 2 background-image: url(圖片路徑); /*設置背景圖片(圖片路徑沒有引號包裹)*/ 3 background-repeat: no-repeat; /*設置背景的平鋪方式:Repeat-x、repeat-y、no-repeat*/ 4 Background-attachment: Fixed; /*設置滾動:Scroll、Fixed*/ 5 6 background-position: center; /*設置背景的座標,偏移量,如left、right、center、button*/ 7 background-position:100px -100px; 8 /*第一值:左右偏移量,正:向右偏移,負:向左偏移; 9 第二值:上下偏移量,正:向下偏移,負:向上偏移*/ 10 11 background-size:cover; 12 /*能夠爲px、%、cover、continue 13 cover: 不會形成圖片失真,會鋪滿整個標籤。 14 contain: 不會形成圖片失真,不會鋪滿整個標籤。 15 */ 16 17 opacity: 0.5; /*設置透明度,範圍0.0-1.0*/ 18 ontline:0 none; /*清除默認邊框*/
1 <a href="網頁的網址" target="_blank">超連接文字或圖片</a> 2 3 _blank:在新窗口打開網頁 4 _self:在當前自身窗口打開網頁
1 <a href="mailto:cupwang@163.com">個人郵箱</a>
1 <img src="圖片地址路徑" width="寬度" height="高度" alt="加載失敗提示文字" 2 title="鼠標懸浮提示文字" border="邊框大小" align="圖片與周圍文字的對齊方式:top/middle/bottom/left/right" 3 vspace="圖片在垂直方向上與周圍文字的間距" hspace="圖片在水平方向上與周圍文字的間距"/>
1 <a href="#錨點名">錨點連接:跳轉連接</a> 2 <a name="錨點名">錨點名:要跳轉到的位置</a>
1 <marquee scrolldelay="時間延時:毫秒" direction="滾動方向 up down left right"> 2 3 </marquee>
例:1 <frameset cols="20%,*"></frameset> <!--左右分割,將左邊框架分割大小爲20%右邊框架的大小瀏覽器會自動調整--> 2 <frameset rows="20%,*"></frameset> <!--上下分割,將上面框架分割大小爲20%下面框架的大小瀏覽器會自動調整--> 3 <frameset cols="20%,*"></frameset> <!--分割左右兩個框架--> 4 <frameset cols="20%,*,20%"></frameset> <!--分割左中右三個框架--> 5 <frameset rows="20%,*"></frameset> <!--分割上下兩個框架--> 6 <frameset rows="20%,*,20%"></frameset> <!--分割上中下三個框架 --> 71 <frameset cols="20%,*"> 2 <frame src="1.html"> 3 <frame src="2.html"> 4 </frameset>
塊級元素:凡是默認自動佔滿網頁整行的元素(自動換行),稱爲塊級元素
1 <hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...
行內元素:不能佔滿網頁整行的元素
1 <font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...
1 tr:行; td:單元格 2 <table align="表格對齊方式" border="邊框" bgcolor="背景顏色" height="高度" width="寬度" background="背景圖片" bordercolor="邊框顏色" cellspacing="單元格外邊距" cellpadding="單元格內邊距" colspan="合併欄(使用數字)" rowspan="合併列(使用數字)"> 3 <tr align="文本對齊方式"> 4 <td>1</td> 5 <td>2</td> 6 </tr> 7 <tr> 8 <td>3</td> 9 <td>4</td> 10 </tr> 11 </table> 12 13 14
優先級:td > tr > table 跨行:<td rowspan="2">跨2行</td> 跨列:<td colspan="2">跨2列</td>
網頁中全部的元素都是盒子
盒子組成部分:
content:內容 padding:內邊距 border:邊框 margin:外邊距
居中對齊:
1 text-align: center; /*文本居中*/ 2 margin: 0px auto; /*盒子水平居中*/
例:1 height:高度 width:寬度 2 3 padding、border、margin:都有四個方向:top、bottom、left、right; 4 51 <style type="text/css"> 2 padding-top:50px; 3 border-left:50px; 4 margin-right:50px; 5 </style> 6 <style type="text/css"> 7 width:200px;/*內容寬度*/ 8 height:150px;/*內容高度*/ 9 border-width:25px;/*邊框寬度*/ 10 border-color:red;/*邊框顏色 transparent:透明*/ 11 border-style:solid;/*邊框樣式 soild:實線,dashed:線虛線,dotted:點虛線*/ 12 </style> 13 14 <style type="text/css"> 15 border:10px red solid; 16 等價於: 17 border-width:10px; 18 border-color:red; 19 border-style:solid; 20 21 22 padding-top:50px; 23 padding-bottom:100px; 24 padding-left:50px; 25 padding-right:100px; 26 27 padding:50px; /*內邊距上下左右各50px*/ 28 padding:50px 100px; /*第一個值:上下 第二個值:左右*/ 29 padding:50px 30px 100px; /*第一個值:上 第二個值:左右 第三個值:下*/ 30 padding:10px 30px 50px 100px; /*第一個值:上 第二個值:右 第三個值:下 第四個值:左 (順時針方向)*/ 31 </style> 32
一、標籤選擇器:標籤名,網頁中全部這樣的標籤都具備相同的屬性
1 <style type="text/css"> 2 div { 3 width:300px; /*寬度*/ 4 height:250px; /*高度*/ 5 border-width:10px; /*邊框寬度*/ 6 border-color:red; /*邊框顏色*/ 7 border-style:solid; /*邊框樣式 solid:實線 dashed:虛線 dotted:點虛線*/ 8 }
二、ID選擇器:#+ID名,選擇網頁中惟一元素,命名規則同C語言 ,關鍵字:id
1 #box2 { 2 border-color:blue; 3 }
三、類選擇器:.+類名,選擇網頁中具備相同類名的元素 ,關鍵字:class
1 .style2 { 2 background-color:green; 3 border-color:black; 4 border-style:dashed; 5 }
四、僞類選擇器:
1 a:link /* 未訪問的連接 */ 2 a:visited /* 已訪問的連接 */ 3 a:hover /* 鼠標移動到連接上 */ 4 a:active /* 點擊時的連接 */ 5 這四種不一樣的狀態必須按照固定的順序寫: 6 :link :visited :hover :active
五、通配符選擇器(*)
1 /* 清除網頁默認樣式 */ 2 *{ 3 margin: 0; 4 padding: 0; 5 }
選擇器優先級:
!important > ID選擇器 > 類選擇器 > 標籤選擇器 > 通配符選擇器 > 繼承 > 瀏覽器默認屬性
內嵌樣式:定義在該標籤裏面的
1 <div style="width:300px; height:200px; border:5px solid blue; margin:0px auto;"> 2 <!-- 我是一個盒子 --> 3 </div>
內部樣式:定義在網頁的<head>
裏面的
1 <style type="text/css"> 2 p{ 3 background: green; 4 } 5 </style> 6 <body> 7 <P>Hello World!</P> 8 </body>
外部樣式:定義在網頁以外的CSS文本里面的
1 <link type="text/css" rel="stylesheet" href="css/newstyle.css"/>
行內樣式表 > 內嵌樣式表 > 外部樣式表
<form action="要提交的網頁" method="post/get"> </form> post:提交的數據不會在地址欄顯示,安全性好,不限制提交數據的大小。 get:提交的數據會在地址欄顯示,徹底性差,限制提交數據的大小。
常見的表單元素包括文本框、按鈕和下拉列表等。除下拉列表框、多行文本域等少數表單元素外,大多數表單元素均使用<input>
標籤,只是他們的屬性設置不一樣,其統一用法以下:
1 <input name="表單元素名稱" type="類型" value="值" size="顯示寬度" maxlength="能輸入的最大字符長度" checked="是否選中"/> 2 3 文本框: <input type="text" value="jack" maxlength="8" name="account" size="10" readonly="readonly"/> 4 5 密碼框:<input type="password" maxlength="8" name="pwd" size="10"/> 6 7 若要實現多個單選按鈕,只選中一個,前提是保證name屬性值是同樣的,若多個單選按鈕都有checked="checked",以最後一個單選按鈕爲準。 8 單選按鈕:<input type="radio" name="sex" value="男" checked="checked"/> 9 10 複選框:<input type="checkbox" name="hobby" value="籃球" checked="checked"/> 11 12 文件域:<input type="file" name="photo"/> 13
1 <select name=」指定列表的名稱」size=」行數」> 2 <option value=」可選擇的值」 selected=「selected」>顯示項的內容</option> 3 <option value=」可選擇的」>顯示項的內容</option> 4 …… 5 </select>
1 <textarea name=」指定名稱」 cols=」列數」 rows=」行數」> 2 //文本域的內容 3 </textarea>
1 <input type="submit" value="提交按鈕的顯示值" name="名稱"/> 2 <input type="reset" value="重置按鈕的顯示值" name="名稱"/> 3 <input type="button" value="普通按鈕的顯示值" name="名稱"/> 4 <input type="image" src="imags/Logo.png"/>
1 <body scroll="no"> <!--去掉所有滾動條--> 2 <body style="overflow-y:hidden"> <!--去掉頁面右邊的滾動條--> 3 <body style="overflow:scroll; overflow-y:hidden"> 4 <body style="overflow-x:hidden"> <!--去掉頁面底部的滾動條--> 5 <body style="overflow:scroll; overflow-x:hidden">
1 body { 2 Scrollbar-3DLight-Color: #999999; /*滾動條亮邊的顏色*/ 3 Scrollbar-Arrow-Color: #CCCCCC; /*上下按鈕上三角箭頭的顏色*/ 4 Scrollbar-Base-Color: #E1E1E1; /*滾動條的基本顏色*/ 5 Scrollbar-Shadow-Color: #CCCCCC; /*立體滾動條陰影的顏色*/ 6 Scrollbar-DarkShadow-Color: #333333; /*滾動條動條陰影的顏色*/ 7 Scrollbar-Face-Color: #999999; /*滾動條凸出部分的顏色*/ 8 Scrollbar-Highlight-Color: #F2F2F2; /*滾動條空白部分的顏色*/ 9 Scrollbar-Track-Color: #F2F2F2; /*滾動條的背景顏色*/ 10 } 11
javasript 負責交互行爲,是一種基於對象和事件的腳本語言
特色:面向對象,事件驅動
面向對象:調用屬性與方法
Windows
相似於object
Document
Location
History
事件驅動
引入javascript
內聯方式嵌入
內部方式(js標籤位置能夠不限
外部方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript</title> 6 <!--內部引入--> 7 <script type="text/javascript"> 8 /*使用document在網頁正文輸出,至關於print*/ 9 document.write("hello"); 10 document.write("<h1>hello</h1>")/*裏面能夠添加標籤*/ 11 document.write("<p>道</p>") 12 13 </script> 14 <!--外部引入--> 15 <script type="text/javascript" src="js/js1.js"> 16 17 </script> 18 </head> 19 <body> 20 <div> 21 <!--內嵌方式 ,能夠把javascript去掉--> 22 <input onclick="javascript:document.write('輸出')" type="button" name="button" value="點擊"> 23 </div> 24 </body> 25 </html>
1 <script type="text/javascript" > 2 /*java 的變量聲明和賦值, 3 * int i=1 */ 4 /*常見的number和string*/ 5 var a=1; 6 var al; 7 al=2; 8 var b="rose"; 9 var c=null; 10 var d=true; 11 var c=undefined; 12 var f=object; 13 /*scanner調用*/ 14 var i= window.prompt("請輸入第一個數字") 15 var j= prompt("請輸入第二個數字") 16 /*s數據類型轉換 string number*/ 17 var i1=window.parseInt(i); 18 var j1=window.parseInt(j); 19 var result=i1+j1; 20 /*頁面輸出值*/ 21 document.write("計算結果" + result) 22 23 </script>
html的變量與賦值
1 1 <script type="text/javascript" > 2 2 /*java 的變量聲明和賦值, 3 3 * int i=1 */ 4 4 /*常見的number和string*/ 5 5 var a=1; 6 6 var al; 7 7 al=2; 8 8 var b="rose"; 9 9 var c=null; 10 10 var d=true; 11 11 var c=undefined; 12 12 var f=object; 13 13 /*scanner調用 14 14 var i= window.prompt("請輸入第一個數字") 15 15 var j= prompt("請輸入第二個數字") 16 16 /*s數據類型轉換 string number*/ 17 17 var i1=window.parseInt(i); 18 18 var j1=window.parseInt(j); 19 19 var result=i1+j1; 20 20 /*頁面輸出值*/ 21 21 document.write("計算結果" + result) 22 22 23 23 </script> 24
下標,元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <title>Title</title> 7 <script type="text/javascript"> 8 <!--string對象--> 9 var str="asdfgs"; 10 var str1=str.substring(3,4);/*左閉右開*/ 11 document.write(str1); 12 document.write("<br>");/*隔行*/ 13 var numl=str1.length 14 15 document.write(numl); 16 var num2=str.indexOf("a")/*下標*/ 17 document.write("<br>") 18 document.write(num2); 19 var str3=str.charAt(4); 20 document.write("<br>"+str3);/*根據下標找元素*/ 21 </script> 22 23 </head> 24 <body> 25 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript"> 7 /*數組的建立*/ 8 var arr=new Array(4); 9 arr[0]="a"; 10 arr[1]="b"; 11 arr[2]="c"; 12 arr[3]="d"; 13 /*數組建立*/ 14 var arr1=new Array("a","b") 15 document.write(arr) 16 document.write("<br>"+arr1); 17 18 var arr2=["a0","as"] 19 document.write("<br>"+arr2); 20 </script> 21 </head> 22 <body> 23 24 </body> 25 </html>
運算
2.運算符:
數學運算符:+ - * / % ++ --;
關係運算符:== != >= <= > <;
邏輯運算符:&& || !;
其餘運算符:+= -= *= /= %= ?:;
輸入proment
輸出write,scanner
語句:
1 通常分爲順序、分支和循環語句。 2 3 (1)分支語句if: 4 5 if(判斷條件) 6 7 { 8 9 知足條件要執行的語句 10 11 } 12 13 else 14 15 { 16 17 不知足條件時執行的語句 18 19 } 20 21 22 23 (2)循環for語句: 24 25 for(初始條件;循環條件;狀態改變) 26 27 { 28 29 循環體 30 31 } 32 33 34 35 (3)問題類型:窮舉、迭代。 36 37 (4)兩個關鍵詞:break 和 continue。 38 39 (5)若是要輸出某一參數的值:輸出的值是"+a+"和"+b" 40 41 42 43 44 45 <script>function visible1() 46 { 47 $("p").hide(); 48 };</script></head><body> 49 <input type="button" onclick = "visible1()" value = "點這裏讓文字消失"/><p>我會消失。</p>
函數:
函數的四要素:名稱、輸入、返回值、加工。
定義函數:function add(形參){函數體} //函數名爲add,輸入爲參數的形式,返回值能夠是var類型,也能夠return一個返回值。
函數必須通過調用才能執行。函數的調用:add(實參)。
*放在頭部也能夠讀取(最早讀取頭部)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>函數</title> 6 <script type="text/javascript"> 7 /*w無參函數自定義*/ 8 function study() { 9 for(var i=0;i<5;i++){ 10 document.write("<h1>歡迎</h1>") 11 } 12 13 } 14 /*有參函數*/ 15 function study1(count) { 16 for (var i = 0; i < count; i++) { 17 document.write("<h1>歡迎</h1>") 18 19 } 20 } 21 </script> 22 </head> 23 <body> 24 <!--調用 無參函數,經過觸發方式,onclick是事件屬性--> 25 <div> 26 <input onclick="study()" type="button" name="button" value="按鈕"> 27 </div> 28 <!--有參函數,--> 29 <div> 30 <input onclick="study1(prompt('請輸次數',''))" type="button" name="button" value="按鈕1"> 31 </div> 32 </body> 33 </html>
web項目 前端網頁web(好比人物) html 負責前端網頁的結構 基本結構(注意點:嵌套;標籤+屬性) <DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> css 負責網頁的樣式 css引入 內聯樣式引入 內部樣式 外部樣式 三種基本選擇器 id選擇器 類選擇器 標籤選擇器 字體樣式:字體風格 字體粗細 字體大小 字體類型 文本樣式:文本顏色 首行縮進 文本水平對齊 文本修飾 背景樣式: 背景顏色 背景位置 背景圖片 注意點:相對路徑如何找到對方 找同級(找兄弟),再根據兄弟找兄弟的兒子 ../ 表示 返回上一級(找爸爸) 僞類(鼠標與超連接進行交互時的樣式) 鼠標未點擊超連接 a:link 鼠標懸浮其上 a:hover 鼠標點擊超連接不放 a:active 鼠標已經點擊過超連接 a:visited 列表 有序列表 ol o ordered l list;li list 無序列表 ul u unordered l list; li list 自定義列表 dl defined l list;dt defined title;dd defined data 表格 table tr行 table rows ; td列 table data 合併單元格(跨列 colspan 跨行 rowspan;) 表單(重點,要默寫出來) 經常使用標籤+type+name+value javaSript 負責交互行爲,是一種基於對象和事件驅動的腳本語言 (特色:面向對象,事件驅動) 面向對象的好處:調用方法和屬性 Window(相似於Object) Document Location History String 事件驅動 引入javascript 內聯方式(在屬性值內設置js,通常不推薦) 內部方式(js標籤,位置能夠不限) 外部方式(在項目中通常推薦使用,須要配合js標籤+src屬性) 輸入和輸出 prompt(,) write()/alert("我是警示框,優先輸出") 6大基本數據類型(相似java的8大基本數據類型) number string boolean null undefined object 數據類型的轉換(string--->number) string的經常使用方法 subString() charAt() indexOf() split() length 數組(聲明+賦值,3種寫法) 運算符號 賦值運算 = 基本運算 + - * / % ++ -- 比較運算 邏輯運算 與或非 邏輯流程控制 條件語句 循環語句 中斷語句 函數和函數調用(相似java中方法) 後端web