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

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

黄舟

풀어 주다： 2017-03-22 15:21:06

원래의

2089명이 탐색했습니다.

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

HTML5 시작 템플릿

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

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

로그인 후 복사

길찾기 양식(Google 지도)

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

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

로그인 후 복사

Base64로 인코딩된 빈 GIF 이미지

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

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

로그인 후 복사

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

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

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

로그인 후 복사

Flash 삽입

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

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

로그인 후 복사

Flash 폴백이 포함된 HTML5 비디오

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

아아아아

전화 및 문자

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

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

로그인 후 복사

자동 완성 기능

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

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

로그인 후 복사

다운로드 가능한 파일

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

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

로그인 후 복사

Crash IE6

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

아아아아

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