（二）html+CSS+XML入门

最新推荐文章于 2024-12-31 09:48:37 发布

baopeer

最新推荐文章于 2024-12-31 09:48:37 发布

阅读量1.9k

点赞数 1

分类专栏：知识储备文章标签： web前端

本文链接：https://blog.csdn.net/baopeer/article/details/79972873

版权

知识储备专栏收录该内容

3 篇文章

订阅专栏

HTML

1、认识html

1）html(超文本标记语言)

(HyperText markup language)

超文本：页面的数据可以通过标签改变样式，而且可以通过超链接直接跳到下一个页面。

标记 : 该门语言是由标签来构成的。学习html不用怎么去理解，只要需要记住标签的作用即可。代码由标签组成

2）html语言的特点：

1.html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。

2.html是不区分大小写的。

3.不可以自己定义标签，xml可以

3）html语言的构成：

html是由<html>开始，由</html>结束，在这之间是分<head>和<body>两部分

<head>网页的头信息</head>

<body>网页的体部分</body>

</html>

注意：html的注释：

2、头信息<head>的介绍

1）头信息的作用

1.1 可以设置网页的标题。

1.2 可以通知浏览使用指定的码表解释html页面.

2）头信息中的标签讲解

<head>

<!—标题的内容 -->

<title>这个是我的第一个网页</title>

</head>

3、html常用的标签

1）标签的类型：

1.1 标签可以是开始标签与结束标签。 <p> 内容</p> 需要把网页的数据内容封装到标签中。

1.2 便签可以是开始标签与结束标签都是在一个标签体内。功能单一不需要封装数据到标签中。比如： <hr/>

2）常规html标签如下：

2.1<h1></h1>~<h6> </h6>表示是一个标题

2.2 <p></p> 段落标签

2.3<hr/> 水平线标签(画个水平线)

2.4<br/> 换行标签

2.5<sub></sub> 下标

2.6<sup></sup> 上标

2.7 <pre></pre> 原样标签：原样标签会保留空格和换行符。tab不保留的

2.8 <ol>

</ol>有序的列表标签、

2.9 <ul>

</ul>无序的列表标签。

2.10项目列表标签：<dl> </dl>, <dt> </dt>, <dd></dd>

注意：：<dd> </dd>显示时候会缩进一个tab

2.11行内标签(span)

2.12块标签<div>:div标签的内容会独立占一行。目前和<br/>差不多

3）实体标签

实体标签的用途：

因为像> < 等一些符号在html页面中是有着特殊含义，这些字符如果需要在页面中显示，这时候就应该使用实体标签。

常用的实体标签

空格  

小于号 <

大于号 >

人民币 &yen；

版权 ©

商标 ®

注意：后边的分号也是实体标签的一部分。写html的时候想写这些符号直接用实体标签代替

比如：  段落标签是使用<p>标签

4）：<embed>媒体标签与<marquee>飘动标签

1、媒体标签

1.1符号为：<embed></embed>

1.2属性：

hidden ：设置隐藏插件是否隐藏。

src ：用于指定音乐的路径

1.3代码

2、飘动标签：

2.1符号为：<marquee> </marquee>

2.2属性：

direction : 指定飘动的方向。right就是向右飘

scrollamount: 指定飘动的速度。

loop :指定飘动的次数

2.3代码：<marquee loop="-1"scrollamount="30" direction="right"><fontsize="+6" color="red"> 我飞起来了...</font></marquee>

5）<a> 超链接标签

1符号：<a> </a>

2属性：

href : 用于指定链接的资源

target: 设置打开新资源的目标窗口。值_Blank 在独立的窗口上打开新资源

值_self 在当前窗口打开新资源

file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。

3超链接标签的原理：

3.1. a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解析器去解析该网址，首先会在本地机器去找一个hosts文件，如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。

3.2. 如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解析器去解析该资源路径。

3.3. 如果a标签的href属性值并不是以http开始，而且其他的一些协议，那么这时候浏览器就回去到我们本地的注册表中去查找是否有处理这种协议的应用程序，如果有，那么马上启动该应用程序处理该协议。

