HTML5 added common semantic tags

article


<article></article>
Copy the code
  • Represents all “body” parts of a document, page, or application, and the content it describes should be independent, complete, and can be independently referenced externally. This can be a blog post, a newspaper article, a forum post, a user comment, a standalone plugin, or anything that is separate from the rest of the context
  • Each article usually includes a title (h1-H6 elements) as a child of the article element
  • It may contain one or more sections

section


<section></section>
Copy the code
  • Define sections in a document (sections of content in a page, sections in an article)
  • Div is used for style partitions and section is used for content structure partitions
  • A section element usually consists of content and a title

nav


<nav></nav>
Copy the code
  • The section that defines navigation links. In nav generally, link group elements are generally placed as ul
  • Main navigation, sidebar navigation, in-page navigation, menus, breadcrumb navigation, paging, table of Contents and indexes

aside


<aside></aside>
Copy the code
  • Represents the subordinate information section of the current page or article
  • References and noun explanations related to the current article, as well as links, lists of other articles in the list or advertising modules, etc

header


<header></header>
Copy the code
  • Defines a header (header) for an entire document or a section of a document
  • The header of the entire page, the section of the article page that contains the title

footer


<footer></footer>
Copy the code
  • Defines the footer of a document or section
  • The footer of the document usually contains copyright information and legal notices as well as some other links

HTML5’s new multiple form input types

search

<input type="search">
Copy the code
  • Search domains, such as site search or Google search

tel

<input type="tel">
Copy the code
  • Enter a text field for a phone number

url

<input type="url">
Copy the code
  • URL address input field

email

<input type="email">
Copy the code
  • The input field containing the E-mail address

number

<input type="number" max="10" min="2">
Copy the code
  • Numerical input field

range

<input type="range" max="100" min="0">
Copy the code
  • slider
  • An input field containing a range of numeric values, displayed as a slider
  • Properties:
    • Max: Defines the maximum allowed value
    • Min: Defines the minimum allowed value
    • Step: Define a valid number interval
    • Value: defines the default value

color

<input type="color">
Copy the code
  • Color input field for selecting colors

date

<input type="date">
Copy the code
  • Select a date (year month day)

time

<input type="time">
Copy the code
  • Select hour minute

datetime-local

<input type="datetime-local">
Copy the code
  • Select a date and time (no time zone)

New form attributes in HTML5

placeholder

<input type="text" placeholder="Please enter your mobile phone number.">
Copy the code
  • The input prompt

Min, Max, step

<input type="number" value="4" min="2" max="10" step="2">
Copy the code
  • Applies to range and number elements
  • The Max property specifies the maximum value allowed for the input field
  • The min attribute specifies the minimum value allowed for the input field
  • The step property specifies the legal number interval for the input field

autofocus

<input type="text" autofocus>
Copy the code
  • Specify that focus is automatically acquired when the page loads

autocomplete


<form action="">
    <input type="text" name="username" autocomplete="on">
</form>
Copy the code
  • Done automatically
  • When the form element gets focus, a list of options is provided for the user to choose from for auto-fill
  • This capability is dependent on the Settings of the browser itself, and you may need to enable the browser’s own autocomplete feature first for the AutoComplete property to take effect.
  • The values
    • On (on)
    • Off (off)

pattern


<form action="">
    <input type="text" name="test" pattern="[0-9].">
</form>
Copy the code
  • The schema used to validate the input field
  • Input values are validated against the specified schema when submitted,
  • If the input is valid, it can be submitted. If the input is invalid, a message is displayed, indicating that the submission fails

multiple


<form action="">
    <input type="email" name="email" multiple>
    <input type="file" name="file" multiple>
</form>
Copy the code
  • Used for email domain
    • The default email field does not support multiple email addresses. Multiple comma separated email addresses are allowed after emails
  • For the file domain
    • The default file type only supports the selection of a single file for uploading. The new multiple attribute enables it to select multiple files at once.

form


<form action="#" id="my_form">
    <input type="text" name="username"/>
</form>

<input type="reset" form="my_form">

Copy the code
  • Specifies the form region form to which a form element belongs
  • The form attribute must reference the ID of the form region to which it belongs
  • References more than one form, using a space-separated list

New multimedia elements for HTML5

video


<video src="" controls loop muted width="500" poster="">Your browser is out and does not support viewing small videos</video>

<video controls loop muted height="500" poster="">
    <source src="" type="video/webm">
    <source src="" type="video/mp4">
    <source src="" type="video/">Your browser is out and does not support viewing small videos</video>

Copy the code
  • Allows you to import multiple video resources using the Source tag
  • The browser plays the first recognizable format
  • attribute
    • SRC =”” Address of the video resource
    • Controls Displays play and pause controls
    • Loop play
    • Autoplay Automatically plays
    • Muted mute
    • Width =”500″ height=”1000″ width=”500″ height=”1000″ width=”500″ height=”1000″ width=”500″ height=”1000″
    • Poster = “poster address indicates video cover”

audio


<audio src="" controls loop autoplay>Your browser is out and does not support listening to small music</audio>

<audio controls loop autoplay>
    <source src="" type="audio/ogg">
    <source src="" type="audio/mpeg">Your browser is out and does not support listening to small music</audio>

Copy the code
  • Allows you to import multiple audio resources using the Source tag
  • The browser plays the first recognizable format
  • attribute
    • SRC =”” Address of the audio resource
    • Controls Displays play and pause controls
    • Loop play
    • Autoplay Automatically plays
    • Muted mute

New global properties for HTML5

data-*


<ul>
    <li data-en="HOME">Home page</li>
    <li data-en="ABOUT">About us</li>
    <li data-en="Contact">Contact us</li>
</ul>
Copy the code
  • Use the data-* attribute to embed custom data
  • The data-* attribute consists of two parts:
    • Attribute names should not contain any uppercase letters and must have at least one character after the prefix “data-“
    • Property values can be any string