Fitur tersembunyi dari HTML


110

HTML menjadi bahasa yang paling banyak digunakan (setidaknya sebagai bahasa markup) belum mendapatkan penghargaan yang semestinya.
Mengingat sudah ada selama bertahun-tahun, hal-hal seperti kontrol FORM / INPUT masih tetap sama tanpa ada kontrol baru yang ditambahkan.

Jadi setidaknya dari fitur-fitur yang ada, tahukah anda fitur-fitur apa saja yang tidak terkenal tapi sangat bermanfaat.

Tentu saja, pertanyaan ini sejalan dengan:

Fitur Tersembunyi JavaScript
Fitur Tersembunyi CSS
Fitur Tersembunyi C #
Fitur Tersembunyi VB.NET
Fitur
Tersembunyi Java Fitur
Tersembunyi ASP klasik Fitur
Tersembunyi ASP.NET Fitur Tersembunyi dari Python
Fitur Tersembunyi TextPad
Fitur Tersembunyi Eclipse

Jangan menyebutkan fitur HTML 5.0, karena masih dalam draft kerja

Harap tentukan satu fitur per jawaban .

Jawaban:


244

Menggunakan jalur absolut yang tidak bergantung protokol:

<img src="//domain.com/img/logo.png"/>

Jika browser melihat halaman dalam SSL melalui HTTPS, browser akan meminta aset tersebut dengan protokol https, jika tidak, browser akan memintanya dengan HTTP.

Hal ini mencegah pesan kesalahan "Halaman Ini Berisi Item Aman dan Tidak Aman" di IE, menjaga semua permintaan aset Anda dalam protokol yang sama.

Peringatan: Saat digunakan pada <link> atau @import untuk stylesheet, IE7 dan IE8 mengunduh file tersebut dua kali . Namun, semua penggunaan lainnya baik-baik saja.


29
Itu bukan fitur HTML tapi fitur URL / URI.
Gumbo

44
@ Gumbo: Benar, ini adalah fitur URI, tapi menurut saya itu cukup baik untuk membengkokkan aturan dan memasukkannya di sini. Dan saya tidak mengharapkan Fitur Tersembunyi dari Spesifikasi URI dalam waktu dekat. :)
Paul Irish

2
satu garis miring relatif dari bagian domain, bukan dari bagian protokol
SztupY

2
IE sangat luar biasa DUMB! Kenapa sih DL file itu dua kali?

5
Ada satu kelemahan utama: ketika file disimpan ke disk dan diakses menggunakan file:protokol, browser tidak akan dapat menemukan sumber daya (misalnya, dari CDN atau server eksternal lainnya).
Marcel Korpel

138

Tag label secara logis menghubungkan label dengan elemen formulir menggunakan atribut "untuk". Sebagian besar browser mengubahnya menjadi tautan yang mengaktifkan elemen formulir terkait.

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

24
ya, menakjubkan betapa sedikit situs yang secara aktif menggunakan ini. Saya telah melihat situs yang menggunakan js untuk melakukan ini ...
Boris Callens

2
Menemukan yang ini baru-baru ini.
Arnis Lapsa

4
cagdas, sebenarnya tidak ada fitur tersembunyi di HTML, ini adalah standar yang ditentukan.
kelopak mata tidak tampak

54
Untuk memperluas jawaban, seseorang juga dapat membungkus input dengan label dan menghilangkan atribut for: <label> Fiscal Year <input name = "fiscalYear" type = "text" /> </label>
eyelidlessness

32
Menggunakan kotak centang dan tombol radio tanpa itu seharusnya dianggap kejahatan.
Kornel

136

The contentEditable properti untuk (IE, Firefox, dan Safari)

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

Ini akan membuat sel dapat diedit! Silakan, coba jika kamu tidak percaya padaku.


7
Pertanyaannya memanggil fitur yang tidak diperkenalkan oleh HTML5
Quentin

15
David Dorward, Tidaklah adil untuk mengatakan itu diperkenalkan dengan HTML5, karena contentEditable diperkenalkan oleh MS di IE 5.5, tapi ya itu belum distandarisasi hingga HTML5; Tyson & Steve, contentEditable diperkenalkan ke Safari dalam versi 2.0, tetapi banyak metode pemformatan penting tidak ditambahkan hingga 3.x; Victor H Valle, tergantung pada doctype Anda. HTML 4 harus mengembangkannya menjadi = "true" saat diciutkan.
kelopak mata tidak tampak

2
tautan mencobanya tidak mengarah ke contoh yang sesuai
Gordon Gustafson

4
@ Binoj - Sama sekali tidak. "Atribut konten yang dapat diedit adalah atribut yang disebutkan yang kata kuncinya adalah string kosong, benar, dan salah" - w3.org/TR/html5/editing.html
Quentin

2
Lebih baik lagi, tambahkan yang berikut ini sebagai bookmarklet agar dapat mengedit halaman web mana pun yang Anda buka: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void (0);
Amro

102

