Xiaoqiang's HTML5 mobile development path (42) -- Comparison of HTML4 and HTML5 Document Structures

In general, when people write documents including HTML, they tend to follow a hierarchy similar to "chapter-section.

Description Method in HTML4:

Chapter 1 Xiaoqiang HTML5 mobile development path 1.1 HTML5 overview 1.1.1 what is HTML5? 1.1.2 differences between HTML5 and HTML4 1.2 HTML5 Quick Start 1.2.1 HTML and XHTML

The above code barely shows the main structure of the document. However, in a complicated page, this structure is difficult to see, so the following code appears:

Chapter 1 Xiaoqiang HTML5 mobile development path 1.1 HTML5 overview 1.1.1 what is HTML5? 1.1.2 differences between HTML5 and HTML4 1.2 HTML5 Quick Start 1.2.1 HTML and XHTML

In HTML5, in order to make the document structure clearer and easier to understand, many semantic elements are added specifically to divide the document structure.

Section element:The section element is the most basic and main structural element for dividing the structure of the page document. It is mainly used to divide the content on the page of the website or application. A section element is usually composed of the content and its title.

 
  
Chapter 1 Xiaoqiang's HTML5 mobile development path
  
   
1.1 HTML5 Overview
   
    
1.1.1 what is HTML5?
   
   
    
1.1.2 differences between HTML5 and HTML4
   
  
  
   
1.2 HTML5 Quick Start
   
    
1.2.1 HTML and XHTML
   
  
  
 

Note the following when using section elements:

1. Do not confuse section elements with div elements. When a container needs to directly define a style or define behavior through a script, div is recommended.

2. It is generally not recommended to use section for untitled content, you can use HTML5 profile detection tool to detect (http://gsnedders.html5.org/outliner)

Article element:The article element represents all "body" parts of a document, page, or application. The content described in it should be independent, complete, and can be referenced by external entities independently, A blog, an article in a newspaper, a forum post, a user review, an independent plug-in, or any content independent of other parts of the context.

In a section or article element, there should be only one title. If there are two titles, the second title will be implicitly placed into a new section element, as shown in the following code, the content after h2 is implicitly placed in a new section element.

Title
 Subtitle

Nav element:The nav element is a link group that can be used as page navigation. A page can have multiple nav elements as the navigation of the whole page or different parts. In the nav element, the reorganization link element is usually placed in the form of ul list.

Aside element:The aside element is used to indicate the information of the current page or article. It can contain references, sidebar, advertisement, and navigation bar related to the current page or main content, and other content.

The following is an example of a blog homepage:

The interface layout is as follows:

 Sunshine Xiaoqiang's blog
 
 
 
 
 
  
Sunshine Xiaoqiang blog http://blog.csdn.net/dawanganban
  
   
 

    
  
Home Page
    
  
Blog directory
   
 
  
 
 
  
   
Personal Data
  
  
   
    
Sunshine Xiaoqiang's blog
   
  
  
I am currently engaged in mobile Internet development and want to meet more friends.
  
Recommendation column:
  
Xiaoqiang's HTML5 mobile development path
  
Contact: 739299362
 
 
  
   
Category [
   Management]
  
  
   
 

    
  
All blog posts(62)
    
  
HTML5(40)
    
  
HTML5(40)
    
  
HTML5(40)
    
  
HTML5(40)
   
 
  
 
 
  
   
Comment
  
  
   
 

    
  
Wind03-31Hello, blogger. Why do I enter... in the url...
    
  
Wind03-31Hello, blogger. Why do I enter... in the url...
    
  
Wind03-31Hello, blogger. Why do I enter... in the url...
    
  
Wind03-31Hello, blogger. Why do I enter... in the url...
   
 
  
 
 
  
   
Category [
   Management]
  
  
   
    
Added the ValueAsNumber attribute of the number element in HTML5.
    )Category: HTML5
   
   
When using JavaScript scripts to operate the number element in HTML5, you can use the valueAsNumber attribute to easily set and read values in the element.
   
When using JavaScript scripts to operate the number element in HTML5, you can use the valueAsNumber attribute to easily set and read values in the element.
   
When using JavaScript scripts to operate the number element in HTML5, you can use the valueAsNumber attribute to easily set and read values in the element.
   
When using JavaScript scripts to operate the number element in HTML5, you can use the valueAsNumber attribute to easily set and read values in the element.
   
When using JavaScript scripts to operate the number element in HTML5, you can use the valueAsNumber attribute to easily set and read values in the element.
   
    
Read | the comment has not been reposted. | add to favorites to view the full text>
   
  
 

Sample file main.css

div#blog{background-position:50% 0%;background-image:url(image/blogb.png);width:100%;/*background-repeat:no-repeat;*/}ul{list-style:none;}div#blogbody{margin:0px;}[id^=column_]{display:inline;float:left;overflow:hidden;}div#column_1{margin-left:20px;width:210px;}

Source code download: http://download.csdn.net/detail/lxq_xsyu/7125741