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

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

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

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

1. -//W3C//DTD HTML 4.01//EN”http://www.w3.org/TR/html4/strict.dtd” >
2. -//W3C//DTD HTML4.01//EN”http://www.w3.org/TR/html4/loose.dtd”>
3. -//W3C//DTD HTML4.01//EN” http://www.w3.org/TR/html4/frameset.dtd”>

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

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

1. -//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict . dtd”> 
2. -//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” >
3. -//W3C//DTD XHTML 1.0 프레임셋//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd” >

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

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

1. -//W3C//DTD XHTML 1.1//EN” http://www.w3.org/TR/xhtml11/DTD/xhtml1.dtd” >

HTML 5의 문서 유형 선언

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

1. /span>>

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. 입력 자리 표시자=”텍스트”>