HTML'nin gizli özellikleri

En yaygın olarak kullanılan dil olan HTML (en azından bir biçimlendirme dili olarak), hak ettiği değeri almamıştır.
Uzun yıllardır var olduğu düşünüldüğünde, FORM / INPUT kontrolleri gibi şeyler, yeni kontroller eklenmeden hala aynı kaldı.

Yani en azından mevcut özelliklerden, iyi bilinmeyen ancak çok kullanışlı olan herhangi bir özelliği biliyor musunuz ?

Tabii ki, bu soru şu çizgidedir:

JavaScript'in
Gizli Özellikleri CSS'nin
Gizli Özellikleri C #
Gizli Özellikleri VB.NET'in
Gizli Özellikleri Java'nın
Gizli Özellikleri Klasik ASP'nin
Gizli Özellikleri ASP.NET'in
Gizli Özellikleri Python'un
Gizli Özellikleri TextPad'in
Gizli Özellikleri Eclipse'in Gizli Özellikleri

Çalışma taslağında olduğu için HTML 5.0'ın özelliklerinden bahsetmeyin

Lütfen yanıt başına bir özellik belirtin .

Protokolden bağımsız bir mutlak yol kullanma:

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

Tarayıcı, HTTPS üzerinden SSL'de bir sayfayı görüntülüyorsa, o varlığı https protokolü ile talep eder, aksi takdirde HTTP ile talep eder.

Bu, IE'deki o korkunç "Bu Sayfa Hem Güvenli hem de Güvenli Olmayan Öğeler İçeriyor" hata mesajını engeller ve tüm varlık isteklerinizi aynı protokol içinde tutar.

Uyarı: Bir stil sayfası için <link> veya @import üzerinde kullanıldığında, IE7 ve IE8 dosyayı iki kez indirir . Ancak diğer tüm kullanımlar gayet iyi.

Etiket etiketi, "for" özelliğini kullanarak etiketi mantıksal olarak form öğesine bağlar. Çoğu tarayıcı, bunu ilgili form öğesini etkinleştiren bir bağlantıya dönüştürür.

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

