Semantic your HTML tags and attributes
Another important aspect of separating structure from presentation is using semantic markup to structure the document content. There is an element of the XHTML it means that part of the content is marked with a corresponding sense of structure, there is no reason to use other markers. In other words, do not let the CSS to make an HTML element look like another HTML element, such as a <div> instead of <p> tag title.
The first is about the semantics (Semantics) and the difference between the default style, the default style is the manifestation of some common tag browser settings, personally I think that his main purpose is to let everyone know intuitively tag (markup) and attributes (attribute) of purpose and effect, it is clear that Hx series looks a lot like the title, because they have bold and larger font size. <Strong>, <em> used to distinguish it from other characters, played a role emphasized. As for lists and tables obviously tell you what they are doing.
Second, the benefits of semantic web, the most important is search engine friendly, and a good structure and semantics of your web content is easily crawled natural search engines, promote your website will be able to save a lot of effort.
Specific semantics and use in, XHTML1.0 TAG have been described in the reference, there will be some easy to forget or confuse the TAGS and supplemented properties.
<Hx>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, used as a title, and decreasing order of importance. <h1> is the highest rating.
E.g:
CODE:
<h1> Document Title </ h1>
<h2> secondary title </ h2>
Instead of
<div class = "title"> Document Title </ div>, or <span class = "title"> Document Title </ span>. For the latter it is clear that the search engine is not that he is heading.
<p>
Paragraph mark, to know the <p> as a paragraph, you will not be using a new line, and it does not need to distinguish <br/> <br/> paragraphs and paragraphs. <p> </ p> text will wrap, and the effect is better than wrap <br>. Gap between paragraphs and paragraphs can also use CSS to control, easily and clearly distinguish paragraphs and paragraphs. In the definition of the travel distance using the high line (line-height) easily, and then define drop caps and other effects, it is quite perfect.
E.g:
CODE:
<to the p-building site design and development staff home for the purpose to introduce web development website creation technology designed to communicate with the main content. Its well-made website content, there will be members of the tutorial elaborate release, selflessly to help users perform, but also held many design competition and developed a number of procedures currently still used by many web applications every day. The distribution of the work and reviews by a number of media attention and praise of experts, but also from established their own social status, so the batch after batch of the network colleagues to join the blue vision to become the largest class site design one.
</ the p->
<the p-> Over the years, constantly enrich the content of the blue ideal, it has been a number of well-known sites, traditional media highlights too, and another was Google, Baidu, Yahoo, Sohu, Sina, Excite and other major search sites collection and Google, Baidu, Yahoo three major search engines to simplified Chinese characters keywords "Web design and development" search rankings are the first, and now has developed into the most influential blue ideal site designed for domestic and professional website development one. <
<ul>、<ol>、<li>
<ul> unordered list, it is common to everyone widely used, <ol> ordered list is also quite common. In the web standardization process, <ul> also more for the navigation bar, the navigation bar is a list originally, this is entirely correct, and when your browser does not support CSS, and navigation links are still good so, that is not quite beautiful aspects.
E.g:
CODE:
<UL>
<Li> Project </ Li>
<Li> Project II </ Li>
<Li> Project III </ Li>
</ UL>
CODE:
<OL>
<Li> Chapter </ Li>
<Li> Chapter </ Li>
<Li> Chapter </ Li>
</ OL>
Semantic your HTML tags and attributes
Another important aspect of separating structure from presentation is using semantic markup to structure the document content. There is an element of the XHTML it means that part of the content is marked with a corresponding sense of structure, there is no reason to use other markers. In other words, do not let the CSS to make an HTML element look like another HTML element, such as a <div> instead of <p> tag title.
The first is about the semantics (Semantics) and the difference between the default style, the default style is the manifestation of some common tag browser settings, personally I think that his main purpose is to let everyone know intuitively tag (markup) and attributes (attribute) of purpose and effect, it is clear that Hx series looks a lot like the title, because they have bold and larger font size. <Strong>, <em> used to distinguish it from other characters, played a role emphasized. As for lists and tables obviously tell you what they are doing.
Second, the benefits of semantic web, the most important is search engine friendly, and a good structure and semantics of your web content is easily crawled natural search engines, promote your website will be able to save a lot of effort.
Specific semantics and use in, XHTML1.0 TAG have been described in the reference, there will be some easy to forget or confuse the TAGS and supplemented properties.
<Hx>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, used as a title, and decreasing order of importance. <h1> is the highest rating.
E.g:
CODE:
<h1> Document Title </ h1>
<h2> secondary title </ h2>
Instead of
<div class = "title"> Document Title </ div>, or <span class = "title"> Document Title </ span>. For the latter it is clear that the search engine is not that he is heading.
<p>
Paragraph mark, to know the <p> as a paragraph, you will not be using a new line, and it does not need to distinguish <br/> <br/> paragraphs and paragraphs. <p> </ p> text will wrap, and the effect is better than wrap <br>. Gap between paragraphs and paragraphs can also use CSS to control, easily and clearly distinguish paragraphs and paragraphs. In the definition of the travel distance using the high line (line-height) easily, and then define drop caps and other effects, it is quite perfect.
E.g:
CODE:
<to the p-building site design and development staff home for the purpose to introduce web development website creation technology designed to communicate with the main content. Its well-made website content, there will be members of the tutorial elaborate release, selflessly to help users perform, but also held many design competition and developed a number of procedures currently still used by many web applications every day. The distribution of the work and reviews by a number of media attention and praise of experts, but also from established their own social status, so the batch after batch of the network colleagues to join the blue vision to become the largest class site design one.
</ the p->
<the p-> Over the years, constantly enrich the content of the blue ideal, it has been a number of well-known sites, traditional media highlights too, and another was Google, Baidu, Yahoo, Sohu, Sina, Excite and other major search sites collection and Google, Baidu, Yahoo three major search engines to simplified Chinese characters keywords "Web design and development" search rankings are the first, and now has developed into the most influential blue ideal site designed for domestic and professional website development one. <
<ul>、<ol>、<li>
<ul> unordered list, it is common to everyone widely used, <ol> ordered list is also quite common. In the web standardization process, <ul> also more for the navigation bar, the navigation bar is a list originally, this is entirely correct, and when your browser does not support CSS, and navigation links are still good so, that is not quite beautiful aspects.
E.g:
CODE:
<UL>
<Li> Project </ Li>
<Li> Project II </ Li>
<Li> Project III </ Li>
</ UL>
CODE:
<OL>
<Li> Chapter </ Li>
<Li> Chapter </ Li>
<Li> Chapter </ Li>
</ OL>
<dl>、<dt>、<dd>
dl is the "definition list." For example, the word inside the dictionary explanation, you can use the definition of such a list.
E.g:
CODE:
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
CODE:
<DL>
<dt> on the beach </ dt>
<dd> This was taken in 1980, "the beach" in Hong Kong called the most successful in television history, the most classic drama.
After the broadcast year in Hong Kong, resulting in a huge buzz. </ dd>
<dt> Chow Yun Fat </ dt>
<dd> and all the great movie stars like Chow Yun Fat confirms an era, a golden age of Hong Kong film.
Windbreaker sunglasses, cold-blooded guns, sunny smile, are sealed into the film, when we hope to find time to look back, Chow has been cut to coordinate an era. </ dd>
</ DL>
<cite>、cite 、<q>、 <blockquote>
Forum and blog often used in reference to the words of others, with <q> to mark brief one-line reference. Web browser will automatically identify content between <q> of. Unfortunately, IE does not recognize, and sometimes, <q> can cause some problems accessibility (Accessibility) a. Because of this, some people advise against using the <q>, manually insert the reference mark. Join in a single line containing the appropriate class of <span> referenced content, then you can use CSS to style to the reference design, but this does not make sense on semantics. You can read Mark Pilgrim wrote Q Tag at The ( http://diveintomark.org/archives/2002/05/04/the_q_tag ) views on the process <q> related issues.
For those of paragraph or several paragraphs quoted at length, you should use <blockquote> a. CSS can be used to define the style references. Note that the section of the article is not directly on the <blockquote>, Content reference must also be included in an element, usually a <p>. Cite attribute may be used with <q> together can also be used with <blockquote>, the source address is used to reference content provided. Note that if you use <span> instead of <q> tag references content, then you can not use the cite attribute. E.g:
CODE:
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.
CODE:
<P> <auf cite> Confucius </ cite> reads: <q> without thinking is useless learning, thinking without learning is perilous </ q> </ p> .
CODE:
<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>
CODE:
<blockquote auf cite = "http://www.w3cn.org/">
<the p-> & # 8220; most of us have a profound experience, whenever the mainstream version of the browser upgrade, we just created on the site may become outdated,
we need to upgrade or re-construction site again. For example 1996-- 1999 typical "browser wars",
to be compatible with Netscape and IE, the site had to write different code for both browsers. Similarly,
whenever the emergence of new network technologies and interactive services, we also need to create a new version would have to support this new technology or new equipment,
such as support for WAP mobile Internet technology. Similar problems abound: website code bloated, complicated cost us a lot of bandwidth;
for some kind of browser DHTML effects, shielding the part of potential customers; the code is not easy to use, people with disabilities can not browse websites.
This is a vicious circle, is a huge waste. # 8221 &; </ P>
</ blockquote>
<em>、 <strong>
<em> is used to emphasize, <strong> is used as the focus of emphasis. Most browser with italics to emphasize content, bold to show the emphasis on content, however, this is not necessary if it is to determine how the emphasis on content, the best way is to use CSS to define their performance . When you really want is the visual effect, do not use stressed. And if you want to emphasize, but also feel bold or italic no visual effect is not so good, especially italics For Chinese, you can define a number of other more eye-catching style to emphasize achieve results.
E.g:
CODE:
<P> <EM> emphasized </ em> text is usually displayed in italics,
however, <strong> emphasized </ strong> usually displayed in bold text. </ p>
<table>、<td>、<th>、< caption >、 summary
XHTML table should not be used in the layout. However, if we are to mark data list, you should use the table. <th> for the table headings, property summar a summary, <caption> tag, led by the Ministry of explanation, <thead> tag for the table head, <tbody> tag to form the main content, <tfoot> tag for the end of the table.
It may also be used where scope can be used to replace the attribute headers, marking a cell that contains header information, wherein contents of each value is as follows:
Row indicates the current cell, provide relevant information to the header contains the current row of cells.
col indicating the current cell, to provide the corresponding header information of the current cell according to the specified column.
rowgroup indicating the current cell, provide relevant information for the rest of the header row groups comprising the current cell.
colgroup indicating the current cell, to provide the corresponding header information according to the remaining column groups specified by the current cell.
abbr abbreviated name defined for the header in the cell, if the property is not defined, the cell contents will default abbreviated form.
E.g:
CODE:
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>
<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>
</table>
<dfn>
CODE:
<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>
<ins>, <del>
Del know, do not reuse <s> do delete the line with del clearly more semantic. But also with del cite and datetime to indicate reasons for the deletion, and the deletion of the time. ins is inserted, also has such properties. New build a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
E.g:
CODE:
<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>
<code>
Representation is computer code. The default font style for the fight. Forum and blog often encountered.
E.g:
CODE:
<code>p{margin:2px 0;}</code>
<abbr>、<acronym>
<abbr> tag is referred to on the web page, <acronym> tag to take acronym. (Note: This is the abbreviation separate terms and abbreviations, short range larger than the abbreviation, acronym shrink
to write <acronym> tag) Windows of the following IE6.0 browser does not support the <abbr> tag. In IE, you can use CSS to the <acronym> but can not be applied to the <abbr> tag,
IE will for the title attribute <acronym> tag displays a prompt, but ignores the <abbr> tag.
