Hari ini saya akan memulai kursus seri HTML5/"> HTML5 baru, yang merupakan catatan studi saya tentang" Panduan Definitif untuk HTML5 ". Saya akan mengatur bab atau konten bermakna yang menurut saya baik, atau bermakna, untuk dipelajari semua orang.
Suatu elemen dapat menentukan atributnya sendiri, seperti tag untuk menentukan atribut HREF, yang disebut atribut lokal. Sejalan dengan itu, kita dapat menetapkan perilaku umum untuk semua elemen melalui atribut global. Tentu saja, Anda juga dapat menetapkan atribut global untuk elemen individu, tetapi tidak masuk akal untuk melakukannya. Di bawah ini saya akan memperkenalkan atribut global ini satu per satu.
Contoh berikut berjalan secara normal di browser Chrome. Beberapa contoh Firefox tidak dapat dijalankan, dan saya belum menguji browser lain, sehingga Anda disarankan untuk menggunakan browser Chrome sebagai browser HTML5 yang Anda sukai. Saya tidak fokus pada masalah kompatibilitas browser, tetapi pada pembelajaran dan implementasi. HTML5 masih ditingkatkan. Dengan popularitasnya, saya percaya bahwa browser arus utama akan mendukungnya lebih baik dan lebih baik, dan masalah kompatibilitas browser akan jauh lebih baik pada waktu itu.
1.AccessKeyProperti AccessKey memungkinkan Anda untuk mengatur satu atau lebih pintasan keyboard sehingga Anda dapat memilih elemen pada halaman. Mari kita lihat contoh berikut:
<! Doctype html>
<Html>
<head>
<Title> Contoh </iteme>
</head>
<body>
<sorm>
Nama: <input type = "text" name = "name" accessKey = "n"/>
<p/>
Kata sandi: <input type = "password" name = "password" accessKey = "p"/>
<p/>
<input type = "kirim" value = "log in" accessKey = "s"/>
</form>
</body>
</html>
Dalam contoh ini, Anda dapat menggunakan kombinasi kunci untuk memilih elemen di halaman. Misalnya, di bawah sistem operasi Windows, Anda dapat menggunakan ALT+XXX untuk memilih elemen.
Efek Menjalankan:
2.classSaya tidak ingin mengatakan lebih banyak tentang atribut ini. Ini adalah fungsi dari elemen pengelompokan. Sebagian besar waktu digunakan dalam kombinasi dengan CSS untuk menetapkan efek tampilan yang berbeda untuk elemen dalam kelompok yang berbeda.
3. BerkenjataiIni adalah atribut baru yang ditambahkan ke HTML5. Tambahkan atribut yang dapat diendapkan ke elemen HTML, atur ke true, memungkinkan pengguna untuk mengedit konten elemen; diatur ke False, dan tidak mengizinkan pengguna untuk mengedit.
<! Doctype html>
<Html>
<head>
<Title> Contoh </iteme>
</head>
<body>
<p ContentEditable = "true"> hujan sekarang </p>
</body>
</html>
4.ContextMenuContextMenu memungkinkan pengguna untuk mengatur menu klik kanan dari elemen HTML, dan menu akan muncul ketika pengguna memicu. Tidak ada browser yang mendukung properti ini sejauh ini.
5.Dir Atribut DIR mendefinisikan penyelarasan literal elemen HTML, mendukung dua nilai, LTR (dari kiri ke kanan) dan RTL (dari kanan ke kiri).<! Doctype html>
<Html>
<head>
<Title> Contoh </iteme>
</head>
<body>
<p dir = "rtl"> Ini adalah hak-ke-kiri </p>
<p dir = "ltr"> Ini adalah kiri-ke-kanan </p>
</body>
</html>
6.DraggableDraggable adalah atribut yang mengimplementasikan fungsi seret dan jatuhkan elemen HTML di HTML5, yang akan kami perkenalkan secara rinci dalam kursus berikut.
7.DropzoneDropzone juga merupakan atribut yang mengimplementasikan fungsi seret elemen HTML di HTML5. Kami akan memperkenalkannya secara rinci dalam kursus selanjutnya.
8.hiddenSetiap orang harus terbiasa dengan atribut ini, yaitu untuk menyembunyikan elemen HTML.
9.idSetiap orang harus mengetahui atribut ini. Ini menetapkan pengidentifikasi unik untuk elemen HTML, dan tidak ada elemen dengan ID yang cukup diizinkan di halaman HTML.
10.LangLang menentukan bahasa yang digunakan untuk konten elemen HTML. Nilai Lang harus menjadi kode bahasa ISO yang valid. Anda dapat mengunjungi alamat di bawah ini untuk detail lebih lanjut, http://tools.ietf.org/html/bcp47. Perlu dicatat bahwa berurusan dengan bahasa adalah masalah yang sangat kompleks dan teknis.
<! Doctype html>
<Html>
<head>
<Title> Contoh </iteme>
</head>
<body>
<p lang = "en"> halo - apa kabar? </p>
<p lang = "fr"> bonjour - komentar êtes -vous? </>
<p lang = "es"> hola - ¿cómo estás? </p>
</body>
</html>
11.Spellcheck Saat menggunakan atribut Spellcheck, browser akan membantu Anda memeriksa apakah konten ejaan dari elemen HTML dieja dengan benar. Hanya ketika elemen HTML dapat diedit, atribut ejaan dapat bermakna.<! Doctype html>
<Html>
<head>
<Title> Contoh </iteme>
</head>
<body>
<textarea spellcheck = "true"> Ini adalah beberapa teks yang salah ukur </pextarea>
</body>
</html>
Efek: (Saya tidak menjalankan efek yang diinginkan dengan Chrome, saya tidak tahu mengapa)
12. gayaTidak perlu terlalu banyak memperkenalkan atribut ini, dan mengatur gaya CSS untuk elemen HTML.
13.TabindexTabIndex memungkinkan Anda untuk menentukan urutan di mana elemen HTML diakses saat menggunakan tombol tab. Ketika TabIndex diatur ke -1, elemen HTML tidak akan dipilih menggunakan tombol tab.
<! Doctype html>
<Html>
<head>
<Title> Contoh </iteme>
</head>
<body>
<sorm>
<label> Nama: <input type = "text" name = "name" TabIndex = "1"/> </label>
<p/>
<label> kota: <input type = "text" name = "city" tabIndex = "-1"/> </label>
</p>
<label> negara: <input type = "text" name = "country" tabIndex = "2"/> </label>
</p>
<input type = "kirim" tabIndex = "3"/>
</form>
</body>
</html>
Memengaruhi:
14.Title Judul dapat memberikan informasi tambahan untuk elemen HTML, yang sering digunakan untuk menampilkan informasi prompt.<! Doctype html>
<Html>
<head>
<Title> Contoh </iteme>
</head>
<body>
<a href = "http://apress.com"> Kunjungi situs apress </a>
</body>
</html>
Memengaruhi:
Itu saja untuk kursus hari ini, saya berharap konten ini akan membantu semua orang.
Alamat unduhan demo: html5guide.rar