Ukryte funkcje HTML

HTML będący najczęściej używanym językiem (przynajmniej jako język znaczników) nie zyskał należnego uznania.
Biorąc pod uwagę, że istnieje od tak wielu lat, rzeczy takie jak formanty FORM / INPUT nadal pozostają takie same bez dodanych nowych kontroli.

Więc przynajmniej z istniejących funkcji, czy znasz jakieś funkcje, które nie są dobrze znane, ale bardzo przydatne.

Oczywiście to pytanie jest podobne do:

Ukryte funkcje JavaScript
Ukryte funkcje CSS
Ukryte funkcje C #
Ukryte funkcje VB.NET
Ukryte funkcje Java
Ukryte funkcje klasycznej ASP
Ukryte funkcje ASP.NET
Ukryte funkcje Pythona
Ukryte funkcje TextPada
Ukryte funkcje Eclipse

Nie wspominaj o funkcjach HTML 5.0, ponieważ jest w roboczej wersji roboczej

Określ jedną cechę dla każdej odpowiedzi .

Korzystanie ze ścieżki bezwzględnej niezależnej od protokołu:

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

Jeśli przeglądarka wyświetla stronę z protokołem SSL przez HTTPS, zażąda tego zasobu za pomocą protokołu https, w przeciwnym razie zażąda go za pomocą protokołu HTTP.

Zapobiega to okropnemu komunikatowi o błędzie „Ta strona zawiera zarówno bezpieczne, jak i niezabezpieczone elementy” w IE, utrzymując wszystkie żądania zasobów w tym samym protokole.

Uwaga: IE7 i IE8 używane w <link> lub @import dla arkusza stylów pobierają plik dwukrotnie . Jednak wszystkie inne zastosowania są w porządku.

Znacznik label logicznie łączy etykietę z elementem formularza za pomocą atrybutu „for”. Większość przeglądarek zamienia to w łącze, które aktywuje powiązany element formularza.

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