Menurut saya, tag optgroup adalah salah satu fitur yang jarang digunakan orang. Kebanyakan orang yang saya ajak bicara cenderung tidak menyadari bahwa itu ada.

Contoh:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Sayangnya, penerapan hierarki menu browser menyisakan banyak hal yang diinginkan. Saya curiga optgroup tidak banyak digunakan karena kasus penggunaan yang relevan sedikit dan jarang.
kelopak mata tidak tampak

1
Satu level harus didukung di semua browser. Sebuah web-forum Saya terpisah dari yang lain yang menggunakannya di beberapa layar untuk membagi daftar forum menjadi bagian yang sama seperti yang digunakan pada halaman utama.
staticsan

@bayu_joo Saya setuju ini berguna untuk kategorisasi kecil dari sejumlah item.
RichardOD

5
@eyelidlessness: Saya selalu melihat drop-down yang membuat elemen indentasi atau menggunakan semacam teks 'header' seperti ---category---.
DisgruntledGoat

4
Ini adalah fitur rapi yang tidak saya ketahui!
Chrisb

100

Bit favorit saya adalah tag dasar, yang merupakan penyelamat jika Anda ingin menggunakan perutean atau penulisan ulang URL ...

Katakanlah Anda berada di:

www.anypage.com/folder/subfolder/

Berikut ini adalah kode dan hasil untuk link dari halaman ini.

Jangkar Reguler:

<a href="test.html">Click here</a>

Mengarah ke

www.anypage.com/folder/subfolder/test.html

Sekarang jika Anda menambahkan tag dasar

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

Jangkar sekarang mengarah ke:

www.anypage.com/test.html

48
Anda juga bisa menggunakan /images/image.png, dengan garis miring di depan. :-)
molf

46
Tag dasar adalah opsi inti - ini setara dengan #define: jika Anda tidak melacaknya, membuatnya sangat jelas bagi pengembang di masa mendatang, dan menjadikannya bagian tingkat yang sangat rendah dari arsitektur situs, hal itu dapat menyebabkan frustasi bug yang tidak jelas. Saya tidak pernah membutuhkan ini, gunakan dengan hati-hati.
annakata

2
Ya, saya juga melihat tag dasar mengganggu JavaScript saya saat mencoba memuat file CSS secara dinamis ke halaman. Selain itu, bug di IE6 mengharuskan Anda menutup tag secara eksplisit (</base>), yang tidak valid. Komentar bersyarat dapat membantu hal itu.
avdgaag

4
Perhatikan bahwa URL dasar diterapkan ke setiap URL relatif dan tidak hanya untuk jalur URL relatif. Jadi referensi #topakan diselesaikan ke "atas" dalam dokumen indeks root dan ke "atas" dalam dokumen yang sama.
Gumbo

17
Saya menemukan ini sangat berguna dalam situasi di mana saya harus 'melihat sumber' dan mengunduh HTML halaman untuk bekerja dengannya. Setelah sumber diunduh, Anda dapat menambahkan elemen BASE dengan atribut href yang sesuai. Dengan cara ini, Anda dapat bekerja secara lokal setelah mengunduh HTML sumber saja ... tidak perlu mengunduh semua javascript, css, dan gambar.
Andy Ford

99
<img onerror="{javascript}" />

onerror adalah peristiwa JavaScript yang akan diaktifkan tepat sebelum gambar palang merah kecil (di IE) ditampilkan.

Anda dapat menggunakan ini untuk menulis skrip yang akan menggantikan gambar yang rusak dengan beberapa konten alternatif yang valid, sehingga pengguna tidak perlu berurusan dengan masalah palang merah.

Pada pandangan pertama, ini bisa dianggap sama sekali tidak berguna, karena, tidakkah Anda tahu sebelumnya jika gambar itu tersedia? Tapi, jika Anda pertimbangkan, ada aplikasi valid yang sempurna untuk hal ini; Misalnya: misalkan Anda menyajikan gambar dari sumber daya pihak ketiga yang tidak Anda kontrol. Seperti gravatar kami di SO ... ini disajikan dari http://www.gravatar.com/ , sumber daya yang sama sekali tidak dikontrol oleh tim stackoverflow - meskipun dapat diandalkan. Jika http://www.gravatar.com/ turun, stackoverflow dapat mengatasinya dengan menggunakan onerror.


Aha ... jika ini yang saya pikirkan, saya harus tahu ini lebih awal ketika saya benar-benar membutuhkannya. : /
Arnis Lapsa

untuk memperjelas, onerror adalah peristiwa javascript (seperti onclick) yang memungkinkan Anda melakukan sesuatu saat gambar gagal dimuat.
Jehiah

1
Daniel Silveira, akankah Anda menjelaskan bahwa ini sebenarnya menjalankan kode kesalahan dalam kasus gambar yang rusak (misalnya 404)? Terlepas dari itu, ini adalah fitur DOM, bukan fitur HTML itu sendiri.
kelopak mata tidak tampak

