前言
 
在刚接触HTML的时候，你是否被它众多的标签所惊讶？尤其是HTNL5的标签，新增了不少，很多HTML4的标签跨版本之后就用不了了，如此多的标签，要记是不可能记完的，我们只需要一些常用的标签就差不多了，剩下的可以等到用到时再去查询也是可以的。
 
 
但有时候收藏的技术网页经常会404，去百度虽然可以，但得逐行查找。于是我这种懒人总想着一劳永逸，以前就把一些我工作中可能会用到的东西自己整理成文档笔记，上传到自己的网盘以及GitHub。
 
 
今天我把以前整理好的HTML5标签大全笔记分享给大家，同时提供源文档，需要的时候Ctrl+F 查找关键字就可以了，顺便还可以做上自己的备注。
 
话不多说，直接上货！
 
 
一、媒体相关标签
 
 
 
二、全局属性相关标签
 
 
 
三、Windows相关标签
 
 
 
四、键盘和鼠标相关标签
 
 
 
五、表单相关标签
 
 
 
 
粉丝福利，点击可查看
 
 
 
六、其他常用标签
 
 
 
七、HTML4/HTML5通用标签
 
 
 
八、源文件
 
上面的图片只是为了在文章中更好地展示，真正比较好用的我觉得还是md源文件，这里给大家链接，需要的话可以自取：
 
链接：https://pan.baidu.com/s/1p1FFzn-9HYIXFqRpViWfyA
 提取码：u2o6
 
最后祝你们在工作和学习中都有所收获，如果文章对你有用，还望不吝三连，感激不尽！
 

不需要插件，VSCode代码自动补全（html标签、style样式、css属性及值、），修改配置文件即可完成！
 
 
效果图 · 演示如下：
 
 
 
操作步骤 · 如下：
 
 
 
本编辑器已经汉化，所以截图如下。
 
 
首先，取消选中（控制在活动代码片段内是否禁用快速建议）
 
修改路径（截图示下）：
 
设置 -->
文本编辑器 （建议）-->
取消选中 Suggest:Snippets Prevent Quick Suggestions (控制在活动代码片段内是否禁用快速建议)
完成第一步。剩下的就是修改配置文件：settings.json
 

 
 
 
如何修改配置文件settings.json？
 
 
首先找到文件（截图示下） · 找到并点击 “设置”：
 
 
 
然后，弹出（如下图所示）弹框界面：
 
 
 
然后，点击（如上图）的 “黄色的空心矩形框”，弹出settings.json文件(截图如下)。
 
 
 
开始修改文件settings.json
 修改之前 · 全部代码如下：
 
{
    "window.zoomLevel": 0,
    "terminal.integrated.rendererType": "dom"
}
 
修改之后 · 全部代码如下：
 
{
    "window.zoomLevel": 0,
    "terminal.integrated.rendererType": "dom",
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "files.associations": {
        "*.vue":"html"
    }
}
 
 
 
附：参考文章
 
解决vscode没有代码提示
 
 
 
 
以上就是关于“ VSCode代码自动补全html标签、、css属性及值 - 无插件 ” 的全部内容。
 

mybatis的trim标签一般用于去除sql语句中多余的and关键字，逗号，或者给sql语句前拼接 “where“、“set“以及“values(“ 等前缀，或者添加“)“等后缀，可用于选择性插入、更新、删除或者条件查询等操作。
 
 
以下是trim标签中涉及到的属性：  
属性
描述
prefix
给sql语句拼接的前缀
suffix
给sql语句拼接的后缀
prefixOverrides
去除sql语句前面的关键字或者字符，该关键字或者字符由prefixOverrides属性指定，假设该属性指定为"AND"，当sql语句的开头为"AND"，trim标签将会去除该"AND"
suffixOverrides
去除sql语句后面的关键字或者字符，该关键字或者字符由suffixOverrides属性指定
下面使用几个例子来说明trim标签的使用。
 
 
1、使用trim标签去除多余的and关键字
 
有这样的一个例子：
 
<select id="findActiveBlogLike"
     resultType="Blog">
  SELECT * FROM BLOG 
  WHERE 
  <if test="state != null">
    state = #{state}
  </if> 
  <if test="title != null">
    AND title like #{title}
  </if>
  <if test="author != null and author.name != null">
    AND author_name like #{author.name}
  </if>
</select>
 
如果这些条件没有一个能匹配上会发生什么？最终这条 SQL 会变成这样：
 
SELECT * FROM BLOG
WHERE
 
这会导致查询失败。如果仅仅第二个条件匹配又会怎样？这条 SQL 最终会是这样:
 