邮件的协议： mailTo

迅雷的协议： thunder

4超链接标签的作用：

1. 可以用于链接资源。

2. 锚点点位.

2.1.首先编写一个锚点。

锚点的格式： <a name="锚点名字"> 数据</a>

2.2. 使用a标签的herf属性连接到锚点出。 href=“#锚点的名字”

5代码：

<ahref="www.baidu.com">百度</a>

<a target="_blank" href="2常用的标签.html">带你去看常用标签</a><br/>

如果有需要请发送邮件至：<ahref="mailTo:123456@qq.com">123456@qq.com</a><br/>

传智播客传智播客传智播客传智播客传智播客传智

6）<img>图片标签：

1、符号：<img />

2、 img标签常用的属性:

width：设置图片宽度

height 设置图片高度

alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。

3、代码：

7）<table>表格标签

1、表格使用到的标签：

<table> 表格

<tr> 行

<td> 单元格

<th> 表头默认的样式是居中，加粗。

<caption> 表格的标题

2、三个表格基本标签

3、表格常用的属性：

border 设置表格的边框

width : 设置表格的宽度

height: 设置表格的高度的。

colspan: 设置单元格占据指定的列数。

rowspan : 设置单元格占据指定的行数。

8）<form>表单标签

表单标签：表单标签的作用是用于提交数据给服务器的。

表单标签的根标签是<form>标签

常用的属性：

action:该属性是用于指定提交数据的地址。

method：指定表单的提交方式。

get : 默认使用的提交方式。提交的数据会显示在地址栏上。

post ：提交的数据不会显示在地址栏上。，一般都是post提交

注意：表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值。

9）<frame>框架标签

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%">

   <frame src="frame_a.htm">

   <frame src="frame_b.htm">

</frameset>

frameSet ：一个frameSet可以把一个页面切割成多份。

只能按照行或者列切割。

frame 不能被切割的。 frame是位于frameSet

注意： frameSet标签不能用于body标签体内

CSS

一 CSS基本知识

html 在一个网页中负责的事情是一个页面的结构

css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

css的注释： /* css的注释 ..*/

1、编写css代码的方式：

第一种：在style标签中编写css代码。只能用于本页面中，复用性不强

格式：

编写css的代码。

</style>

例子：

<styletype="text\css">

a{ //所有的a标签都使用这些

color:#F00; //颜色为红色

text-decoration:none; //去掉下划线

}

</style>

第二种：可以引入外部的css文件。推荐使用。复用性好

方式1：使用link标签。推荐使用

格式：

例子： <link href="1.css" rel="stylesheet"/>

方式2：使用<style>引入

格式：

<styletype="text/css" >

@import url("css的路径");

</style>

第三种：直接在html标签使用style属性编写。缺点：只能用于本标签中，复用性较差。不推荐使用。

例子：

<a style="color:#0F0;text-decoration:none" href="#">新闻的标题1</a>

2、选择器

选择器：选择器的作用就是找到对应的数据进行样式化。

1）标签选择器

就是找到所有指定的标签进行样式化。

格式：

标签名{

样式1；样式2....

}

例子：

Css代码：

div{

color:#F00;

font-size:24px;//字体大小

}

Body代码：

<div>第二个标签</div>

<ahref = "#">第一个标签</a>

效果：<div>变为指定样式，<a>不变

2）类选择器

使用类选择器首先要给html标签指定对应的class属性值。单独一个标签可以指定类的属性

格式：

.class的属性值{

样式1；样式2...

}

例子：

Css代码：.two{

background-color:#0F0;//背景颜色

color:#F00;//前景颜色

font-size:24px;//字体大小

}

Body代码：<div class="two" >第一个标签</div>

<div >第二个标签</div>

效果：第一个标签变为two里边的样式，第二个没有变

类选择器要注意的事项：

1.html元素的class属性值一定不能以数字开头.

2.类选择器的样式是要优先于标签选择器的样式。

3）ID选择器

使用ID选择器首先要给html元素添加一个id的属性值。

ID选择器的格式：

#id属性值{

