Regular notes and new elements of HTML5

Before entering the topic, first insert a website https://www.processon.com/

ProcessOn is an online collaborative drawing platform that provides users with the most powerful and easy-to-use drawing tools!

It is very convenient to simply draw something online and let yourself understand it in detail.

Regular Expressions

Today’s regex is just about learning the simple use of regex. In the face of the power of HTML5 tag attributes, we

It is no longer necessary to learn javascript before regularizing, because of the HTML5 input tag

pattern can implement tag verification, approximately replacing complex javascript using regular verification forms, in

It will definitely be completely replaced in the future.

Simple use of regular expressions:

[0-9] finds any number from 0 to 9.
[a-z] finds any character from lowercase a to lowercase z.
[A-Z] Finds any character from uppercase A to uppercase Z.
[A-z] finds any character from uppercase A to lowercase z.

n{X} matches a string containing a sequence of
n{X,Y} matches a string containing X or Y sequences of n.
n{X,} matches a string containing at least X sequences of n.

Remember that these can implement simple regular operations. Such as:

<span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> pattern</span><span style="color: #0000ff;">="[0-9a-zA-Z]{1,}"</span><span style="color: #ff0000;"> required</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

This is a simple form validation that ranges from 0 to 9 or a to z or A to Z with more than 1 character, and

required means setting this text as required, otherwise it will be prompted to fill in when submitting the form.

To use regular rules specifically, you need to remember the meaning of metacharacters, quantifiers and square brackets.

The pattern attribute specifies the matching method of the regular pattern, and can only write the length that matches the regular pattern.

It is currently not as convenient as JavaScript's RegExp object. It cannot set modifiers, such as setting global or case sensitivity, etc.

But its function is already very powerful.

Why can't the modifier be set? Because it is a regular expression, and the explanation in w3c is that pattern is a regular expression, not a string,

The modifier must be omitted, so it cannot set this modifier and no error will occur.

Supplementary knowledge: matching Chinese regular expressions

[u4e00-u9fa5] This indeed only matches Chinese

[^x00-xff] This matches all non-ASCII characters, which are half-width characters in the general sense, and these %! ) (and the like are full-width characters.

HTML5 audio and video elements

audio audio tag

<span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">controls autoplay loop </span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/mp4"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">ssrc</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/ogg"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你的浏览器不支持<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>   
<span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span>

Rendering:

Its properties:

autoplay autoplay If this attribute is present, the audio will be played as soon as it is ready.

controls controls If this attribute appears, displays controls to the user, such as a play button.

loop loop If this attribute is present, playback will restart whenever the audio ends.

preload preload If this attribute appears, the audio will be loaded when the page is loaded and prepared for playback. If "autoplay" is used, this attribute is ignored.

src url URL of the audio to be played.

video tag

<span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">controls loop muted width</span><span style="color: #0000ff;">="400"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="400"</span><span style="color: #ff0000;"> poster</span><span style="color: #0000ff;">="播放前的显示图片URL"</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="视频本地地址URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/mp4"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="视频本地地址URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/ogg"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你的浏览器不支持<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>        
<span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span>

Its properties:

autoplay autoplay If this attribute appears, the video will be played as soon as it is ready.

controls controls If this attribute appears, displays controls to the user, such as a play button.

loop loop If this attribute appears, the media file will start playing again after it finishes playing.

muted muted specifies that the audio output of the video should be muted.

poster URL specifies the image displayed when the video is downloaded, or the image displayed before the user clicks the play button.

preload preload If this attribute appears, the video will be loaded when the page loads and is ready to be played. If "autoplay" is used, this attribute is ignored.

src url The URL of the video to play.

width pixels Set the width of the video player.

height pixels Set the height of the video player.

They all have three formats, one is mp4, one is ogg, and one is webm. The formats currently supported in this regard are not perfect enough.