New HTML5 elements and features
The Semantic tags and attributes of HTML5 make it easy for developers to easily achieve a clear web page layout. With the help of CSS 3 rendering, it is very easy to quickly build a rich and flexible web page.
The new tag elements of HTML5 are as follows:
<Header> define the header of a page or segment;
<Footer> defines the end of a page or segment;
<Nav> define the navigation area of a page or segment;
<Section> logical area or content combination of the page;
<Article> define the body or a complete content;
<Aside> define supplementary or related content;
The best way to learn these labels is to use them. Although there are many templates available for webpage layout, it is absolutely necessary for beginners to implement a simple page layout. Here, we use a simple page layout example to demonstrate how to use the preceding labels.
Example: imitating the homepage layout of a blog
Implement a 2-1 web page structure. This is a typical blog page: Header, tail, horizontal navigation bar, sidebar navigation, and content.
Figure 2-1
As shown in Figure 2-1, the area implemented by the corresponding label is marked with a name, such as the Header.
Before writing a page, it is necessary to say that the page elements are implemented by HTML5, and the display effect of the elements is rendered by CSS3. The Code of CSS3 can be stored in the same file as the HTML5 code, it can also be an independent file that can be referenced in an HTML5 file. We recommend that you use independent files. The following are the advantages:
1) Compliance with the single responsibility principle: HTML5 pages are responsible for managing elements, while CSS3 files are only responsible for rendering the display effects of the corresponding HTML5 files, independent of each other, and mutually exclusive.
2) reduce page complexity and facilitate maintenance: imagine that when the number of page elements increases to a large number, you can also manage the display attributes of elements and elements on a page, the readability is very poor, and the maintenance will be very painful in the future.
3) Accelerate the loading speed of the browser: 2nd) Another advantage of point, simple page loading is naturally faster.
Of course, if you are used to placing HTML5 + CSS3 in a file, you can't try it. Here is just a suggestion.
See Figure 2-1.
There are two parts: 1) HTML5 file; 2) CSS3 File
I. HTML5 part
1. HTML5 Document declaration
Create a new index.html file. If the HTML file type is supported by the webpage Writing Tool, 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>
10
It doesn't matter if the web writing tool does not support HTML5 for the time being. It's easy to write these lines of code by yourself.
Note: The first line is: <! DOCTYPE html> simplifies the document type by using HTML5. (The role of the Document Type: The validators determine the rules to use to verify the code; force the browser to render the page in standard mode)
2. Header
<Header> label implementation
<Header id = "page_header">
<H1> Header </Header>
Note: 1) headers cannot be mixed with titles h1, h2, and h3. <Header> it can contain a variety of contents, from the company logo to the search box. The example contains only the title.
2) the same page can contain multiple 3. Tail
<Footer> label implementation
<Footer id = "page_footer">
<H2> Footer </Footer>
Note: The location is at the end of the page or block. The usage is basically the same as that of 4. Navigation
<Nav> label 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>
Note: The importance of navigation is crucial to a webpage. quick and convenient navigation is essential for retaining visitors.
1) it can be included in 2) CSS is generally required for navigation rendering, and CSS rendering will be displayed later.
5. blocks and articles
<Section> and <article> label implementation
<Section id = "posts">
/* Can contain multiple <article> */
<Article class = "post">
/* Article content */
</Article>
<Article class = "post">
/* Article content */
</Article>
</Section>
<Section> elements reasonably classify and deploy the page content.
Below is the general content of <article>
<Article class = "post">
<Header>
<H2> Article Header </Header>
<P> Without you? I 'd be a soul without a purpose.
</P>
<Footer>
<H2> Article Footer </Footer>
</Article>
It can be seen that it contains many elements.
6. Narration and sidebar
<Aside> label implementation narration, while the sidebar is implemented by <section>.
<Aside> is the additional information, introduction, and image added to the main content.
<Aside>
<P> something. in aside
</P>
</Aside>
<Aside> generally used in <article>
<Article class = "post">
<Header>
<H2> Article Header </Header>
<Aside>
<P> something. in aside
</P>
</Aside>
<P> Without you? I 'd be a soul without a purpose.
</P>
<Footer>
<H2> Article Footer </Footer>
</Article>
Sidebar, not narration! As an area on the right, including links, you can use <section> and <nav>.
<Section id = "sidebar">
<Nav>
<Ul>
<Li> <a href = "2012/04"> limit l 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>
At this point, every label uses the following code: index.html
View Code
<! DOCTYPE html>
<Html lang = "en-US">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" href = "style.css" type = "text/css">
<Title> Layout TEST </title>
</Head>
<Body>
<H2> body <Header id = "page_header">
<H1> Header <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>
</Header>
<Section id = "posts">
<H2> Section <Article class = "post">
<H2> article <Header>
<H2> Article Header </Header>
<Aside>
<H2> Article Aside </Aside>
<P> Without you? I 'd be a soul without a purpose.
</P>
<Footer>
<H2> Article Footer </Footer>
</Article>
<Article class = "post">
<H2> article <Header>
<H2> Article Header </Header>
<Aside>
<H2> Article Aside </Aside>
<P> Without you? I 'd be a soul without a purpose. </p>
<Footer>
<H2> Article Footer </Footer>
</Article>
</Section>
<Section id = "sidebar">
<H2> Section <Header>
<H2> Sidebar Header </Header>
<Nav>
<H3> <Ul>
<Li> <a href = "2012/04"> limit l 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">
<H2> Footer </Footer>
</Body>
</Html>
Ii. CSS3
For CSS files, it is best to map the corresponding elements according to the structure of the HTML file, and perform element attribute rendering in an organized and hierarchical manner. In this way, no elements are missed, and it is easy to find and modify. Of course, it depends on your habits.
The attribute definitions of CSS3 are more abundant. I will not repeat them here. I will refer to the CSS3 reference manual on the Internet. You can check it when using it. Alternatively, you are too lazy to check the code. You can also use special CSS3 control code generation tools and websites, such as http://css-tricks.com/examples/. the example of the specific configuration item can be downloaded. You can also search for something similar.
Paste the css3code style.css file directly.
@ Charset "UTF-8 ";
/* CSS Document */
Body {/* attribute settings for the entire page */
Background-color: # CCCCCC;/* background color */
Font-family: Geneva, sans-serif;/* Available font */
Margin: 10px auto;/* blank page side */
Max-width: 800px;
Border: solid;/* edge stereo */
Border-color: # FFFFFF;/* edge color */
}
H2 {/* set the common attributes of h2 in the entire body */
Text-align: center;/* center text */
}
Header {/* apply to the header of the entire body page */
Background-color: # F47D31;
Color: # FFFFFF;
Text-align: center;
}
Article {/* applies to the entire body page */
Background-color: # eee;
}
P {/* apply to the entire body page p */
Color: # F36;
}
Nav, article, aside {/* common attributes */
Margin: 10px;
Padding: 10px;
Display: block;
}
Header # page_header nav {/* header # attributes of page_header nav */
List-style: none;
Margin: 0;
Padding: 0;
}
Header # page_header nav ul li {/* header # page_header nav ul li attribute */
Padding: 0;
Margin: 0 20px 0 0;
Display: inline;
}
Section # posts {/* # attributes of posts section */
Display: block;
Float: left;
Width: 70%;
Height: auto;
Background-color: # F69;
}
Section # posts article footer {/* section # attributes of posts article footer */
Background-color: #039;
Clear: both;
Height: 50px;
Display: block;
Color: # FFFFFF;
Text-align: center;
Padding: 15px;
}
Section # posts aside {/* section # posts aside attributes */
Background-color: #069;
Display: block;
Float: right;
Width: 35%;
Margin-left: 5%;
Font-size: 20px;
Line-height: 40px;
}
Section # sidebar {/* section # sidebar attributes */
Background-color: # eee;
Display: block;
Float: right;
Width: 25%;
Height: auto;
Background-color: #699;
Margin-right: 15px;
}
Footer # page_footer {/* footer # page_footer attributes */
Display: block;
Clear: both;
Width: 100%;
Margin-top: 15px;
Display: block;
Color: # FFFFFF;
Text-align: center;
Background-color: # 06C;
}
I believe that you can understand it at a Glance without having to explain it more.
If you want to make the page display more elegant, please check out CSS3.
Some Amazing HTML5 + CSS3 websites:
No.1 HTML5 Awesome
No. 2 HTML5 Showcase
No. 3 HTML5 Lab
No. 4 HTML5 Gallery
No. 5 HTML5Beauty
Currently, HTML5 is simple but powerful, and CSS3 is rich. What amazing results can be achieved by combining them.
Continue learning!
Author: Little Thinker
