HTML5에 대한 22가지 기본 기술(그래픽 튜토리얼)_html5 튜토리얼 기술

웹기술은 너무 빨리 발전해서 시대를 따라가지 못하면 도태됩니다. 따라서 이번 글에서는 앞으로 다가올 HTML5에 대처하기 위해 HTML5의 기본 22가지 기술을 정리하여 HTML5를 더욱 잘 익히는 데 도움이 되길 바랍니다.
1. 새로운 Doctype 선언
XHTML 선언이 너무 깁니다. 이 Doctype 선언을 직접 작성할 수 있는 프런트엔드 개발자는 거의 없습니다.

코드 복사

코드는 다음과 같습니다.

br />"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는 이를 깨닫고

태그를 채택했습니다.

태그와 함께 사용하면 h6 태그와 img 태그를 결합할 수 있어 코드의 의미가 더욱 커집니다.

코드 복사코드는 다음과 같습니다.

3. 얼마 전
을 재정의했습니다. small> 태그를 사용하여 로고와 관련된 자막을 만듭니다. 그러나 HTML5에서는 태그를 재정의하여 의 글꼴 크기를 더 작게 만들었습니다. 웹사이트.
4. Javascript 및 CSS 태그의 유형 속성을 제거합니다.
일반적으로 유형 속성을 및 <script>에 추가합니다. </script>

코드 복사코드는 다음과 같습니다.

HTML5에서는 type 속성이 약간 중복되어 보이기 때문에 더 이상 필요하지 않습니다. 이를 제거하면 코드가 더 간결해집니다.

코드 복사코드는 다음과 같습니다.

5 . 큰따옴표 사용 여부
약간 혼란스럽습니다. HTML5는 XTHML이 아니므로 태그에서 큰따옴표를 생략할 수 있습니다. 나는 나를 포함한 대부분의 동지들이 큰따옴표를 추가하는 데 익숙하다고 믿습니다. 왜냐하면 코드를 더 표준적으로 보이게 만들기 때문입니다. 그러나 큰따옴표를 사용할지 여부는 개인 취향에 따라 다릅니다.

코드 복사코드는 다음과 같습니다.

리액터를 시작하세요.

6. 웹 콘텐츠를 편집 가능하게 만듭니다

7. 이메일 입력 상자
HMTL5에 새로운 입력이 추가되었습니다. 상자의 email 속성은 입력 내용이 이메일의 작성 형식을 준수하는지 여부를 감지할 수 있습니다. 이 기능은 HTML5 이전에는 JS에서만 감지할 수 있었습니다. 내장된 양식 유효성 검사가 곧 현실화되겠지만, 많은 브라우저는 아직 이 속성을 지원하지 않으며 이를 일반 텍스트 입력 상자로만 처리합니다.

코드 복사

코드는 다음과 같습니다.

email:

submit form

현재까지는 최신 브라우저에서도 지원되지 않습니다. 속성이므로 이 속성은 당분간은 여전히 ​​신뢰할 수 없습니다.
8. 자리 표시자
텍스트 상자의 자리 표시자(이 블로그의 검색 상자 효과 참조)는 이전에는 JS에만 의존하여 공간을 확보할 수 있었습니다. 자리 표시자의 효과로 인해 자리 표시자 속성 자리 표시자가 HTML5에 추가되었습니다.

코드 복사

코드는 다음과 같습니다.

마찬가지로 현재의 주류 최신 브라우저는 이 속성을 잘 지원하지 않습니다. 현재는 Chrome 및 Safari만 지원합니다. 이 속성을 지원하지만 Firefox 및 Opera는 이 속성을 지원하지 않습니다.

9. 로컬 저장
HTML5의 로컬 저장 기능을 사용하면 브라우저가 닫히고 새로 고쳐지더라도 우리가 입력한 내용을 "기억"할 수 있습니다. 일부 브라우저에서는 이 기능을 지원하지 않지만 IE8, Safari 4 및 Firefox 3.5에서는 여전히 이 기능을 테스트할 수 있습니다.

