웹사이트 제작에 사용할 수 있는 10개의 HTML5 코드 조각, 자세한 설명-H5 튜토리얼-php.cn

HTML5 시작 템플릿

길찾기 양식(Google 지도)

Base64로 인코딩된 빈 GIF 이미지

이메일 유효성 검사를 위한 정규 표현식

Flash 삽입

Flash 폴백이 포함된 HTML5 비디오

전화 및 문자

자동 완성 기능

다운로드 가능한 파일

Crash IE6

집

웹 프론트엔드

H5 튜토리얼

웹사이트 제작에 사용할 수 있는 10개의 HTML5 코드 조각, 자세한 설명

Mar 22, 2017 pm 03:21 PM

　HTML은 작성하기 쉽지만 웹페이지를 만들 때 양식을 만드는 등 동일한 작업을 반복적으로 수행해야 하는 경우가 많습니다. 이 기사에서는 HTML5 시작 템플릿, 빈 사진, 전화 걸기 및 문자 메시지 보내기 등 매우 유용한 10가지 HTML 코드 조각을 수집했습니다. 등을 자동으로 완성하여 개발 속도를 높이세요.

HTML5 시작 템플릿

새 프로젝트를 시작할 때 시작 템플릿이 필요합니다. 다음은 HTML5 프로젝트의 기초로 사용할 수 있는 간단하고 깔끔한 템플릿입니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset=&quot;utf-8&quot;&gt;
		&lt;title&gt;Untitled&lt;/title&gt;
		&lt;!--[if lt IE 9]&gt;
		&lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;
		&lt;![endif]--&gt;
	&lt;/head&gt;
	&lt;body&gt;
		
	&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

길찾기 양식(Google 지도)

다음은 사용자가 특정 장소에 대한 위치 길찾기를 입력할 수 있는 간단하지만 강력한 양식 코드입니다. 연락처 페이지에 매우 유용합니다.

&lt;form action=&quot;http://maps.google.com/maps&quot; method=&quot;get&quot; target=&quot;_blank&quot;&gt;
   &lt;label for=&quot;saddr&quot;&gt;Enter your location&lt;/label&gt;
   &lt;input type=&quot;text&quot; name=&quot;saddr&quot; /&gt;
   &lt;input type=&quot;hidden&quot; name=&quot;daddr&quot; value=&quot;350 5th Ave New York, NY 10018 (Empire State Building)&quot; /&gt;
   &lt;input type=&quot;submit&quot; value=&quot;Get directions&quot; /&gt;
&lt;/form&gt;

로그인 후 복사

Base64로 인코딩된 빈 GIF 이미지

투명 GIF 사용을 권장하지 않지만, 2013년에도 여전히 많은 사람들이 사용하고 있는 것으로 알고 있습니다. 당신이 그들 중 하나라면 Base64로 인코딩된 1 * 1px 빈 GIF를 즐길 수 있습니다. 이미지를 사용하는 것보다 이 방법이 더 좋습니다.

&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;&gt;

로그인 후 복사

이메일 유효성 검사를 위한 정규 표현식

HTML5은 이메일 유효성을 검사하는 데 정규 표현식 패턴을 사용할 수 있도록 허용하는 등 양식 기능을 크게 개선합니다.

&lt;input type=&quot;text&quot; title=&quot;email&quot; required pattern=&quot;[^@]+@[^@]+\.[a-zA-Z]{2,6}&quot; /&gt;

로그인 후 복사

Flash 삽입

HTML 페이지에 Flash 파일을 삽입해야 하는 경우가 자주 있습니까? 그렇다면 나중에 사용할 수 있도록 아래 플래시 삽입 코드를 저장하는 것이 좋습니다.

&lt;object type=&quot;application/x-shockwave-flash&quot; 
  data=&quot;your-flash-file.swf&quot; 
  width=&quot;0&quot; height=&quot;0&quot;&gt;
  &lt;param name=&quot;movie&quot; value=&quot;your-flash-file.swf&quot; /&gt;
  &lt;param name=&quot;quality&quot; value=&quot;high&quot;/&gt;
