【CSS】CSS+HTML‘VS’CSS+XML

原创 2016年05月30日 23:00:19

首先上个网页效果图:

静夜思

我们平常都用html+css+JavaScript来写网页,使网页美观生动。今天先不说JavaScript,那么就是静态页面的实现,html+css。实现上面的效果是很容易的。

就像下面这样:

这里写图片描述

那么你知道xml+css也是可以写网页的吗?

在学到css课程之前,我从来没有这么想过。

接下来我们分析一下(先找个理由把它们联系起来吧,可能分析的不是那么正确,but just now,who cares?):

先来看看他们的定义(来自维基百科):

HTML(超文本标记语言/HyperText Markup Language)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

XML(可扩展标记语言/eXtensible Markup Language),是一种标记语言。标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等。如何定义这些标记,既可以选择国际通用的标记语言,比如HTML,也可以使用像XML这样由相关人士自由决定的标记语言,这就是语言的可扩展性。XML是从标准通用标记语言(SGML)中简化修改出来的。它主要用到的有可扩展标记语言、可扩展样式语言(XSL)、XBRL和XPath等。

CSS(层叠样式表/Cascading Style Sheets),又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。目前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发过程中。

HTML与XML同为标记语言。标记语言,是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记进行标识。

感觉定义好长,自己顺一下理解就是,标记语言是将普通的文本加上标记,合在一起构成一个文档,这个文档是有结构的,而且是适用于电脑处理的。

感觉还是理解的不深刻。这么想吧,html和xml都可以被浏览器解析,显示在网页上。然后再加上CSS渲染,应该也是可以展示在网页上的。

分析完毕(好费脑子),理论上xml+css是可以实现效果的。那么实际呢?没错,也是可以的,Duang~~~

静夜思

那么为什么大家熟知的都是用html,从没见过用xml写网页的呢?

因为设计初衷不同:XML设计用来传送及携带数据信息,不用来表现或展示数据,HTML语言则用来表现数据,所以XML用途的焦点是它说明数据是什么,以及携带数据信息。

术业有专攻。适用的就是好的。

PS:今天这个例子就只是扩展一下,并不是说推荐用xml来写页面。

【附】

古诗鉴赏源码

1、HTML+CSS实现

html源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>静夜思</title>
  <link type="text/css" rel="stylesheet" href="静夜思.css" />

</head>
<body >
<img src="poem.jpg" class="img"/>
<div class="div1">

<span class="title">静夜思</span><br/>
<span class="author">唐 李白</span><br/>
<div class="verse">
    床前明月光<br/>
    疑是地上霜<br/>
    举头望明月<br/>
    低头思故乡
</div>
</div>
</body>
</html>

与html配合的css源码:

 .div1{

        }
        .img{

            width:360px;
            height:490px;
            position:absolute;
            left:0px;
            top:0px;

        }
        .title{

            font-size:19px;
            color:#FFFF00;
            position:absolute;
            left:62px;
            top:150px;
        }
        .author{
            font-size:12px;
            color:#4f2b00;
            position:absolute;
            left:100px;
            top:176px;
        }
        .verse{
            position:absolute;  /* 绝对定位 */
            color:#FFFFFF;
            font-size:14px;
            left:55px;
            top:200px;
            line-height:20px;   /* 行间距 */

        }

2、XML+CSS实现

xml源码:

<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="14-7.css"?>
<poem>
    <title>静夜思</title>
    <author>唐 李白</author>
    <verse>
    床前明月光<br/>
    疑是地上霜<br/>
    举头望明月<br/>
    低头思故乡</verse>
</poem>

与xml配合的css源码:

