HTML5 เป็นเหตุการณ์สำคัญที่สำคัญในการพัฒนาเทคโนโลยีเว็บ สำหรับการพัฒนาส่วนหน้าหากคุณสามารถหารหัสบางอย่างที่อาจต้องนำกลับมาใช้ใหม่บ่อยครั้งในการพัฒนาในอนาคตฉันเชื่อว่าคุณจะไม่ปฏิเสธ ด้านล่างนี้เป็นตัวอย่างโค้ด HTML5 มากกว่า 10 ตัวอย่างที่เรารวบรวมไว้อย่างระมัดระวัง ฉันเชื่อว่าคุณจะชอบมัน!
หากคุณต้องการเริ่มโครงการ HTML5 ใหม่คุณจะต้องใช้เทมเพลตที่ง่ายที่สุดอย่างแน่นอน นี่คือเทมเพลต HTML5 ที่ง่ายและชัดเจนมาก ฉันเชื่อว่าทุกคนจะชอบ!
<! doctype html> <html> <head> <meta charset = utf-8> <title> untitled </title> <!-[ถ้า lt ie 9]> <script src = http: //html5shim.googlecode.com/svn/trunk/trunk/html5.js เว็บ </body> </html>
นี่คือรหัสที่ง่ายมาก มันใช้ผู้ใช้เพื่อเข้าสู่ตำแหน่งและรับตำแหน่ง Google Map ซึ่งเหมาะมากสำหรับการสร้างแบบฟอร์มการติดต่อ
<form action = http: //maps.google.com/maps เมธอด = รับ target = _blank> <label for = saddr> ป้อนตำแหน่ง </label> <ประเภทอินพุต = ชื่อข้อความ = saddr/> <อินพุตประเภท = ชื่อที่ซ่อนอยู่ = ค่า daddr = 350 5th Ave New York, NY 10018
โดยส่วนตัวแล้วฉันไม่แนะนำให้ใช้ GIF ที่ว่างเปล่าแบบโปร่งใสนี้ แต่ในปี 2013 หลายคนยังคงใช้มันอยู่ บางทีคุณอาจชอบใช้วิธีนี้ด้วย
<img src = ข้อมูล: image/gif; base64, r0lgodlhaqabaiaaaaaaaaaap /// yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
แบบฟอร์มปกติได้รับอนุญาตให้ใช้ใน HTML5 สำหรับการตรวจสอบอินพุต:
<อินพุตประเภท = รูปแบบข้อความ = "ระยะขอบด้านบน: 0px; มาร์จิ้น-ก้น: 15px; การตอบสนอง: 0px; เส้นขอบ: 1px ของแข็ง RGB (43, 153, 230); ฟอนต์-ครอบครัว: สืบทอด; เส้นสูง: 27px; 1000px; z-index: 1000; "> <object type = แอปพลิเคชัน/x-shockwave-flash data = flash-file.swf width = 0 ความสูง = 0> <param name = ค่าภาพยนตร์ = ของคุณ
คุณสมบัติที่มีประโยชน์มากที่สุดอีกประการหนึ่งใน HTML5 คือแท็กวิดีโอซึ่งช่วยให้คุณสามารถฝังไฟล์วิดีโอได้อย่างง่ายดาย อย่างไรก็ตามเบราว์เซอร์เก่าจำนวนมากไม่รองรับดังนั้นรหัสต่อไปนี้จะมีประโยชน์มาก
<วิดีโอความกว้าง = 640 ความสูง = 360 ตัวควบคุม> <แหล่งที่มา src = __ วิดีโอ __. mp4 type = video /mp4 /> <source src = __ วิดีโอ __. ประเภท ogv = วิดีโอ /ogg /> <ความกว้างวัตถุ = 640 ความสูง = 360 type = แอปพลิเคชัน /x-shockwave-flash data = __ name = flashvars value = controlbar = over & amp; image = __ โปสเตอร์ __. jpg & amp; file = __ วิดีโอ __. mp4 /> <img src = __ วิดีโอ __. JPG width = 640 ความสูง = 360 style = "margin-bottom 230); href = โทรศัพท์: 1-408-555-5555> 1-408-555-5555 </a> <a href = SMS: 1-408-555-1212> ข้อความ SMS ใหม่ </a>
ด้วยการใช้องค์ประกอบ Datalist HTML5 อนุญาตให้ใช้ชุดข้อมูลเพื่อสร้างฟังก์ชั่นการเติมอัตโนมัติ ตอนนี้คุณไม่จำเป็นต้องใช้รหัส JS ของบุคคลที่สามหรือไลบรารีคลาส!
<ชื่ออินพุต = frameworks list = frameworks /> <datalist id = frameworks> <ค่าตัวเลือก = mootools> <ค่าตัวเลือก = moobile> <ตัวเลือกค่า = dojo toolkit> <optural value = jQuery> <ตัวเลือกค่า = yui> < /datalist>
<!-จะดาวน์โหลดเป็นค่าใช้จ่าย pdf-> <a href =/files/adlafjlxjewfasd89asd8f.pdf ดาวน์โหลด = expenses.pdf> ดาวน์โหลดรายงานค่าใช้จ่ายของคุณ </a>
คุณควรรู้ว่า IE6 ค่อนข้างใช้ในประเทศจีน หากฉันไม่สนับสนุน IE6 ในเว็บแอปพลิเคชันหรือเว็บไซต์ของคุณเพิ่มรหัสนี้และฉันเชื่อว่าผู้ใช้ของคุณจะอัพเกรด IE6, hehe!
<style>*{ตำแหน่ง: สัมพัทธ์} </style> <table> <put> </table>