Research: Structured XHTML documents that conform to Web page standards

xhtml| Standard | Web page

We support web standards and consider that the Document Object Model (Dom,document) that it proposes is very reasonable and useful, and is necessary to represent a trend and progress. The Document Object model allows us to manipulate the document in a high-level manner from the character to the structural level.

In Web page production (html/xhtml), following the Web standards can make the site structure more reasonable. However, the new standards will always lead to the exclusion of some of the old web-makers, simply because they are unable to master new standards or at the same time they think that there is no need for new standards, the original way is enough. I don't talk to the people who reject and boycott.

When applying standards, some web makers have gone into some myths. The document structure is often messed up for a standard that is not good at all and is trivial. This has clearly violated the original purpose of the Web standards. The purpose of WEB standards is to let us organize our documents in a clear structure so that we can manipulate the document using DOM.

For example, the layout of three columns (typically 3 div tags) in the Web page creation process. Many Web page makers use 3 div tag nesting to achieve the goal, because if not nested, when the window shrinks, the div tag will flow downward.

They are like this:

<div id= "Column1" >
<div id= "Column2" >
<div id= "Column3" >
</div>
</div>
</div>

Whether from the structure or from the content or performance, these three columns are generally equal status, should not be nested. Nesting has hinted at their dependencies. When we parse these things using XML parsing tools such as JDOM,DOM4J or Dom's JavaScript (ECMAScript) bindings, there is a logical confusion.

People who are biased against web standards may say that using tabular layouts makes it easy to achieve a good three-column layout. So let's take a look at the form code:

<table>
<tr>
<TD id= "Column1" ></td>
<TD id= "Column2" ></td>
<TD id= "Column3" ></td>
</tr>
</table>

It is possible that a table can easily achieve a three column layout, but the structure of the code is as layered as the above. The <table> and <tr> tags are redundant.

The correct method should be the following code:

<div id= "Column1" >
</div>
<div id= "Column2" >
</div>
<div id= "Column3" >
</div>

And there are those who use it:

<div id= "Subwrap" >
<div id= "Content-main" >
</div>
<div id= "content-related" >
</div>
</div>
<div id= "Content-extra" >
</div>

Because it thinks that the third column is just extra (extra). This layout can be viewed as a two-column layout from the code, and then the first column is divided into two columns, so the performance is three columns.

In this way, the relationship between structure and content can be performed by setting the width percentage of each column in the CSS (cascading style sheet). Or we define the fixed width of each column, and then define the minimum width of the body label (IE6 not supported, so you need to put three columns in a div--container, and then define the minimum width of the div). We have more ways to do it.

What should we do when we need to perform a complex appearance? such as rounded border, then use the picture bar.