【第35天】XML以及其与DTD的综合使用，引入CSS的方式、选择器的分类及用法

本文链接：https://blog.youkuaiyun.com/qq_30257081/article/details/85108833

1 XML
2 CSS基础

1 XML

1.1 简介

XML（EXtensible Markup Language，可扩展标记语言），一种轻量级数据交换格式，1997年由W3C（The World Wide Web Consortium）发布，和HTML共用API，也就是说两者语法一致，迄今为止依然是第一版。与HTML负责展现数据的结构和样式不同，XML用来封装、传递数据而非显示数据，将数据封装进一个特定的XML文件中，注意XML并不是用浏览器来解析，但我们可以使用浏览器来验证XML的格式正确与否。 HTML有较高的容错性（落后的一种表现），不区分大小写（所有语言中唯一一种）；XML毫无容错性，严格区分大小写。

如果把页面当做一个房子，HTML相当于装修公司，XML相当于快递公司。

1.2 格式

头信息
<?xml version="1.0" encoding="编码" ?>
注释
元素
<tagName>要被封装的数据</tagName>
<tagName />
属性
<tagName 属性名=“属性值” />
特殊字符需要转义
>→<
<→>
&→&
'→’
"→"
在标签中传值写为?key=value&key2=value2
标签中换行、多个空格会被转为一个空格，转移符 会报错
CDATA格式
放置在CDATA格式中的文本会保留原先的格式，例如换行空格（适用于部分浏览器），特殊字符不需要进行转义，直接可以原样显示。但注意，XML的注释不可以写在里面，这样会原文本输出。 这种格式一般用来保存sql语句，若不放置在CDATA格式中，sql语句会被解析成以下格式导致错误：
select*fromuserwhereage>20;

<?xml version="1.0" encoding="utf-8" ?>
<!--
    xml文件毫无容错性，严格区分大小写，
    以.xml结尾，注意头信息之前不能有任何字符，
    不能有注释等，不能存在空格
-->
<我是根元素>
    <student id="1" name="张三">
        <location>济南</location>
        <爱好>游戏</爱好>
        <爱好>乒乓球</爱好>
        <info>
            来自济南的

                张三

                非常喜欢

                            乒乓球
                &gt;&lt;&amp;&apos;&quot;
        </info>
    </student>

    <student id="2" name="李四">
        <location>日照</location>
        <爱好>看书</爱好>
        <爱好>羽毛球</爱好>
        <info>
           <![CDATA[
  
	            来自日照的
	
	               李四
	
	                    非常喜欢
	
	                        看书
                    &gt;&lt;&amp;&apos;&quot;
                    > < & '' ""
            ]]>
        </info>
    </student>
</我是根元素>

Chrome下

Chrome下的代码效果

Edge下
Edge下的代码效果

1.3 DTD

DTD (Document Type Definition 文档类型定义)，是XML的语法规范，可以有以下几种添加DTD的方式，用来约束全文可以使用哪些标签，可以出现多少次等。

1.3.1 内部DTD

其中主要关注元素结构和元素属性的定义。

