Detailed explanation of Html5 semantic tags and compatibility processing

Header

is mainly used to introduce information in the header of the page, and can also be used in the section header

The title combines a title and a subtitle, or a combination of slogans

Miaowei Classroom

Take you to the humane IT training

Navigation (a list containing links)

LinkLink

Wonderful Classroom

Wonderful Classroom

< nav>

Wonderful Premium Courses

• javascript
• html+css

< /ul>

The bottom of the footer page or the bottom of the section
The sections on the page are used to divide the sections on the page Different areas, or dividing different sections in the article

are used to represent a complete set of structured and independent content parts on the page, which can be used to present a forum post. An article in a magazine or newspaper, a blog, user-submitted comment content, interactive page module widgets, etc.

Element tags can contain references, sidebars, advertisements, nav element groups, and other similar parts that are different from the main content related to the current page or main content. The content of aside should be related to the content of article. Ancillary information included in

as the main content, in which the content is used outside of

in the form of quotes, word lists, etc. related to the current article, as ancillary information for the page or site as a whole; The most typical form is the sidebar, the content of which can be friendly links, affiliated navigation or advertising units.

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

The sub-element of figure is used to describe the content of the figure

< img src="miaov.png"/>(note there is no alt)

Miaowei Classroom photo © Miaowei Quxue

Used to express time or date

We open at 9:00 every morning.

Parameters

I have a date on Valentine's Day.

Option list.

Use with the input element to define the possible values ​​of the input.

javascript

html

css

Used to describe the details of a document or a certain part of the document. This element is used for excerpts, quotations, etc. It should be consistent with the main content of the page. Content is separated from other content

The Open attribute is expanded by default

< summary> the title of the details element

Miaowei Classroom

The well-known IT training institution in China

Define a dialogue

Teacher

2 +2 equals?

Student

4

Teacher

Correct answer!

Defines the contact details of the author of the article or page

Words or sentences that need to be marked

Add a public key to the form

User:

Public key:

Define the progress bar

76

tag

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

Add at the head of the page:

<script></p> <p>document.createElement(“header”);</p> <p>document.createElement(“ nav”);</p> <p>document.createElement(“footer”);</p> <p>……</p> <p></script>

Style

HTML5 semantic tags under IE6-8, after we create them with js, they will not have any default style or even display, so the default display of these tags must be defined in the style sheet

New input control

email: Email text box, no different from ordinary ones. When the input is not an email, the verification fails. The mobile keyboard will change

tel: Telephone Number

url: The URL of the webpage

search: After entering text in the search engine chrome, there will be an additional closed X

range: The value selector min within a specific range , max, step (number of steps) Example: Use JS to display the current value

New input control_2

number: An input box that can only contain numbers

color: Color picker

datetime: Display the complete date

datetime-local: Display the complete date without time zone

time: Display time without time zone

date: Display date

week: Display week

month: Display month

New form features and functions

placeholder: Input box prompt Information example: Weibo's password box prompt

autocomplete: Whether to save the user input value is on by default. To close the prompt, select off

autofocus: Specify the form to obtain input focus

list and datalist: Construct a selection list for the input box. The list value is the id of the datalist tag.

required: This item is required and cannot be empty.

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

Form verification

validity object, you can check whether the verification is passed through the following valid. If all eight verifications pass, it returns true, and if one verification fails, it returns false

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

ev.preventDefault()

valueMissing: When the input value is empty

typeMismatch: The control value matches Expected type mismatch

patternMismatch: the input value does not meet the pattern regularity

tooLong: exceeds the maxLength maximum limit

rangeUnderflow: the verified range minimum value

rangeOverflow : The maximum value of the verified range

stepMismatch: Verify whether the current value of the range conforms to the rules of min, max and step

customError does not meet the custom verification

setCustomValidity(); Custom validation

Invalid event: Validation feedback

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

Prevent default validation: ev.preventDefault()

formnovalidate attribute: turn off verification

Formaction defines the submission address in submit

The above is the detailed content of Detailed explanation of Html5 semantic tags and compatibility processing. For more information, please follow other related articles on the PHP Chinese website!