&lt;/object&gt;

로그인 후 복사

Flash 폴백이 포함된 HTML5 비디오

새로운 HTML5 사양의 또 다른 뛰어난 기능은 비디오 파일을 쉽게 삽입할 수 있는 비디오 태그입니다. 그러나 안타깝게도 일부 브라우저에서는 삽입된 HTML5 비디오를 처리할 수 없습니다. 따라서 이 코드는 이전 브라우저와 호환되며 HMTL5 비디오를 지원하지 않는 브라우저에서는 Flash를 사용합니다.

아아아아

전화 및 문자

모바일 웹에서 전화 및 문자 메시지 링크를 빠르게 걸 수 있는 방법이 있습니다. 다음은 샘플 코드입니다. 코드 조각 라이브러리에 저장하는 것을 잊지 마세요.

&lt;video width=&quot;640&quot; height=&quot;360&quot; controls&gt;
	&lt;source src=&quot;VIDEO.MP4&quot;  type=&quot;video/mp4&quot; /&gt;
	&lt;source src=&quot;VIDEO.OGV&quot;  type=&quot;video/ogg&quot; /&gt;
	&lt;object width=&quot;640&quot; height=&quot;360&quot; type=&quot;application/x-shockwave-flash&quot; data=&quot;FLASH.SWF&quot;&gt;
		&lt;param name=&quot;movie&quot; value=&quot;FLASH.SWF&quot; /&gt;
		&lt;param name=&quot;flashvars&quot; value=&quot;controlbar=over&amp;image=POSTER.JPG&amp;file=VIDEO.MP4&quot; /&gt;
		&lt;img src=&quot;VIDEO.JPG&quot; width=&quot;640&quot; height=&quot;360&quot; alt=&quot;TITLE&quot;
		     title=&quot;No video playback capabilities, please download the video below&quot; /&gt;
	&lt;/object&gt;
&lt;/video&gt;

로그인 후 복사

자동 완성 기능

dataList 요소를 사용하는 HTML5를 사용하면 입력 필드에 대한 자동 완성 데이터 목록을 만들 수 있습니다. 매우 유용합니다! 다음은 샘플 코드입니다.

&lt;a href=&quot;tel:1-408-555-5555&quot;&gt;1-408-555-5555&lt;/a&gt;
&lt;a href=&quot;sms:1-408-555-1212&quot;&gt;New SMS Message&lt;/a&gt;

로그인 후 복사

다운로드 가능한 파일

HTML5에서는 다운로드 속성을 사용하여 파일을 강제로 다운로드할 수 있습니다. 다음은 다운로드 가능한 파일에 대한 표준 링크입니다.

&lt;input name=&quot;frameworks&quot; list=&quot;frameworks&quot; /&gt;

&lt;datalist id=&quot;frameworks&quot;&gt;
	&lt;option value=&quot;MooTools&quot;&gt;
	&lt;option value=&quot;Moobile&quot;&gt;
	&lt;option value=&quot;Dojo Toolkit&quot;&gt;
	&lt;option value=&quot;jQuery&quot;&gt;
	&lt;option value=&quot;YUI&quot;&gt;
&lt;/datalist&gt;

로그인 후 복사

Crash IE6

2013년, 프론트엔드 개발자들에게 악몽을 선사했던 Internet Explorer 6의 시장점유율이 많이 떨어졌습니다. 그러나 일부 사람들은 여전히 그것을 사용합니다. 이 오래된 브라우저를 제거하고 싶다면 여기 HTML 페이지에 포함시켜 IE6을 충돌시킬 수 있는 매우 흥미로운 코드가 있습니다.

아아아아

위 내용은 웹사이트 제작에 사용할 수 있는 10개의 HTML5 코드 조각, 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.