2
Saya memiliki penggunaan yang bagus yang satu ini, menunjuk ke gambar yang tidak ada, siapa pun yang rekursif ???
Pharabus

96

The <kbd>elemen untuk menandai untuk input keyboard

Ctrl+ Alt+Del


Apakah ada yang istimewa tentang <kbd> selain itu format font yang berbeda? jika tidak di sini adalah daftar tag pemformatan lainnya? w3schools.com/tags/tag_phrase_elements.asp
Teman Anda Ken

Tidak terlalu, hanya tidak terkenal Saya tidak berpikir
Russ Cam

3
Tidak ada secara default, tetapi lebih bersih untuk menandai elemen dengan CSS seperti yang dilakukan SO.
Agent_9191

1
Tidak sadar itu ada, itu menyenangkan.
Kzqai

85
<blink>

Harus digunakan untuk hal penting di situs. Sebagian besar situs penting membungkus semua konten dalam sekejap.

<marquee>

Menciptakan efek pengguliran yang realistis, bagus untuk e-book, dll.

Edit: Sobat Easy-up, ini hanya upaya humor


62
Mungkin pertanyaannya seharusnya menentukan bahwa Anda tidak boleh mencantumkan fitur yang ingin kami tetap sembunyikan.
Ben Blank

12
... Saya telah menggunakan <blink>, sebagai bagian dari gaya terminal-psuedo untuk kode tampilan div (: sebelum {content: "drthomas @ house: ~ $";}: setelah {content: "_"; text -dekorasi: blink;} ... itu luar biasa. Saya mungkin harus mencari bantuan. =]
David bilang kembalikan Monica

2
<marquee> <blink> Tag HTML PALING menjengkelkan !!! </blink> </marquee> Ini tidak disembunyikan, mereka hanya tidak digunakan karena suatu alasan.
Teman Anda Ken

2
Saya membungkus seluruh halaman saya di Marquee dan Blink karena saya sangat keren
Sphvn

3
Silahkan. Satu-satunya penggunaan sah untuk <blink> adalah: Kucing Schroedinger <blink> tidak </blink> mati. (Saya pikir ini ada di xkcd, tetapi saya tidak dapat menemukannya saat ini.)
Christopher Creutzig

84

Tidak terlalu terkenal tetapi Anda dapat menentukan lowsrcgambar yang akan ditampilkan lowsrcsaat memuat srcgambar:

<img lowsrc="monkey_preview.png" src="monkey.png" />

Ini adalah opsi yang bagus bagi mereka yang tidak menyukai gambar interlaced .

Sedikit hal sepele: pada satu titik properti ini cukup tidak jelas sehingga digunakan untuk mengeksploitasi Hotmail , sekitar tahun 2000.


Ini saya tidak tahu. Bisakah ini digunakan untuk "memuat" animasi?
Boris Callens

2
Saya mendapatkan peringatan penipuan di Opera dari tautan "eksploitasi Hotmail" itu. : o
jrista

2
Ini situs web keamanan, aman.
Joey Robert

27
Tapi atribut ini adalah hak milik. msdn.microsoft.com/library/ms534138(VS.85).aspx
Gumbo

17
Atribut ini sudah tidak digunakan lagi sejak HTML4 - Anda tidak boleh menggunakannya di situs produksi.
Ben Hull

67

DELdan INSuntuk menandai konten yang dihapus dan disisipkan:

HTML <del>sucks</del> <ins>rocks</ins>!

10
Jelas tidak cukup digunakan.
Kelopak mata

2
@eyelidlessness: tidak ada cukup situasi di mana menandai teks yang dihapus / disisipkan itu berguna.
DisgruntledGoat

2
Saya dapat bersumpah bahwa StackOverflow telah digunakan <ins>dan <del>pada halaman Revisi beberapa waktu yang lalu, tetapi sekarang ia menggunakan <span class="diff-add">dan <span class="diff-delete">. :(
sistem JEDA

1
@DisgruntledGoat wiki revisi sejarah? banyak kasus penggunaan untuk itu
HorusKol

3
@Horus: yakin Anda dapat menemukan kegunaannya, tetapi dalam skema besar hal-hal itu masih bukan situasi yang sangat besar.
DisgruntledGoat

58

The tombol tag adalah baru input submittag dan banyak orang masih belum terbiasa dengan hal itu. Teks di tombol, misalnya, diberi gaya menggunakan tag tombol.

<button>
    <b>Click</b><br />
    Me!
</button>

Akan membuat tombol dengan dua baris, yang pertama mengatakan " Klik " dalam huruf tebal dan yang kedua mengatakan "Saya!". Coba di sini .


15
Malu karena telah rusak di IE <8. Ada kemungkinan untuk mengatasi masalah, tetapi itu bisa menyakitkan, dan kadang-kadang Anda mencapai perlindungan keamanan yang berjalan antara server web dan lingkungan pemrograman sisi server.
Quentin

6
Tetapi IE <8 akan mengirimkan konten elemen, bukan nilainya. Saya yakin beberapa versi akan selalu memperlakukannya sebagai kontrol yang berhasil (meskipun tidak diklik) juga.
Quentin

4
Dan jika Anda membuatnya <button contenteditable> Anda juga dapat mengubah teks tombol! Menunjuk siapa pun yang dapat menemukan kegunaan yang valid untuk itu. :)
Gavin

