We can customize the tags to layout the page.
Some friends may have such a question, their casual definition of the tag browser how to correctly understand it?
Here we need to use the namespace of the document, then what does the namespace mean?
You know that one of the big features of XML is his scalability. You can create your own markup or use a tag created by someone else, and there is a problem where you define a tag that is likely to be the same as someone else's, but the meaning they represent is different.
To play an image of the metaphor, such as two names are called webjx_com, a person in China, a person in a foreign country, if you want to find them can say, Chinese, foreign, so it will not be confused.
The meaning of namespaces is to tell someone who this document belongs to. XHTML is the product of HTML transition to XML, which he also provides us with a namespace.
Looking at the example below, we name a prefix called webjx_com, http://www.webjx.com is the URL that describes the namespace. xmlns refers to the XHTML namespace.
The interesting thing is that we can even mark in Chinese (there may be coding problems in Chinese). Such a document looks really straightforward.
Here we define a tag called the "news headline" format because it's "webjx_com: News headlines."
put the contents here
Then use CSS to define him, format:
Webjx_com\: News Title {}
Note that our custom tag default attributes are somewhat like inline elements such as a, span, and so on.
Here is a basic layout I wrote, (compatible with IE5, 6, 7 FF2 OP9) is not very interesting, like XML, in fact, the original custom tag is used in XML. Let's try it yourself, because a lot of things are found out from the practice.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns:webjx_com= "http://www.webjx.com" ><style>* {padding:0; margin:0} body{Text-align:center;} Webjx_com\: Upper part of the page {position:relative; display:block margin:0 auto; width:700px; height:150px; border-bottom:3px Solid 000; Background: #3D6DB5; }webjx_com\: main part {display:block; margin:0 auto; width:700px; text-align:left background: #eee}webjx_com\: Main part Webjx_ Com\: Left of main body {display:block; width:220px height:500px border-right:1px solid #000 background: #f3f3f3}webjx_com\: News title { Display:block; padding-left:5px; height:25px; line-height:25px; Background: #ccc}webjx_com\: News listing {display:block; List-style:none height:160px; background: #eee}webjx_com\: Lower part of page { Display:block; margin:0 Auto; padding-top:6px; width:700px; height:30px; Background: #3D6DB5}webjx_com\: Site logo {position:absolute; top:10px; left:10px; padding-top:2px; display:block; width : 240px; height:60pX }webjx_com\: navigation menu {position:absolute; top:124px; left:300px; display:block;} Webjx_com\: Navigation menu A {float:left; margin-left:5px; width:88px; height:25px; font:12px/25px; color:white; Text-decoration:none; border:1px solid #000; border-bottom:0; }webjx_com\: Navigation menu A:hover {border:1px solid #fff; border-bottom:0;} Webjx_com\: page {border:1px solid #f00;} </style></pead><body><webjx_com: Page Upper ><webjx_com: Site logo ></webjx_com: Site logo ><webjx_com: navigation menu ><a href= "http://www.webjx.com/" >div+css tutorial </a><a href= "http://www.webjx.com/" >css layout instance </a><a href= "http://www.webjx.com/" >css2.0 tutorials </a><a href= "http://www.webjx.com/" >xhtml tutorials </a></ Webjx_com: Navigation menu ></webjx_com: Page Upper ><webjx_com: Main part ><webjx_com: Main left ><webjx_com: News headlines > Webjx.com</webjx_com: News Headlines ><webjx_com: News listings ><li>webjx.com</li><li>Webjx.com</li><li>webjx.com</li><li>webjx.com</li><li>webjx.com</li> <li>webjx.com</li><li>webjx.com</li><li>webjx.com</li></webjx_com: News List ></webjx_com: Main left ></webjx_com: main part ><webjx_com: page >webjx.com</webjx_com: Page ><webjx_ com: page >webjx.com</webjx_com: page ><webjx_com: page >webjx.com</webjx_com: page ><webjx_com: Lower part of page >webjx.com</webjx_com: Lower part of page ></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
