1.收獲
學(xué)習(xí)了網(wǎng)頁的制作，感覺很有趣悲雳，畢竟這是自己第一次接觸這個(gè)挎峦。在以前聽說這個(gè)網(wǎng)頁的制作是很難得，但是在學(xué)完之后感覺并不是好難合瓢。但是學(xué)習(xí)一門東西坦胶，要想把他學(xué)透還是要很多的時(shí)間和精力，并不是他簡單就可以簡單對待晴楔，越是簡單的東西越要好好面對顿苇，就像修房子一樣，如果你連簡單的地基沒有打好的話税弃，那么你的房子也不會穩(wěn)固纪岁。所以基礎(chǔ)是非常重要的。在生活中一樣则果，俗話說細(xì)節(jié)決定成敗幔翰，所以要做好每一點(diǎn)就好了。加油短条！
2.技術(shù)
（1）html的簡單使用
（2）使用服務(wù)器訪問局域網(wǎng)數(shù)據(jù)
（3）form提交登陸表單
（4）使用URL實(shí)現(xiàn)下載和上傳
3.技術(shù)的實(shí)際應(yīng)用和實(shí)踐
（1）html的簡單使用
在制作網(wǎng)頁之前我們需要下載兩個(gè)東西导匣，一個(gè)是Apache,另一個(gè)使php,Apache是用來配置一個(gè)服務(wù)器的才菠，而php是用來返回?cái)?shù)據(jù)的茸时，當(dāng)你訪問一個(gè)網(wǎng)也得時(shí)候，你并不是直接訪問服務(wù)器赋访，而是通過中間的一個(gè)腳本語言來訪問的可都，能夠處理客服端的請求
而服務(wù)器端需要一個(gè)文件來處理用戶登陸的請求，這個(gè)文件就是php或者是Java
我們要做網(wǎng)頁首先要使后臺服務(wù)器器運(yùn)行蚓耽，要使Apache運(yùn)行起來
在這里我們需要一定的工具來進(jìn)行編程渠牲，可以用我們記事本，也可以下載Sublim來進(jìn)行編寫步悠，這里我們運(yùn)用的是Sublim签杈，在編寫之前我們學(xué)要明白一些簡單的語法，我們可以在網(wǎng)上搜索HTML菜鳥教程，那里面就會有一些語法的使用答姥。
A.新建一個(gè)文件铣除，他的屬性為html,網(wǎng)頁分為兩部分，一個(gè)是頭部鹦付，另一個(gè)是內(nèi)容
首先是頭部標(biāo)題
<head>
<meta charset="utf-8">
<title>我的第一個(gè)網(wǎng)頁</title>
</head>
然后是內(nèi)容尚粘，可以是文字，可以是副標(biāo)題敲长，可以有鏈接郎嫁，圖片，視頻祈噪，文本泽铛，表格
<!-- 顯示文字 -->
<h1 align="center">標(biāo)題</h1>
<h2 align="center">這是一個(gè)子標(biāo)題</h2>
<!-- //顯示文字 -->
<p>人生的曲折與坎坷鑄就了我們對生活的百折不撓，也磨練了我們堅(jiān)韌不拔的毅力辑鲤。如何使我們的人生顯得更有價(jià)值厚宰，體現(xiàn)生命的意義?我想擬定一份職業(yè)生涯規(guī)劃書是我們不可或缺的基礎(chǔ)石料。未來遂填，掌握在自己手中铲觉。
</p>
圖片：
<!-- //顯示一張圖片 -->
<img src="1.jpg" align="center" width="500",height="300" >
表格：
<table border="1" bgcolor="#FF7F50" align="center">
<tr>
<!-- //tr表示一行數(shù)據(jù) td 表示多少數(shù)據(jù) -->
<td width="50"> 姓名</td>
<td width="50"> 班級</td>
<td width="50"> 成績</td>
</tr>
<tr>
<!-- //tr表示一行數(shù)據(jù) td 表示多少數(shù)據(jù) -->
<td width="50"> 小王</td>
<td width="50"> 18既可</td>
<td width="50"> 88</td>
</tr>
</table>
視頻：
<!-- //插入視頻 -->
<video controls="controls" width="500" height="300">
<source src="1.mp4" type="video/mp4">
</video>
鏈接：
<!-- //插入鏈接 -->
<a align="center" >
<br><br><br>這是一個(gè)百度的鏈接
</a>
然后我們將這個(gè)文件保存到
然后找到一個(gè)瀏覽器，輸入：http://自己的電腦的id/剛剛那個(gè)文件的文件名
如果出現(xiàn)的是亂碼就在剛剛的那個(gè)文件里面加上
<meta charset="utf-8">
（2）使用服務(wù)器訪問局域網(wǎng)數(shù)據(jù)
兩種方式
默認(rèn)端口號：80
http://www.baidu.com/domnload/images/1.jpg
http://www.baidu.com/download?type=jpg&category=ios
c/s:customer / server
移動端：App
----JAVA—Android
----- Kotlin oc-ios
瀏覽器：火狐 IE
----- HTML (H5-Html5):超文本的標(biāo)記語言
----css
---- javaScript (js腳本語言)
服務(wù)器端：提供數(shù)據(jù)存儲數(shù)據(jù)和訪問的接口 API(應(yīng)用程序的接口)
----API=Application Programming Interface
如果需要將自己本地的數(shù)據(jù)提供給外部訪問
自己的電腦扮演的就是服務(wù)器
需要自己配置一個(gè)服務(wù)器 apache
window 必須自己搭建服務(wù)器
訪問的步驟
*1.啟動服務(wù)器
2.找到服務(wù)器工作路徑 workspace
-----windows:Apache ->Apache -> htdocs
3.將需要提供給外部訪問的文件放到當(dāng)前目錄下
4.如何訪問：
-----本機(jī)：ip地址 127.0.0.1/test.html
-----其他電腦（在同一個(gè)網(wǎng)段 局域網(wǎng)）：
--------- http://ip/test.html
-------- http://ip/test.html/1.jpg
-------- http://ip/hello.php?name=jack&password=123
（3）form提交登陸表單
首先我們需要新建一個(gè)文件吓坚，用來設(shè)計(jì)客服端撵幽，再新建一個(gè)文件，用來設(shè)計(jì)構(gòu)建服務(wù)器礁击，他的文件屬性php,性質(zhì)的盐杂。
使用get方式提交數(shù)據(jù)
php用來返回客服端需要的數(shù)據(jù)
<!--
接收外部傳遞過來的數(shù)據(jù) 客服端提交的數(shù)據(jù)
數(shù)據(jù)的提交有兩種方式
get/GHT:
向服務(wù)器提交數(shù)據(jù) 并且獲取服務(wù)器返回的結(jié)果
特點(diǎn)：提交的數(shù)據(jù)都在url里面體現(xiàn)出來
不安全
當(dāng)提交的數(shù)據(jù)比較多的時(shí)候就無法使用
數(shù)據(jù)不是特別重要 并且數(shù)據(jù)少量 用get
post/POST:
向服務(wù)器提交數(shù)據(jù) 并且獲取服務(wù)器返回的結(jié)果
特點(diǎn)：提交的數(shù)不會展示在url里面
安全
可以提交大量的數(shù)據(jù)
-->
<?php
// 獲取提交的用戶名 get-$_GET post-$_POST
$name=$_GET["user_name"];
$password=$_GET["user_password"];
//查詢數(shù)據(jù)庫
//返回結(jié)果
echo "用戶名：".$name."密碼：".$password;
?>
做一個(gè)文件來做表單，來設(shè)計(jì)客服端哆窿，接收客服信息
<!-- 做一個(gè)表單用于提交用戶數(shù)據(jù) -->
<!DOCTYPE html>
<html>
<head>
<title>登陸</title>
</head>
<body background="2.jpg">
<!-- 表單的內(nèi)容 -->
<!-- anction:內(nèi)容提交到服務(wù)器的哪個(gè)文件中
提交的內(nèi)容有服務(wù)器的哪個(gè)文件來處理
method:提交的方式 get/post
-->
<form action="login.php" method="get">
<center>
用戶名：<input type="text" name="user_name">
<br> <br>
密  碼：<input type="password" name="user_password">
<br> <br>
<input type="submit" value="提交">
</center>
</form>
</body>
</html>
使用post方式提交數(shù)據(jù)
php用來返回客服端需要的數(shù)據(jù)
<!--
接收外部傳遞過來的數(shù)據(jù) 客服端提交的數(shù)據(jù)
數(shù)據(jù)的提交有兩種方式
get/GHT:
向服務(wù)器提交數(shù)據(jù) 并且獲取服務(wù)器返回的結(jié)果
特點(diǎn)：提交的數(shù)據(jù)都在url里面體現(xiàn)出來
不安全
當(dāng)提交的數(shù)據(jù)比較多的時(shí)候就無法使用
數(shù)據(jù)不是特別重要 并且數(shù)據(jù)少量 用get
post/POST:
向服務(wù)器提交數(shù)據(jù) 并且獲取服務(wù)器返回的結(jié)果
特點(diǎn)：提交的數(shù)不會展示在url里面
安全
可以提交大量的數(shù)據(jù)
-->
<?php
// 獲取提交的用戶名 get-$_GET post-$_POST
$name=$_POST["user_name"];
$password=$_POST["user_password"];
//查詢數(shù)據(jù)庫
//返回結(jié)果
echo "用戶名：".$name."密碼：".$password;
?>
做一個(gè)文件來做表單链烈，來設(shè)計(jì)客服端，接收客服信息
<!-- 做一個(gè)表單用于提交用戶數(shù)據(jù) -->
<!DOCTYPE html>
<html>
<head>
<title>登陸</title>
</head>
<body background="2.jpg">
<!-- 表單的內(nèi)容 -->
<!-- anction:內(nèi)容提交到服務(wù)器的哪個(gè)文件中
提交的內(nèi)容有服務(wù)器的哪個(gè)文件來處理
method:提交的方式 get/post
-->
<form action="login.php" method="post">
<center>
用戶名：<input type="text" name="user_name">
<br> <br>
密  碼：<input type="password" name="user_password">
<br> <br>
<input type="submit" value="提交">
</center>
</form>
</body>
</html>
（4）使用URL實(shí)現(xiàn)下載和上傳
使用URL實(shí)現(xiàn)下載（帶參數(shù)）
public static void fzg(String[] args) throws IOException{
//使用代碼訪問（提交/訪問）服務(wù)器數(shù)據(jù)
//URL
//HTTP://127.0.0.1/login.php?name=jack$password=123
//1.創(chuàng)建URL
String path="http://10.129.25.253/login.php?"+"user_name=jack&user_password=123";
URL url=new URL(path);
//2.指明請求的方式：get/post
//URLConnection封裝了Socket
URLConnection connection=url.openConnection();
//獲取連接對象
HttpURLConnection httpURLConnection=(HttpURLConnection) connection;
httpURLConnection.setRequestMethod("GET");
//接收服務(wù)器端的數(shù)據(jù)
BufferedReader br=new BufferedReader(new InputStreamReader(connection.getInputStream()));
while (br.readLine()!=null){
System.out.println(br.readLine());
}
}
}
使用post上傳簡單的數(shù)據(jù)（不是文件）
public static void post() throws IOException {
//1.創(chuàng)建URL
URL url=new URL("http://10.129.25.253/login.php");
//2.獲取connection對象
//URLConnection
//HttpURLConnection 自己需要設(shè)定請求的內(nèi)容
// 請求方式 上傳的內(nèi)容
HttpURLConnection connection=(HttpURLConnection) url.openConnection();
//3.請求方式為post
connection.setRequestMethod("POST");
//設(shè)置有輸出流 需要下載
connection.setDoInput(true);
//設(shè)置有輸入流 需要上傳
connection.setDoOutput(true);
//4.準(zhǔn)備上傳數(shù)據(jù)
String date="user_name=jack&user_password=123";
//5.開始上傳 輸出流對象
OutputStream os=connection.getOutputStream();
os.write(date.getBytes());
os.flush();//寫完了
//6.接收服務(wù)器端返回?cái)?shù)據(jù)
InputStream is=connection.getInputStream();
byte[] buf=new byte[1024];
int len;
while((len=is.read(buf))!=-1){
System.out.println(new String(buf,0,len));
}
}
效果：
從服務(wù)器端下載文件（圖片）
public static void getImage() throws IOException {
//URL
URL url=new URL("http://10.129.25.253/1.jpg");
//獲取于服務(wù)器鏈接的對象
URLConnection connection=url.openConnection();
//讀取下載的內(nèi)容--獲取輸入流
InputStream is=connection.getInputStream();
//創(chuàng)建文件保存的位置
FileOutputStream fos=new FileOutputStream("D:\\android\\Javaday1\\java\\src\\main\\java\\day14\\1.jpg");
byte[] buf=new byte[1024];
int len;
while((len=is.read(buf))!=-1){
fos.write(buf,0,len);
}
}
效果：