4
Saya tidak pernah mengerti mengapa ada jenis pengiriman "masukan". Itu tidak memasukkan apa pun, hanya mengirimkan apa yang Anda masukkan di bidang lain.
DisgruntledGoat

3
@DisgruntledGoat: pasangan nama / nilainya benar-benar akan dikirim. Berguna jika Anda memiliki lebih dari satu tombol dalam sebuah form (misal edit, delete, moveup, dll) dan ingin membedakan tombol yang ditekan. Sayangnya hal yang sama tidak berfungsi untuk buttonIE <8, yang secara mengejutkan mengirimkan pasangan nama / nilai dari SEMUA buttonelemen.
BalusC

56

Tentukan css untuk dicetak

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

1
Menemukan bahwa beberapa minggu yang lalu
Daniel Moura

41
Imo tidak benar-benar tersembunyi.
Dmitri Farkov

Ini adalah penggunaan umum.
UpTheCreek

Jika Anda belum pernah berurusan dengan ini sebelumnya, saya harap Anda belum pernah membuat situs web produksi sebelumnya ...
Kzqai

bagaimana ini bisa dianggap tersembunyi?
Marin

54

yang <dl> <dt>dan<dd> barang-barang yang sering terlupakan dan mereka berdiri untuk Daftar Definisi, Istilah Definisi dan Pengertian.

Mereka bekerja mirip dengan daftar tidak berurutan ( <ul>) tetapi bukannya entri tunggal itu lebih seperti daftar kunci / nilai.

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

Selain itu, semantik dl / dt / dd sesuai untuk daftar serupa (misalnya, struktur telah direkomendasikan untuk dialog).
kelopak mata tanpa kelopak mata

2
Presentasi default tidak terlalu bagus, tetapi orang lupa bahwa elemen dapat ditata dengan banyak cara dengan CSS.
DisgruntledGoat

18
Hal yang lebih menarik yang sering dilupakan adalah bahwa formatnya adalah key / value / value / value / value / key / value
Quentin

1
@D_N, saya pikir di mana letak ketidaksepakatannya adalah bahwa saya menganggap penggunaan yang disarankan sebagai bagian dari definisi dan semantik, daripada terpisah dari dan bertentangan dengannya.
Kelopak mata tidak tampak pada

1
@D_N dan @eyelidlessness - lihat catatan Bruce Lawson tentang menandai percakapan secara semantik ... ditambah juri masih keluar pada elemen dialog HTML5 ... brucelawson.co.uk/2006/…
Fenton

52

Tidak persis tersembunyi, tetapi (dan ini adalah kesalahan IE) tidak cukup banyak orang tahu tentang thead, tbody, tfoot untuk selera saya. Dan berapa banyak dari Anda yang tahu bahwa tfoot seharusnya muncul di atas tubuh dalam markup?


1
boris callens, Yeah, tbody tersirat jika tidak ada thead, tbody and tfoot hadir.
kelopak mata tidak tampak

2
Jika IE5 telah mengimplementasikan TBODY dengan benar, maka lebih banyak orang akan menggunakannya. Ini adalah masalah utama beberapa tahun lalu. Mozilla dan Opera mendukung scrolling TBODY yang sangat keren; sayangnya, IE5 tidak.
staticsan

9
Mereka berguna untuk pencetakan karena harus meletakkan theaddan tfootdi bagian atas dan bawah setiap halaman. Sayang sekali tidak ada mekanisme untuk mengulang theaddi browser, saat Anda memiliki tabel yang panjang.
DisgruntledGoat

1
Saya tahu bahwa tfoot melampaui tubuh, dan saya pikir itu sangat bodoh. Saya meletakkan kaki saya di bawah, di mana itu masuk akal, mendapat kesalahan validator, memindahkan kaki saya ke atas tubuh (bingung tapi selalu patuh), dan coba tebak ?! Saat Anda mencoba menyorot tabel, browser (setidaknya FF) menyorot kaki SEBELUM tubuh, meskipun secara visual di bawah tubuh! Lalu!!! ketika Anda menyalinnya ke editor teks, itu DI ATAS tubuh secara visual. Aturan yang sepenuhnya sewenang-wenang.
Anthony

3
@Anthony: masuk akal jika Anda memiliki koneksi yang lambat, itu berarti Anda dapat melihat semua header dan footer saat konten tabel masih dimuat.
me_and

50

The wbratau kata-break tag. Dari Quirksmode:

(jeda kata) berarti: "Peramban dapat memasukkan jeda baris di sini, jika diinginkan." Jika browser tidak menganggap pemutusan baris diperlukan tidak ada yang terjadi.

<div class="name">getElements<wbr>ByTagName()</div>

