XHTML under Css+div Layout Summary Super Recommendation _ Experience Exchange

XML(extensible Markup Language), structured documents and data have a common, adaptable format that applies not only to the web, but also to anywhere. Standards are called possible.
XHTMLis the abbreviation for the extensible Hypertext Markup Language Extensible Identity language. On the basis of HTML4.0, it is extended by the rules of XML, and the XHTML is obtained. It implements the HTML transition to XML.
CSS is an abbreviation for the cascading style sheets cascading style sheet. The combination of a pure CSS layout and structured XHTML can help designers separate the look and structure, making site access and maintenance easier. 1) Add the correct DOCTYPE to the page
DOCTYPE is a shorthand for document type. It is used primarily to illustrate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (document type definition) you doctype define.
XHTML1.0 offers three types of doctype to choose from:
(1) Transition type (transitional)-use is very common.

(2) strict type (Strict)

(3) frame type (Frameset)
2) Set a namespace (Namespace)
Add the following code directly after the DOCTYPE declaration:

A namespace is a detailed dtd,namespace declaration that collects element types and attribute names, allowing you to identify your namespace by pointing to an online address. Just enter the code so you can.

3) Declare your coding language
All XHTML documents must declare the encoding language in which they are used in order to be interpreted correctly by the browser and through identity checks. The code is as follows:

The coding language stated here is the Simplified Chinese GB2312, which you can define as BIG5 if you need to make traditional content.
4) Write all the labels in lowercase letters
XML is sensitive to capitalization, so XHTML is also case-insensitive. All XHTML elements and attributes must have a lowercase name. Otherwise, your document will be verified as invalid. For example, the following code is not correct:

5) Add alt attribute to picture
Adds an alt attribute to all pictures. The ALT attribute specifies that alternate text is displayed when the picture cannot be displayed, which is not necessary for normal users, but is essential for plain text browsers and users who use screen readers. Only the Alt attribute is added, the code will be passed by the correctness check. Note that we want to add a meaningful alt attribute, which is meaningless as follows:

The correct wording:


6) Quote all attribute values
In HTML, you don't need to quote attribute values, but in XHTML they must be quoted. You must also separate attributes with spaces.
Example: This is also not true

7) Close all labels
In XHTML, every open label must be closed. Empty labels are also closed, using a forward slash "/" at the end of the label to close themselves. For example:

8) Favorite Small icon
For example: First make a 16x16 icon, named Favicon.ico, placed in the root directory. Then embed the following code into the head area:

9) Define the appearance of elements with CSS
One of the benefits of CSS layout is that you can modify the page in batches, which separates the document structure from the presentation layer, reduces workload and server load, and increases the scalability and application of the site.
CSS is not the difference between the space and the case, the following are some basic induction
(1) Color value
The color values can be written in RGB values, for example: Color:rgb (255,0,0), or in hexadecimal, as in the example color above: #FF0000. If the hexadecimal value is a pair of duplicates can be abbreviated, the same effect. For example: #FF0000可以写成 #f00. However, if you do not repeat it, for example, #fc1a1b must be written six bits.
(2) Defining fonts
The Web Standard recommends the following font definition methods:
Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, song Body, Sans-serif;}
Fonts are selected in the order listed. If the user's computer contains Lucida Grande fonts, the document will be designated as Lucida Grande. If not, it is designated as a Verdana font, and if there is no Verdana, it is specified as Lucida font, and so on;
Lucida Grande fonts are suitable for Mac OS X;
Verdana fonts are suitable for all Windows systems;
Lucida for UNIX users
"Song body" suitable for Chinese simplified users;
If the fonts listed are not available, the default Sans-serif font is guaranteed to be called;
(3) Group Selector
When several element style attributes are the same, a declaration can be called together, separating the elements with commas:
P, TD, Li {font-size:12px;}
(4) Derivation selector
You can use a derived selector to define a style for child elements in an element, such as this:
Li Strong {font-style:italic; font-weight:normal;}
is to give Li the following child element strong define a style that is not bold in italics.
(5) ID Selector
The CSS layout is mainly implemented with the layer "div", and the style of the div is defined by the "ID selector". For example, we first define a layer
This is then defined in the style table:
#menubar {margin:0px; BACKGROUND: #FEFEFE; COLOR: #666;}
where "menubar" is your own definition of the ID name. Note the "#" number in front.
The ID selector also supports derivation, for example:
#menubar p {text-align:right; margin-top:10px;}
This method is primarily used to define layers and those that are more complex and have multiple derived elements.
(6) Category Selector
The class selector definition is represented in CSS using a dot, for example:
.14px {color: #f60; font-size:14px;}
In the page, use the class= "category name" method call:
14PX-Size fonts
This method is relatively simple and flexible, can be created and deleted according to the needs of the page at any time.
(7) Define the style of the link
CSS uses four pseudo-classes to define the style of the link: a:link, a:visited, A:hover, and a:active, for example:
a:link{font-weight:bold; text-decoration:none; color: #c00;}
a:visited {font-weight:bold; text-decoration:none; color: #c30;}
a:hover {font-weight:bold; text-decoration:underline; color: #f60;}
a:active {font-weight:bold; text-decoration:none; color: #F90;}
The above statements define the styles of links, visited links, mouse over, mouse down, respectively. Note that you must write in the order above, otherwise the display may not be the same as you expected. Remember that their order is "LVHA".
(8) Combining selectors to create sophisticated design effects
Use a beautiful pattern instead of a dull black dot before the ordinary unordered list. Site http://marine.happycog.com ...
Use CSS rules to tell the unordered list of category attribute inventory first.
ul.inventory{
List-style:disc URL (/images/common/lister2.gig) inside;}
It's called the tag:
Angelfish (All items)
Angels/frogfish (items)
Angelfish (5526 items)
Angelfish (items)
(9) Abbreviations are in the clockwise order
margin:25px 0 25px 0;
(10) Row height
line-height:150% indicates that line spacing is normal 150%
10) Structured Code Div (division), ID, class
Use them to write compact XHTML, using CSS more wisely.
(1) Structured ID tag, which differs from class:
If your property page contains a DIV whose ID is "content", it is impossible to have another div or other element with the same name. Instead, the class attribute can be used again and again in a page.
(2) Rules for ID
An ID value must start with a letter or underscore, it cannot start with a number, and then follow letters, numbers, and underscores. Spaces and hyphens-are not allowed.
11) Make a good website can go to the web for standard correction
http:validator.w3.org
Http://jigsaw.w3.org/css-v ...

