what is outside the article label.The content of the aside should be related to the content nearby.Aside's content can be used as a sidebar for articlesReference: Two ways to use the aside label in HTML5
Label effect: aside and div display the same effect is a block element, the specific meaning of the article is the information and in addition to the article as a sidebar (mark defines the content of the page sidebar) hgroup
The
title of the page. But in the HTML5 tag, all the title tags H1~H6 can be used in different chapters. As above, the second H1 label belongs to the Nav label, and the first H1 is at different levels. In Chrome, the second H1 style font is less than the first one:2. Main part--main and section main>section> Hgroup> H2>Chapter LabelsH2> P>Distinguish different chapters for a pageP>
In addition to the main structure elements learned in the previous article, HTML5 also adds some non-principal structural elements that represent the logical structure and additional information:1.headerExplanation: A structure element that has a guided and navigational effect.Purpose: Usually used to place the entire page or the title portion of a content block within a page. such as title name, logo image, etc. Header>H1>Big HeadlinesH1>Header> article> Header>H1>Article content titleH1>H
DOCTYPE HTML>HTMLxmlns= "http://www.w3.org/1999/xhtml">Head> Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> title>title>Head> Body> Headers and Hgroup - Header tags include headings, captions, or title navigation in the syntax specification. Header does not allow nesting, nor is it allowed to appear in address or footer elements - Header> img/>
HTML5
By default, HTML5 new elements are rendered in a inline manner, but you can use the following method to
It is rendered in block mode
Header, footer, article, section, Nav, menu, Hgroup {
Display:block;
}
Unfortunately, IE ignores these styles and can fix it like this:
Document.createelement ("article");
Document.createelement ("footer");
Document.createelement ("header");
Document.createelement ("
, content article, and section. The description is as follows:
In addition to the structural elements of the entire page, html5 also adds block-level semantic elements, such as the auxiliary element aside, Image Element figure, and detailed description element details. In addition to better display the layout meaning of the page, these elements are no different from ordinary divs and still need to be displayed by CSS. Here is a simple example:The Code is as follows:Although these elements are r
First, prefaceThis article will introduce the new semantic tags in HTML5 and support the compatibility of these tags in ie5.5~9 (IE9 has started to support some HTML5 new tags).Directory One lump:Second, semantic tags: article, aside, time, Mark, section, header, footer, Hgroup, progress, figure, figcaption, nav, meter, output, Details, summary, Ruby, and mainThird, let Ie5.5~9 support HTML5 new label1. Under Ie5.5~8, the following issues are encounte
, sessionstorage, websql, indexdb
Example:
5.2.0 semantic headers and footer
Past:
...
...
With HTML5, you can directly replace it;
...
...
5.2.1ie and HTML5
All elements have a default inline display. To ensure that all new elements are correctly rendered using blocks, you need to define them as follows:
Header, footer, article, section, NAV, menu, hgroup {
Display: block;
}
However, because IE does not recognize some labels, such as header
when the user browses to the page. ) problem.HTML5 's local storage can store up to 5M of data, even more. It has four main types: Localstorage,sessionstorage,websql,indexdbExample:[HTML]View PlainCopy
ul id="edit" contenteditable="true">
li>li>
ul>
script language="javascript">
var edit=document.getElementById (edit);
edit.onblur=function () {
Localstorage.setitem ("Tododata", this.innerhtml);
};
if (Localstorage.getitem ("Tododata")) {
edit.innerhtml =
CSS reset refers to the style of resetting the browser. In various browsers, the CSS selector will default some values, such as when the H1 is not set to a value, display a certain size.But not all browsers use the same values, so CSS Reset is used to make the style of the Web page consistent across browsers.Here are a few of the main CSS reset codes:1. Eric MeyerHTML, body, Div, span, applet,Object, IFRAME, H1, H2, H3, H4, H5, H6, p, blockquote, Pre, A, ABBR, acronym, address, big, cite, code,
ArticleDirectory
1. New doctype
Ii. graphic elements)
Iii.
5. quotation marks or not
6. editable content
7. Email input (inputs)
8. placeholders)
9. Local Storage)
10. semantic header and footer
11. More HTML5 form features (more HTML5 form features)
12. Internet Explorer and HTML5)
13. hgroup)
14. required attributes (required attribute)
15. autofocus attributes
16. Audio support
VII. Video Suppo
First, prefaceThis article will introduce the new semantic tags in HTML5 and support the compatibility of these tags in ie5.5~9 (IE9 has started to support some HTML5 new tags).Directory One lump:Second, semantic tags: article, aside, time, Mark, section, header, footer, Hgroup, progress, figure, figcaption, nav, meter, output, Details, summary, Ruby, and mainThird, let Ie5.5~9 support HTML5 new label1. Under Ie5.5~8, the following issues are encounte
, headings are often used to denote all aspects of the same topic. Together they form the outline of the document, so users can simply browse through the headings at each level of the document to get a preliminary idea of the effect and structure, and the title system allows users to quickly navigate to the content of interest.Sub-headingsThe Hgroup element can be used to process several header elements as a whole (if the
New structure elementsIn HTML5, the following structure-related elements have been added:Section elementA section element represents a chunk of content in a page, such as a chapter, header, footer, or other part of a page.It can be used in conjunction with H1, H2, H3, H4, H5, H6 and other elements to identify the document structure.code examples in HTML5:code examples in HTML4:article ElementsThe article element represents a piece of independent content in the page that is irrelevant to the cont
HTML5 Structure Learning (2): html5 Structure Learning
In addition to the entity structure elements learned in the previous article, html5 also adds some non-entity structure elements that represent the logical structure and additional information:
1. header
Explanation: it is a structural element with guidance and navigation functions.
Purpose: it is usually used to place the title part of a content block on the entire page or page. Such as the title name and logo image.
In html5, A header e
HTML5 page layout for mobile devices
In the new elements added to the HTML5 standardHeader footer nav aside article section hgroup.
This element is briefly introduced below:
1. header
Header> A page combination of Element Definition documents. Usually, some guidance and navigation information is displayed. A tag usually contains the header information of secti-on, such as h1 ~ H6 or hgroup.
It is consis
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.