Saya memberi browser opsi untuk menambahkan jeda baris. Ini tidak diperlukan pada resolusi yang sangat besar, jika tabel memiliki banyak ruang. Pada resolusi yang lebih kecil, bagaimanapun, jeda baris yang ditempatkan secara strategis menjaga tabel dari tumbuh lebih besar dari jendela, dan dengan demikian menyebabkan scrollbar horizontal.

Ada juga &shy;entitas HTML yang disebutkan di halaman yang sama. Ini sama seperti wbrtetapi ketika jeda dimasukkan, tanda hubung ( -) ditambahkan untuk menandakan jeda. Jenis seperti bagaimana hal itu dilakukan di media cetak.

Sebuah contoh:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTeks


2
Hati-hati karena ada dukungan browser yang buruk untuk yang satu ini
Christophe Eblé

7
"IE8 as IE8" tidak mendukungnya dan bermasalah di Safari 3.0 untuk windows. Selain itu dukungannya cukup bagus. Lihat bagan kompatibilitas di tautan.
aleemb

Hmm referensi titik situs menandai tag ini sebagai usang dan tidak berguna, siapa yang benar? reference.sitepoint.com/html/wbr
Christophe Eblé

Ini mungkin sudah usang sebagai bagian dari spesifikasi HTML tetapi masih berfungsi di browser. Jika ragu, gunakan keputusan QuirksMode (tabel kompatibilitas sekarang disponsori oleh Google).
aleemb

Sepertinya ini akan menjadi hal yang sangat berguna untuk dimasukkan dalam standar css berikutnya!
Yakobus

43

Fitur yang paling jarang digunakan adalah kenyataan bahwa hampir setiap elemen, yang menyediakan konten yang terlihat pada halaman, dapat memiliki atribut 'title' [judul].

Menambahkan atribut seperti itu menyebabkan 'tooltip' muncul saat mouse 'diarahkan' di atas elemen, dan dapat digunakan untuk memberikan informasi yang tidak penting - tetapi berguna - dengan cara yang tidak menyebabkan halaman menjadi terlalu ramai . (Atau ini bisa menjadi cara untuk menambahkan informasi ke halaman yang sudah ramai)


Ya, atribut "title" cukup berguna — terutama untuk elemen yang dimaksudkan untuk diklik.
Steve Harrison

6
Keterangan alat yang muncul khusus browser. Tidak semua browser akan menampilkan atribut title yang sama. Tapi itu adalah fitur bagus yang pasti saya gunakan.
Travis

8
Atribut judul berguna, tetapi hanya jika digunakan dengan tepat. Kebanyakan browser hanya merender tooltip selama beberapa detik sebelum menghilang. Saya benci jika desainer merasa perlu untuk mengisi atribut judul dengan 3 atau 4 baris teks yang menyebabkan Anda harus mengarahkan mouse, lalu mouse lagi untuk membaca sisanya.
Imamc

Menggunakan ini sehubungan dengan jQuery sama dengan kedahsyatan.
Levi Morrison

Levi - dapatkah Anda memberikan beberapa contoh?
belugabob

38

Menerapkan beberapa kelas html / css ke satu tag. Posting yang sama di sini

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

22
Itu adalah kelas HTML, bukan kelas CSS. CSS tidak memiliki kelas (memiliki pemilih kelas). Kelas HTML berguna untuk hal-hal selain CSS.
Quentin

36
Wow! Saya tidak bisa melupakan fakta bahwa orang menganggap ini sebagai fitur "tersembunyi". Wah, apakah saya merasa bodoh memposting beberapa fitur yang "benar-benar tersembunyi" karena orang yang menaikkan suara ini mungkin bahkan tidak akan mendekati untuk memahami apa artinya memperpanjang DTD.
aleemb

5
d03boy, p.foo, p.var tidak sama dengan p.foo.bar. Yang pertama memilih paragraf apa pun dengan kelas "foo" atau "var", yang terakhir memilih paragraf dengan kedua kelas.
Kelopak mata tidak terlihat

5
Hal yang berkaitan dengan kelas HTML adalah poin yang bagus, karena ini membawa saya ke sebuah poin - html seharusnya tidak diberi tahu tentang css .. Anda 'harus' dapat membuat html, dan meneruskannya ke desainer yang dapat mengimplementasikan desain mereka tanpa perlu mengubah html (belum sepenuhnya kasusnya;)) .. jadi ini tergantung pada penamaan Anda dan cara Anda menggunakan kelas .. jangan buat kelas untuk menargetkan properti css .. gunakan kelas untuk mengidentifikasi apa elemen 'itu '.
meandmycode

1
Secara teknis, "Foo Bar BlackBg" adalah satu kelas, dan p.foo hanyalah gula sintaksis untuk p [kelas ~ = foo] (lihat spesifikasi ). Namun, lebih mudah untuk menganggapnya sebagai memiliki banyak kelas.
Tgr

34

Kita semua tahu tentang DTD atau Deklarasi Jenis Dokumen (hal-hal yang membuat halaman Anda gagal dengan validator W3C). Namun, DTD dapat diperpanjang dengan mendeklarasikan daftar atribut untuk elemen kustom.

