Java學(xué)習(xí)—用HTML做一個牛逼的頁面

習(xí)是一件很痛苦的事情，很多人們總問別人有沒有捷徑，問學(xué)習(xí)路線，好像問完了就學(xué)會了一樣。其實我想說是:要是你真的想做一件事，那么就立刻去做好了，因為時間是不會等你的，在你猶豫的時候，時間早就流走了。所以與其猶豫不決不如理科開始行！

有的人說學(xué)Java要先學(xué)HTML，那就一起來看HTML是什么吧！

首先HTML 并不是一種編程語言，而是一種標(biāo)記語超文本標(biāo)記語言，負(fù)責(zé)展示網(wǎng)站的外觀，用來控制各種屬性的展示，要想做JavaWeb開發(fā)，HTML是必須學(xué)會的基礎(chǔ)。

既然要學(xué)習(xí)開發(fā)，那么必須要有工具呀！

EditPlus 3

嗯！就先來認(rèn)識一下HTML的一些標(biāo)簽

其中的主要的標(biāo)簽如下

<html>-------------------開始html文檔

<head>--------------------開始文檔頭部

<title>---------------------開始文檔標(biāo)題

This is first page

</title>---------------------結(jié)束文檔標(biāo)題

</head>----------------------結(jié)束文檔頭部

<body>-----------------------開始文檔體

Hello World.

</body>------------------------結(jié)束文檔體

</html>------------------------結(jié)束html文檔

新建 HTML 頁面就會出現(xiàn)代碼如下（綠色文字為注釋）:

一個頁面的整體結(jié)構(gòu)就是：

所有的內(nèi)容都在<html></html>這兩個標(biāo)簽內(nèi)部。然后分為 <head> </head>頭部和 <body> </body>身體兩部分。

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。

絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

<body>標(biāo)簽包含文檔的所有內(nèi)容

（比如文本、超鏈接、圖像、表格和列表等等。）

<title> 定義文檔的標(biāo)題。

瀏覽器會以特殊的方式來使用標(biāo)題，并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。同樣，當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱。

下面的就算是一個簡單的網(wǎng)頁了。

讓我們保存執(zhí)行一下看看。

hello world！Java學(xué)習(xí)我來了！

段時間博主也接觸了一些事情，感覺有必要專門把JSP的基礎(chǔ)拿出來說明一下，因為還是很多人和我說看不懂。

其實寫博文真的是挺有挑戰(zhàn)性的一件事情，如何把知識點用通俗易懂的語言來表述出來呢?這真的是不太容易的。

首先，寫教程需要大量的時間成本，我之前學(xué)習(xí)JavaWeb的時候，網(wǎng)上搜到的大部分博客，真心話我看不懂。因為那時候的水平太菜了，看視頻又嫌太慢。

當(dāng)時我還喜歡抱怨，說網(wǎng)上那些大牛明明水平很高，可為什么都不肯用大白話把技術(shù)點給講出來呢？當(dāng)時我記得，遇到問題上網(wǎng)隨便一搜，看到的大部分文章，都是代碼一貼就完了。最多就是在文章最后寫一行字說明一下。

這對當(dāng)時小白的我真的是心累，而且，我往往看了很多博客，發(fā)現(xiàn)里面的代碼都是一樣的。這個時候就挺郁悶了。

博客精簡一些自然有精簡的好處，可是那主要是對于有好幾年工作經(jīng)驗的程序員而言的，對新手來說，無疑增加了閱讀的難度。

那時候我總想著，要是有一個真正意義上的，完全面向初學(xué)者的博客系列就好了，而不是代碼一貼，你們自己去意會吧。

好在博主終于度過了那個難熬的階段，然后某一天發(fā)現(xiàn)了簡書這么好的互聯(lián)網(wǎng)產(chǎn)品，憑著一點激情和沖動，還有一絲絲天真，開始寫我的第一篇博客。

寫了之后才發(fā)現(xiàn)，寫教程不難，可是要寫出那種通俗易懂的教程是非常耗時間的，有的時候，我感覺知識點就應(yīng)該是這樣的，可是為了讓新人容易理解，我不得不花時間去組織語言和編寫案例。

好幾次我都想退出簡書不寫了，因為寫教程真的很累。可是看到自己寫的文章閱讀量越來越多，而且大部分看我文章的人都是處于迷茫期的朋友。

