Regular expressions and new HTML5 elements

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

It can easily draw something online and let you understand it in detail .

Regular Expressions

Today’s regular expression is just about learning the simple use of regular expressions. In the face of the power of HTML5 tag attributes, we no longer need to learn javascript before using regular expressions, because the pattern of HTML5 input tags can realize tag verification, which can approximately replace complex javascript and use regular expressions to verify forms. This will definitely be the case in the future. Completely replaced.

Simple use of regular expressions:

[0-9] Find 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 X n's.
n{X,Y} matches a string containing X or Y sequences of n.
n{X,} matches a string containing a sequence of at least X n.

Remember that these can implement simple regular operations. For example:

<form action="#">
<input type="text" pattern="[0-9a-zA-Z]{1,}" required>
<input type="submit" value="提交">
</form>

This is a simple form validation with a range of more than 1 character from 0 to 9 or a to z or A to Z, and required is to set this text as required, otherwise it will Prompt 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 regular matching method, and can only write the length that matches the regular pattern.

It is currently not as convenient as the RegExp object of javascript. It cannot set modifiers, that is, set 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 Setting this modifier will not cause an error.

Additional 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.

Audio and video elements of HTML5

audio audio tag

<audio controls autoplay loop >
<source src="URL" type="audio/mp4">
<source ssrc="URL" type="audio/ogg">
<p>你的浏览器不支持</p> 
</audio>

Rendering:

Its attributes:

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

controls controls. If present, displays controls to the user, such as a play button.

loop If present, restarts playback whenever the audio ends. preload preload If this attribute is present, the audio is loaded when the page is loaded and is ready to be played. If "autoplay" is used, this attribute is ignored.

##video video tag

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

Its attributes:

autoplay autoplay If this attribute appears, the video is Play as soon as it is ready.

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

loop loop If this attribute appears, it will act as the media. Start playing again after the file has finished playing.

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

poster URL specifies the image that is displayed when the video is downloaded, or to the user. The image displayed before clicking the play button.

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

#src url The URL of the video to be played.

width pixels Set the width of the video player.

Height pixels set the video player. Highly.

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

The above is the regular expressions and new elements of HTML5 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply to you in time. Thank you very much. Support for PHP Chinese website!