Misalnya, validator W3C akan gagal untuk halaman ini karena behavior="mouseover"ditambahkan ke <p>tag. Namun, Anda dapat melakukannya dengan melakukan ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

Lihat selengkapnya di tentang DTD Kustom di QuirksMode .


10
Tentu saja, ini menjadikannya "Valid: Bahasa markup kustom Anda" dan bukan "XHTML 1.0 Transitional"
Quentin

3
+1. Saya tidak tahu mengapa ini -1. Bagaimanapun perlu dicatat bahwa dukungan browser cukup banyak nihil.
kelopak mata tidak tampak

Cukup yakin Opera mendukung ini.
Rich Bradshaw

2
@eyelidlessness itu hanya bekerja dalam XHTML. Tidak berfungsi dalam XHTML semu yang dikirim sebagai teks / HTML.
Kornel

2
Eesh, bukan penggemar ini. Bagi saya, nilai HTML adalah setiap orang di planet ini tahu artinya (kurang lebih), karena kita semua menggunakan tag dan atribut yang sama. Saya tidak yakin mengapa classatribut tidak cukup dapat diperpanjang.
Paul D. Waite

28

Kita dapat menetapkan string yang dikodekan basis 64 sebagai sumber / atribut href gambar, JavaScript, iframe, tautan

misalnya

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

Referensi

Bagaimana cara membuat gambar menggunakan markup HTML?

File Biner ke Base64 Encoder / Translator


4
Sayangnya, IE <8 tidak mendukung ini. Namun Anda dapat menggunakan MHTML sebagai gantinya untuk peramban ini: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Mathias Bynens

26

Saya baru-baru ini mengetahui tentang fieldset dan label tag. Seperti di atas, tidak tersembunyi tetapi berguna untuk formulir.

Penjelasan <fieldset>

Contoh:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

Berikan contoh gunakan ini.
Binoj Antony


Fieldset ditemukan dari halaman sampel aspnet mvc. ^^
Arnis Lapsa

2
Tidak tahu tentang yang satu ini. Heres W3C spesifikasi: w3.org/TR/html401/interact/forms.html#h-17.10
MitMaro

Fieldset dan legenda sangat bagus. Cara yang sangat bagus untuk menandai formulir Anda.
Neil Aitken

25

Anda dapat menggunakan objecttag alih-alih sebuah iframeuntuk memasukkan dokumen lain di halaman:

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

57
Yang akhirnya berfungsi hampir persis seperti iframe kecuali bahwa itu kurang didukung dengan baik dan memiliki lebih sedikit fitur.
Quentin

iframe tidak digunakan lagi, semoga kami akan segera mendapatkan dukungan yang lebih baik,
Gordon Gustafson

12
iframe tidak usang dalam HTML 5.
Zach

Apakah itu mencegah serangan XSS dari halaman yang disematkan?
Pengecut anonim

1
Saya yakin ini menggunakan SOP, sama seperti iframe.
Zach

25

<optgroup>adalah salah satu hal hebat yang sering dilewatkan orang saat membuat <select>daftar tersegmentasi .

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

adalah apa yang seharusnya Anda gunakan, bukan

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

25

Sebagian besar juga tidak menyadari fakta bahwa Anda dapat membedakan tombol formulir yang ditekan hanya dengan memberi mereka pasangan nama / nilai. Misalnya

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

Di sisi server, tombol sebenarnya yang ditekan kemudian dapat diperoleh dengan hanya memeriksa keberadaan parameter permintaan yang terkait dengan nama tombol. Jika tidaknull , maka tombol sudah ditekan.

Saya telah melihat banyak dari yang tidak perlu JS hacks / workarounds untuk itu, misalnya mengubah bentuk tindakan atau mengubah nilai masukan yang tersembunyi terlebih dahulu tergantung pada tombol ditekan. Ini sangat mencengangkan.

Juga, saya telah melihat hampir banyak peretasan / solusi JS untuk mengumpulkan yang dicentang dari beberapa kotak centang seperti pada baris tabel. Pada setiap pemilihan / pemeriksaan baris tabel, JS akan menambahkan indeks baris ke beberapa nilai yang dipisahkan koma dalam elemen input tersembunyi yang kemudian akan dipisahkan / diuraikan lebih lanjut di sisi server. Itu adalah hasil dari ketidaksadaran bahwa Anda dapat memberi beberapa elemen masukan dengan nama yang sama tetapi nilai yang berbeda dan Anda masih dapat mengaksesnya sebagai larik di sisi server. Misalnya

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

Ketidaksadaran akan memberi setiap kotak centang nama yang berbeda dan menghilangkan seluruh atribut nilai. Dalam beberapa situasi JS-hack / workaround-free, saya juga telah melihat beberapa keajaiban luar biasa yang tidak perlu di kode sisi server untuk membedakan item yang dicentang.