样式1；样式2...

}

列子：

Css代码： #one{

background-color:#0F0;

}

Body代码：<div id = "one" >第一个标签</div>

id选择器要注意的事项：

1.ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。

2.ID的属性值也是不能以数字开头的。

3.ID的属性值在一个html页面中只能出现一次。是一个值只可以出现一次。

4）交集选择器

就是对选择器1中的选择器2里面的数据进行样式化。注意;选择器1和选择器2写的时候除了可以写标签，可以是id值，class值等

选择器1 选择器2{

样式1，样式2....

}

例子：

Css代码：.two span{

background-color:#999;

font-size:24px;

}

Body代码： <div id="one"class="two">这个是<span>第二个div标签</span>...</div>

<span>这个是一个span标签</span>

效果：class等于two的标签中的span变化，单独的span没有变化

5）并集选择器

对指定的选择器进行统一的样式化。注意;选择器1和选择器2写的时候除了可以写标签，可以是id值，class值等

格式：

选择器1,选择器2..{

样式1；样式2...

}

例子css代码：span,a{

border-style:solid;//边框

border-color:#F00;

}

6）通用选择器

样式1；样式2...

}

例子：Css代码*{

text-decoration:line-through;//线从中间穿过

background-color:#CCC;//背景灰色

}

7）伪类选择器

伪类选择器就是对元素处于某种状态下进行样式的。下边对a标签进行样式编辑

