Java 0基礎入門（初識Html）

學習Java之前，我們需要了解一定的前端知識。畢竟頁面才是用戶真正看到的，而且也是體現Java后端邏輯結果的地方。

學習HTML后，能夠制作界面美觀大方的靜態網站（更復雜的功能需要JavaScript腳本一起來實現）。

HTML制作的網頁。

所需要的Html開發工具，可使用Hbuilder。

下載路徑：https://www.dcloud.io/

第一次寫文章，不知道鏈接會不會被屏蔽，如果看不到可以自行百度，直接搜索Hbuilder，進入官網下載安裝，安裝完打開軟件后，點擊暫不登陸，你懂的（免費使用）。

網頁一般使用Chrome，IE的兼容性比較差，學習建議使用Chrome。

下載路徑：https://www.google.cn/chrome/

作者推薦的學習用軟件，都為免費，放心下載使用。

一、在Hbuilder中如何來創建頁面

1、文件->新建->web項目

2、給項目起名(也可以修改路徑，命名用英文或者拼音縮寫，用中文可能開發會出錯)

Hbulider創建項目

3、完成

4、右擊新建的項目：新建->HTML文件

5、為新的文件重命名，以html作為后綴

6、完成

Hbuilder創建Html文件

7、選擇頁面，點擊在瀏覽器中運行按鈕

在瀏覽器中運行按鈕

以下新手筆試或者面試容易考

HTML是HyperText Markup Language縮寫，意為超文本標記語言，“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

特點：

1、簡易性

2、可擴展性

3、平臺無關性

4、通用性

HTML的結構

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<h1>Hello Java</h1>
		<h2>Hello Html</h2>
	</body>

</html>

HTML的結構詳解：（了解即可，一般開發軟件會自動生成，如不生成，那就找個會生成的軟件，復制黏貼）

<!DOCTYPE html>：文件類型聲明，H5中就這么一種寫法。

<html>:告知瀏覽器其自身是一個 HTML 文檔,限定了文檔的開始點和結束點

<head>:文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、字符集等信息。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。在head中可以定義樣式，引用樣式，也可以定義腳本和引用腳本

<body>:文檔的主體部分，包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。），body部分的內容一般就是直接呈現給用戶的部分

網頁中的亂碼問題：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312">
		<title></title>
	</head>
	<body>
		<h1>Hello Java</h1>
		<h2>Hello Html</h2>
		你好
	</body>
</html>

運行以上代碼，可以在網頁中看到，“你好”兩個字為亂碼。這是<meta charset="gb2312">搞的鬼。

當文件本身的字符集編碼以與網頁head部分指定的字符集編碼不一致時，就會產生亂碼問題，可以在head部分的meta標簽中指定和文件一樣的字符集編碼來解決這一問題。<meta charset="utf-8" />

從執行上面的代碼也可以看出，html是按從上到下的順序來顯示的。

下一篇內容：Html各種標簽的認識和使用。

些日子將自己的網站升級為HTTPS，這次再設置支持HTTP2.0。本篇文章不講述HTTP2的具體原理，但關于HTTP的相關知識會簡單講述一下，關于HTTP2的詳細內容可以參看HTTP2基礎教程。

1.HTTP1

1.1HTTP1的問題

隊頭阻塞如果僅僅使用一個連接，它需要發起請求、等待響應，之后才能發起下一個請求。在請求應答過程中，如果出現任何狀況，剩下所有的工作都會被阻塞在那次請求應答之后。這就是“隊頭阻塞”，它會阻礙網絡傳輸和Web頁面渲染，直至失去響應。為了防止這種問題，現代瀏覽器會針對單個域名開啟6個連接，通過各個連接分別發送請求。它實現了某種程度上的并行，但是每個連接仍會受到“隊頭阻塞”的影響。
低效的TCP利用HTTP1并不支持多路復用，TCP協議保證連接都能正常工作，但是不能保證它們的性能是最優的。
臃腫的消息首部雖然h1提供了壓縮被請求內容的機制，但是消息首部卻無法壓縮。
受限的優先級設置瀏覽器能指定優先級的方式是有限的：要么發起請求，要么不發起。瀏覽器為了先請求優先級高的資源，會推遲請求其他資源。但是優先級高的資源獲取之后，在處理的過程中，瀏覽器并不會發起新的資源請求，所以服務器無法利用這段時間發送優先級低的資源，總的頁面下載時間因此延長了。
第三方資源很多第三方資源都不在Web開發者的控制范圍內，所以很可能其中有些資源的性能很差，會延遲甚至阻塞頁面渲染。

1.2HTTP1優化

