一步一個腳印的教你使用eclispe開發web項目

.打開eclipse后，新建一個web項目：

new -- dynamic web project

點擊Finish，新建項目完成！

調整字體大小：

window -- preferences

選擇basic，

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 <display-name>QQ</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>

welcome-file-list表示項目的歡迎頁。

2. 引入Tomcat服務器

在eclipse下方，有一個servers視圖

如果沒有，就去window選項卡中，點擊 show view

如果還是沒有servers，就點擊other：

添加一個服務器：

找到Tomcat7.0版本：

如果是第一次添加Tomcat，則需要去引入一下：

選擇你想要發布的web項目：

3. 在WebContent目錄新建一個歡迎頁 index.jsp

右鍵 WebContent , new , JSP File

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>

可以看到JSP頁面默認的編碼格式為ISO-8859-1，這種編碼不支持中文！所以，我們需要把它改為UTF-8

<%@ 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>
</body>
</html>

發現有一個報錯信息：

因為還缺少web開發所需要的包，右鍵項目，Build Path -- Configure Build Path

現在，我們給index.jsp寫上一句話：

<%@ 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 web！</h1>
 
</body>
</html>

4. 啟動項目

運行成功！

然后，查看該Tomcat的端口號：

發現端口號為8080。

4. 訪問歡迎頁面

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

么是HTML / HTM文件？他們相差一個字母有什么區別嗎，如何查看或編輯源代碼以及如何轉換成其他格式，例如DOCX，PDF，JPG 等，針對這些問題編程獅W3Cschool整理以下資料希望能對你有所幫助：

什么是HTM或HTML文件？

HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。

由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本引用（例如本文中的配圖）。

HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。

HTM與HTML的區別

HTM 與 HTML 沒有本質意義的區別，只是為了滿足 DOS 僅能識別 8+3 的文件名而已，因為一些老的系統 (win32) 不能識別四位文件名，所以某些網頁服務器要求 index.html 最后一個 l 不能省略。MSIE 能自動識別和打開這些文件，但編寫網頁地址的時候必須是完全對應的，也就是說 index.htm 和 index.html 是兩個不同的文件，對應著不同的地址。值得一提的是 UNIX 系統中對大小寫敏感，不吻合的話就可能報沒有文件或者找不到文件。

如何打開HTM或HTML文件？

任何 Web 瀏覽器，例如 Edge，Firefox，Chrome，Opera，IE，360 安全瀏覽器等，都可以打開并正確顯示 HTM 和 HTML 文件。換句話說，在瀏覽器中打開這些文件并“解碼（decode）” HTM 或 HTML 文件使其能正確顯示。

現在有很多簡化編輯和創建 HTM / HTML 文件的工具。一些著名的免費 HTML 編輯器包括 Eclipse ，Komodo Edit 和 Bluefish 。另一個流行的具有許多高級功能的 HTM / HTML 編輯器是 Adobe Dreamweaver ，不過它是收費的。

雖然 Windows 系統自帶的記事本等簡單的文本編輯器的功能不如專用的 HTM 編輯器那么豐富，但是對 HTM 或 HTML 文件進行簡單編輯修改還是可以的。不過，W3Cschool還是建議大家使用專用的編輯器，如 WebStorm、VS Code 等，它具更多專業功能。

這是一個非常簡單的 HTML 頁面以文本形式顯示的示例：

源碼：

<!doctype html>
<html>

    
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件？ - 編程獅(w3cschool.cn)</title>
</head>


<body>
    <h1>什么是HTM或HTML文件？</h1>
    <p>HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。</p>
    <p>由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本*引用*（例如本文中的配圖）。</p>
    <p>HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。</p>   
</body>

    
</html>

當 Web 瀏覽器呈現信息時，HTML 文件的源代碼被“轉換”為真實的網頁（盡管源代碼已很精簡了）。

如何轉換HTML和HTM文件？

HTM 文件以特定的語法（規則）構成，以使其中的代碼和文本在瀏覽器中打開時能夠正確顯示。因此，將 HTM / HTML 文件轉換為另一種格式可能會丟失頁面上的所有功能。

如果你想要做的是將一個 HTM / HTML 文件轉換為方便離線查看的文件，這時圖片或 PDF 格式會方便很多。

在 Chrome 中，鼠標右鍵單擊網頁，出現的選項菜單中進入 “打印(P)...”(快捷鍵：CTRL + P) ，在打印選項中選擇另存為 PDF，以將窗口中的頁面轉換為 PDF 文件。Chrome 瀏覽器的擴展功能也稱為“全屏截屏”，可將 Chrome 瀏覽器中所有打開的 HTM / HTML 文件轉換為 PNG 文件。