a:link{color:#F00}/* 没有被点击过---红色 */

a:visited{color:#0F0}/* 已经被访问过的样式（点击过）---绿色 */

a:hover{color:#00F;}/* 鼠标经过的状态---蓝 */

a:active{color:#FF0;}/*选中的状态：按下没有松手*/

</style>

注意：

1. a:hover 必须被置于 a:link 和 a:visited 之后

2.a:active 必须被置于 a:hover 之后

Body代码：<body>

</body>

二、CSS的功能

1、页面背景body标签

对body标签操作

body{

background-color:#CCC; 设置背景颜色*/

background-image:url(2.jpg);/*设置图像为背景*/

background-repeat:no-repeat; /* 设置背图片是否要重复,不写默认重复 */

background-position:370px100px; /* 设置背景图片的位置，第一个参数是左上角的左边距，第二个参数是左上角的上边距 */

}

2、css的定位

相对定位：相对定位是相对于元素原本的位置进行移动的。

使用方式： position:relative;

绝对定位：绝对定位是相对于整个页面而言。可以用鼠标拖动

position:absolute;

top:200px;

left:380px;

固定定位：

position:fixed;/* 固定定位: 固定定位是相对于整个浏览器而已的。

top:380px;

left:1000px;

.two{

background-color:#0F0;

position:relative; /* 相对定位,对于当前位置 */

top:10px;//离原来的上有10

left:10px;//离原来的左有10

}

#ad{/*id选择器*/

width:400px;

height:200px;

border-style:solid;

font-size:24px;

color:#F00;

position:absolute; /* 绝对定位,相对于一个页面的左上角而言的。 */

top:200px;

left:380px;

}

#ad2{/*id选择器*/

position:fixed; /* 固定定位: 固定定位是相对于整个浏览器而已的。 */

top:380px;

left:1000px;

}

3、盒子模型

盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者是边框与边框之间的距离。

盒子模型主要是用于操作内边距(padding)与外边距（margin）。

内边距：盒子里边的数据离边框的距离

外边距：盒子之间的距离

.outer{

border-style:solid;//实线

width:370px;

height:200px;

margin-top:250px;//外边距

margin-left:420px;//离body420

background-image:url(../1.jpg);//背景图企鹅

background-repeat:no-repeat;

background-position:center;//背景在中间

}

4、对div操作

4.1div默认是没有边框呃。

4.2css代码：<style type="text/css">

div{

width:100px;//设置宽度

height:100px;//设置高度

border-style:dotted solid double ; /* 设置边框的样式上是点右是实体下是double,左没指定，和右一样*/

border-color:#F00;

border-bottom-color:#0FF;//下边框颜色

border-top-width:100px;//上边框宽度

}

</style>

4.3body代码：<body>

<div>这个是第一个div</div>

</body>

XML

1、定义与作用

定义：xml全称为Extend Markup Languge（可扩展标签语言），标签由开发者自己制定的（要按照一定的语法定义），而html标签是固定的。和html一样， xml注释也是

xml文件以xml后缀名结尾。

xml文件需要使用xml解析器去解析。浏览器内置了xml解析器。吧xml文件拖到浏览器即可。Html是直接用浏览器打开

作用：描述带关系的数据（软件的配置文件）、数据的载体（小型的“数据库”）

带关系的数据：

把ip地址端口配置到xml文件：

host.xml

<host>

</host>

数据的载体：

teacher.xml

<email>zhangsan@qq.com</email>

</teacher>

2、xml语法

1）定义标签

语法：

1）<student></student> 开始标签标签体内容结束标签

2）<student/> 或 <student></student>空标签。也就是说没有标签体内容

3）xml标签名称区分大小写。

4）xml标签一定要正确配对。又开始就有结束、e.g：<student>123.就不对

5）xml标签名中间不能使用空格

6）xml标签名不能以数字开头

7）注意： 在一个xml文档中，有且仅有一个根标签，xml文档出现的第一个标签为跟标签，后边所有的标签都是它的子标签

2）属性

语法： <Student name="eric">student</Student>

注意：

1）属性值必须以引号包含，不能省略，要不全单，要不全双引号！！！

2）一个标签内可以有多个属性，可自己定义。但不能出现重复的属性名！！！

3）文档声明

语法： <?xmlversion="1.0" encoding="utf-8"?>

其中：

version: xml的版本号

encoding：解析xml文件时查询的码表（解码过程时查询的码表）

注意：

1）如果在ecplise、idea工具中开发xml文件，保存xml文件时自动按照文档声明的encoding来保存文件。不会出现中文乱码

2）如果用记事本工具修改xml文件，注意保存xml文件按照文档声明的encoding的码表来保存。

4）转义字符

在xml中内置了一些特殊字符，这些特殊字符不能直接被浏览器原样输出。如果希望把这些特殊字符按照原样输出到浏览器，对这些特殊字符进行转义。转义之后的字符就叫转义字节。

特殊字符转义字符

< <

> >

" "

& &

空格 &nsbp;

5）CDATA块

作用：可以让一些需要进行包含特殊字符的内容统一进行原样输出。

格式为：<![CDATA[

代码

]]>

6）处理指令

作用：告诉xml解析如何解析xml文档

案例： <?xml-stylesheet type="text/css"href="1.css"?> ：告诉xml解析该xml文档引用了哪个css文件

3、XML解析（程序如何读取）

xml文件除了给开发者看，更多的情况使用程序读取xml文件的内容。这叫做xml解析

两种解析方式：

DOM解析： xml解析器一次性把整个xml文档加载进内存，然后在内存中构建一颗Document的对象树，通过Document对象，得到树上的节点对象，通过节点对象访问（操作）到xml文档的内容。

DOM解析工具:

1）JAXP （又叫oracle-Sun公司官方）

2）JDOM工具（非官方）

3）Dom4J工具（非官方）

三大框架（默认读取xml的工具就是Dom4j）

SAX解析

Sax解析工具（oracle-sun公司官方）

1)DOM4J工具的使用

非官方，不在jdk中。

A、使用步骤：

1）导入dom4j的核心包。 dom4j-1.6.1.jar

2）编写Dom4j读取xml文件代码

获取文档类document方法：

//1.创建一个xml解析器对象

SAXReader reader = new SAXReader();

//2.读取xml文档，返回Document对象

Document doc = reader.read(new File("./src/contact.xml"));

B、获取方法说明如下：

标签类：Element，文档类：Document

标签：

Element Document.getRootElement(); //获取xml文档的根标签

Element ELement.element("标签名") //指定名称的第一个子标签

Iterator<Element>Element.elementIterator("标签名");// 指定名称的所有子标签

List<Element> Element.elements(); //获取所有子标签

