> 웹 프론트엔드 > H5 튜토리얼 > HTML5의 새로운 기능 (1) _html5 튜토리얼 기술

HTML5의 새로운 기능 (1) _html5 튜토리얼 기술

WBOY
풀어 주다: 2016-05-16 15:45:39
원래의
1790명이 탐색했습니다.

HTML5는 1999년에 공식화된 HTML 4.01 및 XHTML 1.0 표준을 대체하는 HTML[1](Standard Universal Markup Language에 따른 응용 프로그램)의 표준 버전입니다. 아직 개발 단계에 있지만 대부분의 브라우저는 이미 이를 지원합니다. 특정 HTML5 기술.

1. 새로운 문서 유형 선언
HTML4에서 지정한 세 가지 문서 유형 선언:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. >
  3. >

XHTML 1.0에서 지정한 세 가지 문서 유형 선언:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. > 
  2. >
  3. >

XHTML 1.1 문서는 유형을 엄격하게 정의하며 이는 XHTML1.0 문서의 전환 정의 유형과 동일합니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >

HTML 5의 문서 유형 선언

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >

2. 스크립트와 링크에 타입을 쓸 필요가 없습니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <링크 rel=”stylesheet” href=”path/to/stylesheet.css” 입력=”text/css” />   == 》  <링크 rel=”stylesheet” href=”path/to/stylesheet.css”/>  
  2. <스크립트 src=”path/to/script.js” 유형=”text/javascript”>script> ;    ==》  <스크립트 src=”경로/to/ script.js”>script>  

3. 语义成header and footer标签
HTML4에서 XHTML로,저희는 HTML4에서 설정한 义网页적页眉或页脚时会这样:

XML/HTML 코드复复内容到剪贴板
  1. <div id=”header”>  
  2. …   
  3. div>  
  4. 或   
  5. <div id=”바닥글” >  
  6. …   
  7. div>  

HTML5 리테이너에는 상단 인터페이스를 위한 고정 장치가 있으며, 기존의 방식대로 대체할 수 있습니다.

XML/HTML 코드复复内容到剪贴板
  1. <헤더>  
  2. …   
  3. 헤더>  
  4. 或   
  5. <바닥글>  
  6. …   
  7. 바닥글>  

4. hgroup标签,它主要是表明标题的集合。 새로운 HTML5.1版中被废除了의 거대한 용도 。我们如果想声明主标题和对应副标题说明,可以向下面这样。
使用标点符号分割合,一般适于文章标题,不太适合网站标题。

XML/HTML 코드复复内容到剪贴板
  1. <h1>프런트엔드 테스트 문제: HTML5의 새로운 기능< /h1>

스팬 태그를 사용하여 자막 설명 표시

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <h1>프런트엔드 테스트 문제
  2.  <span>HTML5의 새로운 기능스팬>
  3. h1>

헤더 태그를 사용하여 제목과 설명을 감싸세요

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <헤더>
  2.  <h1>프런트엔드 테스트 문제h1> 
  3.  <p>HTML5의 새로운 기능p>
  4. 헤더>

5. 요소 표시

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <mark> 요소는 하나의 문서에서 또는 다른 맥락에서의 관련성으로 인해 참조 목적으로 강조 표시되었습니다.

을 강조 태그로 사용할 수 있으며, 그 안에 포함된 문자가 강조 표시됩니다.
6. 그래픽 요소 그림
HTML4나 XHTML에서는 다음 코드를 사용하여 그림의 주석을 장식합니다. .

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <img src=”경로/이미지” alt=”이미지 정보”/>
  2. <p>꽃 이미지 p>

위 코드는 텍스트와 이미지 메모리를 연결하지 않지만, HTML5에서 추가한 그림과 캡션 조합을 사용하면 이미지와 텍스트를 완벽하게 연결할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <그림>
  2. <img src=”경로/이미지” alt=”이미지 정보”/>
  3. <그림캡션>
  4.  <>아름다운 꽃p> 
  5. <그림캡션>
  6. 그림>

7. 작은 태그 재정의
HTML5의 태그는 설명, 주의 사항, 법적 제한 또는 버전을 담당하는 작은 텍스트로 렌더링됩니다. 일반적으로 작은 텍스트입니다.
Small은 HTML4나 XHTML에 정의되어 있지만 사용법에 대한 완전한 설명은 없습니다. HTML에서는 주로 웹 페이지 하단의 버전 설명, 이메일 주소와 같은 작은 텍스트에 사용됩니다.
8. 자리 표시자
HTML4 또는 XHTML에서 입력 상자가 비어 있을 때 프롬프트 메시지를 표시하려면 입력 상자 필드에 초점을 맞춥니다. 프롬프트가 사라지는 효과는 js로만 작성할 수 있습니다. HTML5에 추가된 자리 표시자는 이 효과를 직접적으로 달성합니다.
자리 표시자 속성은 텍스트, 검색, URL, 전화, 이메일 및 비밀번호에 적용 가능합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <입력 자리 표시자=”텍스트”>
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