HTML5 's semantic tags and attributes make it easy for developers to implement a clear Web page layout, plus CSS3 rendering, to quickly build a rich and flexible Web page.
<footer> define the tail of the page or section;
<nav> define the navigation area of the page or section;
<section> the logical region or content combination of the page;
<article> define the body or a complete content;
<aside> definition of supplemental or related content;
The best way to learn these tags is to try to use them, of course. Although there are a lot of ready-made Web page layout templates can be easily used, but for beginners, it is absolutely necessary to implement a simple page layout. Here's an example of a simple page layout that shows how to use the above tag.
Example: Mimicking a blog home page layout
Implement 2-1 of the Web page structure, this is a very typical blog page: Head, tail, horizontal navigation bar, sidebar navigation and content.
Figure 2-1
As you can see in Figure 2-1, the area where the corresponding label is implemented is labeled with a name, such as header
Before writing the page, it is necessary to say: The page element is implemented by HTML5, and the element display effect is CSS3 rendering, CSS3 code can be placed in the same file with HTML5 code, or it can be a separate file, as long as in the HTML5 file reference. It is advisable to have separate documents for each of the following advantages:
1) In line with the principle of single responsibility: HTML5 page is responsible for the management of elements, and the CSS3 file is only responsible for the corresponding HTML5 file display effect rendering, mutual independent, disjoint.
2) Reduce the complexity of the page, easy to maintain: imagine, when the number of elements of the page increased to a lot of time, while in a page to manage the elements and elements of the display properties, readability is how bad, later maintenance will be very painful.
3) speed up the browser loading speed: 2nd point of another advantage, simple pages naturally loaded faster.
Of course, if it is customary html5+css3 put in a file, also can not, here is only advice.
Here is a concrete implementation of figure 2-1.
Divided into two parts: 1) HTML5 file; 2) CSS3 file
I. HTML5 section
Document declaration for 1.HTML5
Create a new index.html file, if you have a Web page authoring tool that already supports the HTML5 file type, you should generate the following HTML5 template:
1 <! DOCTYPE html>
2 3 4 <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
5 <title>layout test</title>
6 7
8 <body>
9 </body>
Ten
If the Web authoring tool does not support HTML5 at the moment, it is also easy to write these lines of code yourself.
Description: First line: <! DOCTYPE html> is the simplification of the document type by HTML5, which is simplified; (the role of the document type: The validator depends on it to determine what rules to validate the code; Force the browser to render the page in standard mode)
2. Head
Description: 1) The header cannot be confused with the h1,h2,h3 headings. 2) The same page can contain multiple 3. Tail
<footer> Tag Implementation
<footer id= "Page_footer" >
</footer>
Description: The location is the end of the page or chunk, and the usage is the same as the 4. Navigation
<nav> Tag Implementation
<nav>
<ul>
<li><a href= "#" >Home</a></li>
<li><a href= "#" >One</a></li>
<li><a href= "#" >Two</a></li>
<li><a href= "#" >Three</a></li>
</ul>
</nav>
Description: The importance of navigation is important for a Web page, and quick and easy navigation is essential for retaining visitors.
1) can be included in 2) navigation generally requires CSS to render, then you will see the CSS rendering.
5. Chunks and articles
<section> and <article> Tag implementations
<section id= "Posts" >
/* can contain multiple < article>*/
<article class= "POST" >
Content of/*article * *
</article>
<article class= "POST" >
Content of/*article * *
</article>
</section>
<section> elements to properly categorize the content of the page, reasonable layout.
Below is a general description of <article>
<article class= "POST" >
<p>without? I ' d be a soul without a purpose.
</p>
<footer>
</footer>
</article>
You can see that it can contain many elements.
6. Narration and sidebar
<aside> tag implementation of the narration, the side bar is implemented by <section>.
<aside> is the additional information added to the main content, into the introduction, pictures, etc.
<aside>
<p>sth. In aside
</p>
</aside>
<aside> generally used in <article>
<article class= "POST" >
<aside>
<p>sth. In aside
</p>
</aside>
<p>without? I ' d be a soul without a purpose.
</p>
<footer>
</footer>
</article>
Sidebar, not narration! As an area on the right, including links, with <section> and <nav> to achieve.
<section id= "sidebar" >
<nav>
<ul>
<li><a href= "2012/04" >april 2012</a></li>
<li><a href= "2012/03" >march 2012</a></li>
<li><a href= "2012/02" >february 2012</a></li>
<li><a href= "2012/01" >january 2012</a></li>
</ul>
</nav>
</section>
Here, the use of each label is this, here is the complete code for HTML5 index.html file
View Code
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<link rel= "stylesheet" href= "Style.css" type= "Text/css" >
<title>layout test</title>
<body>
<nav>
<ul>
<li><a href= "#" >Home</a></li>
<li><a href= "#" >One</a></li>
<li><a href= "#" >Two</a></li>
<li><a href= "#" >Three</a></li>
</ul>
</nav>
<section id= "Posts" >
<article class= "POST" >
<aside>
</aside>
<p>without? I ' d be a soul without a purpose.
</p>
<footer>
</footer>
</article>
<article class= "POST" >
<aside>
</aside>
<p>without? I ' d be a soul without a purpose. </p>
<footer>
</footer>
</article>
</section>
<section id= "sidebar" >
<nav>
<ul>
<li><a href= "2012/04" >april 2012</a></li>
<li><a href= "2012/03" >march 2012</a></li>
<li><a href= "2012/02" >february 2012</a></li>
<li><a href= "2012/01" >january 2012</a></li>
</ul>
</nav>
</section>
<footer id= "Page_footer" >
</footer>
</body>
Two. CSS3 section
For CSS files, it is best to be able to match the HTML file's tree structure to the corresponding elements, and organize the rendering of element attributes hierarchically. This makes it easy to find changes without missing elements. Of course, according to the habits of the individual to set it good.
CSS3 attribute definition is richer, here no longer repeat, there is a CSS3 reference manual on the Internet, when used to check the good. Or, even if you are not bothered to check, there are specialized CSS3 control code generation tools and Web sites, such as http://css-tricks.com/examples/, rich examples of control effects can be downloaded. You can also search for something similar.
The CSS3 code STYLE.CSS file is posted directly here
@charset "Utf-8";
/* CSS Document */
Body {/* property settings for entire page */
/* Background color */
Font-family:geneva, Sans-serif; /* Available fonts */
margin:10px Auto; /* Margin Blank */
max-width:800px;
Border:solid; /* Edge Stereoscopic */
Border-color: #FFFFFF; /* Edge Color */
}
H2 {/* Sets the common properties of the H2 within the entire body */
Text-align:center; /* Text Centered */
}
Header {/* the header of the entire body page applies */
Background-color: #F47D31;
Color: #FFFFFF;
Text-align:center;
}
Article {/* article for the entire body page */
Background-color: #eee;
}
p {/* The entire body page is applicable */
Color: #F36;
}
Nav,article,aside {/* Common Properties */
margin:10px;
padding:10px;
Display:block;
}
Header#page_header nav {/*header#page_header NAV's properties */
List-style:none;
margin:0;
padding:0;
}
Header#page_header Nav ul li {/*header#page_header nav ul li Properties */
padding:0;
margin:0 20px 0 0;
Display:inline;
}
Section property for section#posts {/* #posts */
Display:block;
Float:left;
width:70%;
Height:auto;
Background-color: #F69;
}
Section#posts Article footer {/*section#posts Article footer properties */
Background-color: #039;
Clear:both;
height:50px;
Display:block;
Color: #FFFFFF;
Text-align:center;
padding:15px;
}
Section#posts aside {/*section#posts aside properties */
Background-color: #069;
Display:block;
Float:right;
width:35%;
margin-left:5%;
font-size:20px;
line-height:40px;
}
Section#sidebar {/*section#sidebar Property */
Background-color: #eee;
Display:block;
Float:right;
width:25%;
Height:auto;
Background-color: #699;
margin-right:15px;
}
Footer#page_footer {/*footer#page_footer Property */
Display:block;
Clear:both;
width:100%;
margin-top:15px;
Display:block;
Color: #FFFFFF;
Text-align:center;
Background-color: #06C;
}
I believe there is no need to explain, you can understand it at a glance.
Want to make the page display more beautiful and gorgeous, CSS3 take a good look at it.
Some of HTML5+CSS3 's super-cool websites:
the HTML5 Awesome
No.2 HTML5 Showcase
No.3 HTML5 Lab
No.4 HTML5 Gallery
No.5 Html5beauty
