html5에 추가된 새로운 요소 태그

html5의 새로운 요소 태그는 "

", "

", "

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

페이지 열의 측면 정의 content

오디오 콘텐츠 정의 를 사용하면 상위 요소의 텍스트 방향 설정과 관계없이 텍스트 부분을 설정할 수 있습니다. <캔버스>차트 및 기타 이미지와 같은 그래픽 정의, 레이블은 그래픽 컨테이너일 뿐이므로 그래픽을 그리려면 스크립트를 사용해야 합니다.라디오와 같은 명령 버튼 정의 버튼, 체크박스 또는 버튼 옵션 목록을 정의하세요. 이 요소를 입력 요소와 함께 사용하여 가능한 입력 값을 정의합니다.

문서의 세부정보나 문서의 특정 부분을 설명하는 데 사용됩니다.

프롬프트 상자와 같은 대화 상자 정의< ;embed>플러그인과 같은 삽입 콘텐츠를 정의합니다.

요소의 제목을 정의합니다.

독립적인 흐름 콘텐츠(이미지, 차트, 사진, 코드 등)를 지정합니다. <바닥글>섹션이나 문서의 바닥글을 정의합니다.

은 문서의 헤더 영역을 정의하고 양식에 사용되는 키 쌍 ​​생성 필드를 지정합니다. 마크로 텍스트를 정의하세요. 텍스트를 강조표시하려면 태그를 사용하세요. 도량형의 정의. 최대값과 최소값이 알려진 측정에만 사용하십시오.

탐색 링크 부분 정의

스크립트 출력과 같은 다양한 유형의 출력을 정의합니다. 실행 중인 진행률(프로세스)을 정의합니다. 태그는 Ruby 요소를 지원하지 않는 브라우저에 표시되는 내용을 정의하기 위해 Ruby 주석에 사용됩니다. 태그는 문자(중국어 음성 기호 또는 문자)의 해석이나 발음을 정의합니다. 태그 정의 루비 댓글(중국어 음성 또는 문자).

태그는 문서의 섹션(섹션, 섹션)을 정의합니다. 장, 머리글, 바닥글 또는 문서의 기타 부분 등입니다.

태그는 미디어 요소(예:

태그에는 세부정보 요소의 제목이 포함되며 "세부정보" 요소는 문서 또는 문서 조각에 대한 자세한 정보를 설명하는 데 사용됩니다.

날짜나 시간, 또는 둘 다를 정의하세요. <템플릿>날짜나 시간, 또는 둘 다를 정의하세요. 태그는 비디오 요소와 같은 미디어에 대한 외부 텍스트 트랙을 지정합니다. 텍스트에서 줄 바꿈을 추가하는 것이 적절한 위치를 지정합니다.

(1) 내비게이션 링크

이 라벨을 어딘가에 추가한다고 해서 모두 의미가 있는 것은 아닙니다. p, 헤더에 메뉴 태그

를 추가하면 nav 태그는

• 태그와 함께 사용할 수 있습니다.

  html 코드:

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

  css 코드:

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

  before p만 사용하여 메뉴 레이아웃을 합니다

  

  (2) 기사 태그

  기사 블록 태그를 사용하여 기사를 작성할 수 있으므로 이 태그를 사용하여 작성합니다. 기사 쓰기 섹션 섹션은

  html 코드:

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

  css 스타일:

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

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

  

  (3 ) 미디어 콘텐츠의 그룹화 및 제목을 정의합니다<그림>

  A. 이 태그는 일치하는 태그

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

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

  

  B를

  중간에 작성하세요. 또한

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

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

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

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

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

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

  

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

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

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

  를 사용하여 마우스 오른쪽 버튼 클릭에 자신만의 콘텐츠를 추가할 수 있습니다(Firefox만 호환됨)

  Union(사용자가 팝업 메뉴에서 호출할 수 있는 명령/메뉴 항목 정의) 원하는 메뉴 항목을 마우스 오른쪽 버튼으로 클릭하면 나타납니다

  

  , 콘텐츠가 나타납니다

  (6) 제목 그룹

  

  제목 < h3> 일반적인 사용

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

  

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

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

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

  

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

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

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

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

  (9) 루비 댓글 정의

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

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

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

  min="" max="" value="" low="" high="" 등 여러 속성 값이 있으며, 여기서 낮음과 높음은 값 범위를 초과하면 다른 효과가 표시됩니다

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

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

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

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

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

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

  <progress id="jindu" max="100" value="0"></progress>进度条

  진행률 표시줄은 js로만 작성하는 것보다 훨씬 낫지 않나요? 브라우저마다 표현이 다릅니다. 추천: "html 비디오 튜토리얼

  "

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