html5의 새로운 태그는 무엇입니까

HTML5 새 태그: 캔버스, 오디오, 비디오, 소스, 포함, 트랙, 데이터 목록, 키젠, 출력, 기사, 따로, bdi, nav, 마크, rt, rp, 루비, 시간, wbr 등 캔버스 태그는 그래픽을 정의할 수 있고, 오디오 태그는 오디오 콘텐츠를 정의할 수 있으며, 비디오는 비디오를 정의할 수 있고, 소스는 멀티미디어 리소스를 정의할 수 있으며, embed는 포함된 콘텐츠를 정의할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5는 2014년 W3C에서 맞춤화한 HTML의 최신 버전입니다. 향상된 브라우저 네이티브 기능은 브라우저 플러그인(예: 플래시) 애플리케이션을 줄이고 사용자 경험 만족도를 향상시키며 개발을 더욱 편리하게 만듭니다. HTML은 1.0에서 5.0까지 단일 텍스트 표시 기능에서 그림과 텍스트가 포함된 멀티미디어 표시 기능으로 엄청난 변화를 겪었습니다. 수년간의 개선 끝에 많은 기능이 매우 중요한 마크업 언어로 발전했습니다.

html5

HTML5의 새로운 태그에는 몇 가지 새로운 구조 태그, 멀티미디어 태그 및 양식 태그가 추가되었습니다. 아래에서 소개해드리겠습니다.

새 요소

태그	설명
	태그는 차트 및 기타 이미지와 같은 그래픽을 정의합니다. 이 태그는 JavaScript의 드로잉 API를 기반으로 합니다

새로운 멀티미디어 요소

태그	설명
	오디오 콘텐츠 정의
	정의 비디오(비디오 또는 영화)
	멀티미디어 리소스
	플러그인과 같은 내장 콘텐츠를 정의합니다.

새 양식 요소

라벨	설명
	옵션 목록을 정의합니다. 이 요소를 입력 요소와 함께 사용하여 가능한 입력 값을 정의합니다.
	양식에 사용할 키 쌍 생성기 필드를 지정합니다.
	스크립트 출력과 같은 다양한 유형의 출력을 정의합니다.

새로운 의미 및 구조적 요소

태그	설명
	페이지의 독립적인 콘텐츠 영역을 정의합니다.
	페이지의 사이드바 콘텐츠를 정의합니다.
	상위 요소의 텍스트 방향 설정과 관계없이 텍스트 부분을 설정할 수 있습니다.
	라디오 버튼, 체크박스, 버튼과 같은 명령 버튼 정의
	문서의 세부정보나 문서의 일부를 설명하는 데 사용됩니다
< ;dialog>	프롬프트 상자와 같은 대화 상자 정의
	태그에는 세부정보 요소의 제목이 포함되어 있습니다.
	독립적인 흐름 콘텐츠를 지정합니다. (이미지, 차트, 사진, 코드 등).
	요소의 제목을 정의합니다.
	섹션이나 문서의 바닥글을 정의합니다.
	는 문서의 헤더 영역을 정의하고
	은 표시가 있는 텍스트를 정의합니다.
	도량형의 정의. 최대값과 최소값이 알려진 측정에만 사용하십시오.
	탐색 링크 부분을 정의합니다.
	모든 유형의 작업 진행 상황을 정의하세요.
	루비 주석(중국어 음성 표기 또는 문자)을 정의합니다.
	문자(중국어 음성 표기 또는 문자)의 해석 또는 발음에 대한 정의입니다.
	은 Ruby 요소를 지원하지 않는 브라우저에서 표시되는 콘텐츠를 정의하기 위해 Ruby 주석에 사용됩니다.
	문서의 섹션(섹션, 섹션)을 정의합니다.
	날짜 또는 시간을 정의하세요.
	텍스트에서 줄 바꿈을 추가하는 것이 적절한 위치를 지정합니다.

html5 태그 사용 예

(1) 탐색 링크 정의

그것도 의미 있는 태그이지, 이 태그를 어딘가에 추가한다는 의미는 아닙니다. 헤더에 메뉴 태그

를 추가하세요. nav 태그는

• 태그

html 코드:

<header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

이렇게 하면 됩니다. 이전에 p만 사용했던 메뉴 레이아웃을 구현할 수 있습니다

