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 .
źródło
file:
protokołu, przeglądarka nie będzie w stanie znaleźć zasobu (np. CDN lub innego zewnętrznego serwera).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.
źródło
Właściwość contentEditable dla (IE, Firefox i Safari)
Dzięki temu komórki będzie można edytować! Śmiało, spróbuj, jeśli mi nie wierzysz.
źródło
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:
źródło
---category---
.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:
Poniżej znajduje się kod i wyniki dla linków z tej strony.
Zwykła kotwica:
Prowadzi do
Teraz, jeśli dodasz tag podstawowy
Kotwica prowadzi teraz do:
źródło
#top
zostanie rozwiązane jako „początek” w głównym dokumencie indeksu i „początek” w tym samym dokumencie.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
.źródło
<kbd>
Element oznakowania się na dane z klawiaturyCtrl+ Alt+Del
źródło
Musi być używany do wszystkiego, co ważne w witrynie. Najważniejsze witryny zawijają całą zawartość w mgnieniu oka.
Tworzy realistyczny efekt przewijania, doskonały do e-booków itp.
Edycja: Wyluzowani, to była tylko próba humoru
źródło
Niezbyt dobrze znane, ale możesz określić
lowsrc
dla obrazów, które będą wyświetlanelowsrc
podczas ładowaniasrc
obrazu: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 .
źródło
DEL
orazINS
aby oznaczyć usunięte i wstawione treści:źródło
<ins>
i<del>
na stronach wersji w pewnym momencie, ale teraz używa<span class="diff-add">
i<span class="diff-delete">
. :(Przycisk tag jest nowy
input submit
tag i wiele osób wciąż nie są zaznajomieni z nim. Na przykład tekst na przycisku można nadać stylowi za pomocą tagu przycisku.Wyrenderuje przycisk z dwiema liniami, pierwsza mówi „ Kliknij ” pogrubioną czcionką, a druga „Ja!”. Spróbuj tutaj .
źródło
button
w IE <8, zadziwiająco wysyła pary nazwa / wartość WSZYSTKICHbutton
elementów.Określ css do drukowania
źródło
<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.źródło
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?
źródło
thead
itfoot
na górze i na dole każdej strony. Szkoda, że nie ma mechanizmu powtarzania sięthead
w przeglądarce, gdy masz długie, długie tabele.wbr
Lub word-break tag. Z Quirksmode:Istnieje również
­
jednostka HTML wspomniana na tej samej stronie. To jest to samo, co,wbr
ale kiedy wstawia się przerwę, dodawany jest myślnik (-
), aby oznaczyć przerwę. Coś jak to się robi w druku.Przykład:
Tekst
źródło
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)
źródło
Stosowanie wielu klas html / css do jednego tagu. Ten sam post tutaj
źródło
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:Zobacz więcej na temat niestandardowych DTD w QuirksMode .
źródło
class
atrybut nie jest wystarczająco rozszerzalny.Możemy przypisać ciąg zakodowany w base 64 jako atrybut source / href obrazu, JavaScript, iframe, link
na przykład
Bibliografia
Jak mogę tworzyć obrazy za pomocą znaczników HTML?
Plik binarny do kodera / translatora Base64
źródło
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:
źródło
Możesz użyć
object
tagu zamiast tagu,iframe
aby dołączyć inny dokument na stronie:źródło
<optgroup>
jest świetnym rozwiązaniem, którego ludzie często pomijają, gdy robią to w segmentach<select>
listy .jest tym, czego powinieneś używać zamiast
źródło
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
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 jest
null
, 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
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.
źródło
<button type="submit">
zamiast<input type="submit">
:)<input type="submit">
? (Moja pamięć o tym problemie jest mglista - już dawno przekonałem pracodawców, aby nie przejmowali się kompatybilnością IE z wewnętrznymi aplikacjami internetowymi, więc to już nie jest mój problem. Ale wydaje mi się, że przypominam sobie pewną barierę uniemożliwiającą rozwiązanie tego problemu w IE6. )Znacznik grupy .
źródło
Jeśli
for
atrybut<label>
znacznika nie jest określony, jest domyślnie ustawiany jako pierwsze dziecko<input>
, tjjest równa
źródło
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
z tym:
źródło
Najprostszy sposób na odświeżenie strony w X sekund - META Refresh
Wartość w treści oznacza sekundy, po których ma zostać odświeżona strona.
[Edytować]
Aby zrobić proste przekierowanie!
(Dzięki @rlb)
źródło
<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:
Powyższe nie działa nigdzie poza W3C Validator. Jednak najkrótszy prawidłowy
text/html
dokument HTML5 działa wszędzie:źródło
<!DOCTYPE html><title></title>
head
/body
, nie tylko z punktu widzenia walidacji?<head>
czasami pomijały DOM, ale główna treść znajdowała się w DOM i mimo to działała. Największym problemem, jaki znalazłem, jest to, że klienci OpenID wymagają<head>
jawnej obecności.Plik
lang
Atrybut 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ących
lang
atrybutu.Przykłady
Określ język jako angielski dla całego dokumentu, chyba że zostanie nadpisany przez inny
lang
atrybut niższego poziomu w DOM.W następnym akapicie określ językiem szwedzkim.
źródło
"! DOCTYPE" deklaracja . Nie myśl, że to ukryta funkcja, ale wydaje się, że nie jest dobrze znana, ale bardzo przydatna.
na przykład
źródło