집 >웹 프론트엔드 >H5 튜토리얼 >html5의 새로운 태그는 무엇입니까? HTML5의 새로운 태그 애플리케이션

html5의 새로운 태그는 무엇입니까? HTML5의 새로운 태그 애플리케이션

不言원래의: 2018-08-08 10:26:5011453검색

html5는 HTML(Hypertext Markup Language)의 다섯 번째 수정이므로 html5에 몇 가지 새로운 태그가 추가되었습니다. 그렇다면 html5의 새로운 태그는 무엇일까요? 아래에서 소개해드릴 내용은 html에 비해 html5에 추가된 새로운 태그입니다.

1. HTML5의 새로운 태그

헤더 - 소개 콘텐츠의 컨테이너 또는 탐색 링크 집합을 나타낼 수 있습니다.

Nav - 라벨의 콘텐츠는 주로 탐색에 사용됩니다.

기사 - 페이지의 주요 콘텐츠를 식별합니다. 블로그를 예로 들면 각 게시물은 중요한 콘텐츠이고 기사를 사용하여 각 게시물을 식별할 수 있습니다.

섹션 - 페이지의 중요한 섹션을 표시하는 데 사용됩니다. 이 마크업은 문서를 장으로 나누는 것과 유사합니다.

Aside - 페이지의 주요 내용과 관련되어 있음을 나타내지만 페이지의 일부는 아닌 경우가 많습니다.

Footer - Header의 반대말로 문서나 장의 바닥글을 나타냅니다. 예를 들어 저작권 정보가 이 태그에 배치됩니다.

전통적인 div 레이아웃

<body>
    <!-- 页头 -->
    <div class=&#39;header&#39;></header> 
    <!-- 导航 -->
    <div class=&#39;nav&#39;></div>
    <!-- 主体内容 -->
    <div class=&#39;main&#39;>
        <!-- 文章 -->
        <div class=&#39;article&#39;>
            <!-- 节 -->
            <div class=&#39;section&#39;></div>
        </div>
        <!-- 边栏 -->
        <div class=&#39;sidebar&#39;></div>
    </div>
    <!-- 页脚 -->
    <div class=&#39;footer&#39;></div></body>

HTML5의 새 태그를 사용하여 레이아웃 구현

<body>
    <header></header>
    <nav></nav>
    <div>
        <article>
            <section></section>
        </article>
        <aside></aside>
    </div>
    <footer></footer></body>

2. 향상된 양식 적용

HTML 4에서는 기본 입력을 처리하기 위해 몇 가지 간단한 양식 요소가 제공됩니다. 날짜 및 시간 입력과 같은 특정 유형의 입력의 경우 대화형 환경이 요구 사항을 충족할 수 없습니다. 따라서 더 나은 결과를 얻으려면 javascript만 사용하여 구성 요소 구현을 작성할 수 있습니다. HTML 5에서는 향상된 새로운 양식 요소가 추가되어 더 많은 입력 유형을 제공합니다.

(1) 입력의 유형 속성 확장

search - 검색 상자를 표시합니다.

tel - 전화번호를 입력하세요. 패턴과 최대 길이를 사용하여 적절한 입력을 제한할 수 있습니다.

<input type=&#39;tel&#39; name=&#39;tel&#39; value="" placeholder="请输入手机号码" pattern=&#39;1[3-8][0-9]{9}&#39; title=&#39;请输入11位手机号&#39;>

url - URL 주소를 입력하세요.

email - 이메일 주소를 입력하세요.

날짜 - 날짜를 입력하세요.

color - 색상을 입력하세요.

숫자 - 숫자를 입력하세요.

range - 슬라이더 입력

(2) 속성을 통한 입력 양식 검증

required - 현재 요소를 필수로 표시합니다.

pattern - 정규 표현식을 사용하여 양식 입력의 유효성을 검사합니다.

(3) 입력 요소의 기타 유용한 속성

autofocus - 페이지가 로드되면 자동으로 현재 입력 요소에 초점을 맞춥니다.

form - 입력 요소를 특정 양식 양식과 연결합니다.

placeholder - 사용자에게 입력을 요청하는 입력 자리 표시자입니다.

(4) HTML 5 새 요소 및 특수 속성 contenteditable

progress - 요소는 진행률 표시줄을 나타냅니다.

<progress value=&#39;30&#39; max=&#39;100&#39;></progress>

meter - 눈금자를 나타내는 요소입니다. 최대값 max의 기본값은 1입니다.

<meter value="3" min="0" max="10">3/10</meter><meter value="0.6">60%</meter>

HTML 5 특수 속성 contenteditable을 통해 일반 요소를 편집 가능하게 만들 수 있습니다.

<p contenteditable="true">这里的内容式可编辑的</p>

3. 오디오 및 비디오 사용

(1) audio(오디오 태그)

<audio controls>
    <source src="vincent.mp3" />
    <source src="vincent.ogg" />
    您的浏览器不支持 audio 标签</audio>

audio 요소의 동작을 제어하는 속성은 다음과 같습니다

controls - 이 속성은 표시 여부를 제어합니다. 표준 오디오 공간.

autoplay - 자동으로 재생할지 여부입니다. 기본값은 거짓입니다.

loop - 반복할지 여부입니다. 기본값은 거짓입니다.

preload - 사전 로드 방법. 세 가지 상황이 있습니다. 없음은 사전 로드가 없음을 의미하고, 메타데이터는 오디오의 메타데이터만 로드함을 의미합니다. 기본 자동.

볼륨 - 볼륨, 0~1 사이의 값

오디오 재생 및 일시 정지 방법

var audio = document.getElementById(&#39;audio&#39;)
audio.play() // 播放audio.pause() // 暂停

(2) 비디오(비디오 태그)

currentTime은 재생 시작 시간을 제어합니다

<video width="400" height="300" controls currentTime=&#39;5&#39;>

    <source src="dizzy.mp4#t=5" type="video/mp4" />  <!-- 从 5s 开始 -->
    <source src="dizzy.ogv#t=5,10" type="video/ogg" /> <!-- 从 5s 到 10s -->
    <source src="dizzy.webm#t=,15" type="video/webm"> <!-- 到 15s 结束 -->
    <p>您的浏览器不支持 HTML 5 视频</p></video>

html5의 새로운 태그는 무엇입니까? HTML5의 새로운 태그 애플리케이션

관련 기사