基礎不牢，地動山搖。為了優化HTTP1，開發人員們最大化的發揮了自己的聰明才智。

如Steve Souders這種大牛，寫了《高性能網站建設指南》和姊妹篇《高性能網站建設進階指南》，堪稱Web性能科學的奠基之作。

開發人員們也想出了各種實用方案，經常使用的Web性能優化技術有：

DNS查詢優化
優化TCP連接（可以參考我的這篇文章TCP性能優化）
避免重定向
客戶端緩存
網絡邊緣的緩存
條件緩存
壓縮和代碼極簡化
避免阻塞CSS/JS
圖片優化

還有一些反模式的方案

生成精靈圖和資源合并/內聯
域名拆分
禁用cookie的域名

我們做這一切，不管多么麻煩多么艱辛，主要是為了優化性能，填HTTP1給我們埋的坑，雖然治標不治本。幸運的是，HTTP2來了。

2.HTTP2

2.1HTTP2優點

1.二進制協議

HTTP/2采用二進制格式而非文本格式
方便機器解析，但是肉眼識別起來比較困難

2.HTTP/2是完全多路復用的，而非有序并阻塞的

只需一個連接即可實現并行
提升TCP連接的利用率

3.首部壓縮

HTTP/2的首部被深度壓縮
顯著減少傳輸中的冗余字節

4.HTTP/2讓服務器可以將響應主動“推送”到客戶端緩存中

2.2HTTP2部署

2.2.1部署前

現在讓我們看看沒有升級前，https://www.asap2me.top/顯示的結果

Chrome顯示協議為http/1.1

2.2.2部署

2.2.2.1環境情況：

目前環境是：Centos7.6

Web服務：GoLang

Web服務端口號：8080

反向代理：Nginx

系統已經配置好Nginx，也支持HTTPS，關于如何安裝Nginx和配置HTTPS可以參考HTTPS配置實戰

2.2.2.2部署分為兩步：

獲取并安裝一個支持h2的Web服務器；
下載并安裝一張TLS證書，讓瀏覽器和服務器通過h2連接。申請TLS證書方法有

使用在線證書生成器 https://www.sslchecker.com/csr/self_signed
自簽名證書 openssl工具
Let's Encrypt

因為證書已經安裝成功，這里主要講解Nginx如何支持HTTP2。

2.2.2.3Nginx支持HTTP2

1.查看當前模塊/usr/local/nginx/sbin/nginx -V

configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

2.進入nginx源碼包目錄/home/work/nginx-1.12.0

3.重新編譯，增加httpv2模塊。./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module

4.make編譯，這里不要進行 make install，否則就是覆蓋安裝。

新生成的nginx存放位置在nginx源碼下的objs下
將原nginx做備份，將新nginx替換老nginx

5.修改nginx配置：listen 443 ssl http2;

6.重啟nginx：sudo ./nginx -s reload (如果不生效就kill進程，重啟nginx)

2.2.2.4檢查方法

1.直接使用curl請求

curl --http2 -v https://www.asap2me.top -k

2.使用線上資源 https://myssl.com/http2_check.html

3.谷歌瀏覽器直接請求

2.3壓力測試對比

使用HTTP2的性能未必會比HTTP1好，有時候也需要看業務場景。跟其他任何性能調優嘗試一樣，HTTP2可能也要經歷編碼、測試、分析以及優化的迭代過程。總體來說通過不斷的優化，終會比HTTP1好。

2.3.1HTTP1性能

使用ab對http1進行壓力測試：

ab -k -c 10 -t 180 -n 10000 https://www.asap2me.top/

ab -k -c 10 -t 180 -n 10000 https://www.asap2me.top/
This is ApacheBench, Version 2.3 <$Revision: 1874286 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking www.asap2me.top (be patient)
Completed 1000 requests
Completed 2000 requests
Completed 3000 requests
Completed 4000 requests
Completed 5000 requests
Completed 6000 requests
Completed 7000 requests
Completed 8000 requests
Completed 9000 requests
Completed 10000 requests
Finished 10000 requests


Server Software:        nginx/1.12.0
Server Hostname:        www.asap2me.top
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-AES128-GCM-SHA256,2048,128
Server Temp Key:        ECDH P-256 256 bits
TLS Server Name:        www.asap2me.top

Document Path:          /
Document Length:        12 bytes