我仿佛看到了當(dāng)年，剛走出校門的我自己。

于是，我決定繼續(xù)寫下去，只是更新的話，不可能像之前有段時間那樣，仿佛打了雞血似地一天一更了。不過我還是盡量保證每周一到兩更，當(dāng)然，斷更也是有可能的。（額，我感覺自己有點輕微的潔癖，我竟然總是忍不住要區(qū)分 的，地，得 ）

當(dāng)然，不管怎樣，那個文章發(fā)布系統(tǒng)我肯定會堅持寫完的，畢竟做出了承諾。

好的，本系列對JSP，以及如何建立JavaWeb工程做一個講解，如果你在收看《文章發(fā)布系統(tǒng)》系列，而且基礎(chǔ)相對有些薄弱的話，也許這個系列可以幫到你。

這也算是《文章發(fā)布系統(tǒng)》系列的一個小分支，我會盡快寫完，為什么要寫呢？因為我發(fā)覺看我文章的大部分人還是初學(xué)者，有的甚至連web項目是啥都不知道，于是，我感覺有必要把基礎(chǔ)的東西做一個總結(jié)。

1. 實驗環(huán)境準(zhǔn)備

（假設(shè)你已經(jīng)裝好了jdk，如果不會安裝jdk，請參考這篇文章）

1.1 安裝一個eclipse或者M(jìn)yEclipse（本文以eclipse為例），其實所謂的安裝就是網(wǎng)上去下載一個eclipse，然后解壓一下就好了。

1.2安裝tomcat，網(wǎng)上下載一個，然后解壓一下。我這次使用的tomcat容器配的是8080端口。

1.3 將tomcat配置到eclipse中。具體步驟為：Window -- Preferences -- Server -- Runtime Environment -- Add 將tomcat解壓后的路徑配置上去就行了。

本文假設(shè)讀者已經(jīng)對tomcat，eclipse有一定的了解。

2. 新建web項目

首先，一言不合就打開eclipse

我們新建一個項目，F(xiàn)ile -- new -- Dynamic Web Project。

項目名稱是web，點擊Next

build\classes是默認(rèn)的編譯目錄，還是點擊Next

好的，最后點擊Finish，一個web項目就建立好了。

目錄結(jié)構(gòu)

2.啥叫JavaWeb項目，它能干嘛？

JavaWeb項目就是一個應(yīng)用程序，你不要以為它有多么神秘。你每天打開的QQ就一個應(yīng)用程序，你在手機上打開的微信，百度地圖等等，這些都是應(yīng)用程序。

不同的是，QQ是一個本地客戶端程序，它需要你在自己的電腦上安裝一個客戶端，然后你打開QQ，可以登錄，聊天。

QQ肯定也分客戶端和服務(wù)端，我們電腦上裝的就是客戶端，你要知道的一點是，我們發(fā)送消息，發(fā)送到哪里去了呢？

沒錯，肯定是發(fā)送到QQ的服務(wù)器上了，那里保存著我們的所有數(shù)據(jù)。

想想也不可能在本地，因為我們在電腦上發(fā)送的消息，在手機QQ上不是也能看到嗎？這就說明，肯定是上傳到它的服務(wù)器然后保存下來了。

而Web項目是什么呢？

它也是一個應(yīng)用程序，只不過它的客戶端是運行在瀏覽器上的。

我們打開瀏覽器，訪問一個地址，比如 https://mp.toutiao.com

這個就是我們的訪問路徑，我們通過這個URL向簡書的服務(wù)器提交請求，然后服務(wù)器進(jìn)行處理，給你回應(yīng)。

接下來，我們就看到出來一個網(wǎng)頁。

我們在這個網(wǎng)頁上可以寫文章，點贊，收藏，等等。

我們的每一步操作，其實都和服務(wù)器做了一個交互。

比如一個登錄功能，當(dāng)我們鼠標(biāo)點擊那個登錄按鈕，瀏覽器就向服務(wù)器提交了一個請求，服務(wù)器進(jìn)行處理，然后操作數(shù)據(jù)庫。最終，它會得出一個結(jié)果，就是說，到底能不能讓你登錄，總會有個說法。