1
Hei .. Itu rupanya fitur tersembunyi lain dari HTML: /;)
BalusC

1
Jika formulir memiliki beberapa tombol kirim, dan pengguna mengklik salah satunya, versi Internet Explorer tertentu akan dengan senang hati memberi tahu server Anda bahwa semuanya telah diklik. Hebat.
detly

1
@detly: hanya jika Anda menggunakan, <button type="submit">bukan <input type="submit">:)
BalusC

1
... buuuuut bukankah IE6 juga bermasalah dengan <input type="submit">? (Ingatan saya tentang masalah ini kabur - saya sudah lama meyakinkan pemberi kerja untuk tidak mengkhawatirkan kompatibilitas IE untuk aplikasi web internal, jadi itu bukan masalah saya lagi. Tapi sepertinya saya ingat beberapa penghalang untuk membuat masalah ini dapat diselesaikan di IE6. )
detly

2
Itu tidak terlalu ramah i18n.
zneak

22

Tag Colgroup .

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

15
Menurut pengalaman saya, dukungan kelompok-kelompok tidak kuat.
kelopak mata tidak tampak

sangat mirip adalah WPF Grid
Binoj Antony

18

Jika foratribut dari sebuah <label>tag tidak ditentukan, itu secara implisit disetel sebagai anak pertama <input>, yaitu

<label>Alias: <input name="alias" id="alias"></label>

setara dengan

<label for="alias">Alias:</label> <input name="alias" id="alias">

4
Tetapi ini menikmati lebih sedikit dukungan browser daripada atribut for
Quentin

4
@David - Apakah Anda memiliki dokumentasi untuk mendukungnya? Saya rasa saya belum pernah melihat browser yang tidak mendukung penggunaan ini. Saya secara pribadi telah menguji di IE6 / 7, FF2 / 3, Safari 3, dan Chrome 1/2. Saya belum menguji diri saya di Opera, tetapi saya akan sangat terkejut jika itu tidak berhasil. Perilaku ini adalah bagian dari spesifikasi HTML 4.0 asli, pertama kali diterbitkan lebih dari sebelas tahun yang lalu: w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
Ben Blank

Juga, tidak valid untuk meletakkan input di dalam label, dan DOH Anda tidak menutup tag input Anda di kedua contoh!
Anthony

5
Anda salah dalam kedua hal: ini adalah praktik yang valid, dan tag akhir dilarang untuk elemen masukan.
moo

15

Tombol sebagai tautan, tanpa JavaScript :

Anda dapat meletakkan segala jenis file dalam tindakan formulir , dan Anda memiliki tombol yang berfungsi sebagai tautan. Tidak perlu menggunakan acara onclick atau semacamnya. Anda bahkan dapat membuka file di jendela baru dengan menempelkan "target" di formulir. Saya tidak banyak melihat teknik itu dalam penerapannya.

Gantilah ini

<a href="myfile.pdf" target="_blank">Download file</a>

dengan ini:

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

27
Tombol tidak memiliki opsi "Simpan file sebagai", yang mungkin dibutuhkan oleh pengguna yang tidak suka Adobe Acrobat mengambil alih browser mereka.
Kornel

Ini akan berperilaku dengan perilaku browser default saat mengakses file PDF. Ini bisa berupa file HTML, file kata, file zip, atau apa pun yang Anda inginkan.
Wadih M.

Dalam situasi apa tag anchor membutuhkan peristiwa onclick? dan mengapa 3 baris html lebih baik dari 1? Apakah gagasan bahwa Anda BISA memiliki tombol alih-alih tautan, jadi bagus dan seperti tombol? Meskipun saya terdengar jengkel tentang ini, saya sebenarnya memiliki halaman yang menggunakan tombol alih-alih tautan karena file dibuat secara dinamis ketika pengguna memintanya, jadi saya tidak ingin tautan ke: blah.php? Stuff = "userdata" Meskipun saya bisa saja mengambil rute itu, saya tidak ingin mengambil risiko nama file memiliki skrip penghasil file sebagai nama alih-alih nama file yang diberikan skrip untuk file tersebut.
Anthony

1
Mengapa tidak memberi gaya pada tag <a> seperti tombol? Sepertinya banyak sampah di markup Anda.
UpTheCreek

2
@UpTheCreek beberapa aplikasi web ingin terlihat sama dengan OS. Misal tombol jelek saat pengguna menggunakan Windows, dan tombol cantik saat pengguna menggunakan Mac OS X.

13

Cara termudah untuk menyegarkan halaman dalam X detik - META Refresh

<meta http-equiv="refresh" content="600">

Nilai dalam konten menandakan detik setelah Anda ingin halaman disegarkan.
[Sunting]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

Untuk melakukan pengalihan sederhana!
(Terima kasih @rlb)


13
Tentu saja, mengerjakan elemen mana yang perlu disegarkan dan kemudian memperbaruinya melalui AJAX menghasilkan pengalaman pengguna yang jauh lebih baik ...
Steve Harrison

