HTML学习之路,HTML5基础知识总计

By admin in 4858美高梅 on 2019年4月10日

新增的价签和性情

1、基础选用器

一.CSS-并集选取器

(一)成效:给全部选择器选中的标签设置属性

(2)格式:

                     选择器1,选择器2{

                                         属性:值;

                     }

(三)注意点:选拔器之间用“,”来连接,并集选用器是为着简化代码

主页:的分支页。

①、结构标签

经过ID,Class和标记名等来抉择查找DOM选用器。

二.CSS-兄弟选取器

(一)相邻兄弟选取器:给钦定选取器前面紧跟的充足选取器选中的标签设置属性

          格式:

                       选择器1+选择器2{

                                属性:值;

                       }

           注意点:必须经过“+”连接,无法当选被隔开的选择器

(2)通用兄弟选取器:给钦定接纳器前面包车型地铁全体采取器选中的标签设置属性

           格式:

                       选择器1~选择器2{

                              属性:值;

                         }

一、<c:out>

article section aside nav header footer hgroup figure address

HTML学习之路,HTML5基础知识总计。$(‘#id名’).css({ css属性:’属性值’
})、$(‘#id名’).css(‘css属性’,’css属性值’)

三.CSS-序选拔器

(1)格式:

                     标签:序接纳器{

                                属性:值;

                     }

(2)同级其余::first-child(同级其余率先个标签,不区分类型)

                             
:last-child(同级其余结尾一个标签,不区分类型)

                             
:nth-child(n)(同级别中第n个标签,不区分类型)

                             
:nth-last-child(n)(同级别中最后几个第n个标签,不区分类型)

                              :only-child(选中父元素中唯一的价签)

                             :nth-child(odd)(同级别中全部奇数标签)

                             :nth-child(even)(同级别中具备偶数标签)

(三)同类别的::first-of-type(同级别中同品种的首先个标签)

                             
:last-of-type(同级别中同品种的末尾多少个标签)

                             
:nth-of-type(n)(同级别中同体系的第n个标签)

                             
:nth-last-of-type(n)(同级别中同类别的尾数第n个标签)

                             
:only-of-type(选中父成分中唯1项目标标签)

                             :nth-of-type(odd)(同类型中全数奇数标签)

                           
 :nth-of-type(even)(同类型中具备偶数标签)

(4)别的详细的序选择器可参照此链接

<c:out>标签突显表明式的结果,与<%= %>的干活措施接近,但有一点不一致是<c:out>标签使用更简短的”.”
符号来访问属性。例如,访问customer.address.street只需求动用<c:out value="customer.address.street"/>就足以了。

二、媒体标签

4858美高梅,$(‘.类名’).css({ css属性:’属性值’
})、$(‘.类名’).css(‘css属性’,’css属性值’)

4.CSS-属性选取器

(1)功用:依据钦命的性质名称找到相应的竹签,然后设置属性

(2)格式:

          标签[attribute]{

                                属性:值;

                   }

                  作用:依据钦点的质量名称找到相应的价签,然后设置属性

          标签[attribute=value]{

                                 属性:值;

                   }

                 
功效:依照钦赐的质量名称及其值等于value,找到呼应的竹签,然后设置属性

          属性的取值以某某开始的:

                   标签[attribute|=value]{

                                  属性:值;

                    }

                   标签[attribute^=value]{

                                  属性:值;

                     }

          属性的取值以某某最终的:

                   标签[attribute$=value]{

                                   属性:值;

                    }

          属性的取值是不是带有有些特定的值:

                   标签[attribute~=value]{

                                   属性:值;

                    }

                   标签[attribute*=value]{

                                    属性:值;

                    }

<c:out>标签能够活动转义XML标记,所以它们并不像实际标签1样被评估。

video audio embed

$(‘标签名’).css({ css属性:’属性值’
})、$(‘.标签名’).css(‘css属性’,’css属性值’)

伍.CSS-通配符选取器

(一)功用:给当下界面全部的标签设置属性

(2)格式:

                      *{

                         属性:值;

                       }

(三)注意点:当前界面标签很多时,品质会比较差

属性:

三、表单属性

$(‘*’).css({ css属性:’属性值’ })、$(‘.*’).css(‘css属性’,’css属性值’)

<c:out>标签有如下所示属性:

email url number range

$(‘标签名,#id名,.类名’).(‘css属性’,’css属性值’)【能够多选】

属性 描述 是否必需 默认值
value 输出的信息
default 输出的反馈信息 body
escapeXml 如果该标签被转义为特殊的XML字符,则为真

二、层次选拔器

实例:

$(‘祖先标签  
 后代子标签’).css(‘css属性’,’css属性值’)【选择祖先标签中装有的后人标签{包含全部的后生}】

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:out value="${'<tag> , &'}"/>
</body>
</html>

$(‘父标签A >
子标签B’).css(‘css属性’,’css属性值’)【采取父标签A中保有的子标签B(不包罗后代成分)】

那将时有发生如下所示结果:

$(‘标签A +
标签B’).css(‘css属性’,’css属性值’)【选拔标签A下二个标签B的第二个{同辈关系接纳}】【能够用$(”.类名”).next()代替】

4858美高梅 1

$(‘标签A ~
标签B’).css(‘css属性’,’css属性值’)【选取标签A下一个标签B的兼具兄弟元素{同辈关系采纳}】【能够用$(”.类名”).nextall()代替】

二、<c:set>

三、基本过滤选取器

<c:set>标签是setProperty操作的JSTL友好版本。该标签十三分有用,因为它总结说明式并选取总计结果来安装JavaBean或java.util.Map对象的值。

$(‘标签A:first’).css({ css属性:’属性值’ })【选拔标签A中的第二个】

属性:

$(‘标签A:last’).css({ css属性:’属性值’ })【选拔标签A中的最终二个】

<c:set>标签具有如下所示属性:

$(‘标签A:not(类名S’).css({ css属性:’属性值’
})【采纳类名不等于S的标签A】

属性 描述 是否必需 默认值
value 保存的信息 主体
target 属性被修改的变量名称
property 修改的属性
var 存储信息的变量名称
scope 存储信息的变量范围 页面

$(‘标签A:even”).css({ css属性:’属性值’ })【选用索引值为偶数的标签A】

假如钦定了对象,那么属性也终将被内定。

$(‘标签A:odd’).css({ css属性:’属性值’ })【采纳索引值为奇数的标签A】

实例:

$(‘标签A:eq(i)’).css({ css属性:’属性值’ })【选用索引值为i标签A】

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:set var="salary" scope="session" value="${2000*2}"/>
<c:out value="${salary}"/>
</body>
</html>

$(‘标签A:gt(i)’).css({ css属性:’属性值’ })【选拔索引值大于i标签A】

那将会生出如下所示结果:

$(‘标签A:lt(i)’).css({ css属性:’属性值’ })【选用索引值小于i标签A】

4858美高梅 2

$(‘:header’).css({ css属性:’属性值’ })【选取具有的标题】

三、<c:remove>

四、属性过滤选拔器

<c:remove>标签从钦赐的限定或变量被发现的第4个范围中(假如未有点名范围)删除变量。该操作日常并不是专程有用,可是它能够扶持确定保证JSP清理别的JSP负责的限制作用域财富。

$(‘标签A[属性B]’).css(‘css属性’,’css属性值’)【选取标签A中蕴藏属性B的标签】

属性:

$(‘标签A[属性B=属性名C]’).css(‘css属性’,’css属性值’)【选用标签A中涵盖属性B且满意属性名C的竹签】

<c:remove>标签具有如下所示属性:

$(‘标签A[属性B!=属性名C]’).css(‘css属性’,’css属性值’)【选用标签A中隐含属性B且满意B的性质名不等于C的竹签】

属性 描述 是否必需 默认值
var 要删除的变量名称
scope 要删除的变量范围 全部范围

$(‘标签A[属性B^=属性名C]’).css(‘css属性’,’css属性值’)【采用标签A中含有属性B且满意B的属性名是以C初叶的价签{属性名的头顶}】

实例:

$(‘标签A[属性B$=属性名C]’).css(‘css属性’,’css属性值’)【选取标签A中包蕴属性B且满意B的属性名是以C结尾的价签{属性名的尾巴部分}】

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:set var="salary" scope="session" value="${2000*2}"/>
<p>Before Remove Value: <c:out value="${salary}"/></p>
<c:remove var="salary"/>
<p>After Remove Value: <c:out value="${salary}"/></p>
</body>
</html>

$(‘标签A[属性B*=属性名C]’).css(‘css属性’,’css属性值’)【选用标签A中隐含属性B且满足B的习性名中含有C的标签{属性名的内容中}】

那将会时有发生如下所示结果:

4858美高梅 3

四、<c:catch>

<c:catch>标签捕获产生在标签主旨中的任何特别并有接纳地公开它。它只有是用以错误处理和更适用地拍卖这么些题材。

属性:

<c:catch>标签具有如下所示属性:

属性 描述 是否必需 默认值
var 保存java.lang的变量名。如果抛出的Throwable在body元素内。

实例:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>

<c:catch var="catchException">
   <% int x = 5/0;%>
</c:catch>

<c:if test="${catchException != null}">
   <p>The exception is : ${catchException} <br />
   There is an exception: ${catchException.message}</p>
</c:if>

</body>
</html>

那将会时有产生如下所示结果:

4858美高梅 4

五、<c:if>

<c:if>标签总括表达式,当且仅当表达式的值为真时,突显其主导内容。

属性:

<c:if>标签具有如下所示属性:

属性 描述 是否必需 默认值
test 计算的条件
var 存储条件结果的变量名
scope 存储条件结果的变量范围 页面

实例:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:set var="salary" scope="session" value="${2000*2}"/>
<c:if test="${salary > 2000}">
   <p>My salary is: <c:out value="${salary}"/><p>
</c:if>
</body>
</html>

那将会发出如下所示结果:

4858美高梅 5

六、<c:choose>,<c:when>,<c:otherwise>

<c:choose>仿佛Java switch语句,它能够展开部分增选。正如switch语句有case语句,<c:choose>标签有<c:when>标签。三个switch语句中有default子句来钦定1个暗许的操作,同样的方法<c:choose>有<c:otherwise>作为默许子句。

属性:

  • <c:choose>标签未有其它性质。

  • <c:when>标签有两特性质,在上面列出了。

  • <c:otherwise>标签未有其他性质。

<c:when>标签具有以下属性:

属性 描述 是否必需 默认值
test 计算的条件

实例:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:set var="salary" scope="session" value="${2000*2}"/>
<p>Your salary is : <c:out value="${salary}"/></p>
<c:choose>
    <c:when test="${salary <= 0}">
       Salary is very low to survive.
    </c:when>
    <c:when test="${salary > 1000}">
        Salary is very good.
    </c:when>
    <c:otherwise>
        No comment sir...
    </c:otherwise>
</c:choose>
</body>
</html>

那将爆发如下所示结果:

4858美高梅 6

七、<c:import>

<c:import>标签提供了<include>操作的全体的成效,同时也能够包涵相对U福睿斯L。

譬如说,使用import标签允许包蕴来自差异的Web站点或FTP服务器的剧情。

属性:

<c:import>标签具有以下属性:

属性 描述 是否必需 默认值
url 检索和导入到页面的URL
context /紧随其后的是本地的一个Web应用程序的名称 当前应用程序
charEncoding 为导入数据使用的字符集 ISO-8859-1
var 存储导入文本的变量名 页面输出
scope 存储导入文本的变量范围 页面
varReader 显示java.io.Reader的另一个变量的名称

实例:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:import var="data" url="http://www.baidu.com"/>
<c:out value="${data}"/>
</body>
</html>

那将生出如下所示结果:

4858美高梅 7

八、<c:forEach>,<c:forTokens>

这几个标签是经过3个小脚本嵌入Java for,while或do-while循环的不错的选取。<c:forEach>标签更常用的竹签,因为它遍历三个指标集合。<c:forTokens>标签用于将二个字符串分成token并遍历各样token。

属性:

<c:forEach>标签具有如下所示属性:

属性 描述 是否必需 默认值
items 遍历的信息
begin 开始的元素(0=第一个项目,1=第二个项目,…) 0
end 结束的元素 (0=第一个项目,1=第二个项目,…) 最后一个元素
step 处理每一步的元素 1
var 显示当前项目的变量名
varStatus 显示循环状态的变量名

该标签与<c:forTokens>标签具有同等的质量,其它<c:forEach>标签有3个万分的性质delims钦点了用作分隔符的符号。

属性 描述 是否必需 默认值
delims 用作分隔符的符号

<c:forEach>的实例:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:forEach var="i" begin="1" end="5">
   Item <c:out value="${i}"/><p>
</c:forEach>
</body>
</html>

那将生出如下所示结果:

4858美高梅 8

<c:forTokens>的实例:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:forTokens items="Zara,nuha,roshy" delims="," var="name">
   <c:out value="${name}"/><p>
</c:forTokens>
</body>
</html>

那将产生如下所示结果:

4858美高梅 9

九、<c:param>

<c:param>标签允许URL钦定适当的UTiguanL请求参数,且允许其余供给的U君越L编码须求。

<c:param>标签内name属性表示参数名称,value属性显示参数值:

属性:

<c:param>标签具有如下所示属性:

属性 描述 是否必需 默认值
name 在URL中设置的请求参数的名称
value 在URL中设置的请求参数的值 Body

实例:

若是急需传递参数给<c:import>标签,首先应用<c:url>标签来创建U奥迪Q三L,如下所示:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:url value="https://www.baidu.com" var="myURL">
   <c:param name="trackingId" value="1234"/>
   <c:param name="reportType" value="summary"/>
</c:url>
<c:import url="${myURL}"/>
</body>
</html>

那将发生如下所示结果:

将以那样的款式拜访:

十、<c:redirect>

<c:redirect>标签通过提供自动U奇骏L重写,将浏览器重定向到另二个UCR-VL,它辅助上下文相关的U奥德赛L,协理<c:param>标签。

属性:

<c:redirect>标签具有如下所示属性:

属性 描述 是否必需 默认值
url 重定向到用户浏览器 URL
context /紧随其后的是一个本地Web应用程序 当前应用程序

实例:

设若急需传递参数到<c:import>标签,首先使用<c:url>标签成立UKugaL,如下所示:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<c:redirect url="http://www.baidu.com"/>
</body>
</html>

上述例子会重定向请求到

十一、<c:url>

<c:url>标签将U奥迪Q5L格式化成三个字符串,并将其储存到3个变量中。这一个标签在须要时自动执行U本田CR-VL重写。var属性钦定将含有格式化的UHavalL的变量。

JSTL
U普拉多L标记只是另壹种编写调用response.encodeU安德拉L()方法的方法。U猎豹CS6L标签唯1的确实优势是提供了适宜的U中华VL编码,包含由子param标签钦命的其它参数。

属性:

<c:url>标签具有如下所示属性:

属性 描述 是否必需 默认值
value URL
context /紧随其后的是本地Web应用程序的名称 当前应用程序
var 显示被处理的URL的变量名 页面输出
scope 显示被处理的URL的变量范围 页面

实例:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<a href="<c:url value="/jsp/index.htm"/>">TEST</a>
</body>
</html>

那将生出如下所示结果:

4858美高梅 10

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有