整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
我們來看看VS Code的一些擴(kuò)展，它們可以更好地編寫和編輯HTML(以及那些具有額外功能的HTML語言)。也許其中一些不吸引你，解決你沒有的問題，或者感覺比你需要的更混亂。沒關(guān)系，這些擴(kuò)展，我也只是喜歡一部分。
首先是Emmet，VS Code內(nèi)置了這個功能；這個功能很有用，你應(yīng)該知道他。
一級一級的div寫得太多，對不齊了怎么辦？
這個擴(kuò)展可以在標(biāo)簽結(jié)尾處加上“注釋”，
寫代碼要寫注釋，我喜歡在重要的注釋上加上todo或者!。這個擴(kuò)展可以賦予不同的注釋五顏六色，非常醒目。
代碼不同行之間不同的縮進(jìn)，五顏六色的彩虹帶來了直接的視覺幫助。當(dāng)我們在滾動代碼查看匹配標(biāo)簽時特別有用。
這個肯定好用，用過的都知道。國產(chǎn)
自定義標(biāo)簽是用戶定義的JSP語言元素。當(dāng)JSP頁面包含一個自定義標(biāo)簽時將被轉(zhuǎn)化為servlet，標(biāo)簽轉(zhuǎn)化為對被 稱為tag handler的對象的操作，即當(dāng)servlet執(zhí)行時Web container調(diào)用那些操作。
JSP標(biāo)簽擴(kuò)展可以讓你創(chuàng)建新的標(biāo)簽并且可以直接插入到一個JSP頁面。 JSP 2.0規(guī)范中引入Simple Tag Handlers來編寫這些自定義標(biāo)記。
你可以繼承SimpleTagSupport類并重寫的doTag()方法來開發(fā)一個最簡單的自定義標(biāo)簽。
創(chuàng)建"Hello"標(biāo)簽
接下來，我們想創(chuàng)建一個自定義標(biāo)簽叫作<ex:Hello>，標(biāo)簽格式為：
<ex:Hello />
要創(chuàng)建自定義的JSP標(biāo)簽，你首先必須創(chuàng)建處理標(biāo)簽的Java類。所以，讓我們創(chuàng)建一個HelloTag類，如下所示：
package com.runoob;
import javax.servlet.jsp.tagext.*;
import javax.servlet.jsp.*;
import java.io.*;
public class HelloTag extends SimpleTagSupport {
public void doTag() throws JspException, IOException {
JspWriter out=getJspContext().getOut();
out.println("Hello Custom Tag!");
}
}
以下代碼重寫了doTag()方法，方法中使用了getJspContext()方法來獲取當(dāng)前的JspContext對象，并將"Hello Custom Tag!"傳遞給JspWriter對象。
編譯以上類，并將其復(fù)制到環(huán)境變量CLASSPATH目錄中。最后創(chuàng)建如下標(biāo)簽庫：<Tomcat安裝目錄>webapps\ROOT\WEB-INF\custom.tld。
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>2.0</jsp-version>
<short-name>Example TLD</short-name>
<tag>
<name>Hello</name>
<tag-class>com.runoob.HelloTag</tag-class>
<body-content>empty</body-content>
</tag>
</taglib>
接下來，我們就可以在JSP文件中使用Hello標(biāo)簽：
<%@ taglib prefix="ex" uri="WEB-INF/custom.tld"%>
<html>
<head>
<title>A sample custom tag</title>
</head>
<body>
<ex:Hello/>
</body>
</html>
以上程序輸出結(jié)果為：
Hello Custom Tag!
訪問標(biāo)簽體
你可以像標(biāo)準(zhǔn)標(biāo)簽庫一樣在標(biāo)簽中包含消息內(nèi)容。如我們要在我們自定義的Hello中包含內(nèi)容，格式如下：
<ex:Hello>
This is message body
</ex:Hello>
我們可以修改標(biāo)簽處理類文件，代碼如下：
package com.runoob;
import javax.servlet.jsp.tagext.*;
import javax.servlet.jsp.*;
import java.io.*;
public class HelloTag extends SimpleTagSupport {
StringWriter sw=new StringWriter();
public void doTag()
throws JspException, IOException
{
getJspBody().invoke(sw);
getJspContext().getOut().println(sw.toString());
}
}
接下來我們需要修改TLD文件，如下所示：
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>2.0</jsp-version>
<short-name>Example TLD with Body</short-name>
<tag>
<name>Hello</name>
<tag-class>com.runoob.HelloTag</tag-class>
<body-content>scriptless</body-content>
</tag>
</taglib>
現(xiàn)在我們可以在JSP使用修改后的標(biāo)簽，如下所示:
<%@ taglib prefix="ex" uri="WEB-INF/custom.tld"%>
<html>
<head>
<title>A sample custom tag</title>
</head>
<body>
<ex:Hello>
This is message body
</ex:Hello>
</body>
</html>
以上程序輸出結(jié)果如下所示：
This is message body
自定義標(biāo)簽屬性
你可以在自定義標(biāo)準(zhǔn)中設(shè)置各種屬性，要接收屬性，值自定義標(biāo)簽類必須實現(xiàn)setter方法， JavaBean 中的setter方法如下所示：
package com.runoob;
import javax.servlet.jsp.tagext.*;
import javax.servlet.jsp.*;
import java.io.*;
public class HelloTag extends SimpleTagSupport {
private String message;
public void setMessage(String msg) {
this.message=msg;
}
StringWriter sw=new StringWriter();
public void doTag()
throws JspException, IOException
{
if (message !=null) {
/* 從屬性中使用消息 */
JspWriter out=getJspContext().getOut();
out.println( message );
}
else {
/* 從內(nèi)容體中使用消息 */
getJspBody().invoke(sw);
getJspContext().getOut().println(sw.toString());
}
}
}
屬性的名稱是"message"，所以setter方法是的setMessage()。現(xiàn)在讓我們在TLD文件中使用的<attribute>元素添加此屬性：
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>2.0</jsp-version>
<short-name>Example TLD with Body</short-name>
<tag>
<name>Hello</name>
<tag-class>com.runoob.HelloTag</tag-class>
<body-content>scriptless</body-content>
<attribute>
<name>message</name>
</attribute>
</tag>
</taglib>
現(xiàn)在我們就可以在JSP文件中使用message屬性了，如下所示：
<%@ taglib prefix="ex" uri="WEB-INF/custom.tld"%>
<html>
<head>
<title>A sample custom tag</title>
</head>
<body>
<ex:Hello message="This is custom tag" />
</body>
</html>
以上實例數(shù)據(jù)輸出結(jié)果為：
This is custom tag
你還可以包含以下屬性：
| 屬性 | 描述 |
|---|---|
| name | 定義屬性的名稱。每個標(biāo)簽的是屬性名稱必須是唯一的。 |
| required | 指定屬性是否是必須的或者可選的,如果設(shè)置為false為可選。 |
| rtexprvalue | 聲明在運行表達(dá)式時，標(biāo)簽屬性是否有效。 |
| type | 定義該屬性的Java類類型 。默認(rèn)指定為 String |
| description | 描述信息 |
| fragment | 如果聲明了該屬性,屬性值將被視為一個 JspFragment。 |
以下是指定相關(guān)的屬性實例：
.....
<attribute>
<name>attribute_name</name>
<required>false</required>
<type>java.util.Date</type>
<fragment>false</fragment>
</attribute>
.....
如果你使用了兩個屬性，修改TLD文件，如下所示：
.....
<attribute>
<name>attribute_name1</name>
<required>false</required>
<type>java.util.Boolean</type>
<fragment>false</fragment>
</attribute>
<attribute>
<name>attribute_name2</name>
<required>true</required>
<type>java.util.Date</type>
</attribute>
.....
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML 表格實例:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在線實例
表格
這個例子演示如何在 HTML 文檔中創(chuàng)建表格。
HTML 表格
表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML 表格和邊框?qū)傩?/p>
如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時這很有用，但是大多數(shù)時候，我們希望顯示邊框。
使用邊框?qū)傩詠盹@示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表頭
表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
更多實例
沒有邊框的表格
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
帶有標(biāo)題的表格
本例演示一個帶標(biāo)題 (caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內(nèi)的標(biāo)簽
本例演示如何顯示在不同的元素內(nèi)顯示元素。
單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 表格標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標(biāo)題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
