HTML New Elements
HTML5’s semantic tags and attributes allow developers to easily implement clear web page layouts. Coupled with CSS3 effect rendering, it is very convenient to quickly create rich and flexible web pages. Simple.
The new tag elements for learning HTML5 this time are:
<header> defines the head of the page or section;
<footer> defines the page or section The tail of;
<nav>Define the navigation area of the page or section;
<section>The logical area or content combination of the page;
<article> Define the main text or a complete piece of content;
<aside>Define supplementary or related content;
The best way to learn these tags is of course to try using them. Although there are many ready-made web page layout templates that can be easily used, for beginners, it is absolutely necessary to implement a simple page layout by yourself. Here is a simple page layout example to demonstrate the use of the above tags.
Example: Imitate the blog homepage layout
Implement the web page structure as shown in Figure 2-1, which is a very typical blog page: header, tail, horizontal navigation bar, sidebar navigation and content.
Figure 2-1
As you can see in Figure 2-1, the areas implemented by the corresponding tags are marked with names, such as Header
Before writing the 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 CSS3 code can be placed in the same file as the HTML5 code, or it can be independent files, as long as they are referenced in HTML5 files. It is recommended that each be an independent file. The benefits are:
1) Comply with the single responsibility principle: the HTML5 page is responsible for managing elements, while the CSS3 file is only responsible for rendering the display effect of the corresponding HTML5 file, independent of each other. , do not intersect with each other.
2) Reduce the complexity of the page and facilitate maintenance: Just imagine, when the number of elements on the page increases to a lot, how bad the readability will be if the elements and the display attributes of the elements are managed on one page at the same time. Maintenance will be a pain in the ass.
3) Speed up the loading speed of the browser: Another benefit of point 2) is that simple pages will naturally load faster.
Of course, if you are used to putting HTML5+CSS3 in one file, it is not a bad idea. This is just a suggestion.
Let’s implement Figure 2-1 in detail.
1.HTML5 document declaration
Create a new index.html file. If the web page writing tool used already supports the HTML5 file type, then the following HTML5 template should be generated:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Layout TEST</title> </head> <body> </body> </html>
It doesn’t matter if the web page writing tool does not support HTML5 for the time being. It is very simple to write these lines of code yourself.
Description: The first line: <!DOCTYPE html> is HTML5’s simplification of document types, simplifying the complex; (The role of the document type: the validator uses it to determine which rules to use to verify the code; mandatory The browser renders the page in standard mode)
2. Header
<header> tag implementation
<header id="page_header">
<h1>Header</h1>
</header>
Note: 1) The header cannot be confused with h1, h2, and h3 titles. <header> can contain everything from your company logo to a search box. The example contains only the title.
2) The same page can contain multiple <header> elements. Each independent block or article can contain its own <header>. Therefore, in the example, a unique id attribute is added to <header> to facilitate flexible rendering in CSS3. You will see the role of the id tag in the CSS file.
3. Tail
<footer> tag implementation
<footer id="page_footer"> <h2>Footer</h2> </footer>
Description: The position is the tail of the page or block. The usage is basically the same as <header>, and it will also include other elements. , the id is also specified here.
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 crucial to a web page, it is fast and convenient Good navigation is necessary to retain visitors.
1) Can be included in <header> or <footer> or other blocks, and a page can have multiple navigations.
2) Navigation generally requires CSS to render, and you will see CSS rendering later.
5. Block and article
<section> and <article> tags implement
<section id="posts"> /*可以包含多个< article>*/ <article> /*article的内容*/ </article> <article> /*article的内容*/ </article> </section>
<section> elements reasonably classify the content of the page and make it reasonable layout.
The following is the general content of <article>
<article> <header> <h2>Article Header</h2> </header> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article>
You can see that it can contain many elements.
6. Narration and sidebar
The <aside> tag implements narration, and the sidebar is implemented by <section>.
<aside> is additional information added to the main content, including introductions, pictures, etc.
<aside> <p>sth. in aside </p> </aside>
<aside> is generally used in <article>
<article> <header> <h2>Article Header</h2> </header> <aside> <p>sth. in aside </p> </aside> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article>
Sidebar, not narration! Think of it as an area on the right, including links, and use <section> and <nav> to achieve it.
<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>
At this point, the use of each tag is like this. The following is the complete code index.html file of HTML5
View Code
<!DOCTYPE html> <html> <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</h2> <header id="page_header"> <h1>Header</h1> <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</h2> <article> <h2>article</h2> <header> <h2>Article Header</h2> </header> <aside> <h2>Article Aside</h2> </aside> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article> <article> <h2>article</h2> <header> <h2>Article Header</h2> </header> <aside> <h2>Article Aside</h2> </aside> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article> </section> <section id="sidebar"> <h2>Section</h2> <header> <h2>Sidebar Header</h2> </header> <nav> <h3></h3> <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"> <h2>Footer</h2> </footer> </body> </html>
The following is a detailed introduction to the new elements
#<canvas> New element
##<canvas> tag defines graphics, such as charts and other images. This tag is based on the JavaScript drawing API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>##New multimedia elements
Tag Description
<video> Define video Or movie)
<source> Define multimedia resources <video> and <audio>
<embed> Define embedded content, such as plug-ins.
<track> Specifies an external text track for media such as <video> and <audio> elements.
New form element
## <datalist> Defines the option list. Use this element in conjunction with an input element to define the possible values of the input.
<keygen> Specifies the key pair generator field used for the form.
<output> Define different types of output, such as script output.
New semantic and structural elements
HTML5 provides new elements to create better page structure:
## Tag Description
<aside> Define the sidebar content of the page.
<bdi> Allows you to set a piece of text to be independent of the text direction setting of its parent element.
<command> Define command buttons, such as radio buttons, check boxes or buttons
<details> Used to describe the details of a document or a certain part of a document
<dialog> Defines a dialog box, such as a prompt box
<summary> The label contains the title of the details element
<figure> Specifies independent flow content (images, charts, photos, code, etc.).
<figcaption> Define the title of the <figure> element
<footer> Define the footer of the section or document.
<header> Defines the header area of the document
<mark> Defines text with marks.
<meter> Define weights and measures. Use only for measurements with known maximum and minimum values.
<nav> defines the part of the navigation link.
<progress> Defines the progress of any type of task.
<ruby> Define ruby comments (Chinese phonetic or characters).
<rt> Define the interpretation or pronunciation of the character (Chinese phonetic phonetic or character).
<rp> Used in ruby comments to define the content displayed by browsers that do not support ruby elements.
<section> Define the section (section, section) in the document.
<time> Define date or time.
<wbr> Specifies where in the text it is appropriate to add a newline character.
Removed Elements
The following HTML 4.01 elements have been removed in HTML5:
<acronym> ;
<applet>
<basefont>
<big>
<center>
<dir> ;
<font>
<frame>
<frameset>
<noframes>
<strike> ;
<tt>
