開發(fā)者指南如何在MyEclipse中編輯HTML或JSP文件？（一）

yEclipse官方最新版免費下載|Myeclipse漢化下載.MyEclipse-功能最全面的Java IDE. - MyEclipse官方中文網(wǎng)

如果您有HTML或JSP文件要編輯，這里將介紹如何編輯。查找以下信息：

編輯源代碼
大綱和屬性視圖
參數(shù)頁面

該功能在MyEclipse中是可用的。

一、HTML / JSP編輯器

要編輯HTML或JSP文件，請執(zhí)行以下操作當(dāng)中的一個：

雙擊HTML或JSP文件。
右鍵單擊HTML或JSP文件，并選擇Open。

HTML編輯器有以下模式：

源模式 — 源模式是HTML和JSP代碼的源代碼編輯器，它包括智能內(nèi)容輔助、行編號、彩色語法高亮顯示、格式操作、實時驗證、在輸入時標記有問題的源代碼以及代碼格式化。
設(shè)計模式 — 設(shè)計模式具有雙面板視圖，頂部面板為設(shè)計模式，底部面板為源模式。設(shè)計模式為所見即所得的可視化編輯模式，設(shè)計畫布允許選擇、復(fù)制、剪切、粘貼和使用拖放重新定位Web UI控件。此模式包括一個設(shè)計調(diào)色板，其中包含可以添加到設(shè)計畫布的UI Web控件。
預(yù)覽模式 — 預(yù)覽模式允許用戶快速查看頁面在瀏覽器中的外觀，預(yù)覽模式從設(shè)計模式加載當(dāng)前源代碼，即使編輯器內(nèi)容尚未保存。HTML源代碼以預(yù)覽模式呈現(xiàn)，并且“扎根”于資源所在的位置。如果HTML文檔中的圖像相對于HTML頁面的當(dāng)前位置，則圖像將在預(yù)覽中正確呈現(xiàn)。

打開文件時，默認模式是Design（設(shè)計），通過單擊編輯器底部的適當(dāng)選項卡來更改模式。

本文概述了使用源代碼編輯器編輯HTML時最重要的概念和特性。

二、編輯源代碼

用戶可以從源代碼模式或設(shè)計模式訪問源代碼，設(shè)計模式具有雙面板視圖，設(shè)計模式位于頂部面板，源模式位于底部面板。

直接編輯源代碼時，可以使用以下功能：

語法、顏色和高亮
智能代碼完成和內(nèi)容輔助
HTML驗證
源格式和清理
HTML模板
HTML片段

2.1 智能代碼完成和內(nèi)容輔助

在整個源代碼中，編輯器提供特定于內(nèi)容的代碼幫助。

Tag names（標記名稱）：Code assist根據(jù)當(dāng)前上下文提供可用HTML標記的列表。

Tag attributes（標記屬性）：代碼輔助提供了特定于正在編輯的標記屬性列表。

Attribute values（屬性值）：在適當(dāng)?shù)臅r候，代碼幫助會為您提供一個已知可能值的列表。

2.2 HTML驗證

有兩種類型的HTML驗證：“輸入時”和“資源更改”。

“輸入時”：當(dāng)對HTML文檔進行更改時，編輯器總是檢查HTML語法的有效性，就像Java編輯器一樣。

注意：這種類型的驗證錯誤和警告不會出現(xiàn)在Problems視圖中。

資源更改：當(dāng)資源被修改(保存、移動、復(fù)制或?qū)?時，資源構(gòu)建器將對資源執(zhí)行HTML驗證。

注意：您可以通過從菜單中選擇Window>Preferences，展開MyEclipse并選擇Validation來設(shè)置驗證參數(shù)。

2.3 源格式化和清理

要快速格式化源代碼，請右鍵單擊編輯器，并選擇Source>Format。格式化器不會在內(nèi)部修改HTML標記元素，它只調(diào)整HTML元素的縮進和間距。

使用Cleanup Document選項進行高級格式化和樣式調(diào)整，允許您更改標記名稱和屬性的大小寫，還有其他選項可以插入所需的標記和屬性。要使用此選項，請在編輯器中右鍵單擊并選擇Source>Cleanup Document，選擇Format source復(fù)選框，來將Format Document操作作為文檔清理的一部分。

dmin.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡歷設(shè)置</title>
</head>
<body>
<form action="index.jsp" method="get" >
<table>
<tr>
<td>姓名</td>
<td><input type="text" name="username"></td>
</tr>
</table>
<input	type="submit" name="submit" value="提交">
</form>
</body>
</html>

