CSS Basics (1)-Design code structure

The contents of this chapter:

1. Design code structure
2. The importance of meaningful documentation
3. Naming conventions
4. When to use ID and class name
5. Micro format
6. Different versions of HTML CSS
7. Document type DOCTYPE toggle and browser mode

1, the class name is case-sensitive 2, the class name over-Reliance 3, Div and Span Div is semantically representative of division, he can divide the document into several meaningful areas. SPAN can group inline elements 4, the micro-format concept: originating from the network

Micro-format According to some existing widely used standards, through the content block semantic tagging, you can let external applications, aggregators and search engines to do the following things:

1. 1. 1. 1. When crawling Web content, the semantics of content blocks can be more accurately identified;
         2. Work with content, including providing access, proofreading, and converting it to other related formats for use by external programs and Web services.

simple micro-format

We know from the above description that the micro-format is actually adding metadata and other attributes to the existing (X) HTML elements, enhancing semantics. So let's look at a simple micro-format application.
We used to write a link to the first page of the <a></a> code:

<a href= "http://www.5icool.org" >web Design blog</a>

And now we're going to add the rel attribute to this code element <a>.

<a href= "http://www.5icool.org" rel= "homepage" >web Design blog</a>

The link marker above <a> includes the rel= "Home" property, which shows the target page of the link is the homepage of the site. Adding a semantic attribute to an existing link element adds a concrete structure and meaning to the link. rel==> Specifies the relationship between the current document and the linked document.               The REL attribute is supported for all browsers. Property value

value	Description
Alternate	An optional version of the document (such as a printed page, translation page, or mirror).
Stylesheet	The external style sheet for the document.
Start	The first document in the collection.
Next	The next document in the collection.
Prev	The previous document in the collection.
Contents	The document directory.
Index	The document index.
Glossary	Glossary or interpretation of the terms used in the document.
Copyright	A document that contains copyright information.
Chapter	The chapter of the document.
Section	The section of the document.
Subsection	The sub-segments of the document.
Appendix	Documentation Appendix.
Help	Help documentation.
Bookmark	Related documents.
Nofollow	Google uses "nofollow" to specify that Google search engines do not track links.
Licence
Tag
Friend

Note: The above relationships are also used in the hCard Micro Format

HCard is a micro-format for publishing detailed contact information for individuals, companies, organizations, locations, and more. It can be contained in (X) HTML,Atom,RSS and other extensible labeling languages . Hcard uses the properties and values of the vCard(RFC 2426) to implement these features.

It allows the parser (such as other websites,Firefox 's Operator plugin) to get detailed information and display it through other Web sites or map tools, or into other programs such as the Address Book.

Example One

The following HTML code:

<div>     <div>joe doe</div>     <div>the Example company</div>     <div> 604-555-1234</div>     <a href= "http://example.com/" >http://example.com/</a> </div>

After adding a micro-format, it becomes:

<div class= "vcard" >     <div class= "FN" >joe doe</div> <div     class= "org" >the Example company</div>     <div class= "Tel" >604-555-1234</div>     <a class= "url" href= "/HTTP/ example.com/">http://example.com/</a> </div>

Here, the official name (class= "FN"), the Organization (class= "org"), the phone number (class= "tel") and the URL (class= "url") are marked with the corresponding class, and all content is included class="vcard" .

Example Two

Here is the Wikimedia Foundation 's contact information, which can be used as a real example of hcard:

Wikimedia Foundation Inc.

2nd Ave. South #358

St. Petersburg, FL 33701-4313

USA

Phone: +1-727-231-0101

Email: [email protected]

传真: +1-727-258-0207

After adding a micro-format, it becomes:

<div class= "vcard" >  <div class= "fn org" >wikimedia Foundation inc.</div> <div class=  "ADR ">    <div class=" street-address ">200 2nd Ave. South #358 </div>    <div>      <span class=" Locality ">st Petersburg</span>      <span class=" region ">FL</span> <span class=" Postal-code ">33701-4313</span>    </div>    <div class=" Country-name ">USA</div>    </div>  <div>phone: <span class= "Tel" >+1-727-231-0101</span></div>  <div>email: <span class= "Email" >[email protected]</span></div>  <div >    <span class= "Tel" ><span class= "type" >FAX</SPAN>:    <span class= "value" >+ 1-727-258-0207</span></span>  </div></div>

Note that in this example, the official name (class= "FN") and the Organization (class= "org") are written in an attribute that indicates that this is an organization, not an individual.

Other commonly used Hcard properties include the following:

• bday– Birthday
• email
• honorific-prefix-(Western-style) name before the title, such as: Dr. (DR), Pastor (rev.), etc., in the east will be placed in the rear of the name.
• honorific-suffix-(Western-style) after the name of the title, generally is a letter , such as: JP, the Grand Bauhinia medal (GBM), generally listed in the last side of the name.
• logo
• nickname– Nickname, pet name, or nickname. Westerners often have abbreviated names, and sometimes they are used to identify people with the same name. For example: "Bill" in the middle of William "Bill" Gates.
• note
• photo
• post-office-box

Geo can also be included in Hcard, which represents the coordinates of an address. Geo is a micro-format that marks WGS84 geographic coordinates ( longitude , latitude ) in HTML and XHTML . Although belonging to the "draft", its format is stable and has been used. It can also act as a subset of the hCard micro-format.

The above excerpt: wikipediaThe current full specification of the Micro format also includes: HCard, Hcalendar, XOXO, XFN, Votelinks and 3 "rel-" micro-formats: Rel-license, Rel-nofollow and Rel-tag. 5. The difference between XHTML and XHTML XML published the XML version of HTML 4.0.1 and named XHTML1.0. The main difference between XHTML1.0 and HTML4.01 is that it complies with the XML encoding provisions. This means that unlike regular HTML, all XHTML attributes must contain quotation marks.  All elements must be closed. 6. Document type, DOCTYPE switch browser mode document type is a set of machine-readable rules. They define what is allowed in a particular version of XML or HTML, and what is not allowed. When parsing a Web page, the browser uses these rules to check the validity of the page and respond to the action.                     By parsing the page's DOCTYPE, the browser knows which DTD to use, which version of HMTL to use, the browser mode: Standard mode & Promiscuous mode standard mode: The browser renders the page according to the specification; Promiscuous mode: pages are rendered in a more relaxed backward-compatible manner.   Promiscuous mode typically simulates the behavior of old browsers to prevent old sites from working. Reference book: Mastering CSS Advanced Web Standards Solutions

CSS Basics (1)-Design code structure