VS Code写HTML常用扩展推荐

我们来看看VS Code的一些扩展，它们可以更好地编写和编辑HTML(以及那些具有额外功能的HTML语言)。也许其中一些不吸引你，解决你没有的问题，或者感觉比你需要的更混乱。没关系，这些扩展，我也只是喜欢一部分。

首先是Emmet，VS Code内置了这个功能；这个功能很有用，你应该知道他。

HTML End Tag Labels

一级一级的div写得太多，对不齐了怎么办？

这个扩展可以在标签结尾处加上“注释”，

Better Comments

写代码要写注释，我喜欢在重要的注释上加上todo或者!。这个扩展可以赋予不同的注释五颜六色，非常醒目。

Indent Rainbow

代码不同行之间不同的缩进，五颜六色的彩虹带来了直接的视觉帮助。当我们在滚动代码查看匹配标签时特别有用。

Auto Close Tag

这个肯定好用，用过的都知道。国产

自定义标签是用户定义的JSP语言元素。当JSP页面包含一个自定义标签时将被转化为servlet，标签转化为对被称为tag handler的对象的操作，即当servlet执行时Web container调用那些操作。

JSP标签扩展可以让你创建新的标签并且可以直接插入到一个JSP页面。 JSP 2.0规范中引入Simple Tag Handlers来编写这些自定义标记。

你可以继承SimpleTagSupport类并重写的doTag()方法来开发一个最简单的自定义标签。

创建"Hello"标签

接下来，我们想创建一个自定义标签叫作<ex:Hello>，标签格式为：

<ex:Hello />

要创建自定义的JSP标签，你首先必须创建处理标签的Java类。所以，让我们创建一个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()方法来获取当前的JspContext对象，并将"Hello Custom Tag!"传递给JspWriter对象。

编译以上类，并将其复制到环境变量CLASSPATH目录中。最后创建如下标签库：<Tomcat安装目录>webapps\ROOT\WEB-INF\custom.tld。

<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标签：

<%@ taglib prefix="ex" uri="WEB-INF/custom.tld"%>

<html>

<head>

<title>A sample custom tag</title>

</head>

<body>

<ex:Hello/>

</body>

</html>

以上程序输出结果为：

Hello Custom Tag!

访问标签体

你可以像标准标签库一样在标签中包含消息内容。如我们要在我们自定义的Hello中包含内容，格式如下：

<ex:Hello>

This is message body

</ex:Hello>

我们可以修改标签处理类文件，代码如下：

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文件，如下所示：

<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>

现在我们可以在JSP使用修改后的标签，如下所示:

<%@ 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>

以上程序输出结果如下所示：

This is message body

自定义标签属性

你可以在自定义标准中设置各种属性，要接收属性，值自定义标签类必须实现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 {

/* 从内容体中使用消息 */

getJspBody().invoke(sw);

getJspContext().getOut().println(sw.toString());

}

属性的名称是"message"，所以setter方法是的setMessage()。现在让我们在TLD文件中使用的<attribute>元素添加此属性：

<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>

<name>message</name>

</attribute>

</tag>

</taglib>

现在我们就可以在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>

以上实例数据输出结果为：

This is custom tag

你还可以包含以下属性：

属性	描述
name	定义属性的名称。每个标签的是属性名称必须是唯一的。
required	指定属性是否是必须的或者可选的,如果设置为false为可选。
rtexprvalue	声明在运行表达式时，标签属性是否有效。
type	定义该属性的Java类类型。默认指定为 String
description	描述信息
fragment	如果声明了该属性,属性值将被视为一个 JspFragment。

以下是指定相关的属性实例：

.....

<name>attribute_name</name>

<required>false</required>

<fragment>false</fragment>

</attribute>

.....

如果你使用了两个属性，修改TLD文件，如下所示：

.....

<name>attribute_name1</name>

<required>false</required>

<type>java.util.Boolean</type>

<fragment>false</fragment>

</attribute>

<name>attribute_name2</name>

</attribute>

.....

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML 表格实例:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

在线实例

表格

这个例子演示如何在 HTML 文档中创建表格。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<tr>

</tr>

</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

更多实例

没有边框的表格

本例演示一个没有边框的表格。

表格中的表头(Heading)

本例演示如何显示表格表头。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：喀什中院@您：这个清明一起网上祭英烈
下一篇：CSS基础-行和段落常用属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

VS Code写HTML常用扩展推荐

HTML End Tag Labels

Better Comments

Indent Rainbow

Auto Close Tag

您的项目需求