SELECT * FROM BLOG
WHERE 
AND title like ‘someTitle’
 
你可以使用where标签来解决这个问题，where 元素只会在至少有一个子元素的条件返回 SQL 子句的情况下才去插入“WHERE”子句。而且，若语句的开头为“AND”或“OR”，where 元素也会将它们去除。
 
<select id="findActiveBlogLike"
     resultType="Blog">
  SELECT * FROM BLOG 
  <where> 
    <if test="state != null">
         state = #{state}
    </if> 
    <if test="title != null">
        AND title like #{title}
    </if>
    <if test="author != null and author.name != null">
        AND author_name like #{author.name}
    </if>
  </where>
</select>
 
trim标签也可以完成相同的功能，写法如下：
 
<trim prefix="WHERE" prefixOverrides="AND">
	<if test="state != null">
	  state = #{state}
	</if> 
	<if test="title != null">
	  AND title like #{title}
	</if>
	<if test="author != null and author.name != null">
	  AND author_name like #{author.name}
	</if>
</trim>
 
 
2、使用trim标签去除多余的逗号
 
有如下的例子：
 
 
如果红框里面的条件没有匹配上，sql语句会变成如下：
 
INSERT INTO role(role_name,) VALUES(roleName,)
 
插入将会失败。
 使用trim标签可以解决此问题，只需做少量的修改，如下所示：
 
 
其中最重要的属性是
 
suffixOverrides=","
 
表示去除sql语句结尾多余的逗号.
 
 
注：如果你有兴趣的话，可以研究下Mybatis逆向工程生成的Mapper文件。其中也使用了trim标签，但结合了foreach、choose等标签，更多的是牵扯到Criterion的源码研究。不过研究完之后，你将熟练掌握mybatis各种标签的使用，学到Criterion的设计思想，对自己的启发将会很大。 
 
如果想要了解更多关余trim标签的内容，请移步《trim标签源码解析》。本文参考 Mybatis官方文档

（尊重劳动成果，转载请注明出处：http://blog.csdn.net/qq_25827845/article/details/53311722  冷血之心的博客）
 
 
 
关注微信公众号（文强的技术小屋），学习更多技术知识，一起遨游知识海洋~
 
 
 
 
目录
 
一、JSTL标签介绍
 
1、什么是JSTL？
 
2、JSTL标签库：
 
3、使用taglib指令导入标签库：
 
4、core标签库常用标签：
 
（1）out和set标签
 
（2）remove标签
 
（3）url标签：该标签会在需要重写URL时添加。
 
（4）if标签：
 
（5）choose标签：
 
（6）forEach标签：
 
5、fmt标签库常用标签：
 
二、自定义标签
 
1、自定义标签
 
1.1步骤：
 
1.2　SimpleTag接口介绍：
 
标签的生命周期：
 
1.3　标签库描述文件（TLD）
 
1.4　使用标签
 
2、自定义标签进阶
 
2.1　继承SimpleTagSupport
 
2.2　有标签体的标签
 
2.3　不执行标签下面的页面内容
 
2.4　带有属性的标签
 

一、JSTL标签介绍
 
1、什么是JSTL？
 
        JSTL是apache对EL表达式的扩展（也就是说JSTL依赖EL），JSTL是标签语言！JSTL标签使用以来非常方便，它与JSP动作标签一样，只不过它不是JSP内置的标签，需要我们自己导包，以及指定标签库而已！
 
       如果你使用MyEclipse开发JavaWeb，那么在把项目发布到Tomcat时，你会发现，MyEclipse会在lib目录下存放jstl的Jar包！如果你没有使用MyEclipse开发那么需要自己来导入这个JSTL的Jar包：jstl-1.2.jar。
 
2、JSTL标签库：
 
JSTL一共包含四大标签库：
 
core：核心标签库，我们学习的重点；
fmt：格式化标签库，只需要学习两个标签即可；
sql：数据库标签库，不需要学习了，它过时了；
xml：xml标签库，不需要学习了，它过时了。
3、使用taglib指令导入标签库：
 
除了JSP动作标签外，使用其他第三方的标签库都需要：
 
导包；
在使用标签的JSP页面中使用taglib指令导入标签库；
下面是导入JSTL的core标签库：
 
<%@ taglib prefix="c"uri="http://java.sun.com/jstl/core" %>
 
prefix="c"：指定标签库的前缀，这个前缀可以随便给值，但大家都会在使用core标签库时指定前缀为c；
uri="http://java.sun.com/jstl/core"：指定标签库的uri，它不一定是真实存在的网址，但它可以让JSP找到标签库的描述文件；
4、core标签库常用标签：
 