如果你密碼寫錯了，它可能就會得出一個用戶名或密碼錯誤的結(jié)論。然后，這個信息會從服務(wù)器返回到前臺，前臺就是瀏覽器。

所謂的前臺就是你的瀏覽器，沒什么神秘的。

前臺接受到后臺傳過來的信息后，進(jìn)行一些處理，然后給你個提示，比如，告訴你用戶名或密碼錯誤。

這就是一個完整的交互過程。

現(xiàn)在隨著網(wǎng)速越來越好，瀏覽器的性能越來越強大，我想web肯定是未來的大趨勢。畢竟，誰都不希望在電腦上安裝一大堆客戶端吧。

只用一個瀏覽器多好。

有了web，我只需要有一個瀏覽器，然后就能通過互聯(lián)網(wǎng)獲取我想要的資源了。這樣不是很美妙嗎？

近幾年H5非常流行，尤其是移動端，因為手機瀏覽器基本上都支持css3。一樣的道理，我們肯定也不希望在手機上安裝一大堆應(yīng)用，卡都卡死了，如果能直接訪問一個網(wǎng)頁，就能獲得我想要的服務(wù)就好了。

而且現(xiàn)在WIFI也普遍了，如果以后流量能沒有限制，那么APP的熱度很可能會逐漸被web取代。

當(dāng)然，現(xiàn)在是不太可能的，畢竟訪問網(wǎng)頁要流量啊，而我在手機上安裝了APP，就好像電腦的QQ一樣，大部分資源文件就在我本地，我不需要每次都去聯(lián)網(wǎng)下載。比如圖片，app就沒事，因為就在本地，可是如果用web，我每次訪問那個網(wǎng)頁，就需要把圖片重新下載一遍。這樣不是很浪費流量嗎？

3. 手工搭建web項目

現(xiàn)在，為了說明服務(wù)器和web項目的概念，我們先不用eclipse，來手工搭建一個web項目。

服務(wù)器，正常情況下就是一臺配置高一點的電腦，除非是那種大型的專用服務(wù)器。

一般來說，所謂的服務(wù)器，就是電腦。

比如我現(xiàn)在有一臺電腦，給他裝了一個linux系統(tǒng)或者windos系統(tǒng)，然后我說，好了，從今以后，這就是服務(wù)器了。現(xiàn)在服務(wù)器一般都是用linux系統(tǒng)的。

那么tomcat又是什么？

tomcat其實也是一個應(yīng)用程序，你網(wǎng)上下載的tomcat往往是一個壓縮包，然后我們解壓以后就相當(dāng)于安裝好了。

可以這么理解：

服務(wù)器就是一臺電腦，而tomcat是一個容器，專門存放web項目的容器。

以下我都將tomcat稱為tomcat容器。

我們看到在tomcat容器根目錄下，有一個webapps文件夾

里面是這樣的：

好的，現(xiàn)在我要發(fā)布一個項目了，我只需要把一個已經(jīng)做好的web項目往里面一丟就行了。

除了webapps，我們還發(fā)現(xiàn)一個bin目錄。一般來說，可執(zhí)行的文件都放在bin目錄下。

打開bin，找到一個startup.bat文件。這就是啟動tomcat的東西，雙擊它，tomcat就被啟動了。

然后，瀏覽器可以訪問tomcat里面的項目。

現(xiàn)在我們來手工搭建一個web項目，首先，在webapps目錄下新建一個文件夾，是的，就是文件夾，不管你項目是什么，肯定還是放在文件夾里面的。

項目名稱就叫做webapp。

打開webapp，根據(jù)web項目的規(guī)范，我們需要有一個WEB-INF文件夾。

然后，在WEB-INF文件夾里面，必須要有一個web.xml文件。

xml文件，就是一個描述性的文件，我現(xiàn)在的觀點如下：

XML = JavaBean = Json = HashMap

它無非就是描述一些東西，保存一些數(shù)據(jù)而已。

好的，我們在里面新建一個web.xml。這個文件非常重要，正因為它的存在，tomcat容器才會知道這個文件夾里面竟然是一個web項目。

否則，tomcat容器是不知道這個web項目的，它只會將myapp文件夾看做是一個文件夾而已。

我們用記事本打開web.xml，將以下代碼拷貝進(jìn)去。

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 <display-name>web</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
</web-app>

