HTML5 semantic Tags--review

Last Update:2017-02-14 Source: Internet

Author: User

Tags element groups

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML5 head structure <!doctype html> <meta charset= "Utf-8"/>

　　 Header

Mainly used for information about the head of the page, but also for the plate head

　　A title combination on the page

A title and a sub-title, or a combination of slogans

　　<nav></nav> Navigation (contains a list of links) (a list containing links)

<nav>

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

</nav>

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

　　<section> <section> sections on the page

For dividing different areas on a page, or dividing different sections in an article

　　<article></article > is used to represent a complete and independent piece of content in a page

<aside></aside> element tags can contain references related to the current page or main content, sidebar, ads, nav element groups, and other similar sections that are different from the main content

　　<figure> < figure > is used to group elements. Generally used for pictures or videos

　　<figcaption> <figcaption> Figure's child elements are used to illustrate the contents of a figure

<figure>

(note no alt)

<figcaption> HTML5 Semantic Tags </figcaption>

</figure>

　　<time></time> used to represent time or date

<p> We are open every morning <time>9:00</time> start. </p> parameters

<p> I am in <time datetime= "2017-02-14" > Valentine's Day </time> have an appointment. </p>

　　List of <datalist></datalist> options. Used in conjunction with the INPUT element to define the possible values for input.

<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> details that describe a part of a document or document

This element is used to extract references and other content that should be separate from the main content area of the page

The Open property is expanded by default

　　< summary></summary> title of details element

<details>

<summary> element Title </summary>

<p> content </p>

</details>

　　<dialog></dialog> Define a conversation

<dialog>

<dt> Teacher </dt>

<dd>2+2 equals? </dd>

<dt> Students </dt>

<dd>4</dd>

<dt> Teacher </dt>

<dd> Answer it! </dd>

</dialog>

　　<address></address> Define detailed contact information for an article or page author

　　<mark></mark> Words or sentences that need 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><progress> define a progress bar

<progress max= "Value=" >

<span>76</span>%

</progress>

Forms

New input controls

　　　　Email : e-mail text box, with the ordinary no difference when the input is not a mailbox, verify that the keyboard on the mobile side will change

　　　　Tel : Phone number

　　　　URL : URL of a Web page

　　　　 Search: Searching engine

　　　　When you enter text under Chrome , you'll get a more closed X

　　　　Range : A numeric selector in a specific range

　　　　min, Max, Step (Number of steps)

New input controls

　　　　 Number: An input box that can contain only numbers

　　　　 color: Colour picker

　　　　datetime : Show full date

　　　　datetime-local : Full date is displayed, no time zone included

　　　　 time: Display times with no time zone

　　　　 Date: Show Dates

　　　　Week : Show week

　　　　 Month: Show months

New form attributes and functions

　　placeholder : input box prompt information

Example: micro-blog Password box hint

　　AutoComplete : Whether to save user input values

The default is on, turn off prompt select off

　　Autofocus : Specify form to get input focus

List and DataList: Construct a selection list for the input box the ID of the list value for the DataList label

　　Required : This entry is required and cannot be empty

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

　　FormAction Define submission address in submit

Form validation

　　The validity object, through the following valid, can see if the validation passed, and if eight types of authentication are returned by true, a validation failure returns false

Otext.addeventlistener ("Invalid", fn1,false);

Ev.preventdefault ()

　　valuemissing : When the input value is empty

Typemismatch : The control value does not match the expected type

　　patternmismatch : Input value does not meet the pattern regular

　　toolong : Maximum limit over maxlength

　　Rangeunderflow : The range minimum value verified

　　Rangeoverflow: The range maximum value verified

　　Stepmismatch: Verifies that the current value of range conforms to the rules for Min, Max, and step

　　Customerror does not conform to custom validation

　　setcustomvalidity (); Custom validation

Form validation

　　Invalid Event: Verify Feedback input.addeventlistener (' Invalid ', fn,false)

Prevent default authentication: Ev.preventdefault ()

Formnovalidate properties: Turn off validation

HTML5 semantic Tags--review

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More