>웹 프론트엔드 >H5 튜토리얼 >정규 표현식과 새로운 HTML5 요소

정규 표현식과 새로운 HTML5 요소

高洛峰
高洛峰원래의
2017-01-11 17:03:192315검색

ProcessOn은 사용자에게 가장 강력하고 사용하기 쉬운 그리기 도구를 제공하는 온라인 공동 그리기 플랫폼입니다!

온라인에서 쉽게 그림을 그릴 수 있고 자세히 이해할 수 있도록 도와줍니다.

정규식

오늘의 정규식은 정규식의 간단한 사용법을 배우는 것입니다. HTML5 태그 속성의 강력한 기능에 직면하여 HTML5 입력 태그의 패턴은 정규식 확인 양식의 복잡한 자바스크립트 사용을 대략적으로 대체할 수 있는 태그 확인을 실현할 수 있기 때문에 정규식을 사용하기 전에 더 이상 자바스크립트를 배울 필요가 없습니다. 앞으로도 완전히 교체될 것입니다.

정규 표현식의 간단한 사용:

[0-9]는 0에서 9까지의 숫자를 찾습니다.
[a-z]는 소문자 a부터 소문자 z까지의 모든 문자를 찾습니다.
[A-Z] 대문자 A부터 대문자 Z까지의 문자를 찾습니다.
[A-z]는 대문자 A부터 소문자 z까지의 문자를 찾습니다.
n{X}는 n의 X 시퀀스를 포함하는 문자열과 일치합니다.
n{X,Y}는 n의 X 또는 Y 시퀀스를 포함하는 문자열과 일치합니다.
n{X,}는 최소한 X개의 n 시퀀스를 포함하는 문자열과 일치합니다.

간단한 일반 작업을 구현할 수 있다는 점을 기억하세요. 예:

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

이는 0~9, a~z 또는 A~Z 사이의 1개 이상의 문자 범위를 사용하는 간단한 양식 유효성 검사이며, 필수는 이 텍스트를 필수 필드로 설정하는 것입니다. 그렇지 않으면 제출할 때 양식을 작성하라는 메시지가 표시됩니다.

일반 규칙을 구체적으로 사용하려면 메타 문자, 한정 기호 및 대괄호의 의미를 기억해야 합니다.

정규 표현식과 새로운 HTML5 요소

패턴 속성은 일반 매칭 방법을 지정하며, 일반 패턴과 일치하는 길이만 쓸 수 있습니다.

현재는 javascript의 RegExp 객체만큼 편리하지 않습니다. 즉, 전역 또는 대소문자 구분 등을 설정할 수 없습니다.

하지만 그 기능은 이미 매우 강력합니다.

그리고 왜 수식어를 설정할 수 없나요? 정규식이기 때문에 w3c에서는 패턴이 문자열이 아니라 정규식이므로 수식어를 생략해야 합니다. 이 수정자를 설정해도 오류가 발생하지 않습니다.

추가 지식: 중국어 정규 표현식 일치

[u4e00-u9fa5] 이것은 실제로 중국어에만 일치합니다

[^x00-xff ] 이는 일반적인 의미에서 반자 문자인 모든 비ASCII 문자와 일치하며, %! ) (등은 전자 문자입니다.

HTML5 오디오 및 비디오 요소

오디오 오디오 태그

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

렌더링:

정규 표현식과 새로운 HTML5 요소

속성:

autoplay autoplay 이 속성이 있으면 컨트롤 컨트롤이 준비되는 즉시 오디오가 재생됩니다. 재생 버튼과 같은 컨트롤을 사용자에게 표시합니다. 루프가 있는 경우 오디오가 끝날 때마다 재생을 다시 시작합니다. 🎜>preload preload 이 속성이 있으면 페이지가 로드될 때 오디오가 로드되고 재생할 준비가 됩니다. "autoplay"가 사용되면 이 속성은 무시됩니다.

src url 재생할 오디오의 URL



속성:


autoplay autoplay 이 속성이 나타나면 동영상이 준비된 후 즉시 재생됩니다.

controls 컨트롤 이 속성이 나타나면 재생 버튼과 같은 컨트롤이 사용자에게 표시됩니다.
<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>

정규 표현식과 새로운 HTML5 요소loop loop 이 속성이 나타나면 미디어 파일이 끝나면 재생이 다시 시작됩니다. 재생 중


음소거는 동영상의 오디오 출력을 음소거하도록 지정합니다.


포스터 URL은 동영상을 다운로드할 때 표시되는 이미지를 지정합니다. 사용자가 재생 버튼을 클릭하기 전에 표시되는 이미지


preload preload 이 속성이 있으면 페이지가 로드될 때 비디오가 로드되고 "자동 재생"이 사용됩니다. , 이는 무시됩니다.


src url 재생할 비디오의 URL


width 픽셀 비디오의 높이를 설정합니다.


모두 세 가지 형식이 있습니다. 하나는 mp4, 하나는 ogg, 하나는 webm입니다. 이와 관련하여 현재 지원되는 형식은 충분하지 않습니다. 🎜>

위 내용은 다음과 같습니다. 에디터가 소개하는 정규식과 HTML5의 새로운 요소에 대해 도움이 되길 바랍니다. 궁금한 사항이 있으면 메시지를 남겨주시면 에디터가 제 시간에 답변해 드리겠습니다. PHP 중국어 웹사이트로!


정규식 및 HTML5 새 요소와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.