<?xml version="1.0" encoding="UTF-8"?>表示這是一個1.0版本的XML文件，編碼為UTF-8。

<web-app></web-app>就是這個XML文件的一個根節(jié)點，就是告訴你，我這個xml文件里面，有一個東西叫做web-app。

XML的一個作用就是配置文件，web.xml本身就是一個配置文件。在web項目中，我們應(yīng)用xml最多的也就是配置一些參數(shù)。

配置參數(shù)，就是給屬性賦值嘛，沒什么神秘的。

包括我們學(xué)習(xí)JavaSE，歸根到底，一直在做的一件事就是new對象，然后調(diào)用方法，調(diào)用方法的目的一方面是做一些事情，另一方面不還是給屬性賦值嘛。

你可以把web.xml看做是一個java類，類名叫做 webApp。它里面有兩個屬性，分別是display-name和welcome-file-list。

display-name是發(fā)布名稱，也就是項目的名字。

welcome-file-list 是歡迎頁面，就是說，當(dāng)你在瀏覽器直接訪問這個myapp項目，默認(rèn)跳轉(zhuǎn)的頁面。

想象一下，應(yīng)該會變得非常好理解。

XML就是一個數(shù)據(jù)描述語言，我們通過web.xml描述這個項目的構(gòu)成和配置。

好的，接下來，我們是不是要給他一個歡迎頁啊。嗯，我們在webapp目錄下添加一個簡單的歡迎頁，里面就打印一個HelloWorld。

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>Hello World!</h1>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

這是一條JSP的page指令，如果你用面向?qū)ο蟮乃季S來看待這個玩意，就是new了一個page對象，并且給它里面的language，contentType，charset，pageEncoding屬性分別賦了值。

language表示JSP頁面所用的語言，默認(rèn)是java，其實你寫不寫都沒有關(guān)系，因為目前來說JSP它只支持Java。

我們來試一下，現(xiàn)在我們把language屬性去掉。就變成了這樣：

<%@ page contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>

contentType="text/html; charset=UTF-8"：設(shè)置頁面的內(nèi)容是文本或者h(yuǎn)tml頁面，字符設(shè)置為UTT-8。

pageEncoding="UTF-8"：頁面編碼設(shè)置為UTF-8。

好的，現(xiàn)在我們在bin目錄，雙擊運行startup.bat

啟動完畢。

打開瀏覽器，在地址欄輸入http://localhost:8080/myapp/

回車

哇，是不是出來了。

太棒了。

這就是手工搭建一個web項目的過程。

只要你符合web項目的規(guī)范，包括文件夾的名字，文件的名字，就會被tomcat容器識別為一個web項目。

接下來，我們來寫服務(wù)器代碼。

在WEB-INF下面新建一個文件夾，名字叫做classes，這個也是規(guī)范，就叫這個名字，否則tomcat容器識別不了。

里面在創(chuàng)建一個java文件，名字就叫Hello吧

用記事本打開，將下面的代碼拷貝進(jìn)去。

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Hello extends HttpServlet {
 
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 doPost(request,response);
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 System.out.println("已經(jīng)進(jìn)入服務(wù)器...");
 }
}

這是一個比較簡單的HttpServlet 程序，說到servlet，他的意思就是服務(wù)器小程序。

原來，在英文中，但凡是let結(jié)尾的單詞，都有微小的意思。比如servlet，server是服務(wù)器，let結(jié)尾，那么就是服務(wù)器小程序。

servlet是Server Applet的縮寫，我們再來看Applet，app是應(yīng)用程序，又是let結(jié)尾，所以應(yīng)該就是小的應(yīng)用程序。

這個就是所謂的英文詞根，也是學(xué)英語的一個竅門。類似的例子還有很多，比如d開頭的單詞，大部分都有往下，分開，分散的意思。反正就是有一種往下，或者分發(fā)出去的韻味。

為了驗證這個事情，我們打開有道詞典隨便找?guī)讉€看看。

**distribution **

哦，對的，分配，配送，分發(fā)。這不就是有分散，分出去的韻味嗎？

determine

確定，下決心。這不就是把什么什么東西定下來，定下來，不也是往下嗎？

所以，得出一個結(jié)論，d開頭的單詞，而且，第二個字母必須是元音字母，比如de，di等。那么，這一類單詞的情感色彩就有一種往下，或者分發(fā)出去的韻味。