节点：

(Iterator) Element.nodeIterator(); //获取当前标签节点下的所有子节点

属性：

String Element.attributeValue("属性名") //获取指定名称的属性值

Attribute Element.attribute("属性名")；//获取指定名称的属性对象

Attribute.getName() //获取属性名称

Attibute.getValue() //获取属性值

List<Attribute> Element.attributes(); //获取所有属性对象

Iterator<Attribute> Element.attibuteIterator(); //获取所有属性对象

文本：

Element.getText(); //获取当前标签的文本

Element.elementText("标签名") //获取当前标签的指定名称的子标签的文本内容

C、增加、修改、删除方法如下:

增加：

DocumentHelper.createDocument() 增加文档

Document.addElement("名称") 增加标签

Element.addAttribute("名称"，“值”) 增加属性

修改：

Attribute a = Element.attribute("id")获取标签属性类对象

Attribute.setValue("值") 修改属性值

Element.addAtribute("同名的属性名","值") 修改同名的属性值

Element.setText("内容") 修改文本内容

删除

Element.detach(); 删除标签

Attribute.detach(); 删除属性

D、将a.xml写到b.xml中

//读取day07项目的xm文件

Document doc = new SAXReader().read(new File("./src/a.xml"));

//指定文件输出的位置

FileOutputStream out = new FileOutputStream("e:/b.xml");

//1.创建写出对象

XMLWriter writer = new XMLWriter(out);

//2.写出对象

writer.write(doc);

//3.关闭流

writer.close();

E、xPath技术

问题：当使用dom4j工具查询比较深的层次结构的节点（标签，属性，文本），要一个一个查询，比较麻烦！！！xpath技术主要是用于快速获取所需的节点对象。

在DOM4J中如何使用xpath技术：

1）导入xPath支持jar包。 jaxen-1.1-beta-6.jar

2）使用xpath方法

List<Node> selectNodes("xpath表达式"); 查询多个节点对象

Node selectSingleNode("xpath表达式"); 查询一个节点对象

xPath表达式（语法）：

/ 绝对路径表示从xml的根位置开始或子元素（一个层次结构）

// 相对路径表示不分任何层次结构的选择元素。

* 通配符表示匹配所有元素

[] 条件表示选择什么条件下的元素

@ 属性表示选择属性节点

and 关系表示条件的与关系（等价于&&）

text() 文本表示选择文本内容

Document doc = new SAXReader().read(new File("./src/contact.xml"));

String xpath = "";