poem{
    margin:0px;
    background:url(poem.jpg) no-repeat; /*添加背景图片 */
    width:360px;
    height:490px;
    position:absolute;  /* 绝对定位 */
    left:0px; top:0px;
}
title{
    font-size:19px;
    color:#FFFF00;
    position:absolute;
    left:62px;
    top:150px;
}
author{
    font-size:12px;
    color:#4f2b00;
    position:absolute;
    left:100px;
    top:176px;
}
verse{
    position:absolute;  /* 绝对定位 */
    color:#FFFFFF;
    font-size:14px;
    left:55px;
    top:200px;
    line-height:20px;   /* 行间距 */
}
br{
    display:block;      /* 让诗句分行显示 */
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用CSS样式表格式化XML文档

1、XML中引入CSS样式。      在XML中引入CSS样式表有两种方法。一种是在XML文档中直接嵌入CSS样式;另一种则是外部引入(似乎在WEB中很多引入的方式都有这两种)。在XML中直接嵌入...
  • liaozhongping
  • liaozhongping
  • 2015年07月22日 23:41
  • 674

购物车的功能——CSS源码

里面所用到的图片资源统一都在“我的资源”里面,相对应的图片是“ 购物车源码相关图片 ”http://download.csdn.net/detail/qq_34137397/9665878, ...
  • qq_34137397
  • qq_34137397
  • 2016年10月27日 17:09
  • 1221

HTML+CSS段落样式排版设置

在遇到网页段落文字需要首行缩进两个字符时,为了方便,有时我们可以选择利用多个空格符( )来实现。但是当网页内容需要更新或者网页段落较多时,我们再利用空格符来对每一段落进行缩进显然是不方便的,...
  • chenlinwei5
  • chenlinwei5
  • 2017年01月16日 21:29
  • 574

JS原生轮播-基础篇(HTML+CSS)部分

根据慕课网的轮播教程,今早也写了一个,主要是把思路捋清楚,下面的代码我尽全力把每一行解释清楚, 我也是根据我今早写的思路一步一步来,希望能帮到读者! 那么就从最基础的HTML和CSS开始写 ...
  • qq_26626113
  • qq_26626113
  • 2015年07月28日 10:35
  • 1097

vs2017用F5调试时js,css文件不能加载导致的问题解决

在用vs进行.net开发时,我是很少用F5进行调试的,通常都是直接配置IIS,然后在IIS中配置好站点数据。站点编译后,直接刷新再浏览器中调试。原因很简单,在vs中用F5调试走的是IIS expres...
  • sxf359
  • sxf359
  • 2017年05月26日 15:42
  • 1606

VS2015使用小技巧 如何使用VS2015创建写HTML代码的项目

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 这个项目需要在一个单独的文件夹里,因为网页需...
  • yushaopu
  • yushaopu
  • 2016年09月28日 08:44
  • 6135

vs2013中在cshtml中当打入class标签后智能提示加载非常慢问题的解决

这个问题出现了相当长时间,一直没有好的解决办法。具体情况是页面中加载的css文件比较多。而且有些很大,导致在输入class标签后智能提示要加载相当长时间,可能要10几秒,甚至更久,而且加载后当你要输入...
  • sxf359
  • sxf359
  • 2017年01月06日 22:50
  • 724

十分简单的CSS+HTML的下拉菜单

前端开发的框架越来越多,用起来也十分的方便,但是作为初涉前端的求职者和学习者,我们也应注重基础。所以,就简单地来练练手,先以CSS+html实现,其它待续··· li { ...
  • minghuajim
  • minghuajim
  • 2013年05月24日 19:06
  • 411

CSS+HTML实现布局

div+css div.first { width:1000px; height:46px; background-color:#77FF00; color:...
  • qq_38712932
  • qq_38712932
  • 2018年01月11日 09:21
  • 10

在 ASP.NET 应用中使用 LESS

大家都在谈论 LESS 是多么的酷,如果你还不清楚什么是 LESS ,那你可能已经 out 了。LESS 扩展了 CSS 提供动态的行为例如变量、混入、函数、命名空间等等。使用 LESS ,你只需要编...
  • u011127019
  • u011127019
  • 2015年08月27日 21:53
  • 1065
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【CSS】CSS+HTML‘VS’CSS+XML
举报原因:
原因补充:

(最多只允许输入30个字)