（1）out和set标签
 
 
<c:out value=”aaa”/>
 
 
输出aaa字符串常量
 
 
<c:out value=”${aaa}”/>
 
 
与${aaa}相同
 
 
<c:out value=”${aaa}” default=”xxx”/>
 
 
当${aaa}不存在时，输出xxx字符串
 
 
<%
 
request.setAttribute("a","<script>alert('hello');</script>");
 
%>
 
<c:out value="${a }" default="xxx" escapeXml="false" />
 
 
当escapeXml为false，不会转换“<”、“>”。这可能会受到JavaScript攻击。
 
 
<c:set var=”a” value=”hello”/>
 
 
    在pageContext中添加name为a，value为hello的数据。
 
 
<c:set var=”a” value=”hello” scope=”session”/>
 
 
在session中添加name为a，value为hello的数据。
 
（2）remove标签
 
 
<%
 
                   pageContext.setAttribute("a","pageContext");
 
                   request.setAttribute("a","session");
 
                   session.setAttribute("a","session");
 
                   application.setAttribute("a","application");
 
  %>
 
    <c: remove var="a"/>
 
    <c: out value="${a}" default="none"/>
 
删除所有域中name为a的数据！
<c:remove var="a" scope=”page”/>
删除pageContext中name为a的数据 
（3）url标签：该标签会在需要重写URL时添加。
 
 
<c:url value="/"/>
 
 
     输出上下文路径：/项目名/
 
 
<c:url value="/" var="a" scope="request"/>
 
 
    把本该输出的结果赋给变量a。范围为request
 
 
<c:url value="/AServlet"/>
 
 
     输出：/项目名/AServlet
 
 
<c:url value="/AServlet">
 
<c:param name="username" value="abc"/>
 
<c:param name="password" value="123"/>                   
 
 
     输出：/项目名/AServlet?username=abc&password=123
 
     如果参数中包含中文，那么会自动使用URL编码！                       
 
（4）if标签：
 
if标签的test属性必须是一个boolean类型的值，如果test的值为true，那么执行if标签的内容，否则不执行。
 
<c:set var="a" value="hello"/>
<c:if test="${not empty a }">
	<c:out value="${a }"/>
</c:if>
 
（5）choose标签：
 
choose标签对应Java中的if/else if/else结构。when标签的test为true时，会执行这个when的内容。当所有when标签的test都为false时，才会执行otherwise标签的内容。
 
<c:set var="score" value="${param.score }"/>
<c:choose>
	<c:when test="${score > 100 || score < 0}">错误的分数：${score }</c:when>
	<c:when test="${score >= 90 }">A级</c:when>
	<c:when test="${score >= 80 }">B级</c:when>
	<c:when test="${score >= 70 }">C级</c:when>
	<c:when test="${score >= 60 }">D级</c:when>
	<c:otherwise>E级</c:otherwise>
</c:choose>
 
（6）forEach标签：
 
forEach当前就是循环标签了，forEach标签有多种两种使用方式：
 
使用循环变量，指定开始和结束值，类似for(int i = 1; i <= 10; i++) {}；
循环遍历集合，类似for(Object o : 集合)；
循环变量：
 
<c:set var="sum" value="0" /> 
<c:forEach var="i" begin="1" end="10"> 
	<c:set var="sum" value="${sum + i}" /> 
</c:forEach>
<c:out value="sum = ${sum }"/>
<c:set var="sum" value="0" />
<c:forEach var="i" begin="1" end="10" step ="2">
	<c:set var="sum" value="${sum + i}" />
</c:forEach>
<c:out value="sum = ${sum }"/>
 
遍历集合或数组方式：
 
<%
String[] names = {"zhangSan", "liSi", "wangWu", "zhaoLiu"};
pageContext.setAttribute("ns", names);
%>
<c:forEach var="item" items="${ns }">
	<c:out value="name: ${item }"/><br/>
</c:forEach>
 
遍历List：
 
<%
	List<String> names = new ArrayList<String>();
	names.add("zhangSan");
	names.add("liSi");
	names.add("wangWu");
	names.add("zhaoLiu");
	pageContext.setAttribute("ns", names);
%>
<c:forEach var="item" items="${ns }">
	<c:out value="name: ${item }"/><br/>
</c:forEach>
 
遍历Map：
 
<%
	Map<String,String> stu = new LinkedHashMap<String,String>();
	stu.put("number", "N_1001");
	stu.put("name", "zhangSan");
	stu.put("age", "23");
	stu.put("sex", "male");
	pageContext.setAttribute("stu", stu);
