"HTML5 and CSS3 authoritative guide" knowledge collation (1)

"HTML5 and CSS3 authoritative guide" knowledge point finishing (1)

1. New Tags

Added semantic tags.

defines the header for a section or page.

<nav> defines the navigation link.

<footer> define a section or page footer

<section> defines a section.

<article> define the article.

<aside> define content beyond the content of the page.

Here is a diagram illustrating its usage.

The benefits of semantic tagging:

1, search engine friendly, conducive to seo

2. Easy for programmers to read and maintain code

New Multimedia Tags

Audio and vedio tags

<audio controls= "Controls" >

<source src= "Song.ogg" type= "Audio/ogg" >

<source src= "Song.mp3" type= "Audio/mpeg" >

Your Browser does not support the audio tag.

</audio>

the source tag in the code is a media element, and because different kernel browsers support different formats of files,source provides different formats of resources for browser selection.

Property:

AutoPlay : Auto Play

Controls: Display control

Loop: Looping playback

SRC: File path

<video src= "Movie.ogg" controls= "Controls" >

</video>

In addition to the properties with the audio tag, thevedio label can also set the width height property.

When you play a video with subtitles, you can use the track tag to introduce it.

<video width= "height=" controls= "Controls" >

<source src= "Forrest_gump.mp4" type= "Video/mp4"/>

<source src= "Forrest_gump.ogg" type= "Video/ogg"/>

<track kind= "Subtitles" src= "subs_chi.srt" srclang= "zh" label= "Chinese" >

<track kind= "Subtitles" src= "subs_eng.srt" srclang= "en" label= "中文版" >

</video>

New form elements and attributes

1. 7 new input Types

• Email

The email type is used for input fields that should contain e-mail addresses.

when the form is submitted, the value of the email domain is automatically validated.

• Url

The URL type is used for the input domain that should contain the URL address.

when the form is submitted, the value of the URL field is automatically validated.

• Number

The number type is used for input fields that should contain numeric values.

You can also set a limit on the number of accepted numbers:

Points: <input type= "number" name= "Points" min= "1" max= "ten"/>

Property	Value	Describe
Max	Number	Specify the maximum allowable value
Min	Number	Minimum allowable value is specified
Step	Number	Specify a valid number interval (if step= "3", the legal number is -3,0,3,6, etc.)
Value	Number	Specify default values

• Range

The range type is used for input fields that should contain numeric values in a range.

The range type is displayed as a slider bar.

You can also set a limit on the number of accepted numbers:

• Date pickers (date, month, week, Time, DateTime, datetime-local)

HTML5 has several new input types that can be selected for the date and time:

• Date-Select day, month, year
• Month-Select months, years
• Week-Select minute
• Time-Select the Times (hours and minutes)
• DateTime-Select time, day, month, year (UTC time)
• Datetime-local-Select time, day, month, year (local time)

• Search

The search type is used for searching domains, such as site search or Google search.

The search field appears as a regular text field.

• Color
• will bring up the color palette

1. Add form element

The DataList element specifies a list of options for the input field.

The list is created by the option element within DataList.

to bind DataList to an input field, refer to the ID of DataList with the list property of the input field:

Webpage: <input type= "url" list= "url_list" name= "link"/><datalist id= "Url_list" >

<option label= "W3school" value= "http://www.W3School.com.cn"/>

<option label= "Google" value= "http://www.google.com"/>

<option label= "Microsoft" value= "http://www.microsoft.com"/></datalist>

2. New properties

The new form property:

• Autocomplete

The AutoComplete property specifies that the form or input field should have auto-complete functionality.

• Novalidate

The Novalidate property specifies that the form or input field should not be validated when the forms are submitted.

The new input property:

• AutoComplete
• Autofocus

The Autofocus property specifies that the domain automatically receives focus when the page loads.

• Form
• Form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, Formtarget)
• List

The List property specifies the DataList of the input domain. DataList is a list of options for the input domain.

• Multiple

The Multiple property specifies that multiple values can be selected in the input field.

• Pattern (regexp)

The Pattern property specifies the mode (pattern) used to validate the input field. Pattern is a regular expression.

Country code: <input type= "text" name= "Country_code" pattern= "[a-z]{3}" title= "Three letter country Code"/>

• Placeholder

The placeholder property provides a hint (hint) describing the value that the input field expects.

• Required

The Required property specifies that the input field must be filled in before submission (cannot be empty).

HTML5 tag for ie browser need to do compatibility processing, compatible wording in the previous article also mentioned, need to introduce a third-party plug-in, the way is as follows:

<!--[If Lt IE 9]>

<script src= "Libs/html5shiv/html5shiv.js" ></script>

<! [endif]-->

"HTML5 and CSS3 authoritative guide" knowledge collation (1)