Właściwość contentEditable dla (IE, Firefox i 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>

Dzięki temu komórki będzie można edytować! Śmiało, spróbuj, jeśli mi nie wierzysz.

Myślę, że tag optgroup to jedna z funkcji, której ludzie nie używają zbyt często. Większość ludzi, z którymi rozmawiam, nie zdaje sobie sprawy, że istnieje.

Przykład:

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

Moim ulubionym bitem jest tag podstawowy, który ratuje życie, jeśli chcesz użyć routingu lub przepisywania adresu URL ...

Powiedzmy, że znajdujesz się pod adresem:

www.anypage.com/folder/subfolder/

Poniżej znajduje się kod i wyniki dla linków z tej strony.

Zwykła kotwica:

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

Prowadzi do

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

Teraz, jeśli dodasz tag podstawowy

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

Kotwica prowadzi teraz do:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror jest zdarzeniem JavaScript, które zostanie uruchomione tuż przed pokazaniem małego czerwonego krzyżyka (w IE).

Możesz użyć tego do napisania skryptu, który zastąpi uszkodzony obraz pewną prawidłową alternatywną treścią, aby użytkownik nie musiał zajmować się problemem czerwonego krzyża.

Na pierwszy rzut oka można to uznać za całkowicie bezużyteczne, ponieważ czy nie wiedziałbyś wcześniej, czy obraz był dostępny w pierwszej kolejności? Ale jeśli weźmiesz pod uwagę, istnieją doskonałe, prawidłowe zastosowania dla tej rzeczy; Na przykład: załóżmy, że udostępniasz obraz z zasobu innej firmy, nad którym nie masz kontroli. Podobnie jak nasz gravatar tutaj w SO ... jest obsługiwany z http://www.gravatar.com/ , zasobu, którego zespół stackoverflow w ogóle nie kontroluje - chociaż jest niezawodny. Jeśli http://www.gravatar.com/ przestanie działać, stackoverflow może obejść ten problem za pomocą onerror.

<kbd>Element oznakowania się na dane z klawiatury

Ctrl+ Alt+Del

<blink>

Musi być używany do wszystkiego, co ważne w witrynie. Najważniejsze witryny zawijają całą zawartość w mgnieniu oka.

<marquee>

Tworzy realistyczny efekt przewijania, doskonały do ​​e-booków itp.

Edycja: Wyluzowani, to była tylko próba humoru

Niezbyt dobrze znane, ale możesz określić lowsrcdla obrazów, które będą wyświetlane lowsrcpodczas ładowania srcobrazu:

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

To dobra opcja dla tych, którzy nie lubią obrazów z przeplotem .

Trochę ciekawostek: w pewnym momencie ta właściwość była na tyle niejasna, że około 2000 roku została wykorzystana do wykorzystania usługi Hotmail .

DELoraz INSaby oznaczyć usunięte i wstawione treści:

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

Przycisk tag jest nowy input submittag i wiele osób wciąż nie są zaznajomieni z nim. Na przykład tekst na przycisku można nadać stylowi za pomocą tagu przycisku.

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

Wyrenderuje przycisk z dwiema liniami, pierwsza mówi „ Kliknij ” pogrubioną czcionką, a druga „Ja!”. Spróbuj tutaj .

Określ css do drukowania

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

<dl> <dt>i <dd>przedmioty są często zapomniane i stoją do listy definicji, definicja termin i definicja.

Działają podobnie do nieuporządkowanej listy ( <ul>), ale zamiast pojedynczych wpisów bardziej przypominają listę kluczy / wartości.

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

Niezupełnie ukryte, ale (i to jest wina IE) za mało ludzi wie o thead, tbody, tfoot jak na mój gust. A ilu z was wiedziało, że stopa powinna pojawiać się nad ciałem w znacznikach?

wbrLub word-break tag. Z Quirksmode:

(Podział tekstu) oznacza: „Przeglądarka może wstawić tutaj znak podziału wiersza, jeśli chce”. Jeśli przeglądarka nie uważa, że ​​przerwanie linii jest konieczne, nic się nie dzieje.

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

Daję przeglądarce możliwość dodania końca wiersza. Nie będzie to konieczne przy bardzo dużych rozdzielczościach, gdy stół ma dużo miejsca. Jednak w mniejszych rozdzielczościach takie strategicznie rozmieszczone podziały wierszy zapobiegają powiększaniu się tabeli niż okno, co powoduje powstawanie poziomych pasków przewijania.

Istnieje również ­jednostka HTML wspomniana na tej samej stronie. To jest to samo, co, wbrale kiedy wstawia się przerwę, dodawany jest myślnik ( -), aby oznaczyć przerwę. Coś jak to się robi w druku.

Przykład:

Tekst

Znacznie niedostatecznie wykorzystywaną funkcją jest fakt, że prawie każdy element, który zapewnia widoczną zawartość na stronie, może mieć atrybut „tytuł”.

Dodanie takiego atrybutu powoduje, że po „najechaniu kursorem myszy” na element pojawia się „podpowiedź” i można jej użyć do podania nieistotnych - ale użytecznych - informacji w sposób, który nie powoduje zbytniego zatłoczenia strony . (Lub może to być sposób na dodanie informacji do już zatłoczonej strony)

Stosowanie wielu klas html / css do jednego tagu. Ten sam post tutaj

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

Wszyscy wiemy o DTD lub deklaracjach typu dokumentu (te rzeczy, które powodują, że strona nie działa z walidatorem W3C). Istnieje jednak możliwość rozszerzenia DTD poprzez zadeklarowanie listy atrybutów dla elementów niestandardowych.

Na przykład walidator W3C zakończy się niepowodzeniem dla tej strony z powodu behavior="mouseover"dodania do <p>tagu. Możesz jednak sprawić, że minie, robiąc to:

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

Zobacz więcej na temat niestandardowych DTD w QuirksMode .

Możemy przypisać ciąg zakodowany w base 64 jako atrybut source / href obrazu, JavaScript, iframe, link

na przykład

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

Bibliografia

Jak mogę tworzyć obrazy za pomocą znaczników HTML?

Plik binarny do kodera / translatora Base64

Niedawno dowiedziałem się o zestawie pól i znacznikach etykiet. Jak wyżej, nie ukryte, ale przydatne do formularzy.

Wyjaśnienie <fieldset>

Przykład:

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

Możesz użyć object tagu zamiast tagu, iframeaby dołączyć inny dokument na stronie:

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

<optgroup> jest świetnym rozwiązaniem, którego ludzie często pomijają, gdy robią to w segmentach <select> listy .

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

jest tym, czego powinieneś używać zamiast

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

Większość nie zdaje sobie również sprawy z tego, że naciśnięty przycisk formularza można odróżnić, po prostu nadając im parę nazwa / wartość. Na przykład

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

Po stronie serwera faktyczny naciśnięty przycisk można następnie uzyskać, po prostu sprawdzając obecność parametru żądania związanego z nazwą przycisku. Jeżeli nie jestnull , przycisk został naciśnięty.

Widziałem wiele z niepotrzebnych JS hacki / obejścia za to, na przykład zmieniając akcję formularza lub zmieniania ukryte wartości wejściowej wcześniej zależności przycisk wciśnięty. To po prostu zadziwiające.

Ponadto widziałem prawie tyle samo hacków / obejść JS, aby zebrać zaznaczone pola wyboru, takie jak w wierszach tabeli. Przy każdym zaznaczeniu / sprawdzeniu wiersza tabeli JS dodawał indeks wiersza do jakiejś wartości oddzielonej przecinkami w ukrytym elemencie wejściowym, który byłby następnie dzielony / analizowany dalej po stronie serwera. Jest to wynikiem nieświadomości, że możesz nadać wielu elementom wejściowym tę samą nazwę, ale inną wartość i że nadal możesz uzyskać do nich dostęp jako tablicę po stronie serwera. Na przykład

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

Nieświadomość nadałaby każdemu polu wyboru inną nazwę i pominęłaby cały atrybut wartości. W niektórych sytuacjach bez hackowania / obejścia w JS widziałem również niepotrzebnie przytłaczającą magię w kodzie po stronie serwera, aby odróżnić zaznaczone elementy.

Znacznik grupy .

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

Jeśli foratrybut <label>znacznika nie jest określony, jest domyślnie ustawiany jako pierwsze dziecko <input>, tj

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

jest równa

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

Przycisk jako link, bez JavaScript :

Możesz umieścić dowolny plik w akcji formularza i masz przycisk, który działa jak łącze. Nie ma potrzeby korzystania ze zdarzeń onclick ani podobnych. Możesz nawet otworzyć plik w nowym oknie, wstawiając w formularzu „cel”. Nie widziałem tej techniki zbyt często w zastosowaniu.

Wymień to

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

z tym:

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

Najprostszy sposób na odświeżenie strony w X sekund - META Refresh

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

Wartość w treści oznacza sekundy, po których ma zostać odświeżona strona.
[Edytować]

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

Aby zrobić proste przekierowanie!
(Dzięki @rlb)

<html>, <head>a <body>tagi są opcjonalne. Jeśli je pominiesz, zostaną one po cichu wstawione przez parser w odpowiednich miejscach. Jest to całkowicie prawidłowe w HTML (tak jak implikowano<tbody> ).

HTML w teorii jest aplikacją SGML. To jest prawdopodobnie najkrótszy poprawny dokument HTML 4:

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

Powyższe nie działa nigdzie poza W3C Validator. Jednak najkrótszy prawidłowy text/htmldokument HTML5 działa wszędzie:

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

Plik langAtrybut nie jest bardzo dobrze znany, ale bardzo przydatna. Atrybut służy do identyfikacji języka treści w całym dokumencie lub w pojedynczym elemencie. Kody języków podane są w dwuliterowym kodzie języka ISO (tj. „En” w przypadku języka angielskiego, „fr” w przypadku języka francuskiego).

Jest to przydatne dla przeglądarek, które mogą dostosować wyświetlanie cudzysłowów itp. Czytniki ekranu również korzystają z rozszerzenia lang atrybutu, podobnie jak wyszukiwarki.

SitePoint posiada kilka wyjaśnień z następującychlang atrybutu.

Przykłady

Określ język jako angielski dla całego dokumentu, chyba że zostanie nadpisany przez inny langatrybut niższego poziomu w DOM.

<html lang="en">

W następnym akapicie określ językiem szwedzkim.

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

"! DOCTYPE" deklaracja . Nie myśl, że to ukryta funkcja, ale wydaje się, że nie jest dobrze znana, ale bardzo przydatna.

na przykład

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