HTML5의 일반 노트와 새로운 요소

주제를 입력하기 전에 먼저 웹사이트 https://www.processon.com/을 삽입하세요.

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 시퀀스를 포함하는 문자열과 일치합니다.

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

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

이것은 0~9, a~z 또는 A~Z 사이의 1개 이상의 문자 범위를 사용하는 간단한 양식 유효성 검사입니다.

required는 이 텍스트를 필수로 설정합니다. 그렇지 않으면 양식을 제출할 때 작성하라는 메시지가 표시됩니다.

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

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

현재는 JavaScript의 RegExp 객체만큼 편리하지 않습니다. 전역 설정이나 대소문자 구분 등의 수정자를 설정할 수 없습니다.

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

수식어를 설정할 수 없는 이유는 무엇인가요? w3c에서는 pattern이 문자열이 아니라 정규식이라고 설명하고 있습니다.

은 수식어를 생략해야 하므로 이 수식어를 설정할 수 없으며 오류가 발생하지 않습니다.

보충 지식: 중국어 정규식 매칭

[u4e00-u9fa5] 이것은 정말 중국어에만 일치합니다

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

HTML5 오디오 및 비디오 요소

오디오 오디오 태그

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

렌더링:

속성:

autoplay autoplay 이 속성이 있으면 오디오가 준비되는 즉시 재생됩니다.

controls 컨트롤 이 속성이 나타나면 재생 버튼과 같은 컨트롤을 사용자에게 표시합니다.

loop loop 이 속성이 있으면 오디오가 끝날 때마다 재생이 다시 시작됩니다.

preload preload 이 속성이 나타나면 페이지가 로드되고 재생 준비가 될 때 오디오가 로드됩니다. "autoplay"를 사용하는 경우 이 속성은 무시됩니다.

src url 재생할 오디오의 URL입니다.

동영상 태그

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

속성:

autoplay autoplay 이 속성이 있으면 동영상이 준비되는 즉시 재생됩니다.

controls 컨트롤 이 속성이 나타나면 재생 버튼과 같은 컨트롤을 사용자에게 표시합니다.

loop loop 이 속성이 나타나면 미디어 파일 재생이 완료된 후 재생이 다시 시작됩니다.

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

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

preload preload 이 속성이 나타나면 페이지가 로드되어 재생할 준비가 되었을 때 동영상이 로드됩니다. "autoplay"를 사용하는 경우 이 속성은 무시됩니다.

src url 재생할 동영상의 URL입니다.

너비 픽셀은 비디오 플레이어의 너비를 설정합니다.

높이 픽셀은 동영상 플레이어의 높이를 설정합니다.

모두 mp4, ogg, webm의 세 가지 형식이 있습니다. 이와 관련하여 현재 지원되는 형식은 완벽하지 않습니다.