h5 new label and form properties

A, h5 new structural tags (meaningful div)

Head 1.header defined pages

The navigation section of the page is defined 2.nav

3.section define an area of ​​the page

4.footer defined bottom of the page

5.article custom page article

6.aside defines the page's sidebar

7.hgroup the title of the page combined

8.figure will combine elements of a web page

9.figcaption add a caption to figure combination

10.dialog similar conversation box

eg:

<dialog open></dialog>

Note: Session box is turned off by default, you need to add open properties

Two, h5 add another tag

1. Define the text with the symbol

Syntax: <Mark> text with marks </ mark>

2. Define a scalar measurement within a known range or

语法:<meter value="10" min="0" max="100"></meter>

3. Identify the progress of the task or process

语法:<progress value="10" min="0" max="100"></progress>

Extended:

a) canvas or the canvas rendered image

b) embed defined external plug or interactive content, such as flash

c) main content body portion defined

Three, h5 audio and video

1. Audio

grammar:

<audio controls autoplay loop>
          <source src="1.mp3" type="audio/mp3"/>
          <source src="2.ogg" type="audio/ogg"/>
          <source src="3.wav" type="audio/wav"/>
      您的浏览器版本太低,请升级浏览器!
</audio>

Note:

a) controls the audio control bar was added

B) Set the audio autoplay AutoPlay (high version shielding autoplay autoplay)

c) loop loop

Note: Audio Supported audio formats: mp3, wav, ogg

2. Video

grammar:

<video controls autoplay loop width="数值" height="数值" poster="图片路径">
          <source src="1.mp4" type="video/mp4"/>
          <source src="2.ogg" type="video/ogg"/>
          <source src="3.webm" type="video/webm"/>
          您的浏览器版本太低,请升级浏览器!
</video>

Note:

a) width and height define the width and height of the video area

b) poster to load a picture in front of video playback

c) controls, autoplay, loop with the audio attributes of these

Note: video Supported video formats: mp4 (MPEG4), ogg, webm

Four, h5 new form type property

1.type=“email”

Limit mailbox user input type (i.e., input should contain @ sign, and before and after can not be empty @)

2.type=“url”

Restrict the user to enter a URL that input should contain "http:", and later can not be empty

3.type=“number”

Limit the user input to a digital type

eg: <input type="number" value="1" min="1" max="30" step="2"/>

Note: value setting default values, min minimum set, max maximum value set, step of setting each increment decrement values, default 1

4.type=“range”

Produce a slider form

eg: <input type="range" value="10" min="0" max="100"/>

5.type=“color”

Generating a color selection panel

6.type=“date”

Produce a panel to select a date

7.type=“time”

Generating a selection time of the panel

8.type=“month”

Generating a date selection panel

9.type=“week”

Select a date is the first few weeks of the year

10.type=“search”

Produce a sense search form

Five new h5 form a new property

1.required restrict user input is required and can not be empty

eg: <input type="text" required/>

2.placeholder = "Default message" to input the input box to add a default message

EG: <the INPUT of the type = "text" placeholder = "Please enter your user name" />

After 3.autofocus page loads the cursor to an input block autofocus

eg:<input type="text" autofocus/>

4.pattern = "regular expression" Enter the content to match the specified regular expression

eg: <input type="text" pattern="^[a-zA-Z0-9]{6,16}$"/>

5.min maximum number setting max to the minimum increment decrement step provided

6.list datalist designated as a drop-down list Tips

eg:

  <input type="search" list="data"/>
     <datalist id="data">
         <option>a</option>
         ...
     </datalist>

Extended: autocomplete = "on | off" auto-complete, Show History

eg:

 <input type="text" autocomplete="off" name="username"/>
	 <form autocomplete="on|off"></form>

7. cancel form validation of h5

grammar:<form novalidate></form>

Published 94 original articles · won praise 29 · views 50000 +

Guess you like

Origin blog.csdn.net/weixin_41849462/article/details/98204684