HTML5 코드 학습 : 수집 할 가치가있는 HTML5 코드 스 니펫

저자：Eve Cole 업데이트 시간：2025-04-26 00:00:03

웹 페이지 제작 웹 텍스 기사 소개 : 10 실용적인 HTML5 코드 스 니펫이 확실히 수집해야합니다.

HTML5는 웹 기술 개발에서 중요한 이정표입니다. 프론트 엔드 개발의 경우 향후 개발에서 자주 재사용해야 할 코드를 찾을 수 있다면 거절하지 않을 것이라고 생각합니다. 다음은 신중하게 수집 한 10 개 이상의 HTML5 코드 스 니펫입니다. 나는 당신이 그것을 좋아할 것이라고 믿는다!

HTML5의 가장 쉬운 템플릿

새로운 HTML5 프로젝트를 시작 해야하는 경우 가장 간단한 템플릿이 필요합니다. 다음은 매우 간단하고 명확한 HTML5 템플릿입니다. 나는 모두가 그것을 좋아할 것이라고 믿는다!

<! doctype html>

<html>

<헤드>

<!-[LT IE 9 인 경우]>

<스크립트 src => </script>

<! [endif]->

</head>

<body>

웹의 주요 내용

</body>

</html> 양식 Google지도를 얻습니다

다음은 매우 간단한 코드입니다. 사용자를 사용하여 위치를 입력하고 Google지도 위치를 얻습니다.이 위치는 연락처 양식을 생성하는 데 매우 적합합니다.

<양식 action = method = get target = _blank>

<label for = saddr> 위치를 입력하십시오 </label>

<입력 유형 = 텍스트 이름 = saddr />

<입력 유형 = 숨겨진 이름 = daddr

값 = 350 5th Ave New York, NY 10018 (Empire State Building) />

<입력 유형 = 제출 값 = 방향 가져 오기 />

</form> base64 1x1 크기의 인코딩 된 빈 gif 파일

나는 개인적 으로이 투명한 빈 GIF를 사용하는 것이 좋지 않지만 2013 년에도 많은 사람들이 여전히 그것을 사용합니다. 아마도 당신은이 방법을 사용하는 것을 좋아할 것입니다.

<img src = data : image/gif; base64, r0lgodlhaqabaaaaaaaaaaap /// yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa7> 정기적 인 양식 이메일

입력 검증을 위해 html5에서 일반 양식을 사용할 수 있습니다.

<입력 유형 = 텍스트 데이터 = 플래시 파일 .swf

너비 = 0 높이 = 0>

</object> 필름 및 폴백을 지원합니다

HTML5에서 가장 유용한 또 다른 기능은 비디오 태그로, 비디오 파일을 쉽게 포함시킬 수 있습니다. 그러나 많은 오래된 브라우저가 지원하지 않으므로 다음 코드는 매우 유용합니다.

<비디오 폭 = 640 높이 = 360 컨트롤>

<소스 src = __ 비디오 __. mp4 type = video /mp4 />

<소스 SRC = __ 비디오 __. OGV 유형 = 비디오 /OGG />

<객체 너비 = 640 높이 = 360 유형 = 응용 프로그램/x-shockwave-flash

data = __ flash __. swf>

<param name = flashvars value = controlbar = over & amp;

image = __ 포스터 __. JPG & amp; 파일 = __ 비디오 __. mp4 />

<img src = __ video __. jpg 너비 = 640 높이 = 360 alt = __ title__

Title = 비디오 재생 기능 없음, 아래 비디오를 다운로드하십시오 />

</객체>

</video> iPhone 통화 및 SMS 링크

Apple은 iPhone에서 전화 및 텍스트 링크를 만들 수있는 매우 편리한 방법을 소개합니다. 코드는 다음과 같습니다.

<a href = sms : 1-408-555-1212> 새로운 SMS 메시지 </a> html5의 자동 데이터 충전 함수

HTML5를 사용하면 Datalist 요소를 사용하여 데이터 세트를 사용하여 자동 충전 기능을 생성 할 수 있습니다. 이제 타사 JS 코드 또는 클래스 라이브러리를 사용할 필요가 없습니다!

<입력 이름 = 프레임 워크 목록 = 프레임 워크 />

<옵션 값 = mootools>

<옵션 값 = moobile>

<옵션 값 = dojo 툴킷>

<옵션 값 = jQuery>

<옵션 값 = yui>

</datalist> 파일은 직접 다운로드 할 수 있습니다 <!-Expense.pdf->로 다운로드합니다.

<a href =/files/adlafjlxjewfasd89asd8f.pdf

다운로드 = Expenses.pdf> 비용 보고서 다운로드 </a> Crash Old 버전 브라우저 IE6

IE6은 중국에서 상당히 사용된다는 것을 알아야합니다. 웹 응용 프로그램이나 웹 사이트에서 IE6을 지원하지 않으면이 코드를 추가하면 사용자가 IE6, hehe를 업그레이드 할 것이라고 생각합니다!