index.jsp

么是JSP

JSP全名為Java Server Pages，java服務(wù)器頁面。JSP是一種基于文本的程序，其特點就是HTML和Java代碼共同存在！

為什么需要JSP

JSP是為了簡化Servlet的工作出現(xiàn)的替代品，Servlet輸出HTML非常困難，JSP就是替代Servlet輸出HTML的。

簡單使用一下JSP

在idea下生成一個JSP，我們來看一下JSP長什么樣子

看起來就像一個HTML頁面，前面也說了：JSP的特點就是HTML和Java代碼共同存在
我們向瀏覽器輸出一句HelloWorld，至于<%%>這個東西，我先不解釋！

JSP的工作原理

在Tomcat博客中我提到過：Tomcat訪問任何的資源都是在訪問Servlet！，當(dāng)然了，JSP也不例外！JSP本身就是一種Servlet。為什么我說JSP本身就是一種Servlet呢？其實JSP在第一次被訪問的時候會被編譯為HttpJspPage類（該類是HttpServlet的一個子類）
剛才我簡單使用了一下JSP，它被編譯成了這么一個Servlet:

編譯過程是這樣子的：瀏覽器第一次請求1.jsp時，Tomcat會將1.jsp轉(zhuǎn)化成1_jsp.java這么一個類，并將該文件編譯成class文件。編譯完畢后再運行class文件來響應(yīng)瀏覽器的請求。
以后訪問1.jsp就不再重新編譯jsp文件了，直接調(diào)用class文件來響應(yīng)瀏覽器。當(dāng)然了，如果Tomcat檢測到JSP頁面改動了的話，會重新編譯的。
既然JSP是一個Servlet，那JSP頁面中的HTML排版標簽是怎么樣被發(fā)送到瀏覽器的？我們來看下上面1_jsp.java的源碼就知道了。原來就是用write()出去的罷了。說到底，JSP就是封裝了Servlet的java程序罷了。

有人可能也會問：JSP頁面的代碼服務(wù)器是怎么執(zhí)行的？再看回1_jsp.java文件，java代碼就直接在類中的service()中。

String s = "HelloWorda";
out.println(s);

JSP比Servlet更方便更簡單的一個重要原因就是：內(nèi)置了9個對象！內(nèi)置對象有：out、session、response、request、config、page、application、pageContext、exception，這幾個內(nèi)置對象不在這里講。現(xiàn)在先知道一下即可！

JSP生命周期

JSP也是Servlet，運行時只有一個實例，JSP初始化和銷毀時也會調(diào)用Servlet的init()和destroy()方法。另外，JSP還有自己初始化和銷毀的方法

JSP的語法

JSP代碼可以分為兩部分：

模板數(shù)據(jù)：就是HTML代碼
元素：JSP頁面中的java代碼、JSP指令、JSP標簽

JSP腳本

JSP的腳本就是JSP頁面中的java代碼，也叫做scriptlet。JSP的腳本必須使用<%%>括起來，不然會被當(dāng)成是模板數(shù)據(jù)的！
JSP腳本有三種方式：
<%%>【定義局部變量，編寫語句】
<%!%>【定義類或方法，但是沒人這樣用！】
<%=%>（也稱之為表達式輸出）【輸出各種類型的變量，int、double、String、Object等】
如果過多地使用<%%>會導(dǎo)致代碼混亂，JSP還提供了一種scriptlet標簽，使用此標簽和<%%>有相同的功能，只不過它更美觀了一些

<jsp:scriptlet>
 String s = "HelloWorld";
 out.println(s);
</jsp:scriptlet>

JSP注釋

<%--這是JSP注釋--%>
<%--%>
//這是java的當(dāng)行注釋
//
/*這是java的多行注釋*/
/**/

JSP指令

JSP指令用來聲明JSP頁面的相關(guān)屬性，例如編碼方式、文檔類型等等

JSP指令的語法：

<%@指令 屬性名="值" %>

page指令

我在idea生成的JSP頁面就有page指令了。

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

page指令常見屬性：
language="java"
extends="package.class"
import="{package.class | package.*}, …"
session="true | false"
buffer="none | 8kb | sizekb"
autoFlush="true | false"
isThreadSafe="true | false"
info="text"
errorPage="relative_url"
isErrorPage="true | false"
contentType="mimeType ;charset=characterSet " | "text/html ; charset=ISO-8859-1"
pageEncoding="characterSet | ISO-8859-1"
isELIgnored="true | false"
一般地，在eclipse或idea這些高級開發(fā)工具上開發(fā)，我們只需要在page指令中指定contentType="text/html;charset=UTF-8"，就不會出現(xiàn)中文亂碼問題！
當(dāng)然了contentType 不僅僅可以指定以text/html的方式顯示，還可以使用其他的形式顯示出來。在conf/web.xml文件中可以查詢出來

