Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

CSS+HTML VS CSS+XML


May 30, 2021 Article blog



First of all, the previous web page effect map

 CSS+HTML VS CSS+XML1

We usually write web pages using html-css-JavaScript to make them beautiful and vivid. I f you don't say JavaScript today, it's the implementation of static pages, html-css. It's easy to achieve the above effect.

It's like this:

 CSS+HTML VS CSS+XML2

So do you know that xml-css can also write web pages?

I never thought of it that way before I learned the css course.

Let's analyze it (find a reason to link them up first, maybe not that's right, but just now, who cares?):

Let's take a look at their definition (from Wikipedia):

HTML (hypertext markup language/HyperText Markup Language) is a standard tag language for creating Web pages. H TML is a basic technology that is often used by many websites, along with CSS and JavaScript, to design user interfaces for pleasing web pages, web page utilization programs, and mobile users. W eb readers can read HTML files and render them as visual web pages. HTML describes the structural semantics of a Web site as clues emerge, making it a markup language rather than a programming language.

XML (expandable markup language/eXtensible Markup Language) is a markup language. T ags are information symbols that a computer can understand, and by doing so, articles that include a variety of information can be processed between computers. H ow these tags are defined is to choose between internationally used markup languages, such as HTML, and tagging languages such as XML that are freely determined by stakeholders, which is the scalability of the language. X ML is simplified from the standard common markup language (SGML). It is primarily used in expandable markup languages, expandable style languages (XSL), XBRL, XPath, and so on.

CSS (Cascade Style Sheets/Cascading Style Sheets), also known as string style lists, cascading style sheets, threaded style sheets, cascading style sheets, a computer language used to add styles (fonts, spacing, colors, etc.) to structured documents such as HTML documents or XML utilization, defined and protected by W3C. T he latest version is CSS2.1, which is the recommended standard for W3C. CSS3 is now supported by most modern readers, and the next version of CSS4 is still in development.

HTML is the same markup language as XML. M arkup language is a computer text encoding that combines text with other information related to text to reveal details about document structure and data processing. Other text-related information, including the structure of the text and representation information, is combined with the original text, but is identified with tags.

Feel well defined long, their own understanding is that the markup language is to add ordinary text plus markup, together to form a document, this document is structured, and is suitable for computer processing.

Feeling or understanding is not deep. T hink of it this way, both html and xml can be parsed by readers and displayed on Web pages. Then add CSS rendering, which should also be available on the web page.

At the end of the analysis (it's hard to think about), in theory xml-css can achieve results. W hat about the reality? That's right, it's okay, Duang

 CSS+HTML VS CSS+XML3

So why is it so well known that you've never written a web page with xml?

Because the design is different: XML is designed to transmit and carry data information, not to represent or present data, and HTML language is used to represent data, the focus of XML's usefulness is to explain what the data is and to carry it.

The art industry has a specialty. What applies is good.

PS: Today's example just expands, not that it's recommended to write pages with xml.

(Attached)

Ancient poetry appreciation source code:

1, THE IMPLEMENTATION OF HTML-CSS

html Source:

<!DOCTYPE html>

<html>

<head >

<meta charset="UTF⑻">

<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/>

Low Hometown </ div>

</div>

</body>

</html>

Css source code with html:

.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; / * Absolute positioning * / color: #ffff; font-size: 14px; Left: 55px; Top: 200px; line-height: 20px; / * line spacing * /}

2.XML and CSS implementation

xml source:

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

Css source code with XMl:

POEM {margin: 0px; Background: URL (POEM.JPG) No-repeat; / * Add Background Image * / Width: 360px; Height: 490px; Position: absolute; / * Absolute positioning * / 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; / * Absolute positioning * / color: #fffff; font-size: 14px; Left: 55px; Top: 200px; line-height: 20px; / * line spacing * /}
Br {Display: block; / * Let the verse branch display * /}