其他瀏覽器具有類似的功能，例如 Firefox 的 “另存為 PDF” 加載項。

您也可以使用專門用于 HTM / HTML 進行圖像文件轉換的網站，例如iWeb2Shot 或Web-capture 。

一個免費的文件轉換器可以用來轉換并保存 HTM / HTML 文件到您的計算機。如 FileZigZag 是一個免費的文檔轉換器網站，可將 HTM 轉換為RTF，EPS，CSV，PDF 和許多其他格式。

HTM / HTML 文件不能轉換為文本文件格式以外的任何格式。例如，HTML 文件永遠不能轉換為 MP3 音頻文件。

文件打不開？

HTML / HTM 文件應該很容易打開，因為它們只是任何 Web 瀏覽器都可以查看的文本文件。如果您的文件沒有從上面建議的任何程序打開，則很有可能正在打開的這個文件并非超文本標記語言文件。

某些文件格式使用的文件擴展名與 HTML / HTM 非常相似，但實際上并非相同。一個主要的示例是用于壓縮 HTML 電子書文件的 HTMLZ 文件擴展名。有 HTML 文件在內的 HTMLZ 文件，但整個包的格式為 ZIP，不會在 Web 瀏覽器或文本編輯器打開。

在此示例中，您需要特定的 HTMLZ 文件查看器，例如Caliber 。或者，由于此文件格式實際上是存檔，因此您可以使用 7-Zip 之類的文件解壓縮器將其打開，然后您可以使用網絡瀏覽器或上述任何其他 HTML 查看器/編輯器打開任何單獨的 HTML 文件。

TMLANGUAGE 是另一個可能與 HTML / HTM 文件混淆的文件擴展名。這些實際上是TextMate 用于 macOS 的 TextMate 語言語法文件。

以上就是編程獅W3Cschool為你整理的關于《什么是HTM或HTML文件？如何打開、編輯和轉換HTM和HTML文件？》的全部內容，現希望可以幫到你~

這個瞬息萬變的時代，創新是推動進步的源動力。而Eclipse IDE 2023，正是您實現創新夢想的強大工具。作為全球知名的Java集成開發環境（IDE），Eclipse IDE不僅擁有C/C++、JavaScript/TypeScript、PHP等眾多優秀IDE，更在默認包中輕松實現多語言支持和功能組合。Eclipse Marketplace為您提供了無限的定制和擴展可能，讓您的創意無處不在。

無論身處何地，Eclipse IDE都能陪伴在您身邊。通過瀏覽器，您可以使用托管工作區進行云端開發；或者安裝桌面打包，體驗專為Java、JavaScript、CSS和HTML打造的現代化開發環境。Eclipse IDE 2023，為您的快速創新提供強大支持。

【平臺升級，創新加速】——Eclipse IDE 2023

剪貼板支持HTML格式，讓文本處理更加便捷；
Java執行框架和JobManager API優化，提升顯示效果；
豐富的平臺插件，助您輕松添加新功能；
Maven工具鏈增強，內置Maven注解處理器支持，全面兼容各類核心Maven插件；
免費開源，遵循Eclipse Public License 2.0，讓您無拘無束地發揮創意。

【Java支持，技術領先】——Eclipse IDE 2023

支持Java 19，為您提供最先進的開發工具；
XML和Web工具鏈升級，RELAX NG驗證和編輯支持，TypeScript 4.9等最新Web語言和框架一應俱全。

【無限可能，創造未來】——Eclipse IDE 2023

打造下一代開發者工具，釋放想象力，構建服務和工具，組裝成專屬于您的IDE或包；
提供多種平臺，打造桌面工具插件、云IDE分布式服務以及瀏覽器界面；
將您的插件發布至Eclipse Marketplace，與千萬開發者共享創新成果。

【一站式解決方案，助力開發】——Eclipse IDE 2023

一鍵安裝豐富的工具集，包括GUI構建器、模型設計、圖表報告、測試等；
使用Eclipse Marketplace Client，從龐大的生態系統中尋找、安裝并投票支持新的插件；
通過Plug-in Development Environment（PDE）編寫自己的插件，或混合功能，打造屬于您的夢幻Web IDE。

Eclipse IDE 2023，讓您的創新之翼翱翔在編程之巔！

在線咨詢

上一篇：杭州Web前端前景怎么樣？現在參加Web前端培訓還來
下一篇：EAdmin - 基于js和原生html的純粹后臺開

您的項目需求

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