比如，我以doc形式顯示jsp的數(shù)據(jù)

<%@ page contentType="application/msword;charset=UTF-8" language="java" %>
<html>
<head>
 <title>簡單使用JSP</title>
</head>
<body>
 1111
</body>
</html>

我們上網(wǎng)的時候，如果我們操作不當(dāng)，或者服務(wù)器出錯了，頁面都是會出現(xiàn)友好提示的！這個也能通過page指令來實現(xiàn)跳轉(zhuǎn)到友好提示頁面上！
page指令errorPage=和isErrorPage這兩個屬性，下面我們來看一下怎么使用！
1.jsp出現(xiàn)了錯誤，通過page指令的errorPage屬性跳轉(zhuǎn)到error.jsp頁面上

<%@ page contentType="text/html;charset=UTF-8" language="java" errorPage="error.jsp" %>
<html>
<head>
 <title>該頁面出錯了！</title>
</head>
<body>
 <%--模擬頁面出錯了！！！--%>
 <%
 int result = 2 / 0;
 %>
 你好呀
</body>
</html>

error.jsp頁面要通過page指令的isErrorPage屬性設(shè)置頁面就是錯誤頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<html>
 <head>
 <title>友好提示頁面</title>
 </head>
 <body>
 服務(wù)器正忙著呢！
 </body>
</html>

下面是效果：

當(dāng)然了，細心的朋友可以發(fā)現(xiàn)地址欄是沒有變化的，所以屬于是服務(wù)器跳轉(zhuǎn)。以上的做法是單個頁面設(shè)置的，如果我會有很多錯誤（JSP多的情況下，錯誤就會多），單個設(shè)置太麻煩了！
我們可以在web.xml文件中全局設(shè)置錯誤頁，只要發(fā)生了404錯誤或者空指針異常的錯誤都會跳轉(zhuǎn)到error.jsp頁面上

<error-page>
 <error-code>404</error-code>
 <location>/error.jsp</location>
</error-page>
<error-page>
 <exception-type>java.lang.NullPointerException</exception-type>
 <location>/error.jsp</location>
</error-page>

隨便輸個資源進行，會發(fā)生發(fā)404錯誤的，跳轉(zhuǎn)到錯誤頁面。下面是效果：

include指令

在講解request對象的時候，我們曾經(jīng)使用過request.getRequestDispatcher(String url).include(request,response)來對頁頭和頁尾面進行包含
inclue指令也是做這樣的事情，我們來試驗一下吧！
這是頁頭

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
 <title>頁頭</title>
 </head>
 <body>
 我是頁頭
 <br>
 <br>
 <br>
 </body>
</html>

這是頁尾

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>頁尾</title>
</head>
<body>
我是頁尾
</body>
</html>

在1.jsp中把頁頭和頁尾包含進來

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>包含頁頭和頁尾進來</title>
</head>
<body>
<%@include file="head.jsp" %>
<%@include file="foot.jsp" %>
</body>
</html>

訪問1.jsp

include指令是靜態(tài)包含。靜態(tài)包含的意思就是：把文件的代碼內(nèi)容都包含進來，再編譯！，看一下jsp的源代碼就知道了！

jsp還提供另一種包含文件的方式：JSP行為---動態(tài)包含。jsp行為在下面會講到！

taglib指令

JSP支持標簽技術(shù)，要使用標簽技術(shù)就先得聲明標簽庫和標簽前綴。taglib指令就是用來指明JSP頁面內(nèi)使用標簽庫技術(shù)。
這里就不詳細說明了，等到學(xué)習(xí)JSP標簽的時候再使用吧！現(xiàn)在記住有這個指令即可。

JSP行為

JSP行為（JSP Actions）是一組JSP內(nèi)置的標簽，只書寫少量的標記代碼就能夠使用JSP提供豐富的功能，JSP行為是對常用的JSP功能的抽象和封裝。

為什么我不把它直接稱為JSP標簽?zāi)兀?strong>我把這些JSP內(nèi)置的標簽稱之為JSP行為，能夠和JSTL標簽區(qū)分開來。當(dāng)然了，你也可以把它稱之為JSP標簽，你不要搞混就行了。我個人喜歡把這些JSP內(nèi)置標簽稱之為JSP行為。

