整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
，Doctype作用？标准模式与兼容模式各有什么区别?
（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器 用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
2，HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
3，行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
4，页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
5，介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
（2）JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
6，常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
7，html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
* 支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
* 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素
8，简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
9，HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
10，浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
11，请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
12，iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题。
13，Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
14，如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；
15，如何在页面上实现一个圆形的可点击区域？
1、map+area或者svg
2、border-radius
3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
16，title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。
i内容展示为斜体，em表示强调的文本；
Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
17，你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
18， HTML与XHTML——二者有什么区别？
区别：
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字
19，<img>的title和alt有什么区别？
title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
、XHTML与HTML的区别
文档结构
XHTML DOCTYPE 是强制性的
<html>中的 XML namespace 属性是强制性的
<html>、<head>、<title>以及 <body>也是强制性的
元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的
二、HTML5中一些新特性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--> /*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
三、HTML5web存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
浏览器支持：
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
注意: Internet Explorer 7 及更早IE版本不支持web 存储.
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
四、HTML5 应用程序缓存
HTML5 -应用程序缓存=>使用文章链接跳转点这里
五、HTML5 服务器发送事件（Server-Sent Events）
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。
所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
<h1>获取服务端更新数据</h1>
<div id="result"></div>if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}六、HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
详情和代码示例：.
七、HTTP状态消息
1xx: 信息
2xx: 成功
3xx: 重定向
4xx: 客户端错误
5xx: 服务器错误
详情
八、HTTP 方法：GET 对比 POST
两种最常用的 HTTP 方法是：GET 和 POST。
什么是 HTTP ？
超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。
HTTP 的工作方式是客户端与服务器之间的请求-应答协议。
web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。
GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。
GET 方法
请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
/test/demo_form.php?name1=value1&name2=value2有关 GET 请求的其他一些注释：
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST 方法
请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
有关 POST 请求的其他一些注释：
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
下面的表格列出了其他一些 HTTP 请求方法：
原文链接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah
1、在J2EE应用系统中应用XSLT实现XML文档转换的基本过程
（1）首先，创建出目标XML格式文档文件，该XML格式文档文件代表应用系统中的数据模型
（2）其次，建立出XSLT文档文件，该XSLT文档文件代表对XML数据的显示控制
（3）最后，在XML格式文档文件中调用这个XSLT文件以便能够将XML和XSLT相互关联。
2、在J2EE应用系统中应用"XML+XSLT"技术的应用示例
作者在下文中通过一个示例为读者介绍如何应用"XML+XSLT"技术彻底分离Web应用系统中表示层页面中的数据和样式。
（1）首先，创建出一个XML格式文档文件
下面的代码示例中所示的XML格式文档文件是一个很简单XML格式文档，只包含一个节点的XML结构树。该XML格式文档文件的内容在实际的企业级应用系统中，可以在Web服务器端根据系统中业务处理的规则动态创建出，它代表处理结果的XML文档。
本示例中的XML文档文件名称为FirstXMLFile.xml，具体的内容请见如下的代码示例所示—— XML文档文件FirstXMLFile.xml的内容示例。
<?xml version="1.0" encoding="gb2312" ?>
<firstXML>这是我在学习XSLT时所写的一个XML文档中的内容</firstXML >（2）其次，建立出XSLT格式文档文件
该XSLT格式文档文件代表对XML文档中数据的显示风格控制，在本示例中作者所建立的XSLT文档文件的文件名称为FirstXSL.xsl，该文件中的具体内容请见如下的代码示例所示—— XSLT文档文件FirstXSL.xsl的内容示例。
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" version="1.0">
<xsl:template match="/">
<html>
<head>
<title>这是我在XSLT时所做的第一个XSLT文件示例</title>
</head>
<body>
<p><xsl:value-of select="firstXML"/></p>
</body>
</html>
</xsl:template>
</xsl:stylesheet>为了方便读者理解上面示例代码中的XSLT文档文件中的标签内容的含义，作者在下文中对其中的主要标签元素加以解释说明。
1）<xsl:stylesheet>标签定义一个样式表
<xsl:stylesheet>标签的主要功能是将此XSLT文档作为一个样式表 (StyleSheet) 来处理，从而明确地定义了本XSLT文档的用途。
按照XSLT文档语法的规定，所有的XSL命令都必须包含在<xsl:stylesheet>起始标签和</xsl:stylesheet>结束标签之间，也就是说这个<xsl:stylesheet>标签界定了输出转换后的XSL样式的内容。
其中的xmlns:xsl属性是一个名字空间声明（XSL样式表中所有的指令都必须注明属于http://www.w3.org/TR/WD-xsl这个XSL专属的名称空间），和XML格式文档中的名字空间的使用方法一样，用来防止标签元素名称重复和混乱。其中的前缀xsl的意思是文档中使用的标签元素遵守W3C的XSLT语法规范；最后的version属性说明样式表只采用XSLT 1.0的标准功能，这也是目前仅有的标准。
当然，也可以在模板HTML页面中使用CSS层叠样式表技术，此时应该在XSLT文档中添加如下的引用语句, 当然也就不再需要<xsl:stylesheet>标签。
<link rel="stylesheet" type="text/css" href="cssStyleFile.css"/>2）<xsl:template>标签定义一个模板规则
XSLT模板把XSLT文档的设计细化成一个个的模块（每一个模块定义为一个"template"，由<xsl:template>标签定义此模块），最后再把这些模块组合串接成一个完整的XSLT文档文件。这样的语法规则能够实现很好地将数据分块和隔离。
另外，应用这种方案可以使开发者先从整体上考虑整个XSLT文档的设计，然后再把总体表现形式进一步细化成不同的模块和子模块，再分别具体设计这些模块，最后把它们整合和串接在一起。
<xsl:template>标签中的属性match="/"说明在XML源文档中这个模板规则作用的起点。"/"是一种XPath（XML Path Language，XML路径语言）语法，这里的"/"代表XML源文档结构树的根(root)标签。
3）<xsl:template>标签定义其中的内容
当模板规则被触发，模板的内容就会控制输出的结果。在上面的代码示例中，模板大部分内容由HTML标签元素和文本构成。只有<xsl:value-of>标签元素是应用XSLT语法规则的标签，这里的<xsl:value-of>标签的主要作用是拷贝原XML源文档中的一个标签节点的值到输出文档中。而其中的select属性则详细指定要处理的XML标签节点名称——但这是遵守XPath（XML Path Language，XML路径语言）语法规则。
其中的值"firstXML"的意思就是寻找XML文档根标签节点名为firstXML的标签元素（也就是XML文档中的<firstXML>标签），并用此模板来处理这个<firstXML>标签节点——也就是找到<firstXML>标签元素，然后将该标签元素的值"这是我在学习XSL时所写的一个XML文档中的内容"按模板的样式定义拷贝到输出文件（本示例为HTML文档文件）。因此，转换后的HTML文档结构清晰、 修改也方便。
当然，读者也可以用IE5.0以上版本的浏览器或者其它浏览器打开这个FirstXSL.xsl文件，将能够看到如下示图所示的XSL的结构树——因为XSL文档本身也是XML格式的文档，同样也要遵守XML格式的文档的各种语法规则。
（3）最后，在XML格式文档文件中调用这个XSLT文件以便能够将XML文档（代表软件应用系统中的业务处理后的结果数据）和XSLT（代表对这些结果数据在最终的目标终端设备中如何显示和输出）相互关联
没有在上面所示的XML文档文件中添加对XSLT关联之前的执行结果状态为如下示图所示的显示结果——无格式化的XML文档文件的结果，这不利于人类阅读和理解——因为在数据中还包含有大量的XML格式文档的标签。
然后在前面所示的XML格式文档文件中调用这个XSLT文件——这只需要修改FirstXMLFile.xml中的代码为下面的内容以增加格式化转换的功能实现代码。最终的FirstXMLFile.xml文件的内容请见如下代码所示，请读者注意其中黑体标识的标签—— 对FirstXMLFile.xml文件添加格式转换（引用前面的FirstXSL.xsl样式表文件）之后的文件内容示例如下：
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="FirstXSL.xsl"?>
<firstXML>这是我在学习XSLT时所写的一个XML文档中的内容</firstXML >然后再在浏览器中浏览FirstXMLFile.xml文件，将出现如下示图所示的内容——由于在微软的IE5.5以上版本的浏览器中已经内嵌了MSXML3解释器，因此能够正常地解析。
请读者注意，如果读者在浏览器中只看到XML结构树（请参考前一示图所示的显示结果），而不是单独的"这是我在学习XSLT时所写的一个XML文档中的内容"字样，则说明读者机器中的浏览器没有安装MSXML3版本的XML Processor（支持XSLT技术的XML 处理器）程序。
读者可以对比前面的两个示例图，明显地能够了解到对XML文档文件经过XSLT的格式转换后在浏览器中能够按照设计者的要求显示输出，并且有利于人类的阅读和理解。
（4）将它们部署到应用服务器中执行
为了能够让读者了解XML+XSLT技术在Web应用系统开发中的具体应用，也可以将前面的代码所示的XML文档文件FirstXMLFile.xml和XSLT格式文档文件FirstXSL.xsl都部署到应用服务器（如 Tomcat等）中。然后在浏览器中对该FirstXMLFile.xml文件进行请求，比如请求的URL地址为：http://127.0.0.1:8080/WebBBS/FirstXMLFile.xml，将能够看到如下示图所示的结果——与前面示图所示的在本地浏览的结果是一致的。
读者从上面示例图所示的结果应该能够理解，XML与XSLT相互配合，同样也能够构造服务器端的应用。而且同一个XML格式的文档文件，只需要提供不同的XSLT格式文档文件，将可以产生出不同的显示效果。据此，对于不同的终端设备, 软件应用系统的开发人员可以设计出不同的XSLT文档文件就可以实现相同的数据在不同的终端设备中显示出不同的风格。
4、体验"XML+XSLT"技术中的格式和数据分离的优点
读者只需要将前面代码示例所示的XSLT文档文件FirstXSL.xsl中的如下的标签内容：
<p><xsl:value-of select="firstXML"/></p>改变为如下的标签内容：
<p><B><xsl:value-of select="firstXML"/></B></p>也就是对显示输出的文本内容应用粗体样式控制，然后再在Web浏览器中浏览修改后的页面浏览的效果，将能够看到如下示图所示的粗体文字的显示状态内容。
因此，如果对XML文档文件中的内容："<firstXML>这是我在学习XSL时所写的一个XML文档中的内容</firstXML >"应用各种不同的XSLT模板处理技术，将可以产生出满足不同应用需求要求的显示效果、和满足不同的显示设备的要求，而且"格式控制"和"数据内容"是相互分离。
当然，为了简化本示例的实现代码，作者在本文中直接将XML文档文件的内容设置为规定内容，其实该XML格式文档文件的数据内容完全可以在Web服务器端由相关的程序动态创建或者对原有的XML文档文件进行修改——XML文档文件中的数据也可以来自于物理数据库系统的数据库表。
因此，软件应用系统的开发人员可以根据系统业务处理的需要，动态地创建代表业务处理结果的XML格式文档，然后再针对不同的显示设备或者终端（如电脑屏幕、手机屏幕、电视屏幕等）提供不同版本的XSLT模板，从而可以保证同一个软件应用系统的处理结果能够适用于不同的终端设备，这将大大地扩大了软件应用系统的应用场景。
为了能够让读者对"XML+XSLT"相关技术的应用有一定的感性认识，作者给出如下两个示例图，它们的XML格式的文档是同一个XML文件，但通过提供不同的XSLT模板文件，最后在同一浏览器中显示出不同的结果。这说明了XSLT模板的数据转换功能的应用效果。
5、利用Macromedia Dreamweaver工具以可视化方式创建XSLT文档文件
读者在实际的项目开发中，如果Web应用系统的表示层开发中需要应用XML+XSLT技术，为了能够提高开发效率，一般可以应用一些可视化工具如Macromedia Dreamweaver页面开发工具创建XSLT格式文档文件。
作者在下文中为读者简要介绍如何利用Macromedia公司的Web页面开发工具Dreamweaver软件以可视化方式创建XSLT文档文件。
（1）先建立系统中所需要的XML文档文件
读者只需要在Dreamweaver页面开发工具程序中选择【新建文档】菜单，然后弹出如下示例图所示的【新建文档】对话框。读者只需要在该对话框中的【页面类型】选择框中选中【XML】类型页面，将自动地创建出一个空的XML文档文件。
（2）其次建立系统中所需要的XSLT格式文档文件
读者同样也只需要在Dreamweaver页面开发工具程序中选择【新建文档】菜单，然后弹出下图所示的【新建文档】对话框。读者只需要在该对话框中的【页面类型】选择框中选中【XSLT（整页）】类型页面，将自动地创建出一个空的XSLT文档文件。
然后Dreamweaver页面开发工具程序自动要求绑定XML数据源，并弹出下图所示的【定位XML源】对话框，读者只需要选定在前面示例图中所生成的XML文档文件。
（3）在XSLT文档文件中绑定XML文档文件中的目标数据
读者可以在Dreamweaver页面开发工具程序中选择【插入记录】菜单中的【XSLT对象】子菜单的各个下一级菜单项目，在XSLT文档文件中插入各种控制标签——请见下图所示的操作过程的结果截图。
当然，也可以直接在右面的绑定面板中将可使用的字段直接拖到XSLT文档文件窗口中，并且快速选定需要循环的部分，最后将自动地插入XSLT循环控制标签——请见下图所示的操作过程的结果截图。
（4）将XSLT文档文件关联到目标XML文档文件中
读者最后只需要将XSLT文档文件关联到目标XML文档文件中，请读者参考前面代码示例中的黑体标识的标签。最后再打开XML文件并附加上对应的目标XSLT样式表文件，然后存盘保存。
如何应用“XML+XSLT”技术分离Web表示层数据和样式
如何应用CSS+Div分离Web表示层数据处理逻辑和展现逻辑
如何正确应用Web MVC架构模式分离表示层和模型层耦合关系
如何应用策略设计模式分离JDBC数据库连接中的外部环境信息
如何应用策略设计模式的思想设计通用的数据库连接类
*请认真填写需求信息，我们会在24小时内与您取得联系。
