HTML5에 대한 22가지 기본 기술(그래픽 튜토리얼)_html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:51:121530검색
웹기술은 너무 빨리 발전해서 시대를 따라가지 못하면 도태됩니다. 따라서 이번 글에서는 앞으로 다가올 HTML5에 대처하기 위해 HTML5의 기본 22가지 기술을 정리하여 HTML5를 더욱 잘 익히는 데 도움이 되길 바랍니다.
1. 새로운 Doctype 선언
XHTML 선언이 너무 깁니다. 이 Doctype 선언을 직접 작성할 수 있는 프런트엔드 개발자는 거의 없습니다.
코드 복사
코드는 다음과 같습니다."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 Doctype 선언은 매우 짧습니다. 이 선언을 보면 바로 기억할 수 있을 것이라고 믿습니다. 길고 다소 비정상적인 XHTML Doctype 선언을 기억하기 위해 두뇌 세포를 낭비할 필요는 없습니다.
HTML5의 짧은 DOCTYPE 선언을 통해 Firefox 및 Chrome과 같은 최신 브라우저와 IE6/7/8과 같은 브라우저가 (준) 표준 모드로 들어갈 수 있다는 사실에 놀랄 수도 있습니다. / 7은 실제로 HTML5 Doctype을 지원할 수 있습니다. 실제로 IE는 Doctype이 이 형식을 준수하는 한 표준 모드로 들어갑니다.
2.
다음의 간단한 코드를 보세요:
코드 복사 🎜>코드는 다음과 같습니다.
화성의 이미지 .< ;/h6>
안타깝게도 여기의 h6 태그는 img 태그와 아무 관련이 없는 것 같고 의미도 충분히 명확하지 않습니다. HTML5는 이를 깨닫고
코드 복사코드는 다음과 같습니다.
<그림>
< img alt="about image" src="path/to/image">
< /figcaption>
< img alt="about image" src="path/to/image">
< /figcaption>
3. 얼마 전
을 재정의했습니다. small> 태그를 사용하여 로고와 관련된 자막을 만듭니다. 그러나 HTML5에서는 태그를 재정의하여 의 글꼴 크기를 더 작게 만들었습니다. 웹사이트.
4. Javascript 및 CSS 태그의 유형 속성을 제거합니다.
일반적으로 유형 속성을 및 <script>에 추가합니다. </strong><br><br> <div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));">코드 복사<u></u></span>코드는 다음과 같습니다.</div></div> <div class="msgborder" id="phpcode68"><link rel="stylesheet" type=text/css href= "path/ to/stylesheet.css"><br> <script type="text/javascript" src="path/to/script.js"></script>
HTML5에서는 type 속성이 약간 중복되어 보이기 때문에 더 이상 필요하지 않습니다. 이를 제거하면 코드가 더 간결해집니다.
코드 복사코드는 다음과 같습니다.
5 . 큰따옴표 사용 여부
약간 혼란스럽습니다. HTML5는 XTHML이 아니므로 태그에서 큰따옴표를 생략할 수 있습니다. 나는 나를 포함한 대부분의 동지들이 큰따옴표를 추가하는 데 익숙하다고 믿습니다. 왜냐하면 코드를 더 표준적으로 보이게 만들기 때문입니다. 그러나 큰따옴표를 사용할지 여부는 개인 취향에 따라 다릅니다.
코드 복사코드는 다음과 같습니다.
리액터를 시작하세요.
6. 웹 콘텐츠를 편집 가능하게 만듭니다
7. 이메일 입력 상자
HMTL5에 새로운 입력이 추가되었습니다. 상자의 email 속성은 입력 내용이 이메일의 작성 형식을 준수하는지 여부를 감지할 수 있습니다. 이 기능은 HTML5 이전에는 JS에서만 감지할 수 있었습니다. 내장된 양식 유효성 검사가 곧 현실화되겠지만, 많은 브라우저는 아직 이 속성을 지원하지 않으며 이를 일반 텍스트 입력 상자로만 처리합니다.
코드 복사
코드는 다음과 같습니다.<버튼 type=" submit"> submit form
현재까지는 최신 브라우저에서도 지원되지 않습니다. 속성이므로 이 속성은 당분간은 여전히 신뢰할 수 없습니다.
8. 자리 표시자
텍스트 상자의 자리 표시자(이 블로그의 검색 상자 효과 참조)는 이전에는 JS에만 의존하여 공간을 확보할 수 있었습니다. 자리 표시자의 효과로 인해 자리 표시자 속성 자리 표시자가 HTML5에 추가되었습니다.
코드 복사
코드는 다음과 같습니다.마찬가지로 현재의 주류 최신 브라우저는 이 속성을 잘 지원하지 않습니다. 현재는 Chrome 및 Safari만 지원합니다. 이 속성을 지원하지만 Firefox 및 Opera는 이 속성을 지원하지 않습니다.
9. 로컬 저장
HTML5의 로컬 저장 기능을 사용하면 브라우저가 닫히고 새로 고쳐지더라도 우리가 입력한 내용을 "기억"할 수 있습니다. 일부 브라우저에서는 이 기능을 지원하지 않지만 IE8, Safari 4 및 Firefox 3.5에서는 여전히 이 기능을 테스트할 수 있습니다.
10. 더 의미 있는 머리글과 바닥글
다음 코드는 HTML5에 더 이상 존재하지 않습니다
코드 복사코드는 다음과 같습니다.
...
보통 머리글과 바닥글에 대한 div를 정의한 다음 다른 ID를 추가합니다. , 그러나