%>
<c:forEach var="item" items="${stu }">
	<c:out value="${item.key }: ${item.value }"/><br/>
</c:forEach>
 
forEach标签还有一个属性：varStatus，这个属性用来指定接收“循环状态”的变量名，例如：<forEach varStatus=”vs” …/>，这时就可以使用vs这个变量来获取循环的状态了。
 
count：int类型，当前以遍历元素的个数；
index：int类型，当前元素的下标；
first：boolean类型，是否为第一个元素；
last：boolean类型，是否为最后一个元素；
current：Object类型，表示当前项目。
<c:forEach var="item" items="${ns }" varStatus="vs">
	<c:if test="${vs.first }">第一行：</c:if>
	<c:if test="${vs.last }">最后一行：</c:if>
	<c:out value="第${vs.count }行: "/>
	<c:out value="[${vs.index }]: "/>
	<c:out value="name: ${vs.current }"/><br/>
</c:forEach>
 
5、fmt标签库常用标签：
 
      fmt标签库是用来格式化输出的，通常需要格式化的有时间和数字。
 
格式化时间：
 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
......
<%
	Date date = new Date();
	pageContext.setAttribute("d", date);
%>
<fmt:formatDate value="${d }" pattern="yyyy-MM-dd HH:mm:ss"/>
 
格式化数字：
 
<%
	double d1 = 3.5;
	double d2 = 4.4; 
	pageContext.setAttribute("d1", d1);
	pageContext.setAttribute("d2", d2);
%>
<fmt:formatNumber value="${d1 }" pattern="0.00"/><br/>
<fmt:formatNumber value="${d2 }" pattern="#.##"/>
 
介绍了JSTL中的常用标签，那可以定义自己的标签吗？
 
答案是：可以。
 
 
 
二、自定义标签
 
1、自定义标签
 
1.1步骤：
 
其实我们在JSP页面中使用标签就等于调用某个对象的某个方法一样，例如：<c:if test=””>，这就是在调用对象的方法一样。自定义标签其实就是自定义类一样！
 
定义标签处理类：必须是Tag或SimpleTag的实现类；
编写标签库描述符文件（TLD）；
  SimpleTag接口是JSP2.0中新给出的接口，用来简化自定义标签，所以现在我们基本上都是使用SimpleTag。
 
Tag是老的，传统的自定义标签时使用的接口，现在不建议使用它了。
 
1.2　SimpleTag接口介绍：
 
SimpleTag接口内容如下：
 
void doTag()：标签执行方法；
JspTag getParent()：获取父标签；
void setParent(JspTag parent)：设置父标签
void setJspContext(JspContext context)：设置PageContext
void setJspBody(JspFragment jspBody)：设置标签体对象；
请记住，万物皆对象！在JSP页面中的标签也是对象！你可以通过查看JSP的源码，清楚的知道，所有标签都会变成对象的方法调用。标签对应的类我们称之为“标签处理类”！
 
标签的生命周期：
 
1、当容器（Tomcat）第一次执行到某个标签时，会创建标签处理类的实例；
 
2、然后调用setJspContext(JspContext)方法，把当前JSP页面的pageContext对象传递给这个方法；
 
3、如果当前标签有父标签，那么使用父标签的标签处理类对象调用setParent(JspTag)方法；
 
4、如果标签有标签体，那么把标签体转换成JspFragment对象，然后调用setJspBody()方法；
 
5、每次执行标签时，都调用doTag()方法，它是标签处理方法。
 
HelloTag.java
 
public class HelloTag implements SimpleTag {
	private JspTag parent;
	private PageContext pageContext;
	private JspFragment jspBody;
	
	public void doTag() throws JspException, IOException {
		pageContext.getOut().print("Hello Tag!!!");
	}
	public void setParent(JspTag parent) {
		this.parent = parent;
	}
	public JspTag getParent() {
		return this.parent;
	}
	public void setJspContext(JspContext pc) {
		this.pageContext = (PageContext) pc;
	}
	public void setJspBody(JspFragment jspBody) {
		this.jspBody = jspBody;
	}
}
 
1.3　标签库描述文件（TLD）
 
标签库描述文件是用来描述当前标签库中的标签的！标签库描述文件的扩展名为tld，你可以把它放到WEB-INF下，这样就不会被客户端直接访问到了。
 
hello.tld
 