include行為

上面已經(jīng)提及到了，include指令是靜態(tài)包含，include行為是動態(tài)包含。其實include行為就是封裝了request.getRequestDispatcher(String url).include(request,response)
include行為語法是這個樣子的

 <jsp:include page=""/>

我們先來使用一下把，在1.jsp頁面中也將頁頭和頁尾包含進來。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>包含頁頭和頁尾進來</title>
</head>
<body>
 <jsp:include page="head.jsp"/>
 <jsp:include page="foot.jsp"/>
</body>
</html>

訪問1.jsp頁面看一下效果：

使用jsp行為來包含文件，jsp源文件是這樣子的：

jsp行為包含文件就是先編譯被包含的頁面，再將頁面的結(jié)果寫入到包含的頁面中（1.jsp)
當(dāng)然了，現(xiàn)在有靜態(tài)包含和動態(tài)包含，使用哪一個更好呢？答案是：動態(tài)包含。
動態(tài)包含可以向被包含的頁面?zhèn)鬟f參數(shù)（用處不大），并且是分別處理包含頁面的（將被包含頁面編譯后得出的結(jié)果再寫進包含頁面）【如果有相同名稱的參數(shù)，使用靜態(tài)包含就會報錯！】！
模擬一下場景吧，現(xiàn)在我的頭頁面有個名為s的字符串變量

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
 <title>頁頭</title>
 </head>
 <body>
 <%
 String s = "zhongfucheng";
 %>
 我是頁頭呀
 <br>
 <br>
 <br>
 </body>
</html>

我的頁尾也有個名為s的字符串變量

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>頁尾</title>
</head>
<body>
<%
 String s = "zhongfucheng";
%>
我是頁尾呀
</body>
</html>

現(xiàn)在我使用靜態(tài)包含看看會發(fā)生什么，出現(xiàn)異常了。

出現(xiàn)異常的原因很簡單，就是同一個文件中有兩個相同的變量s

使用動態(tài)包含就可以避免這種情況

param行為

當(dāng)使用和行為引入或?qū)⒄埱筠D(zhuǎn)發(fā)給其它資源時，可以使用行為向這個資源傳遞參數(shù)。

forward行為

在講解request對象的時候，我們使用request.getRequestDispatcher(String url).forward(request,response)進行跳轉(zhuǎn)。其實forward行為就是對其封裝！
我們來看一下forward的語法：

<jsp:forward page=""/>

好的，我們來使用一下吧。訪問1.jsp頁面就跳轉(zhuǎn)到head.jsp頁面中

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>訪問1.jsp就跳轉(zhuǎn)到head.jsp</title>
</head>
<body>
<jsp:forward page="head.jsp"/>
</body>
</html>

看一下效果

如果我要傳遞參數(shù)，就要在forward行為嵌套param行為
在跳轉(zhuǎn)到head.jsp時傳入?yún)?shù)username值為zhongfucheng

<jsp:forward page="head.jsp">
 <jsp:param name="username" value="zhongfucheng"/>
</jsp:forward>

在head.jsp頁面中獲取到傳遞過來的參數(shù)

<%
 String ss = request.getParameter("username");
%>
獲取到的參數(shù)是：
<%=ss%>

效果如下圖所示

directive行為

directive的中文意思就是指令。該行為就是替代指令<%@%>的語法的
相當(dāng)于<%@include file="" %>
相當(dāng)于<%@page %>
相當(dāng)于<%@taglib %>
我們來試一下能不能用的

<jsp:directive.include file="head.jsp"></jsp:directive.include>
<jsp:directive.include file="foot.jsp"></jsp:directive.include>

看下效果，正常可以包含頁面：

使用該指令可以讓JSP頁面更加美觀！
使用scriptlet行為替代<%%>是同樣一個道理

javaBean行為

JSP還提供了操作javaBean對象的行為，在這里就不詳細說明了，后面會講到的！現(xiàn)在記住JSP提供了javaBean行為來操作簡單類即可！

<jsp:useBean id=""/>
<jsp:setProperty name="" property=""/>
<jsp:getProperty name="" property=""/>

文章來源：https://dwz.cn/OtXvyvh3
作者：Java3y

在線咨詢

上一篇：「前端騷操作」移動端H5頁面上傳圖片或多張圖片
下一篇：如何自學(xué)HTML

您的項目需求

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

整合營銷服務(wù)商