1.1 HTML and XHTML

The tutorial "CSS Tutorial Layout example" assumes that the reader has mastered the HTML, and if the reader understands the meaning of most of the markup in the following HTML markup, you can begin this tutorial. <ul>, <ol>, <li>, <style>, <table>, <tr>, <td>, <form>, <input>, <br>, If the reader is not clear about the meaning of the above tags, please follow the Web Learning Web "HTML Tutorial Primer Classic", learn the most basic knowledge, and then start to learn this tutorial. In addition, this tutorial will no longer occupy an abstract explanation of the advantages of using CSS layouts, and I believe most readers are aware of this. If you are interested in this issue. Access to the http://www.lodidance.com/html/jc/552.html, clearly the speed of the traditional layout to the CSS layout of the Dragon to go to the vein, and give a more in-depth analysis. This chapter will explain some of the actual problems encountered in the work, as a necessary basis for learning CSS design. is HTML and XHTML a language or two languages? Basically, they are different stages of a language, somewhat akin to the relationship between classical Chinese and vernacular Chinese. So they are also often written (X) HTML. The following first explains the tutorial from their origins and differences: First, the traced X HTML is the basis for all people who surf the web every day, and all pages are written using (X) HTML. With the rapid development of network technology. HTML has also undergone continuous improvement. You can think of XHTML as a "rigorous version" of HTML. HTML in the early days, for it to be more widely accepted, greatly relaxed the strict standards, such as tags can not be closed, attributes can be quoted, or without quotes, and so on, resulting in a lot of confusing and irregular code. This Obviously does not conform to the standard development trend, has affected the further development of the Internet. To this end, the relevant norms of the--W3C organization. has been constantly working to gradually introduce new version specifications. From HTML to XHTML. The following versions have been roughly experienced. HTML 2.0: Released in 1995 L January. HTML 3.2: Published on January 14, 1996. HTML 4.0: Published on December 18, 1997. HTML 4.01 (minor improvements): Released on December 24, 1999, XHTML 1.0: Released in January 2000, the fork was revised on August 1, 2002 and republished. XHTML 1.1: Released on May 31, 2001. XHTML 2.0: Under development. In the formal standard sequence, there is no version HTML1.0, which is because of the initial phase. Various agencies have launched their own programmes, without the formation of a unified standard. therefore The HTML 2.O published by the consortium is the first formal norm after the formation of the standard. Lodidance.com These specifications are actually read by the developer of the browser, because they must be aware of all the details of these specifications. And for web designers, there is no need to understand the nuances of the specification, which is not very relevant to the actual work. As a result, web designers usually have to know some big principles. And the text of these specifications are also more obscure, and difficult to read. Of course If the designer can really take the time to read through the HTML and CSS specifications carefully, there will be great gains. Because these specifications are the "bible" of all designers. Knowledge: The World Wide Web Consortium (the whole autumn WWW Alliance) is the abbreviation. The organization was founded in l994 year. Research Web specifications and guidelines to drive web development and ensure that Web technologies work well together. The main responsibility of the World Wide Web is to determine the direction of development of the WWW, and to formulate relevant recommendations (recommendation. It is a non-governmental organization that is not binding and therefore offers only advice. The HTML 4.01 Specification recommendation (HTML 4.01 Specification recommendation) was developed by W3CF. It also negatively rules CSS, XML, XHTML, and MathML other network language specifications. Second, the meaning and choice of DOCTYPE (document type) Starting with Dreamweaver MX version 2004, when you create a new Web page document with Dreamweaver, the basic page code generated by default is this: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   < HTML xmlns="http://www.w3.org/1999/xhtml"> < Head >   < Meta http-equiv="Content-type" Content= "text/html; Charset=utf-8 " /> < title > Untitled Document </ title >   </ Head >   < Body >   </ Body >   </ HTML >   You can see that there are two lines on the top of the "DOCTYPE" (document type) declaration that tells the browser which specification to use to interpret the code in this document. Designers can choose which document type to use when creating a new document. In the Dreamweaver New Document dialog box, at the bottom right there is a document type drop-down box, shown in 1. Figure 1 Selecting a document type in Dreamweaver For HTML 4.01 and XHTML 1.0, each corresponds to a strict (Strict) type and a transition (transitional) type. The transition type is compatible with previous versions of the tags and attributes defined, while the new version has been deprecated. Strict types are incompatible with deprecated tags and attributes. Note: Currently, it is recommended that readers use XHTML 1.O Transitional (XHTML 1.0 transition type) so that designers can write web-standard Web page code in accordance with XHTML standards. Shi can also use traditional practices in some special spider cases. Iii. important differences between XHTML and HTML Although browsers are now compatible with HTML. However, in order for the Web page to conform to standards, designers should try to use XHTML specifications to write code, need to pay attention to the following things. 1. Tag names in XHTML must be lowercase In HTML, the tag name can be uppercase or lowercase. For example, the following code is correct in HTML. < BODY >   <p> Web Learning Network (lodidance.com)</p > </ BODY >   In XHTML, however, it must be written as: < Body >   <p> Web Learning Network (lodidance.com)</p > </ Body >    2. Attribute names must be lowercase in XHTML The name of the HTML attribute must also be lowercase. For example, the following code in XHTML is not written in the wrong notation. < IMG  SRC="image.gif" WIDTH="$" HEIGHT= " BORDER"="0" > The correct wording should be: < img  src="image.gif" width="$" height= " border"="0" > 3. Tagging in XHTML must be tightly nested There are no strict rules on the nesting of tags in HTML. For example, the following code is correct in HTML. < b > < I > This line of text is displayed in bold italic </ b > </ I >   In XHTML, however, it must be replaced by: < b > < I > This line of text is displayed in bold italic </ I > </ b >    In addition, it is often overlooked that a nested notation is used for the list tag. For example, the following notation is wrong in XHTML. < ul >   <li> coffee </li > <li> tea <ul > <li> black tea </li> <li> green tea </li>   </ul > <li> milk </li > </ ul >   The correct wording is: < ul >   <li> coffee </li>   <li> tea <ul > <li> black tea </li>< /c17> <li> green tea </li> </ul > </li > <li> milk </li > </ ul >   4. Mark in XHTML must be closed In the HTML specification, the following code is correct. < P > Web Learning Network < P > lodidance.com In the above code, the 2nd <p> tag means the end of the previous <p> tag, but in XHTML, this is not allowed, and the second must strictly make the tag closed, and the correct wording is as follows. < P > Web Learning Network </ P >   < P > lodidance.com </ P >   5. In XHTML, even the markup of an empty element must be closed In this case, the empty element is labeled, that is, the ,<br> and so on, they must be closed, such as the following is wrong. line Break < BR >   Horizontal Line < HR >   Image < img src="happy.gif" alt="Welcome smiley" > The correct wording should be: line Break < BR /> Horizontal Line < HR /> Image < img src="happy.gif" alt="Welcome smiley" /> 6. In XHTML, attribute values are enclosed in double quotation marks In HTML, properties do not have to use double quotation marks, for example: < P class=subTitle > In XHTML, however, you must write strictly: < P class="subTitle"> 7. Attribute values must be in full form in XHTML In HTML, some properties often use shorthand to set property values, for example: lodidance.com < input Disabled >   In XHTML, you must write completely: < input disabled = "true"> 8. In XHTML, you should differentiate between "content tags" and ¨ structure tags " For example, the <p> tag is a content tag, and the <table> tag is a structure tag, so the <tabIe> tag is not allowed to be placed inside <p>. And if you put the <p> tag between <td></td>, it's exactly right. Sometimes this error is not easily noticed and is not prompted in Dreamweaver. But in Microsoft's new Web authoring software Expression Web. You will be given a clear hint, as shown in 2. Figure 2 prompting an error in Expression Web A red wavy line appears below the <table> mark to indicate an error. When you move the mouse pointer over the <table> tag, the prompt text "in XHTML 1.0 Transitional, Mark <p> cannot contain markup <table>" appears. Interested readers can try this new web design software. Click to download the 1th to 7th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network

This article address: http://www.lodidance.com/css/jc/652.html