<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xml="http://www.w3.org/XML/1998/namespace" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
						http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd ">

	<tlib-version>1.0</tlib-version>
	<short-name>ywq</short-name>
	<uri>http://www.ywq.cn/tags</uri>
	<tag>
		<name>hello</name>
		<tag-class>cn.ywq.tag.HelloTag</tag-class>
		<body-content>empty</body-content>
	</tag>
</taglib>
 
1.4　使用标签
 
在页面中使用标签分为两步：
 
使用taglib导入标签库；
使用标签；
<%@ taglib prefix="it" uri="/WEB-INF/hello.tld" %>
......
<it:hello/>
 
2、自定义标签进阶
 
2.1　继承SimpleTagSupport
 
　　继承SimpleTagSuppport要比实现SimpleTag接口方便太多了，现在你只需要重写doTag()方法，其他方法都已经被SimpleTagSuppport完成了。
 
public class HelloTag extends SimpleTagSupport {
	public void doTag() throws JspException, IOException {
		this.getJspContext().getOut().write("<p>Hello SimpleTag!</p>");
	}
}
 
2.2　有标签体的标签
 
我们先来看看标签体内容的可选值：
 
<body-content>元素的可选值有：
 
empty：无标签体。
JSP：传统标签支持它，SimpleTag已经不再支持使用<body-content>JSP</body-content>。标签体内容可以是任何东西：EL、JSTL、<%=%>、<%%>，以及html；
scriptless：标签体内容不能是Java脚本，但可以是EL、JSTL等。在SimpleTag中，如果需要有标签体，那么就使用该选项；
tagdependent：标签体内容不做运算，由标签处理类自行处理，无论标签体内容是EL、JSP、JSTL，都不会做运算。这个选项几乎没有人会使用！
自定义有标签体的标签需要：
 
获取标签体对象：JspFragment jspBody = getJspBody();；
把标签体内容输出到页面：jspBody.invoke(null)；
tld中指定标签内容类型：scriptless。
public class HelloTag extends SimpleTagSupport {
	public void doTag() throws JspException, IOException {
		PageContext pc = (PageContext) this.getJspContext();
		HttpServletRequest req = (HttpServletRequest) pc.getRequest();
		String s = req.getParameter("exec");
		if(s != null && s.endsWith("true")) {
			JspFragment body = this.getJspBody();
			body.invoke(null);
		}
	}
}
 
 
 
<tag>
		<name>hello</name>
		<tag-class>cn.ywq.tags.HelloTag</tag-class>
		<body-content>scriptless</body-content>
	</tag>
 
 
 
 <itcast:hello>
     	<h1>哈哈哈~</h1>
    </itcast:hello>
 
2.3　不执行标签下面的页面内容
 
　　如果希望在执行了自定义标签后，不再执行JSP页面下面的东西，那么就需要在doTag()方法中使用SkipPageException。
 
public class SkipTag extends SimpleTagSupport {
	public void doTag() throws JspException, IOException {
		this.getJspContext().getOut().print("<h1>只能看到我！</h1>");
		throw new SkipPageException();
	}
}
 
 
 
	<tag>
		<name>skip</name>
		<tag-class>cn.ywq.tags.SkipTag</tag-class>
		<body-content>empty</body-content>
	</tag>
 
  <itcast:skip/>
  <h1>看不见我！</h1>
 
2.4　带有属性的标签
 
一般标签都会带有属性，例如<c:iftest=””>，其中test就是一个boolean类型的属性。完成带有属性的标签需要：
 
在处理类中给出JavaBean属性（提供get/set方法）；
在TLD中部属相关属性。
public class IfTag extends SimpleTagSupport {
	private boolean test;
	public boolean isTest() {
		return test;
	}
	public void setTest(boolean test) {
		this.test = test;
	}
	@Override
	public void doTag() throws JspException, IOException {
		if(test) {
			this.getJspBody().invoke(null);
		}
	}
}
 
 
 
<tag> 
		<name>if</name> 
		<tag-class>cn.ywq.IfTag</tag-class> 
		<body-content>scriptless</body-content>
		<attribute>
			<name>test</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute> 
	</tag>
 
 
 
<%
	pageContext.setAttribute("one", true);
	pageContext.setAttribute("two", false);
%>
<it:if test="${one }">xixi</it:if>
<it:if test="${two }">haha</it:if>
<it:if test="true">hehe</it:if>
 
       关于JSTL标签相关内容就到这里了，如果对你有帮助，记得点赞哦~欢迎大家关注我的博客，可以进群366533258一起交流学习哦~
 
 
 
 
 
关注微信公众号（文强的技术小屋），学习更多技术知识，一起遨游知识海洋~