HTML5는 웹 기술 개발에서 중요한 이정표입니다. 프론트 엔드 개발의 경우 향후 개발에서 자주 재사용해야 할 코드를 찾을 수 있다면 거절하지 않을 것이라고 생각합니다. 다음은 신중하게 수집 한 10 개 이상의 HTML5 코드 스 니펫입니다. 나는 당신이 그것을 좋아할 것이라고 믿는다!
새로운 HTML5 프로젝트를 시작 해야하는 경우 가장 간단한 템플릿이 필요합니다. 다음은 매우 간단하고 명확한 HTML5 템플릿입니다. 나는 모두가 그것을 좋아할 것이라고 믿는다!
<! docType html> <html> <head> <메타 charset = utf-8> <title> 제목없는 </title> <!-[lt IE 9]> <script src = http : //html5shim.googlecode.com/svn/trunk/html5.js> 웹 내용 </body> </html>
다음은 매우 간단한 코드입니다. 사용자를 사용하여 위치를 입력하고 Google지도 위치를 얻습니다.이 위치는 연락처 양식을 생성하는 데 매우 적합합니다.
<form action = http : //maps.google.com/maps method = get target = _blank> <label for = saddr> 위치 입력 </label> <입력 유형 = 텍스트 이름 = saddr/> <입력 유형 = 숨겨진 이름 = adddr value = 350 5th Ave New York, NY 10018 (Empire Stured)/> </</form> 제출/> </form> 제출 값을 제출합니다.
나는 개인적 으로이 투명한 빈 GIF를 사용하는 것이 좋지 않지만 2013 년에도 많은 사람들이 여전히 그것을 사용합니다. 아마도 당신은이 방법을 사용하는 것을 좋아할 것입니다.
<img src = data : image/gif; base64, r0lgodlhaqabaaaaaaaaaaap /// yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa7>
입력 검증을 위해 html5에서 일반 양식을 사용할 수 있습니다.
<입력 유형 = 텍스트 스타일 = "마진-탑 : 0px; 마진-바닥 : 15px; 패딩 : 0px; 테두리 : 1px 솔리드 RGB (43, 153, 230); 글꼴 : 상속; 라인 높이 : 27px; 수직-알림; 기준선; RGB (0, 0); RGB (245, 250, 250); 1000px; z-index : 1000; "> <객체 유형 = Application/x-shockwave-flash data = your-flash-file.swf width = 0 높이 = 0> <param name = movie value = your-flash-file.swf/> <param name = quality value = high/> </object>
HTML5에서 가장 유용한 또 다른 기능은 비디오 태그로, 비디오 파일을 쉽게 포함시킬 수 있습니다. 그러나 많은 오래된 브라우저가 지원하지 않으므로 다음 코드는 매우 유용합니다.
<비디오 너비 = 640 높이 = 360 컨트롤> <소스 SRC = __ 비디오 __. mp4 유형 = 비디오 /mp4 /> <소스 SRC = __ 비디오 __. OGV 유형 = 비디오 /ogg /> <개체 width = 640 높이 = 360 유형 = Application /x-shockwave-flash data = __ __. 이름 = flashvars value = controlbar = over & amp; image = __ poster __. 230); href = 전화 : 1-408-555-5555> 1-408-555-5555 </a> <a href = sms : 1-408-555-1212> 새로운 SMS 메시지 </a>
HTML5를 사용하면 Datalist 요소를 사용하여 데이터 세트를 사용하여 자동 충전 기능을 생성 할 수 있습니다. 이제 타사 JS 코드 또는 클래스 라이브러리를 사용할 필요가 없습니다!
<입력 이름 = 프레임 워크 목록 = 프레임 워크 /> <Datalist id = frameworks> <옵션 값 = mootools> <옵션 값 = moobile> <옵션 값 = dojo 툴킷> <옵션 값 = jquery> <옵션 값 = yui> < /datalist>
<!-Expense.pdf-> <a href =/files/adlafjlxjewfasd89asd8f.pdf 다운로드 = Expenses.pdf> 비용 보고서 다운로드 </a>
IE6은 중국에서 상당히 사용된다는 것을 알아야합니다. 웹 응용 프로그램이나 웹 사이트에서 IE6을 지원하지 않으면이 코드를 추가하면 사용자가 IE6, hehe를 업그레이드 할 것이라고 생각합니다!
<style>*{위치 : 상대} </style> <table> <입력> </table>