10. 더 의미 있는 머리글과 바닥글
다음 코드는 HTML5에 더 이상 존재하지 않습니다

코드 복사코드는 다음과 같습니다.

...

...

보통 머리글과 바닥글에 대한 div를 정의한 다음 다른 ID를 추가합니다. , 그러나

및

태그는 HTML5에서 직접 사용할 수 있으므로 위 코드는 다음과 같이 다시 작성할 수 있습니다.

코드 복사코드는 다음과 같습니다.

...

.. .

이 두 태그는 웹사이트의 헤더 및 바닥글과 혼동하지 않도록 주의하세요. 두 태그는 이를 나타내는 컨테이너일 뿐입니다.

11. IE의 HTML5 지원 현재 IE 브라우저의 HTML5 지원이 좋지 않은데, 이는 HTML5의 빠른 대중화를 가로막는 주요 걸림돌이기도 합니다. 여전히 아주 좋습니다.
IE는 HTML5의 모든 새 태그를 인라인 요소로 구문 분석하지만 실제로는 블록 수준 요소이므로 스타일을 정의해야 합니다.

코드 복사코드는 다음과 같습니다.

header, footer, article, section, nav, menu, hgroup {
표시: 블록 ;
}

이에도 불구하고 IE는 여전히 이러한 새로운 HTML5 태그를 구문 분석할 수 없습니다. 이 문제를 해결하려면 Javascript를 사용해야 합니다.

코드 복사코드는 다음과 같습니다.

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup") ;
document.createElement("nav");
document.createElement("menu");

이 Javascript 코드 조각을 사용하여 IE의 구문 분석을 개선할 수 있습니다. HTML5

코드 복사

코드는 다음과 같습니다.

12. 제목 그룹(hgroup)
이것은 두 번째 팁과 유사합니다. h1 태그와 h2 태그를 사용하여 각각 웹 사이트의 이름과 부제목을 표시하면 본질적으로 밀접하게 관련된 두 제목이 서로 관련이 없게 됩니다. 이때

태그를 사용하여 결합하면 코드가 더 의미있게 됩니다.

코드 복사

코드는 다음과 같습니다.

리콜 팬 페이지

평생의 추억을 원하는 사람들에게만 제공됩니다.

;

13. 필수 속성
프런트엔드 직원은 다양한 양식 검증 프로젝트를 수행해야 하며 그 중 하나는 다음과 같습니다. 매우 중요 입력해야 하는 입력 상자가 있으므로 이를 확인하려면 Javascript를 사용해야 합니다. HTML5에는 새로운 "필수 항목" 속성이 추가되었습니다: 필수. 필수 속성을 사용하는 방법에는 두 가지가 있습니다. 두 번째 방법은 더 구조적이며 첫 번째 방법은 더 간결합니다.

코드 복사

코드는 다음과 같습니다.

이 속성을 사용하면 양식은 제출할 수 있습니다. 확인이 더 쉬워집니다. 아래의 간단한 예를 살펴보세요.

코드 복사

코드는 다음과 같습니다. 다음:

이름:

이동

입력란이 비어 있으면 양식이 성공적으로 제출되지 않습니다.
14. 자동으로 포커스 얻기
마찬가지로 HTML5에서는 입력 상자를 선택하거나 입력 포커스를 얻어야 하는 경우 자동으로 포커스를 얻는 문제를 해결하기 위해 더 이상 Javascript가 필요하지 않습니다. 새로운 속성 autofocus:

코드 복사

코드는 다음과 같습니다:

< ;input type="text" name="someInput" placeholder="douglas quaid" 필수="required" autofocus="autofocus">

자동 초점은 "autofocus=autofocus ”로 쓸 수도 있습니다. , 이것이 더 표준적인 것 같습니다. 이는 개인 취향에 따라 다릅니다.
15. 오디오 재생 지원
HTML5는 과거에 오디오 파일을 재생하기 위해 타사 플러그인에 의존해야 했던 문제를 해결하는