ContentEditable özellik (IE, Firefox ve 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>

Bu, hücreleri düzenlenebilir hale getirecek! Devam et, bana inanmıyorsan dene .

Optgroup etiketinin , insanların çok sık kullanmadığı bir özellik olduğunu düşünüyorum . Konuştuğum çoğu insan onun var olduğunun farkına varma eğiliminde değil.

Misal:

<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>

En sevdiğim bit, yönlendirme veya URL yeniden yazmayı kullanmak istiyorsanız hayat kurtarıcı olan temel etikettir ...

Diyelim ki şu adrestesiniz:

www.anypage.com/folder/subfolder/

Aşağıdakiler, bu sayfadaki bağlantıların kodu ve sonuçlarıdır.

Normal Çapa:

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

Sebep olur

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

Şimdi temel etiket eklerseniz

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

Çapa artık şunlara yol açar:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror küçük kırmızı çarpı (IE'de) resmi gösterilmeden hemen önce tetiklenecek bir JavaScript olaydır.

Bunu, bozuk görüntüyü bazı geçerli alternatif içeriklerle değiştirecek bir komut dosyası yazmak için kullanabilirsiniz, böylece kullanıcı kırmızı çarpı sorunuyla uğraşmak zorunda kalmaz.

İlk bakışta bu tamamen faydasız olarak görülebilir, çünkü daha önce görüntünün ilk etapta mevcut olup olmadığını bilmiyor muydunuz? Ama düşünürseniz, bu şey için mükemmel geçerli uygulamalar vardır; Örneğin, sizin kontrol etmediğiniz bir üçüncü taraf kaynaktan bir görüntü sunduğunuzu varsayalım. SO'daki gravatarımız gibi ... güvenilir olmasına rağmen stackoverflow ekibinin hiç kontrol etmediği bir kaynak olan http://www.gravatar.com/ adresinden sunulur . Http://www.gravatar.com/ düşerse , stackoverflow bunu kullanarak çözebilir onerror.

<kbd>Klavye girişi için biçimlendirilmesinde eleman

Ctrl+ Alt+Del

<blink>

Sitede önemli olan her şey için kullanılmalıdır. En önemli siteler tüm içeriği göz açıp kapayıncaya kadar sarar.

<marquee>

E-kitaplar vb. İçin harika olan gerçekçi bir kaydırma efekti oluşturur.

Düzenleme: Sakin arkadaşlar, bu sadece bir mizah girişimiydi

Çok iyi bilinmemekle birlikte , resmin yüklenmesi sırasında lowsrcgösterilecek resimleri belirtebilirsiniz :lowsrcsrc

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

Bu, taramalı görüntüleri sevmeyenler için iyi bir seçenektir .

Biraz trivia: Bir noktada bu özellik, 2000 dolaylarında Hotmail'den yararlanmak için kullanılacak kadar belirsizdi .

DELve INSsilinen ve eklenen içerikleri işaretlemek için:

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

Düğme etiketi yeni input submitetiket ve birçok insan hala aşina değiller. Düğmedeki metin örneğin düğme etiketi kullanılarak şekillendirilebilir.

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

İki satırlı bir düğme oluşturacak, ilki kalın yazıyla " Tıkla " ve ikincisi "Ben!" Diyor. Burada deneyin .

Yazdırmak için css belirtin

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

<dl> <dt>ve <dd>ürün genellikle unutulan ve onlar Definition List, tanımı Dönemi ve Tanımı anlamını taşımaktadır.

Sırasız bir listeye ( <ul>) benzer şekilde çalışırlar, ancak tekli girişler yerine daha çok bir anahtar / değer listesi gibidir.

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

Tam olarak gizli değil, ama (ve bu IE'nin hatası) benim zevklerime göre yeterince insan thead, tbody, tfoot hakkında bilgi sahibi değil . Ve siz kaç tfoot görünmesi gerekiyordu biliyordu yukarıdaki işaretlemesinde tbody?

wbrVeya kelime-break etiketi. Quirksmode'dan:

(kelime sonu) şu anlama gelir: "Tarayıcı isterse buraya bir satır sonu ekleyebilir." Tarayıcı satır sonunun hiçbir şey olmamasını gerektirdiğini düşünmez.

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

Tarayıcıya satır sonu ekleme seçeneği veriyorum. Tabloda bol alan olduğunda çok büyük çözünürlüklerde buna gerek olmayacaktır. Bununla birlikte, daha küçük çözünürlüklerde, stratejik olarak yerleştirilmiş bu tür satır kesmeleri, tablonun pencereden daha büyük büyümesini ve dolayısıyla yatay kaydırma çubuklarına neden olmasını engeller.

­Aynı sayfada bahsedilen HTML varlığı da var . Bu aynıdır, wbrancak bir kesme eklendiğinde bir sonu -belirtmek için bir hipen ( ) eklenir. Baskıda olduğu gibi.

Bir örnek:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Çok az kullanılan bir özellik, sayfada görünür içerik sağlayan hemen hemen her öğenin bir 'başlık' özelliğine sahip olabilmesidir.

Böyle bir özniteliğin eklenmesi, fare öğenin üzerine 'getirildiğinde' bir 'araç ipucu'nun görünmesine neden olur ve sayfanın çok kalabalık olmasına neden olmayacak şekilde gerekli olmayan - ancak yararlı - bilgiler sağlamak için kullanılabilir. . (Veya zaten kalabalık olan bir sayfaya bilgi eklemenin bir yolu olabilir)

Bir etikete birden çok html / css sınıfı uygulama. Burada aynı gönderi

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

Hepimiz DTD'nin veya Belge Türü Beyanlarını biliyoruz (sayfanızın W3C doğrulayıcısı ile başarısız olmasına neden olan şeyler). Ancak, özel öğeler için bir öznitelik listesi bildirerek DTD'leri genişletmek mümkündür .

Örneğin , etikete eklenmesi nedeniyle W3C doğrulayıcısı bu sayfa için başarısız olacaktır . Ancak, bunu yaparak geçmesini sağlayabilirsiniz:behavior="mouseover"<p>

<!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>
]>

QuirksMode'da Özel DTD'ler hakkında daha fazla bilgi edinin .

Temel 64 kodlanmış dizeyi image, JavaScript, iframe, link için source / href niteliği olarak atayabiliriz

Örneğin

<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>

Referanslar

HTML işaretlemesini kullanarak görüntüleri nasıl oluşturabilirim?

Base64 Encoder / Translator'a İkili Dosya

Yakın zamanda fieldset ve etiket etiketlerini öğrendim. Yukarıdaki gibi, gizli değil ama formlar için kullanışlıdır.

<fieldset> açıklaması

Misal:

<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>

Sayfaya başka bir belge eklemek için bir objectyerine etiketini kullanabilirsiniz iframe:

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

<optgroup>insanların bölümlere ayrılmış <select>listeler hazırlarken genellikle gözden kaçırdığı harika bir seçenektir .

<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>

yerine kullanmanız gereken şey

<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>

Çoğu kişi, basılan form düğmesini sadece bir ad / değer çifti vererek ayırt edebileceğinizin farkında değil. Örneğin

<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>

Sunucu tarafında, basılan gerçek düğme, yalnızca düğme adıyla ilişkili istek parametresinin varlığı kontrol edilerek elde edilebilir. Değilse null, düğmeye basılmıştır.

Gördüğüm çok ait gereksiz JS hack / form eylemi değiştirme veya gizli giriş değerini değiştirerek önceden düğmeye basıldığında bağlı örneğin bunun için geçici çözümler. Bu sadece şaşırtıcı.

Ayrıca, tablo satırlarında olduğu gibi birden çok onay kutusunun işaretli olanlarını toplamak için neredeyse çok sayıda JS hack / geçici çözüm gördüm. Bir tablo satırının her seçiminde / kontrolünde, JS, satır dizinini, daha sonra sunucu tarafında bölünecek / ayrıştırılacak olan gizli bir giriş öğesindeki virgülle ayrılmış bir değere ekler. Bu, birden çok girdi öğesine aynı adı ancak farklı bir değeri verebildiğiniz ve bunlara sunucu tarafında bir dizi olarak erişebildiğinizin farkında olmamanın bir sonucudur . Örneğin

<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>
...

Farkında olmama, her onay kutusuna farklı bir ad verir ve tüm değer özniteliğini atlar. Bazı JS hack / geçici çözüm içermeyen durumlarda , kontrol edilen öğeleri ayırt etmek için sunucu tarafı kodunda gereksiz yere ezici bir sihir de gördüm .

Colgroup etiketi .

<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>

Eğer forbir öznitelik <label>etiketi belirtilmemişse, bu örtük ilk çocuk olarak ayarlanır <input>, yani

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

eşdeğerdir

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

Bağlantı olarak düğme, JavaScript yok :

Form eylemine her tür dosyayı koyabilirsiniz ve bağlantı görevi gören bir düğmeniz vardır. Onclick olaylarını veya benzerlerini kullanmaya gerek yok. Hatta forma bir "hedef" yapıştırarak dosyayı yeni bir pencerede açabilirsiniz. Bu tekniği uygulamada pek görmedim.

Bunu değiştir

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

Bununla:

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

Sayfayı X saniyede yenilemenin en basit yolu - META Yenileme

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

İçerikteki değer, sayfanın yenilenmesini istediğiniz saniyeyi belirtir.
[Düzenle]

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

Basit bir yönlendirme yapmak için!
(Teşekkürler @rlb)

<html>, <head>Ve <body>etiketleri isteğe bağlıdır. Bunları atlarsanız, ayrıştırıcı tarafından uygun yerlere sessizce eklenirler. Bunu HTML'de yapmak tamamen geçerlidir (tıpkı ima edildiği gibi <tbody>).

Teoride HTML , bir SGML uygulamasıdır. Bu muhtemelen en kısa geçerli HTML 4 belgesidir:

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

Yukarıdakiler W3C Doğrulayıcı dışında hiçbir yerde çalışmaz. Bununla birlikte, en kısa geçerli HTML5 text/htmlbelgesi her yerde çalışır:

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

langNitelik çok iyi bilinen ama çok kullanışlı değildir. Öznitelik, içeriğin dilini tüm belgede veya tek bir öğede tanımlamak için kullanılır. Dil kodları, ISO 2 harfli Dil kodunda verilir (yani, İngilizce için 'en', Fransızca için 'fr').

Tırnak işaretlerinin görünümünü vb. Ayarlayabilen tarayıcılar için kullanışlıdır. Ekran okuyucular da lang arama motorlarının yanı sıra öznitelikten de yararlanır .

Site noktası,lang özniteliğin güzel bir açıklamasına sahiptir .

Örnekler

DOM'de langdaha düşük bir düzeydeki başka bir özellik tarafından geçersiz kılınmadıkça, tüm belge için dili İngilizce olarak belirtin .

<html lang="en">

Aşağıdaki paragrafta dili İsveççe olarak belirtin.

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

"! DOCTYPE" beyanı . Bunun gizli bir özellik olduğunu düşünmeyin, ancak çok iyi bilinmese de çok kullanışlı görünüyor.

Örneğin

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