<?xml version="1.0" encoding="UTF-8" ?>
<!--
    手动添加内部DTD用来约束元素的结构
    <!DOCTYPE 根元素[
        <!ELEMENT 根元素 (一级子元素*)>
    ]>

    *:表示此元素可以出现任意多次，也可以不出现
    
    元素1,元素2,元素3:用逗号隔开，表示元素必须
    按照此顺序出现，并且如果没有其他标识符，则
    元素有且只能出现一次
    
    (元素1|元素2):表示括号中两种元素任选其一
    
    ?:0个或者1个
    
    +:至少一个上不封顶
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    (#PCDATA):表示元素内部是任意字符串
   
    ANY:表示元素内部可以是任意字符串，也可以再有子元素
   
    (#PCDATA|元素名)*:表示元素内部可以是任意字符串，
    也可以是特定子元素，也可以两者同时存在。与ANY的区别是，
    再写定义子元素是只可以定义指定的元素名，而声明ANY的元素
    定义子元素时可定义任意定义过的元素名。
   
    EMPTY:表示元素内部不能再有文本或者子元素
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	    <!ATTLIST 依附元素名 属性名 属性值类型 默认值>

    属性值类型:
        ID:表示属性值全文唯一，不能以数字开头
        CDATA:表示属性值可以是任意字符串
        (数据1|数据2|数据3):表示属性值只能从这三个中选取
        这里面不能带""
    
    默认值:
        #REQUIRED:表示默认值必须填写
        #IMPLIED:表示默认值爱写不写
        #FIXED:表示此属性值是固定的，不能更改，部分微软浏览器不遵循此规则
-->
<!DOCTYPE 学生信息[
    <!ELEMENT 学生信息 (student*)>
    <!ELEMENT student (name,age,(location|home),
            hobby*,gf?,teacher+,job*,criminal)>
        <!ATTLIST student sid ID #REQUIRED>
        <!ATTLIST student job_locate CDATA #IMPLIED>
        <!ATTLIST student salary (10k|15k|20k) "10k">
        <!ATTLIST student intro CDATA #FIXED "这个人很懒，没有个人介绍">
    <!ELEMENT name (#PCDATA)>
    <!ELEMENT age (#PCDATA)>
    <!ELEMENT location (#PCDATA)>
    <!ELEMENT home (#PCDATA)>
    <!ELEMENT hobby ANY>
    <!ELEMENT gf (#PCDATA)>
    <!ELEMENT teacher (#PCDATA)>
    <!ELEMENT job (#PCDATA|secondJob)*>
    <!ELEMENT secondJob (#PCDATA)>
    <!ELEMENT criminal EMPTY>
]>
<学生信息>
    <student sid="no1" job_locate="济南" salary="20k">
        <name>elena</name>
        <age>24</age>
        <location>济南</location>
        <hobby>健身</hobby>
        <hobby>跑步</hobby>
        <!--举一个不恰当的例子说明作用-->
        <hobby>
            <job>
                开发
            </job>
        </hobby>
        <gf>damon</gf>
        <teacher>aleric</teacher>
        <teacher>stefan</teacher>
        <job>
            开发
            <secondJob>特工</secondJob>
        </job>
        <criminal/>
    </student>
</学生信息>

内部DTD的使用

1.3.2 外部DTD

分为本地、网络引入两种方式，增加了代码的可复用程度。

本地方式

outter.dtd

<?xml version="1.0" encoding="utf-8" ?>
<!--
    注意dtd文件不书写doctype头部信息
    直接书写内部结构
-->
<!ELEMENT student (name,age)>
<!ELEMENT name (#PCDATA)>
    <!ATTLIST name id ID #REQUIRED>
<!ELEMENT age (#PCDATA)>

<?xml version="1.0" encoding="UTF-8" ?>
<!--
     直接引入提供路径下的dtd文件
     <!DOCTYPE 根元素名 SYSTEM "路径">
-->
<!DOCTYPE student SYSTEM "outter.dtd">

<student>
    <name id="no1">elena</name>
    <age>20</age>
</student>

网络方式

一般网络方式获取的.dtd文件来源于jar包中，根据url地址获取jar中的.dtd文件。

    <!DOCTYPE 根元素名 PUBLIC "别名" "url地址">

2 CSS基础

2.1 简介

CSS（Cascading Style Sheet，层叠样式表），1996年由网景（Netscape）发布了第一版的CSS，迄今为止已经发布到3.1版本，专门用来渲染整个页面的样式，之前样式由Html渲染。

使用HTML来渲染页面的样式的弊端
使用html来同时渲染页面的结构和样式会导致页面冗余代码严重，浏览器解析造成困难，而css的第一个原则就是将页面的结构和样式解耦。

2.2 引入CSS的方式

2.2.1 内嵌式

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>内嵌式</title>
        <!--
            内嵌式
            直接将CSS代码书写在head标签内
            style内部属于CSS技术的范畴，不能书写任何标签及HTML的注释
            注意这种引入方式并不是最好的引入方式，
            仅仅将页面的结构和样式初步解耦，代码重用性较差，
            且优先级又并非最高，没有什么特点，使用的场合很少
        -->
        <style>
            h2{
                /*
                    这是css注释的写法
                    以下为设置字体
                */
                font-family:楷体;
                /*
                    设置字体大小
                */
                font-size:30px;
                /*
                    设置字体颜色
                */
                color:orangered;
            }
        </style>
    </head>
    <body>
        <h2>你期待圣诞节收到什么礼物呀？</h2>
    </body>
</html>

2.2.2 外链式

css/style.css


/*顺便说一下对a链接样式常用修改的方法*/

/*
    设置a链接默认的样式
*/
a{
    /* 去掉链接自带的下划线 */
    text-decoration: none;
    /* 设置颜色 */
    color: #ff4222;
    /* 设置字体大小 */
    font-size:30px;
}

/*
    设置鼠标滑过或悬停a链接时的样式
    这里冒号后面是一个伪类
*/
a:hover{
    text-decoration: underline;
    color:navy;
    font-size: 40px;
}

/*
    设置链接被点击之后的样式
*/
a:visited{
    color:purple;
}

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>外链式</title>
        <!--
            外链式
            引入一个外部的独立CSS文件到本页面
            rel:表示关联的是一个样式表
            href:表示独立CSS文件的路径
        -->
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <a href="#">我是一个链接</a>
    </body>
</html>

2.2.3 行内式

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>行内式</title>
    </head>
    <body>
        <!--
            行内式
            直接将CSS代码书写在标签内
            这种引入方式严重违背了CSS将结构和样式解耦的原则
            但是因为它的优先级极高，所以这种引入方式使用场合较多
        -->
        <!--background-color:设置背景色，color:设置字体颜色-->
        <label style="background-color:lightblue;color:darkblue">
            我是一个label
        </label>
    </body>
</html>

2.2.4 三种方式的优先级

css/style.css

div{
    background-color:yellow;
}

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>优先级</title>
        <style>
            div{
                background-color:aqua;
            }
        </style>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div style="background-color:red;">看看我听谁的~~</div>
    </body>
</html>

后将行内样式删去，调换外链和内嵌两种方式的顺序，发现这三种引入方式在样式发生冲突时，行内式一定优先于外链式和内嵌式，后两者放在后面的会覆盖之前出现冲突的CSS渲染样式。

2.3 选择器

选择器(selector)，在页面中精确拿取元素的一种简单的技术。由css第一次加载使用，之后各种前端js类库都有借鉴。CSS选择器在单独使用时为基本选择器，而在实际开发过程中，为了能精确地定义到一个/一组元素常常需要复合选择器。 基本、复合选择器又根据写法和含义不同分为不同类别。这里为了便于调试，CSS样式通过内嵌式展现。

2.3.1 基本选择器

当三种基本选择器出现冲突时，优先级id选择器>类别选择器>标记选择器，这与放置的先后顺序无关。注意，如果有多个选择器来操作一个元素的样式，优先级高的选择器会将优先级低的样式覆盖掉。

需要在标签上关联选择器时，可以直接使用Emmet插件在标签后面添加“#”加id名或“.”加class名。

2.3.1.1 标记选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>标记选择器</title>
        <style>
            /*
                标记选择器
                    这种选择器直接使用标签名作为选择元素的依据
                    极少单独使用，因为非常容易引起误操作
            */
            span{
                background-color: orangered;
            }
        </style>
    </head>
    <body>
        <span>测试1</span>
    </body>
</html>

2.3.1.2 类别选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>类别选择器</title>
        <style>
            /*
                类别选择器
                    使用.className作为选择元素的依据
                    格式：
                    .className{

                    }
            */
            .test2{
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <span class="test2">测试2</span>
    </body>
</html>

2.3.1.3 id选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>
        <style>
            /*
                id选择器
	                使用#idName作为选择元素的依据
	                格式：
	                #idName{
	
	                }
            */
            #test3{
                background-color: deeppink;
            }


        </style>
    </head>
    <body>
        <span id="test3">测试3</span>
        <!--
            id属性在页面上的值应该上下文唯一，id的含义本来就是身份证的意思
            
            虽在CSS和HTML中并没有明确规定，但在JS中存在一个方法
            document.getElementById("idName")
            根据id名拿取唯一一个元素，如果在全文出现id冲突
            则此方法会出现安全隐患，所以人们约定俗成的在页面id必须唯一
        -->
    </body>
</html>

2.3.2 复合选择器

为了防止对无关元素造成误操作，常常需要精确地定义到一个/一组元素，此时需要前面说到的基本选择器来搭配复合选择器实现复杂逻辑的样式变换。

2.3.2.1 交集选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>交集选择器</title>
        <style>
            /*
                交集选择器
                    由一个标记选择器后面紧跟
                    一个类别或者id选择器，则必须同时满足
                    两个条件才可以成功选取

                格式：
                    tagName.className{

                    }
                    tagName#idName{

                    }
            */
            label.test1{
                /* 倾斜字体 */
                font-style: italic;
            }
            div#test{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div id="test">我是div</div>
        <label class="test1">测试1</label>
    </body>
</html>

2.3.2.2 并集选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>并集选择器</title>
        <style>
            /*
                并集选择器
                    由多个基本或者复合选择器
                    用逗号隔开，只要满足其中任意一个
                    就可以成功选取

                格式：
                    sel1,sel2,sel3,selN{
                    
                    }
            */
            span.test2,label.test2,div#test,h2,h3{
                background-color: chocolate;
            }
        </style>
    </head>
    <body>
        <label>测试1</label>
        <span class="test2">测试2</span>
        <label class="test2">测试3</label>
        <div id="test">我是div</div>
        <h2>标题2</h2>
        <h3>标题3</h3>
    </body>
</html>

2.3.2.3 后代选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>
        <style>
            /*
                继承特性
                    子元素在没有与其他样式发生任何冲突的前提下，
                    会完全继承其父元素（包含这个子元素的那个元素）
                    的所有css渲染效果
                    
                后代选择器
                    根据左祖先右后代的原则，用空格将具有
                    家族关系的选择器隔开，则可以选取特定子元素
                
                格式：
                    sel1 sel2 sel3 selN{

                    }
            */
            div#outter span.inner{
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="outter">济南的<span class="inner">冬天</span>是没有风的。</div>
    </body>
</html>

2.3.2.4 全选选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>全选选择器</title>
        <style>
            /*
                全选选择器
                    拿取页面全部元素

                格式：
                    *{
                    
                    }
            */
            
            *{
                font-weight:bolder;
            }
        </style>
    </head>
    <body>
        <label>测试1</label>
        <span class="test2">测试2</span>
        <label class="test2">测试3</label>
        <div id="test">我是div</div>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <div id="outter">济南的<span class="inner">冬天</span>是没有风的</div>
    </body>
</html>