首部沙盒遊戲 IP 電影《迷你世界之覺醒》公佈新海報，4 月 30 日上映
系統結構
B/S架構（以後主要走的方向）
Browser/Server （瀏覽器/伺服器的互動形式）
Browser支援哪些語言 HTML CSS JavaScript 前端開發工程師
前端的圖片需要ui工程師完成，ps對程式設計師沒有太高的要求
S是服務端Server，Server端語言很多，c c++ Java python 我們們主要是java
優點 升級方便 只需要升級服務端程式碼即可
缺點 速度慢 體驗不好 介面不炫酷
企業內部使用
C/S架構
缺點 升級麻煩 維護成本高
優點 介面炫酷 體驗好 速度快 娛樂
Client/Server（客戶端/伺服器端的互動形式）
QQ 微信 支付寶
HTML
*html: Hyper Text Markup Language(超文字標記語言)
由大量的標籤組成，每一個標籤都有開始標籤和結束標籤
<標籤>
<標籤>
<標籤 屬性名=”屬性值“ 屬性名=”屬性值“>
</標籤>
</標籤>
</標籤>
超文字 流媒體 圖片 聲音 視訊
有專業的開發工具 如 DreamWeaver、HBuilder
html 是由 世界全球資訊網聯盟規範的 （W3C）
目前最高的版本是 html5 這裡學html4的基礎用法
w3school是html的幫助文件
w3cschool較晚
------------5----------
<!--這是html的註釋
多行註釋
-->
<!doctype html>
<html>
<head>
<title>網頁的標題 最頂加了表示HTML5</title>
</head>
<body>
網頁的主體內容，歡迎學習
</body>
</html><!--大小寫可以混合，語法鬆散-->
------------6----------------------------
<!doctype html>
<html>
<head>
<title>
標題
</title>
<body>
<p>內容發哈是否可見<p>撒謊附件客戶發開發奧卡福好看撒法哈克安徽省發撒儘快恢復驕傲是開發哈開發
<!--被<p>表示一段--->
<!--標題字 最高6層,越高層字越小個-->
<h1>標題字</h1>
<h2>標題字</h2>
<h3>標題字</h3>
<h4>標題字</h4>
<h5>標題字</h5>
<h6>標題字</h6>
<!--換行需要標記,否則是連在一起-->
helloworld
world
<br>hello
<!--橫線，其中color和width是它的屬性-->
<hr>
<hr color="red" width="50%"><!--雙引號寫不寫都沒問題-->
<!--pre括起來的都會保留其形式-->
<pre>for(int i =0;i<100;i++){
System.out.println("sb")
}</pre>
<del>刪除字</del>
<ins>插入字</ins>
<b>粗體字</b>
<i>斜體字</i>
10<sup>2<sup><!--2出現在10的右上角-->
10<sub>2<sub><!--出現在右下角-->
<font color="red" size="50">字型標籤</font><!--修改改字型顏色和大小-->
</body>
</head>
</html>
---------------------------------實體符號-----------------------
<!doctype>
<html>
<head>
<title>實體符號</title>
</head>
<body>
b<a>c<!--<是小於號 >是大於號-->
<br>a b<!--這裡加的是空格-->
</body>
</html>
----------------------------------8表格---------------------------
<!doctype>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br><br><br><br><br><br><!--一頓換行-->
<hr color="red" size="99">
<center><h1>員工資訊列表</h1></center>
<!--設定表格邊框為9畫素寬度,還有整體畫素，也可以是百分比-->
<table align="center" border="9px" width="60%" heigth="150px">
<!--align=center次方法為對齊方式-->
<tr align="center"><!--tr表示行 td表示列-->
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td align="center">g</td>
</tr>
</table>
</body>
</html>
-----------------------9 單元格合併---------------------------
<!doctype>
<html>
<head>
<title>表格單元格合併</title>
</head>
<body>
<table border="1px" width="50%">
<tr>
<td>1</td><!--<th>1</th>-此方式是自動排列中間->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td rowspan="2">7</td><><!--刪除行的-->
</tr>
<tr>
<td colspan="2">8</td><!--刪除列的-->
<!--<td>9</td>-->
<!--<td>10</td>合併，把這行刪了,一般刪下面-->
</tr>
</table>
</body>
</html>
----------------------11-------------thead tbody tfoot--------------
<!doctype>
<html>
<head>
<title>
thead tbody tfoot把程式碼集中一堆，方便操做
</title>
</head>
<body>
<table border="5px">
<thead><!--分割符號-->
<tr>
<th>員工編號</th>
<th>員工薪資</th>
<th>員工名稱</th>
</tr>
<thead>
<tbody><!--分割-->
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td colspan="2">4</td>
<!--<td>5</td>-->
<!--<td>6</td>-->
</tr>
<tbody>
</table>
</body>
</html>
----------------------12----------------背景圖片------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--告訴瀏覽器-->
<title>背景顏色和背景圖片</title>
</head>
<body bgcolor="red" background="img/微信圖片_20201001155438%20-%20副本.jpg">
</body>
</html>
------------------------13-----圖片img標籤------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片img</title>
</head>
<body>
<img src="img/微信圖片_20201001155438%20-%20副本.jpg" width="100px" title="我是美女哦" alt="圖片不見啦"/>
<br><br><br><!--title是滑鼠懸停在圖片上顯示出來的文字 alt是找不到圖片時顯示的-->
<img src="img/微信圖片_20201001155438%20-%20副本.jpg" width="50%"></img>
</body>
</html>
------------------------14超連結----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超連結 熱連結</title>
</head>
<body>
<a href="http://www.baidu.com/">百度</a>
<a href="http://news.baidu.com/">百度新聞</a>
<a href="http://www.jd.com"/>京東</a>
<a href="http://www.tmall.com/">天貓</a>
<a href="http://www.126.com/">126郵箱</a>
<br><br>
<a href="微信圖片_20201001155438.jpg" target="_blank"><!--新視窗開啟 _self是替換當前視窗 ——top是頂級視窗 parent是父視窗-->
<img src="微信圖片_20201001155438%20-%20副本.jpg" width="25px" title="趕緊點選" alt="失效"></img>美女
</a>
</body>
</html>
--------------------------------------15超連結-----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超連結 熱連結</title>
</head>
<body>
<a href="http://www.baidu.com/">百度</a>
<a href="http://news.baidu.com/">百度新聞</a>
<a href="http://www.jd.com"/>京東</a>
<a href="http://www.tmall.com/">天貓</a>
<a href="http://www.126.com/">126郵箱</a>
<br><br>
<a href="微信圖片_20201001155438.jpg" target="_blank"><!--新視窗開啟 _self是替換當前視窗 ——top是頂級視窗 parent是父視窗-->
<img src="微信圖片_20201001155438%20-%20副本.jpg" width="25px" title="趕緊點選" alt="失效"></img>美女
</a>
</body>
</html>
---------------------16有序 個無序----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul type="square"><!--空心circle 圈實心disc 方實心square -->
啊大哥<li>大哥
<ul>中國</ul>
</li>
<li>美國</li>
</ul><!--以上無序-->
<!--此處有序-->
<ol>
<li>水果
<ol type="I"><!--有羅馬 有abc 有數字 有i-->
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜</li>
<li>甜點</li>
</ol>
</body>
</html>
---------------------17表單初步-------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單form</title>
</head>
<body>
<form action="http://www.hao123.com/"><!--寫伺服器地址-->
<a href="http://www.baidu.com">百度</a>
<input type="submit" value="登入"/><!--提交的按鈕 和href屬性差不多,但這個可以提供使用者輸入入口-->
<input type="text" /><!--文字框,在form內可以被帶走-->
<input type="password"><!--密碼框-->
<input type="checkbox"><!--複選框-->
<input type="radio"><!--單選按鈕-->
<input type="button" value="顯示按鈕上的文字"/><!--普通按鈕，不具備提交功能-->
</form>
<br><br>
<form action="http://www.dayun.com"/>
使用者名稱<input type="texxt"/>
<br>密碼<input type="password"/>
<input type="submit" value="登入" />
</form>
<form>
<table border="100px">
<tr>
<td>使用者名稱</td>
<td><input type="text" name="user"/></td><!--提交的必須寫name-->
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="userpwd"/> </td><!--提交的必須寫name--><!--http://127.0.0.1:8848/html%20%20sss/biaodan.html?user=123&userpwd=321 -->
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登入">
<input type="reset" value="清空">
</td>
</tr>
</table>
</form>
</body>
</html>
--------------------------18表單實現-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單註冊實現</title>
</head>
<body>
<!--
使用者註冊
姓名
確認密碼
性別
興趣愛好
學歷
簡歷
-->
<form action="http://ashjkhfsjkaf" method="post"/><!--預設get post方法提交不會顯示資料-->
使用者名稱
<input type="text" name="user"/>
<br>
密碼
<input type="password" name="userpasspwd"/>
<br>
確認密碼
<input type="password"/>
<br>
性別
<input type="radio" name="gender" value="1" checked/ >男<!--checked預設-->
<input type="radio" name="gender"/>女
<br>
興趣愛好
<input type="checkbox" name="interest" value="smoke"/>抽菸
<input type="checkbox" name="interest" value="drink" />喝酒
<input type="checkbox" name="interest" value="fireHair"/>燙頭
<br>
學歷
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大專</option>
<option value="bk" selected>本科</option><!--預設select-->
<option value="ss">碩士</option>
</select>
<br>
簡歷
<textarea rows="10" cols="30" name="introduce"></textarea>
<input type="submit" value="註冊"/>
<input type="reset" value="清空"/>
</form><!--超連結只是不能給使用者輸入，也能提交-->
</body>
</html>
---------------------19下列列表多選-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉</title>
</head>
<body>
<select multiple="multiple" size="3"><!--size是顯示個數-->
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>東北</option>
</select>
</body>
</html>
------------------20 form的file控制元件-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form 的控制元件</title>
</head>
<body>
<input type="file"/><!--開啟檔案-->
</body>
</html>
-------------------------------------------21隱藏的hidden控制元件----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隱藏的hidden控制元件</title>
</head>
<body>
<input type="hidden" name="user" value="123"/><!--在頁面上不顯示-->
</body>
</html>
------------------------------------22隱藏的hidden控制元件2-------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly和disabled</title>
</head>
<body>
<form action="124322">
<input type="text" name="312" value="321" readonly /><!--readonly可以提交 不可以修改-->
<br><input type="text" name="654" value="56" disabled /><!--disabled不可以提交，不可修改-->
</form>
</body>
</html>
-------------------------------------------24maxlength-----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input控制元件maxlength屬性</title>
</head>
<body>
<form>
<input type="text" maxlength="3" /><!--限制使用者輸入數量-->
</form>
</body>
</html>
------------------------25id屬性-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id屬性</title>
</head>
<body>
<form id="myform">
<input type="text" id="user" maxlength="3" name="user1" /><!--id方便以後CRUD通過id獲取該節點 健稱dom(documen)樹-->
</form>
</body>
</html>
-----------------------26 div和 span------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和 span</title>
</head>
<body>
<!--他們是佈局巢狀-->
<div id="div1">我是一個div</div>
<div id="div2">我是第二個div
<div>龍的傳人
<div>有木有效果</div>
</div>
</div><!--預設情況下div會獨佔一行-->
<span id="span1">我是一個span</span>
<span id="span2">我是一個span</span><!--可以通過座標迅速知道位置-->
</body>
</html>