再來說說servlet，let結(jié)尾都代表這個單詞是一個小型的東西，比如

piglet 小豬

starlet 小星星

再比如，psy開頭的單詞，情感色彩就是偏向于精神和心理學(xué)方面的，

Paste_Image.png

psychology 心理學(xué)

還有

這下子應(yīng)該比較好理解了吧，所以它為什么叫servlet，也是有原因的。

繼續(xù)，我們用命令行的方式將java文件編譯成class文件。

在編譯之前，我們先去tomcat容器的lib目錄找一個jar：

找到servlet-api.jar,復(fù)制一份，拷貝到classes目錄下。

然后，我們在該classes目錄下，按住shift，鼠標(biāo)右鍵，選擇在此處打開命令行窗口。

輸入javac -classpath servlet-api.jar Hello.java

class文件就出來了

再次打開web.xml，我們還需要把這個servlet配上去，不然tomcat怎么知道這個servlet需要加入我們的web項目呢？

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 <display-name>web</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
 <servlet-name>Hello</servlet-name>
 <servlet-class>Hello</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>Hello</servlet-name>
 <url-pattern>/hello</url-pattern>
 </servlet-mapping>
</web-app>

雙擊startup.bat，啟動tomcat容器

然后，在瀏覽器的地址欄輸入http://localhost:8080/myapp/hello

發(fā)現(xiàn)網(wǎng)頁上一片空白，回顧我們的servlet程序，按理說控制臺會打印一句話的

Paste_Image.png

看看控制臺：

果然如此。

你應(yīng)該也已經(jīng)發(fā)現(xiàn)了，我們手工搭建web項目的話，是不是很麻煩呀？所以，這也是為什么我們現(xiàn)在都用eclipse，或者M(jìn)yEclipse來開發(fā)項目了。

這些IDE工具就是為了解決手工編譯的麻煩而出現(xiàn)的。

擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個問題！

大家好！我是/小鄭搞碼事/的小鄭

今天和大家分享一下JS如何操作瀏覽器窗口。只講如何打開一個新窗口

先來看效果圖

上面這個圖界面效果就是我們要實現(xiàn)的。

我們常常需要創(chuàng)建一個新窗口，用來向用戶顯示額外的信息，同時又避免他們正在閱讀的信息消失。從實現(xiàn)方案上來看，盡管我們可以用HTML打開一個新的瀏覽器窗口，但是使用JavaScript可以對新窗口的內(nèi)容和特性進(jìn)行更多的控制。

接下來，我們看一下怎么實現(xiàn)的

一、定義窗口打開函數(shù)

定義一個打開新窗口的函數(shù)newWindow。如上面代碼所示，變量catWindow包含一個新的窗口對象，這個對象引用圖像文件icon.png，這個新窗口的名稱是catWin，必須設(shè)置名稱，因為我們以后可能希望在a或另一個腳本中引用這個窗口。新窗口的寬度是350像素，高度是260像素，位置是左邊400，上邊400。

二、寫一個調(diào)用函數(shù)

頁面中，包含一個onload事件處理程序，它調(diào)用newWinLinks函數(shù)，newWinLinks循環(huán)遍歷頁面上的a，檢查是否有任何a包含class屬性值newWin。如果有，就設(shè)置這個a元素的onclick事件處理程序，從而，當(dāng)點擊這個a時，調(diào)用newWindow函數(shù)。

總結(jié)一下

需要注意兩個地方：

1、newWindow中，在寬度和高度參數(shù)中的逗號之間不能有任何空格，如果有空格，那么腳本可能在某些瀏覽器中無效，總地來說，當(dāng)腳本出現(xiàn)錯誤，需要進(jìn)行高度時，要首先查找這樣的小問題。

2、比如向窗口中添加參數(shù)時，希望窗口具有工具欄，地址欄，滾動條

toolbar=yes,location=yes,scrollbars=yes

參數(shù)默認(rèn)是no，可以不填。當(dāng)然瀏覽器上表現(xiàn)也有不同，需要知道。

在線咨詢

上一篇：Native和H5的區(qū)別｜產(chǎn)品經(jīng)理面試第5篇
下一篇：盤點四個最好用的JavaScript語言IDE

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。