(2) 기사 태그

article 블록 태그를 사용하여 기사를 작성할 수 있으며, 이 태그를 사용하십시오.

html 코드:

/*定义nav的高和颜色*/ 
nav{
    height:30px;
    background-color:#F33;
    margin-top:100px;}
/*正常设置li的样式*/
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
}

css 스타일:

<article><!--文章块p-->
　　<h2>文章标题</h2><!--标题-->
　　<p>文章内容文章内容文章内容文章内容文章内容文章内容
　　<br>
　　文章内容文章内容文章内容文章内容文章内容文章内容<br>
　　文章内容文章内容文章内容</p>
</article>　

이 방법으로 기사를 작성할 수 있습니다

(3) 미디어 콘텐츠의 그룹화 및 제목<그림>

A을 정의합니다. 이 태그는 일치하는 태그

과 함께 사용할 수 있지만 제목

article{
	background-color:#F33;
	width:500px;
	text-align:center;  /*水平居中*/  
	margin:0px auto;
}

B를

중간에 작성하세요. 또한

와 함께 사용할 수도 있습니다. 여기서

는 콘텐츠를 작성하는 데 사용됩니다. 사용 지원 효과에서

<figure>
    <figcaption>标题</figcaption><!--配套-->
    <p>标题内容</p>
</figure>

(4) 대화 상자 또는 창 정의

이 태그에 dd 및 dt 태그를 사용할 수도 있습니다. 대화 상자의 제목과 내용입니다. box에는 open 속성이 있습니다. 이 태그의 호환성이 좋지 않습니다. 이 태그는 li

<figure>
    <dt>标题1</dt>
    <dd>标题内容</dd>
</figure>

B와 함께 사용할 수 있습니다.

<dialog open>
          <dt>1问题</dt>
          <dd>1答案</dd>
          <dt>2问题</dt>
          <dd>2答案</dd>
</dialog>

<menu>
         <li>定义列表</li>
         <li>定义列表</li>
         <li>定义列表</li>
</menu>

를 사용하여 마우스 오른쪽 버튼 클릭에 자신만의 콘텐츠를 추가할 수 있습니다(Firefox만 호환됨) Union(사용자가 팝업 메뉴에서 호출할 수 있는 명령/메뉴 항목 정의) 원하는 메뉴 항목을 마우스 오른쪽 버튼으로 클릭하면 나타납니다

, 콘텐츠가 나타납니다

(6) 제목 그룹

제목 < h3> 일반적인 사용

<menu type="context" id="cai">
            <!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码--> 
            <menuitem label="菜单一" onclick="alert(&#39;这是菜单一&#39;)" icon="右键单击显示的图片"></menuitem>
                   
</menu>

(7) 작은 텍스트 정의<작은>

이 태그는 실제로 다른 굵은 태그와 유사합니다.

<span contextmenu="cai">单击我试试</span>

(8) 요소의 세부 정보 정의< 자세히>

안에 들어있는 내용은 제목과 내용 태그로 사용하실 수 있습니다

<hgroup><!--标题组-->
        <h3>标题</h3>
        <h3>标题1</h3>
        <h3>标题2</h3>
        <h3>标题3</h3>
</hgroup>

자세한 내용을 클릭하시면 제목과 내용을 보실 수 있습니다

(9) 루비 댓글 정의

인식할 수 없습니다. 이것을 사용하여 문자에 대한 병음에 주석을 달 수 있지만 일부 호환성은 그다지 좋지 않습니다. 때가 되면 수정할 수 있습니다.

<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>

(10) 미리 정의된 범위<미터>

<details>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
</details>　　

값이 초과되었습니다. 범위가 결정된 후

<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->

(11) 진행률 표시줄의 라벨

<meter min="0" max="10" value="4" low="2" high="7">

최대값은 진행률 표시줄의 길이이며, 값은 값은 표시되는 진행률입니다. 동적 진행률 표시줄을 만드는 데 사용하세요

<meter min="0" max="10" value="8" low="2" high="7">

진행률 표시줄을 이렇게 완성할 수 있습니다. js로만 작성하는 것보다 훨씬 낫지 않나요? 브라우저마다 표현이 다릅니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 배우기를 방문하세요! !

위 내용은 html5의 새로운 태그는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!