/**

* 1. / 绝对路径表示从xml的根位置开始或子元素（一个层次结构）

xpath = "/contactList";//结果是一个

xpath = "/contactList/contact";//拿contactList下的contact

/**

* 2. // 相对路径表示不分任何层次结构的选择元素。

xpath = "//contact/name";//拿父标签是congtact的name标签

xpath = "//name";//拿所有name标签

/**

* 3. * 通配符表示匹配所有元素

xpath = "/contactList/*"; //根标签contactList下的所有子标签，不包括孙标签

xpath = "/contactList//*";//根标签contactList下的所有标签（不分层次结构）

/**

* 4. [] 条件表示选择什么条件下的元素

//带有id属性的contact标签

xpath = "//contact[@id]";

//第二个的contact标签

xpath = "//contact[2]";

//选择最后一个contact标签

xpath = "//contact[last()]";

/**

* 5. @ 属性表示选择属性节点

xpath = "//@id"; //选择id属性节点对象，返回的是Attribute对象

xpath = "//contact[not(@id)]";//选择不包含id属性的contact标签节点

xpath = "//contact[@id='002']";//选择id属性值为002的contact标签

xpath = "//contact[@id='001' and @name='eric']";//选择id属性值为001，且name属性为eric的contact标签

/**

*6. text() 表示选择文本内容

//选择name标签下的文本内容，返回Text对象

xpath = "//name/text()";

xpath = "//contact/name[text()='张三']";//选择姓名为张三的name标签

List<Node> list = doc.selectNodes(xpath);

for (Node node : list) {

System.out.println(node);

2）SAX解析工具的使用

SAX解析工具- Sun公司提供的。内置在jdk中。org.xml.sax.*

A、学习SAXParser类

核心的API：

SAXParser类：用于读取和解析xml文件对象

parse（File f, DefaultHandler dh）方法：解析xml文件

参数一： File：表示读取的xml文件。

参数二： DefaultHandler： SAX事件处理程序的基类。一般使用DefaultHandler的子类

DefaultHandler类的API:

voidstartDocument() : 在读到文档开始时调用

voidendDocument() ：在读到文档结束时调用

voidstartElement(String uri, String localName, String qName, Attributes attributes) ：读到开始标签时调用

void endElement(String uri, StringlocalName, String qName) ：读到结束标签时调用

voidcharacters(char[] ch, int start, int length) ：读到文本内容时调用

需求：读取contact.xml文件，目的完整输出文档内容

publicclass Demo1 {

publicstaticvoid main(String[] args) throws Exception{

//1.创建SAXParser对象。SAXParser的构造方法是被保护的。用一个静态方法返回这个类的对象

//SAXParserFactory类的构造方法也被保护，用newInstance()方法可返回工厂类的对象。单例模式

SAXParser parser = SAXParserFactory.newInstance().newSAXParser();

//2.调用parse方法

/**

* 参数一： xml文档

* 参数二： DefaultHandler的子类

MyDefaultHandler handler = new MyDefaultHandler();

parser.parse(new File("./src/contact.xml"),handler);

String content = handler.getContent();

System.out.println(content);

}

publicclass MyDefaultHandler extends DefaultHandler {

//存储xml文档信息

private StringBuffer sb = new StringBuffer();

//获取xml信息

public String getContent(){

returnsb.toString();

}

/**

* 开始文档时调用—事件

@Override

publicvoid startDocument() throws SAXException {

System.out.println("MyDefaultHandler.startDocument()");

}

/**

* 开始标签时调用

* @param qName: 表示开始标签的标签名

* @param attributes: 表示开始标签内包含的属性列表

@Override

publicvoid startElement(String uri, String localName, String qName,

Attributes attributes) throws SAXException {

sb.append("<"+qName);

//判断是否有属性

if(attributes!=null){

for(inti=0;i<attributes.getLength();i++){

//得到属性名称

String attrName = attributes.getQName(i);

//得到属性值

String attrValue = attributes.getValue(i);

sb.append(" "+attrName+"=\""+attrValue+"\"");

}

sb.append(">");

}

/**

* 结束标签时调用

* @param qName: 结束标签的标签名称

@Override

publicvoid endElement(String uri, String localName, String qName)

throws SAXException {

System.out.println("MyDefaultHandler.endElement()-->"+qName);

}

/**

* 读到文本内容的时调用

* @param ch: 表示当前读完的所有文本内容

* @param start：表示当前文本内容的开始位置

* @param length: 表示当前文本内容的长度

@Override

publicvoid characters(char[] ch, intstart, intlength)

throws SAXException {

//得到当前读取的文本

String content = new String(ch,start,length);

sb.append(content);

}

/**

* 结束文档时调用

@Override

publicvoid endElement(String uri, String localName, String qName)

throws SAXException {

sb.append("</"+qName+">");

}

3）比较DOM和SAX的不同

DOM解析原理：一次性把xml文档加载进内存，然后在内存中构建Document树。对内存要求比较要。

缺点：不适合读取大容量的xml文件，容易导致内存溢出。

SAX解析原理：加载一点，读取一点，处理一点。对内存要求比较低。

DOM解析	SAX解析
原理：一次性加载xml文档，不适合大容量的文件读取	原理：加载一点，读取一点，处理一点。适合大容量文件的读取
DOM解析可以任意进行增删改成	SAX解析只能读取
DOM解析任意读取任何位置的数据，甚至往回读	SAX解析只能从上往下，按顺序读取，不能往回读
DOM解析面向对象的编程方法（Node，Element，Attribute）,Java开发者编码比较简单。	SAX解析基于事件的编程方法。java开发编码相对复杂。

4、xml约束

XML约束：规范XML文件数据内容格式的编写规则。（由开发者自行定义,比如，不可以出现两个age）

两种约束技术：

DTD约束：语法相对简单，功能也相对简单。学习成本也低。

Schema约束：语法相对复杂，功能也相对强大。学习成本相对高！！！（名称空间）

4.1DTD约束

1）DTD语法

约束标签

<!ELEMENT元素名称类别> 或 <!ELEMENT 元素名称 (元素内容)>

类别：

空标签： EMPTY。表示元素一定是空元素。

普通字符串： (#PCDATA)。表示元素的内容一定是普通字符串，不用写“”。（不能含有子标签）。

任何内容： ANY。表示元素的内容可以是任意内容（包括子标签）

(元素内容):

顺序问题：

<!ELEMENT 元素名称 (子元素名称 1,子元素名称 2,.....)>：按顺序出现子标签

次数问题：（和正则相似）

标签：必须且只出现1次。

标签+ ：至少出现1次

标签* ： 0或n次。

标签？： 0 或1次。

<!ELEMENT note (to,from,heading,body)>

//note标签里肯定有这四个子标签；顺序出现；只出现一次

<!ELEMENT to (#PCDATA)>//to标签一定是字符串

约束属性标签

<!ATTLIST元素名称属性名称属性类型默认值>

默认值：

#REQUIRED属性值是必需的

#IMPLIED 属性不是必需的

#FIXEDvalue 属性不是必须的，但属性值是固定的

属性类型：控制属性值的

CDATA ：表示普通字符串

(en1|en2|..)：表示一定是任选其中的一个值，枚举

ID：表示在一个xml文档中该属性值必须唯一。值不能以数字开头

<!ATTLIST to id ID #REQUIRED>

<to id="a2"></to>//id的值必须唯一，不能两个都是a1

2）导入DTD约束的方式

A、内部导入，写在xml文件里边

<!DOCTYPE note [//对note标签约束

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

B、外部导入dtd文件

方式一：本地文件系统：//xml和dtd在同一个目录下，用SYSTEM关键字

<!DOCTYPE note SYSTEM "note.dtd">//在note.xml文件里边导入note.dtd文件

方式二：公共的外部导入：一般导入别人写好的，要联网，框架用到

<!DOCTYPE 根元素 PUBLIC "http://gz.itcast.cn/itcast.dtd">

4.2Schema约束

Schema又叫名称空间

Schema约束比较复杂，它告诉xml文档的哪个元素被哪个schema文档约束。在一个xml文档中，不同的标签可以受到不同的schema文档的约束。这就是为什么schema复杂的原因

1）一个名称空间受到schema文档约束的情况，基本格式是xmlns:xsi="URI"

2）多个名称空间受到多个schema文档约束的情况

3）默认名称空间的情况，基本格式是xmlns="URI"

Book.xml文件

<?xml version="1.0" encoding="UTF-8"?>

//定义了两个xmln,一个是itcast，一个是xsi,xsi不用指定schema文档地址，默认官网会找

<itcast:书架 xmlns:itcast="http://www.itcast.cn"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

itcast:schemaLocation="http://www.itcast.cn book.xsd">

<itcast:书>

<itcast:书名>JavaScript网页开发</itcast:书名>

<itcast:作者>张孝祥</itcast:作者>

<itcast:售价>28</itcast:售价>

</itcast:书>

</itcast:书架>

Book.xsd

<?xml version="1.0" encoding="UTF-8" ?>

//schema标签是xs开头

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

targetNamespace="http://www.itcast.cn"

elementFormDefault="qualified">

<xs:element name='书架' >

<xs:complexType>//可包含多个子标签

<xs:sequence maxOccurs='unbounded' >//顺序执行，最大出现次数没有限制

<xs:element name='书' >

<xs:complexType>

<xs:sequence>//默认次数为1.只能有1次，不写也不行

<xs:element name='书名' type='xs:string' />

<xs:element name='作者' type='xs:string' />

<xs:element name='售价' type='xs:integer' />

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>