Produksi halaman web Webjx Artikel Pendahuluan: 10 Cuplikan kode HTML5 praktis yang harus Anda kumpulkan.
HTML5 adalah tonggak penting dalam pengembangan teknologi web. Untuk pengembangan front-end, jika Anda dapat menemukan beberapa kode yang mungkin perlu sering digunakan kembali dalam pengembangan di masa depan, saya yakin Anda tidak akan menolak. Di bawah ini adalah lebih dari 10 cuplikan kode HTML5 yang kami kumpulkan dengan cermat. Saya yakin Anda akan menyukainya!
Template termudah untuk html5Jika Anda perlu memulai proyek HTML5 baru, Anda pasti akan membutuhkan templat paling sederhana. Berikut ini adalah template HTML5 yang sangat sederhana dan jelas. Saya yakin semua orang akan menyukainya!
<! Doctype html><Html>
<head>
<Meta Charset = UTF-8>
<title> untitled </iteme>
<!-[jika lt yaitu 9]>
<Script src => </script>
<! [Endif]->
</head>
<body>
Konten utama web
</body>
Formulir </html> Dapatkan Google Maps
Ini kode yang sangat sederhana. Ini menggunakan pengguna untuk memasuki lokasi dan mendapatkan lokasi Google Map, yang sangat cocok untuk menghasilkan formulir kontak.
<Form Action = Method = Get Target = _Blank><Label untuk = Saddr> Masukkan Lokasi </Label>
<Jenis input = nama teks = Saddr />
<Jenis input = nama tersembunyi = daddr
Nilai = 350 5th Ave New York, NY 10018 (Empire State Building) />
<Input Tipe = Kirim Nilai = Dapatkan Arah />
</form> base64 File gif kosong yang dikodekan dengan ukuran 1x1
Saya pribadi tidak merekomendasikan menggunakan gif kosong transparan ini, tetapi bahkan pada tahun 2013, banyak orang masih menggunakannya. Mungkin Anda juga suka menggunakan metode ini.
<img src = data: gambar/gif; base64, r0lgodlhaqabaiaaaaaaaaaaap /// yh5baeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaAaaaaaaaaaaaaaaaaaaaaaaaaAaaaAaaaaaaaaaaaaaaaaaaaaaAaAaaAaaaaaaaaaaaaaaaaaaaAAFormulir reguler diizinkan untuk digunakan dalam HTML5 untuk verifikasi input:
<Input Tipe = Data Teks = Anda-Flash-File.swflebar = 0 tinggi = 0>
<param name = nilai film = your-flash-file.swf />
<Param Name = Nilai Kualitas = Tinggi/>
</bodes> Film dan mendukung Fallback
Fitur lain yang paling berguna di HTML5 adalah tag video, yang memungkinkan Anda untuk dengan mudah menyematkan file video. Namun, banyak browser lama tidak mendukungnya, jadi kode berikut akan sangat berguna
<Lebar Video = 640 Tinggi = 360 Kontrol><Sumber SRC = __ Video __. MP4 Type = Video /MP4 />
<Sumber SRC = __ Video __. OGV TYPE = VIDEO /OGG />
<Lebar Objek = 640 Tinggi = 360 Tipe = Aplikasi/X-Shockwave-Flash
Data = __ Flash __. SWF>
<param name = nilai film = __ flash __. swf />
<Param Name = FlashVars Value = controlBar = over & amp;
Image = __ Poster __. JPG & amp; File = __ Video __. MP4 />
<img src = __ Video __. Lebar jpg = 640 tinggi = 360 alt = __ judul__
Judul = Tidak ada kemampuan pemutaran video, silakan unduh video di bawah />
</boject>
</dide> Tautan panggilan iPhone & SMS
Apple memperkenalkan cara yang sangat nyaman untuk membuat tautan telepon dan teks di iPhone. Kodenya adalah sebagai berikut:
<a href = tel: 1-408-555-5555> 1-408-555-5555 </a><a href = sms: 1-408-555-1212> Pesan SMS Baru </a> Fungsi Pengisian Data Otomatis HTML5
Menggunakan elemen datasist, HTML5 memungkinkan penggunaan satu set data untuk menghasilkan fungsi pengisian otomatis. Sekarang Anda tidak perlu menggunakan kode JS pihak ketiga atau perpustakaan kelas!
<Input Name = Daftar Kerangka kerja = Frameworks /><datalist id = Frameworks>
<Nilai opsi = mootools>
<nilai opsi = moobile>
<nilai opsi = dojo toolkit>
<nilai opsi = jQuery>
<nilai opsi = yui>
</Datalist> File dapat diunduh secara langsung <!-akan mengunduh sebagai biaya.pdf->
<a href =/file/adlafjlxjewfasd89asd8f.pdf
unduh = biaya.pdf> Unduh Laporan Pengeluaran Anda </a> CRUBLE LAMA Versi Browser IE6
Anda harus tahu bahwa IE6 cukup digunakan di Cina. Jika saya tidak mendukung IE6 di aplikasi web atau situs web Anda, tambahkan kode ini dan saya yakin pengguna Anda akan meningkatkan IE6, hehe!
<tyle>*{position: relatif} </style> <able> <scut> </boable>