11
Refresh META tidak benar-benar melakukan sesuatu yang baik di halaman di mana ada juga beberapa raja aktivitas formulir pengguna, karena dapat mengganggu pengisian formulir pengguna dan membuang semua pekerjaan. Saya pikir jarang ada kesempatan di mana penyegaran semacam ini akan menjadi yang terbaik. Biasanya itu hanya jalan keluar yang mudah.
Robert Koritnik

11
/ saya benci halaman yang disegarkan seperti itu ... harus dilarang = /
Svish

3
Ini juga dapat berguna jika disetel sedikit kurang dari waktu tunggu sesi untuk memberi tahu pengguna bahwa sesinya telah habis waktunya dan telah dihapus.
fforw

1
Tombol mundur waktu tunggu singkat.
Kornel

12

<html>, <head>dan <body>tag bersifat opsional. Jika Anda menghilangkannya, mereka akan disisipkan secara diam-diam oleh pengurai di tempat yang sesuai. Sangat valid untuk melakukannya dalam HTML (seperti yang tersirat <tbody>).

HTML secara teori adalah aplikasi SGML. Ini mungkin dokumen HTML 4 valid terpendek :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

Di atas tidak berfungsi di mana pun kecuali W3C Validator. Namun text/htmldokumen HTML5 valid terpendek berfungsi di mana-mana:

<!DOCTYPE html><title></title>

4
Anda harus berhati-hati dengan apa yang Anda iklankan. Kode di atas akan lolos validasi dengan 4 peringatan di validator w3c, tetapi DocType adalah HTML 4.0. Cukup rapi bahwa HTML 4 adalah decendant dari SGML dan oleh karena itu mempertahankan standar validasi yang longgar ini, tetapi jika Anda mengubah DTD itu ke XHTML 1.0 STRICT, ia mendapat 15 kesalahan, yang hampir sama dengan jumlah karakter. XHTML dikembangkan karena HTML sangat malas (dan karenanya tidak aman) jadi kami tidak ingin memanfaatkannya lagi.
Anthony

3
Jika Anda mengubah dokumen DOCTYPE dari HTML / SGML ke XHTML / XML Anda akan mendapatkan campuran yang tidak masuk akal. Itu cukup jelas dan saya tidak yakin mengapa Anda menunjukkannya.
Kornel

3
Contoh ini mungkin, secara teknis, merupakan HTML 4 yang valid, tetapi browser tidak mendukung sintaks SGML yang disingkat itu. Berikut ini adalah dokumen HTML 5 valid terpendek, yang benar-benar didukung oleh browser:<!DOCTYPE html><title></title>
Brian Campbell

Adakah ide seberapa cocok untuk meninggalkan head/ body, tidak hanya dari perspektif validasi?
kibibu

@kibibu: Peramban tidak bermasalah dengan ini. Versi lama Opera biasanya dihilangkan <head>di DOM, tetapi konten head ada di DOM dan tetap berfungsi. Masalah terbesar yang saya temukan adalah bahwa klien OpenID <head>harus hadir secara eksplisit.
Kornel

11

Itu lang atribut tidak sangat terkenal tapi sangat berguna. Atribut digunakan untuk mengidentifikasi bahasa konten baik di seluruh dokumen atau dalam satu elemen. Kode bahasa diberikan dalam kode Bahasa 2 huruf ISO (yaitu 'en' untuk bahasa Inggris, 'fr' untuk Prancis).

Ini berguna untuk browser yang dapat menyesuaikan tampilan tanda kutip, dll. Pembaca layar juga mendapatkan keuntungan dari lang atribut serta mesin pencari.

Sitepoint memiliki beberapa nice penjelasan darilang atribut.

Contoh

Tentukan bahasanya menjadi bahasa Inggris untuk seluruh dokumen, kecuali diganti dengan langatribut lain pada level yang lebih rendah di DOM.

<html lang="en">

Tentukan bahasa di paragraf berikut menjadi bahasa Swedia.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

10

The "! DOCTYPE" deklarasi . Jangan anggap itu fitur tersembunyi, tapi sepertinya itu tidak terkenal tapi sangat berguna.

misalnya

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

10
Dan belum lagi "wajib untuk sebagian besar bahasa markup saat ini dan tanpa satu pun, tidak mungkin memvalidasi dokumen dengan andal" ... validator.w3.org/docs/help.html#faq-doctype
Svish

Saya tidak berpikir ini "tidak terkenal" lagi. Di antara IE 6 dan IE 7, penggunaan doctype berubah dari ~ 1% menjadi> 50%.
Kelopak mata tidak terlihat

@eyelidlessness Kebanyakan IDE menyertakan tag ini, itulah sebabnya penggunaannya meningkat. Saya pikir tag ini tidak dikenal.
Daniel Moura

6
Dan menggunakan doctype yang ketat memperbaiki 95% ketidakkonsistenan browser.
DisgruntledGoat

3
Bagian dari standar dan digunakan oleh 99% pengembang di luar sana tidak terdengar seperti "fitur tersembunyi".
WhyNotHugo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.