Concurrency Level:      10
Time taken for tests:   30.967 seconds
Complete requests:      10000
Failed requests:        0
Keep-Alive requests:    9905
Total transferred:      1749525 bytes
HTML transferred:       120000 bytes
Requests per second:    322.93 [#/sec] (mean)
Time per request:       30.967 [ms] (mean)
Time per request:       3.097 [ms] (mean, across all concurrent requests)
Transfer rate:          55.17 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   9.5      0     121
Processing:    25   30   3.0     30     266
Waiting:       25   30   3.0     30     266
Total:         25   31  10.0     30     266

Percentage of the requests served within a certain time (ms)
  50%     30
  66%     30
  75%     31
  80%     31
  90%     32
  95%     33
  98%     35
  99%    115
 100%    266 (longest request)

2.3.2HTTP2性能

使用h2load對HTTP2進行壓力測試：

h2load -n 10000 -c 6 -T 180 https://www.asap2me.top/

h2load -n 10000 -c 10 -T 180 https://www.asap2me.top/
starting benchmark...
spawning thread #0: 10 total client(s). 10000 total requests
TLS Protocol: TLSv1.2
Cipher: ECDHE-RSA-AES128-GCM-SHA256
Server Temp Key: ECDH P-256 256 bits
Application protocol: h2
progress: 10% done
progress: 20% done
progress: 30% done
progress: 40% done
progress: 50% done
progress: 60% done
progress: 70% done
progress: 80% done
progress: 90% done
progress: 100% done

finished in 31.71s, 315.37 req/s, 27.74KB/s
requests: 10000 total, 10000 started, 10000 done, 10000 succeeded, 0 failed, 0 errored, 0 timeout
status codes: 10000 2xx, 0 3xx, 0 4xx, 0 5xx
traffic: 879.55KB (900660) total, 585.94KB (600000) headers (space savings 47.37%), 117.19KB (120000) data
                     min         max         mean         sd        +/- sd
time for request:    26.66ms    262.63ms     29.48ms      3.05ms    98.04%
time for connect:    97.46ms    106.95ms     99.53ms      3.16ms    80.00%
time to 1st byte:   127.59ms    141.29ms    130.75ms      4.77ms    80.00%
req/s           :      31.54       35.41       33.82        1.14    80.00%

HTTP1.1和HTTP2壓測后，在總時間上差別不大，主要是因為測試的接口不合適。不過我們仍能看出，在機器CPU和流量上，HTTP2是有大幅提升的。

2.3.3注意問題

將服務升級為支持HTTP2.0，需要考慮如下問題：

瀏覽器的支持情況：目前主流瀏覽器都支持h2，如果不支持，會自動退回到h1，所以問題不大。
遷移到TLS：服務器需要支持TLS 1.2或更高版本，以及一組特定的臨時加密算法。因為大多數關注安全的現代網站已經被“TLS無處不在”的大潮所席卷，所以應該不成問題。
撤銷針對HTTP/1.1的“優化”：這部分是工作量最大的一部分
第三方資源：第三方資源有可能會拖累HTTP/2帶來的任何可能的性能優化，需要判斷是否真的需要第三方資源。
支持舊版本客戶端：需要確保TLS設置方式以及是否仍然能夠支持HTTP/1，否則有用戶可能徹底失去了通過h1訪問網站的機會

3.插曲

寫文章的過程中，突然報這個錯誤，還以為配置的問題，后來發現是需要備案。

大家如果在騰訊云買的域名，備案方法：https://icp-faq.dnspod.cn/why

4.總結

如果是新的服務，建議一開始就部署HTTP2，對于老的服務，也推薦升級為HTTP2。對于性能測試，推薦一個網站https://www.webpagetest.org/。

寫博客是一個好事情，寫完這個文章，至少又有幾點值得寫：

HTTP2技術細節
多路復用的實現
服務端推送實現
webpagetest使用

下一篇文章可以寫寫多路復用的具體實現。

資料

HTTP2基礎教程http://www.duokan.com/book/172822
為啥我的Chrome中看不到http請求的版本號？https://segmentfault.com/q/1010000022855148
nginx配置支持http2https://www.cnblogs.com/chennl/p/10173397.html
nginx支持HTTP2的配置過程https://www.cnblogs.com/bugutian/p/6628455.html
Nginx 支持Http2協議https://blog.csdn.net/jeikerxiao/article/details/85329165
HTTP 2.0 PK HTTP 1.X —— 速度與激情https://www.sohu.com/a/237152034_827544
ab命令壓力測試https://www.cnblogs.com/yueminghai/p/6412254.html
h2load - HTTP/2 benchmarking tool - HOW-TOhttps://nghttp2.org/documentation/h2load-howto.html
Web性能優化工具WebPageTest（一）——總覽與配置

最后

大家如果喜歡我的文章，可以關注我的公眾號（程序員麻辣燙）

我的個人博客為：https://shidawuhen.github.io/

往期文章回顧：

技術

Go設計模式(1)
MySQL開發規范
HTTPS配置實戰
Go通道實現原理
Go定時器實現原理
HTTPS連接過程
限流實現2
秒殺系統
分布式系統與一致性協議
微服務之服務框架和注冊中心
Beego框架使用
淺談微服務
TCP性能優化
限流實現1
Redis實現分布式鎖
Golang源碼BUG追查
事務原子性、一致性、持久性的實現原理
CDN請求過程詳解
常用緩存技巧
如何高效對接第三方支付
Gin框架簡潔版
InnoDB鎖與事務簡析
算法總結

讀書筆記

原則
資治通鑒
敏捷革命
如何鍛煉自己的記憶力
簡單的邏輯學-讀后感
熱風-讀后感
論語-讀后感
孫子兵法-讀后感

思考

服務端團隊假期值班方案
項目流程管理
對項目管理的一些看法
對產品經理的一些思考
關于程序員職業發展的思考
關于代碼review的思考
Markdown編輯器推薦-typora

ttps://www.w3school.com.cn/js/index.asp
1.javascript 運算符
JavaScript 使用（=）復制運算符。
JavaScript 使用算數運算符（+ - * / % ++ --）來計算值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function suanshu(){
				//聲明變量
				var num1=10;
				var num2=3;
				
			document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);
			document.getElementById("h1").innerHTML=num1+"-"+num2+"="+(num1-num2);
			document.getElementById("h1").innerHTML=num1+"*"+num2+"="+(num1*num2);
			document.getElementById("h1").innerHTML=num1+"/"+num2+"="+(num1/num2);
			document.getElementById("h1").innerHTML=num1+"%"+num2+"="+(num1%num2);
			//++[自動加1]
			//變量++   【先用后加】
			//num1++；   //10
			//document.getElementById("h6").innerHTML=num1;   //11
			// ++變量  [先加后用]
		    //++num1;  //11
			//document.getElementById("h6").innerHTML=num1; //11
			// -- [自動減1]
			// 變量-- [先用后減]
			//num1-- ; //10
			//document.getElementById("h6").innerHTML=num1; //9
			//  -- 變量
			--num1;  // 9
			document.getElementById("h6").innerHTML=num1; //9

			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="測試算數運算符" onclick="suanshu()" /><br>
		<h1 id="h1"></h1>
		<h1 id="h2"></h1>
		<h1 id="h3"></h1>
		<h1 id="h4"></h1>
		<h1 id="h5"></h1>
		<h1 id="h6"></h1>
	</body>
</html>

JavaScript 使用（> < == >= <= !=）比較運算符運算符。
比較運算符的結果一定是布爾值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript中的比較運算符</title>
		<script>
			//測試比較運算符的函數
			function test1(){
				//定義參與運算的變量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML=num1+">"+num2+" = "+(num1>num2);//true
				document.getElementById("h2").innerHTML=num1+"<"+num2+" = "+(num1<num2);//false
				document.getElementById("h3").innerHTML=num1+">="+num2+" = "+(num1>=num2);//true
				document.getElementById("h4").innerHTML=num1+"<="+num2+" = "+(num1<=num2);//false
				document.getElementById("h5").innerHTML=num1+"=="+num2+" = "+(num1==num2);//false
				document.getElementById("h6").innerHTML=num1+"!="+num2+" = "+(num1!=num2);//true
			}
		</script>
	</head>
	<body>
		<input type="button" value="測試比較運算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
		<h2 id="h4"></h2>
		<h2 id="h5"></h2>
		<h2 id="h6"></h2>
	</body>
</html>

JavaScript 使用(|| && ! )邏輯運算符運算符。
|| [邏輯或] ?true || false --> true
?????false || true --> true
?????true || true --> true
?????false || false --> false
?????只要有true結果就是true
&& [邏輯與]? true && false --> false
????&emspfalse && true --> false
????&emspfalse && false --> false
????&emsptrue && true --> true
????&emsp只要有false結果就是false

![取反] ?!ture–>false
????!false->true
邏輯運算符的運算值和運算結果一定是布爾值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			測試邏輯運算符
			function test1(){
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML="("+num1+">"+num2+") || ("+num1+"<"+num2+")=="+((num1>num2)||(num1<num2));
				//(10>3) || (10<3)== true
				document.getElementById("h2").innerHTML="("+num1+">"+num2+") && ("+num1+"<"+num2+")=="+((num1>num2)&&(num1<num2));
				//(10>3) && (10<3)== false  
				document.getElementById("h3").innerHTML="!(("+num1+">"+num2+") && ("+num1+"<"+num2+"))=="+!((num1>num2)&&(num1<num2));
				//!((10>3) && (10<3))== true  
			}
		</script>
	</head>
	<body>
		<input type="button"  value="測試邏輯運算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
	</body>
</html>

比較與邏輯運算符通常都是用來做判斷的。

JavaScript 數據類型
字符串值，數值，布爾值，數組，對象。
字符串值–“hello”
var zf=”hello”;
數值[整數和小數]—123 ， 12.5
var sz=123; var sz=12.5;
布爾值–[true/false]
var be=true; var be=false;
數組–可以保存一組值
var array=[“hello”,123,12.5,true,false];
對象
var student={stuid:1001,stuname:”zhangsan”,stuage:23,stuaddress:”西安”};
student.stuid===>1001
JavaScript 函數
JavaScript 函數是被設計為執行特定任務的代碼塊【{}】。
實例:
function myFunction(p1, p2) {
return p1 * p2; // 該函數返回 p1 和 p2 的乘積
}
JavaScript 函數通過 function 關鍵詞進行定義.
myFunction–函數名稱
“()”—參數列表【可以沒有參數,也可以有多個】
參數接收函數之外的數據值進入本函數進行運算【找幫手】
p1, p2—參數【變量名稱，不需要定義】接收函數之外的數據值進入本函數
{}—代碼塊
return — 返回函數的執行結果
函數沒有執行結果，不需要出現return xxxx
函數有執行結果,需要在最后出現return xxxxx
有沒有名稱
有名稱的函數
function test1(){
alert(“有名稱的函數”);
}
沒有名稱的函數【匿名函數】
window.onload=function(){
alert(“匿名函數”);}
有沒有參數
有參數的函數
function test2(info){
alert(info);
}
在使用的時候需要傳遞進入參數值
沒有參數的函數
function test1(){
alert(“沒有參數的函數”);
}
有沒有結果
有結果的函數
function test3(){
return “有結果”;
}
沒有結果的函數
function test3(){

}
例如：`

function test4(num1,num2){
			var res=num1*num2;
			return res;
		}
function test5(){
			var res=test4(100,123);
			alert("res=="+res);
		}

`4.JavaScript 對象
對象也是變量。但是對象包含很多值。
對象包含很多值1.屬性 2.方法
對象就是用來描述具有相同屬性和方法的變量。
屬性----變量【var】【屬性名稱:屬性值】
方法----函數【function】【方法名稱:function(){}】
格式:
var 對象名稱={屬性:屬性值,…,
方法名稱:函數}；
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>創建并使用對象</title>
		<script>
			//創建一個汽車對象
			var car={
				carName:"bmw",
				carcolor:"紅色",
				start:function(){
					alert("啟動--"+car.carcolor+","+car.carName+"汽車");
				},
				stop:function(){
					alert(this.carcolor+","+this.carName+"汽車停止了");
				}
			};
		function startcar(){
			car.carName="奔馳";
			car.start();
		}
		function stopcar(){
			car.carcolor="藍色";
			car.stop();
		}
		</script>
	</head>
	<body>
		<input type="button" value="啟動" onclick="startcar();"/><br>
		<input type="button" value="停車" onclick="stopcar();"/><br>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//創建一個學生對象
			var student={
				stuid:1001,
				stuname:"zhangsan",
				stuage:23,
				stuaddress:"西安",
				getInfo:function(){
					return student.stuid+"-"+student.stuname;
				},
				getInfo2:function(id,name){
					student.stuid=id;
					student.stuname=name;
					return student.stuid+"-"+student.stuname;
				}
			};
			
			var person={
				personname:"wangwu",
				mystudent:{
					stuid:1001,
					stuname:"zhangsan",
					getInfo:function(){
						return person.mystudent.stuid+"-"+person.mystudent.stuname;
					}
				}
			}
			
			function  test1(){
				var info1=student.getInfo();
				alert(info1);
			}
			
			function  test2(){
				var info2=student.getInfo2(1002,"lisi");
				alert(info2);
			}
			
			function  test3(){
				var name=person.personname;
				//person.mystudent.stuid=1002;
				//person.mystudent.stuname="lisi";
				var info=person.mystudent.getInfo();
				alert(name+"----"+info);
			}
		</script>
	</head>
	<body>
		<input type="button" value="測試學生對象的getInfo方法" onclick="test1();"/>
		<input type="button" value="測試學生對象的getInfo2方法" onclick="test2();"/>
		<input type="button" value="測試Person對象" onclick="test3();"/>
	</body>
</html>

請將下面的汽車做成一個對象

在線咨詢

上一篇：大報文問題實戰
下一篇：推薦50個超實用的 Chrome 擴展，建議收藏

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商