Html5 semantic tag details and compatibility processing, and html5 semantic tag details

Html5 semantic tag details and compatibility processing, and html5 semantic tag details

<Header>

It is mainly used for the introduction of the page header information, or for combining a title, a subtitle, or a combination of slogans on the section header

<Hgroup>

<H1> Wonderful class

<H2> bring you to humane IT training

</Hgroup>

<Nav> </nav> navigation (a list containing links)

<Nav>

<A href = "#"> link </a> <a href = "#"> link </a>

</Nav>

<Nav>

<P> <a href = "#"> Wonderful class </a> </p>

<P> <a href = "#"> Wonderful class </a> </p>

</Nav>

<Nav>

<H2> excellent courses

<Ul>

<Li> <a href = "#"> javascript </a> </li>

<Li> <a href = "#"> html + css </a> </li>

</Ul>

<Footer> </footer> bottom or bottom of the footer page

<Section> the section on the page is used to divide different areas on the page, or to divide different sections in the article.

<Article> </article> indicates a set of complete and independent content on the page. It can be used to present a post, an article in a magazine or newspaper, or a blog in a forum, comments submitted by users, interactive page module pendants, etc.

<Aside> </aside> element labels can contain references, sidebar, advertisement, and nav element groups related to the current page or main content, other similar aside content should be related to the content of articles. It is included in <article> as the ancillary information of the main content. The content is used outside of <article> for reference and vocabulary list related to the current article, as a part of the global affiliated information of a page or site, the most typical form is the side bar (sidebar), where the content can be links, navigation, or ad unit.

<Figure> combines elements. It is generally used for images or videos.

<Figcaption> the child element of figure is used to describe the content of figure.

<Figure>

(note that there is no alt)

<Figcaption> photo & copy </figcaption>

</Figure>

<Time> </time> indicates the time or date.

<P> we start business every morning at <time> </time>. </P> Parameters

<P> I have an appointment on <time datetime = "2008-02-14"> Valentine's Day </time>. </P>

<Datalist> </datalist> Option List.

Used with the input element to define the possible input values.

<Input type = "text" list = "valList"/>

<Datalist id = "valList">

<Option value = "javascript"> javascript </option>

<Option value = "html"> html </option>

<Option value = "css"> css </option>

</Datalist>

<Details> </details> describes the details of a document or a part of the document. This element is used to extract references and other content that should be separated from the main content of the page.

Open Property is expanded by default.

<Summary> </summary> title of the details Element

<Details>

<Summary> Wonderful class </summary>

<P> well-known IT training institutions in China </p>

</Details>

<Dialog> </dialog> defines a conversation.

<Dialog>

<Dt> instructor </dt>

<Dd> 2 + 2 equals? </Dd>

<Dt> Student </dt>

<Dd> 4 </dd>

<Dt> instructor </dt>

<Dd> correct! </Dd>

</Dialog>

<Address> </address> defines the contact information of the author of an article or page.

<Mark> </mark> words or sentences to be marked

<Keygen> Add a public key to the form

<Form action = "http://www.baidu.com" method = "get">

User: <input type = "text" name = "usr_name"/>

Public Key: <keygen name = "security"/>

<Input type = "submit"/>

</Form>

<Progress> define the progress bar

<Progress max = "100" value = "76">

<Span> 76 </span> %

</Progress>

Tag

For IE6-8 browsers that do not support HTML5 semantic tags, we can use javascript to solve them as follows:

Add the following in the header of the page:

<Script>

Document. createElement ("header ");

Document. createElement ("nav ");

Document. createElement ("footer ");

......

</Script>

Style

HTML5 semantic tag in the IE6-8, after we create it with js, it will not have any default style or even display, therefore, you need to define the default display for these labels in the style sheet.

New input control

Email: email text box. It is no different from ordinary ones. When the input is not a mailbox, the verification will fail over the mobile keyboard.

Tel: phone number

Url: the URL of a webpage

Search: After Entering text in the search engine chrome, an extra closed X

Range: The value selector min, max, and step in a specific range. Example: Use JS to display the current value.

New input widget _ 2

Number: Enter boxes that can only contain numbers

Color: color selector

Datetime: display the complete date

Datetime-local: displays the complete date, excluding the time zone

Time: display time, excluding the time zone

Date: Display date

Week: Display weeks

Month: Display month

New form features and functions

Placeholder: input box prompt example: Weibo Password box prompt

Autocomplete: whether to save the user input value. The default value is on. If it is disabled, the system prompts to select off.

Autofocus: Specifies the form to get the input focus

List and datalist: Create an id that selects the datalist tag as the list value for the input box.

Required: This item is required and cannot be blank.

Pattern: Regular Expression verification pattern = "\ d {1, 5}"

Form Verification

Validity object. The following valid can be used to check whether the verification is successful. If all the eight verification methods pass, true is returned. If one verification fails, false is returned.

OText. addEventListener ("invalid", fn1, false );

Ev. preventDefault ()

ValueMissing: when the input value is null

TypeMismatch: the control value does not match the expected type.

PatternMismatch: the input value does not meet the pattern regular expression.

TooLong: exceeds the maxLength limit

RangeUnderflow: minimum value of the verified range

RangeOverflow: maximum value of the verified range

StepMismatch: Verify that the current value of range complies with the rules of min, max, and step.

CustomError does not comply with custom Verification

SetCustomValidity (); custom Verification

Invalid event: verification feedback

Input. addEventListener ('invalid', fn, false)

Disable default verification: ev. preventDefault ()

Formnovalidate attribute: Disable Verification

Formaction defines the submission address in submit