Ukryte funkcje HTML

110

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

Binoj Antony
źródło

Odpowiedzi:

244

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.

Paul Irish
źródło
29
To nie jest funkcja HTML, ale funkcja adresu URL / URI.
Gumbo
44
@Gumbo: To prawda, to funkcja URI, ale doszedłem do wniosku, że wystarczy nagiąć zasady i uwzględnić je tutaj. I nie spodziewam się w najbliższym czasie ukrytych funkcji specyfikacji URI. :)
Paul Irish
2
jeden ukośnik odnosi się do części domeny, a nie protokołu
SztupY
2
IE jest niesamowicie głupi! Dlaczego do cholery, to DL plik dwukrotnie?
5
Jest jedna poważna wada: kiedy plik jest zapisywany na dysku i dostępny za pomocą file:protokołu, przeglądarka nie będzie w stanie znaleźć zasobu (np. CDN lub innego zewnętrznego serwera).
Marcel Korpel
138

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"/>
Brian Reiter
źródło
24
tak, niesamowite, jak niewiele witryn aktywnie z tego korzysta. Widziałem strony używające js do tego ...
Boris Callens,
2
Odkryłem ten całkiem niedawno.
Arnis Lapsa
4
cagdas, w HTML nie ma tak naprawdę ukrytych funkcji, to określony standard.
powiek
54
Aby rozwinąć odpowiedź, można również opakować dane wejściowe etykietą i pominąć atrybut for: <label> Rok podatkowy <input name = "fiscalYear" type = "text" /> </label>
powiek
32
Używanie pól wyboru i przycisków radiowych bez tego powinno być przestępstwem.
Kornel
136

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.

aleemb
źródło
7
Pytanie dotyczy funkcji, które nie zostały wprowadzone w HTML5
Quentin
15
David Dorward, Nie jest do końca sprawiedliwe stwierdzenie, że zostało wprowadzone w HTML5, ponieważ contentEditable zostało wprowadzone przez MS w IE 5.5, ale tak, nie zostało ustandaryzowane aż do HTML5; Tyson & Steve, contentEditable został wprowadzony do Safari w wersji 2.0, ale wiele ważnych metod formatowania zostało dodanych dopiero w 3.x; Victor H. Valle, zależy od twojego typu dokumentu. Po zwinięciu HTML 4 powinien go rozwinąć do = "true".
powiek
2
link „spróbuj to” nie prowadzi do odpowiedniego przykładu
Gordon Gustafson,
4
@Binoj - Absolutnie nie. „Atrybut contenteditable to wyliczany atrybut, którego słowami kluczowymi są pusty ciąg, prawda i fałsz” - w3.org/TR/html5/editing.html
Quentin,
2
Jeszcze lepiej, dodaj następujący skrypt jako bookmarklet, aby umożliwić edycję dowolnej strony internetowej, na której się znajdujesz: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void (0);
Amro
102

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>
Emil
źródło
Niestety implementacja hierarchii menu w przeglądarce pozostawia wiele do życzenia. Podejrzewam, że optgroup nie ma większego zastosowania, ponieważ jego odpowiednie przypadki użycia są nieliczne.
powiek
1
Jeden poziom powinien być obsługiwany we wszystkich przeglądarkach. Forum internetowe Jestem poza innymi, gdzie używa go na niektórych ekranach do podzielenia listy forum na te same sekcje, które są używane na stronie głównej.
staticsan
@staticsan. Zgadzam się, że jest to przydatne w przypadku małej kategoryzacji wielu elementów.
RichardOD,
5
@eyelidlessness: cały czas widzę listy rozwijane, które wciskają elementy lub używają czegoś w rodzaju tekstu „nagłówka” ---category---.
DisgruntledGoat
4
To fajna funkcja, o której nie wiedziałem!
Chrisb
100

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
Dmitri Farkov
źródło
48
Możesz też po prostu użyć /images/image.png, z początkowym ukośnikiem. :-)
molf
46
Tag podstawowy jest opcją nuklearną - jest odpowiednikiem #define: jeśli go nie śledzisz, wyjaśnij to przyszłym programistom i uczyń z niego naprawdę niskopoziomową część architektury witryny, może to prowadzić do frustracji nieoczywiste błędy. Nigdy tego nie potrzebowałem , używaj ostrożnie.
annakata
2
Tak, widziałem również, że znacznik podstawowy koliduje z moim JavaScriptem podczas próby dynamicznego ładowania plików CSS na stronę. Ponadto błąd w IE6 wymaga jawnego zamknięcia tagu (</base>), który jest nieprawidłowy. Mogą w tym pomóc komentarze warunkowe.
avdgaag
4
Należy pamiętać, że podstawowy adres URL jest stosowany do każdego względnego adresu URL, a nie tylko do względnych ścieżek adresu URL. Zatem odniesienie #topzostanie rozwiązane jako „początek” w głównym dokumencie indeksu i „początek” w tym samym dokumencie.
Gumbo
17
Uważam to za niezwykle przydatne w sytuacjach, gdy muszę „wyświetlić źródło” i pobrać kod HTML strony, aby z nią pracować. Po pobraniu źródła możesz dodać element BASE z odpowiednim atrybutem href. W ten sposób możesz pracować lokalnie po pobraniu tylko źródłowego kodu HTML ... nie ma potrzeby pobierania wszystkich skryptów javascript, css i obrazów.
Andy Ford
99
<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.

Daniel Silveira
źródło
Aha ... jeśli tak myślę, powinienem to wiedzieć wcześniej, kiedy naprawdę tego potrzebowałem. : /
Arnis Lapsa
aby wyjaśnić, onerror to zdarzenie javascript (podobnie jak onclick), które pozwala zrobić coś, gdy obraz nie ładuje się.
Jehiah
1
Daniel Silveira, czy wyjaśnisz, że w rzeczywistości powoduje to uruchomienie kodu błędu w przypadku uszkodzonych (np. 404) obrazów? Niezależnie od tego jest to funkcja DOM, a nie funkcja HTML jako taka.
powiek
2
Miałem numpty użyć tego, wskazując na nieistniejący obraz, rekurencyjny ktoś ???
Pharabus
96

<kbd>Element oznakowania się na dane z klawiatury

Ctrl+ Alt+Del

Russ Cam
źródło
Czy jest coś specjalnego w <kbd> poza tym, że jest to inny format czcionki? jeśli nie, to jest lista innych tagów formatujących? w3schools.com/tags/tag_phrase_elements.asp
Your Friend Ken
Nie specjalnie, po prostu nie jestem dobrze znany, nie sądzę
Russ Cam
3
Domyślnie nic, ale oznaczanie elementu za pomocą CSS jest czystsze, tak jak robi to SO.
Agent_9191
1
Nie wiedziałem, że istnieje, to zabawne.
Kzqai
85
<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

Mark Glorie
źródło
62
Być może pytanie powinno było sprecyzować, że nie powinieneś wymieniać funkcji, które chcemy pozostać ukryte.
Ben Blank
12
... Użyłem <blink>, jako części pseudo-terminala dla kodu wyświetlającego div (: before {content: "drthomas @ house: ~ $";}: after {content: "_"; text -decoration: blink;} ... to było niesamowite powinienem prawdopodobnie szukać pomocy =]..
mówi David dozbrojenie Monica
2
<marquee> <blink> NAJBARDZIEJ irytujące znaczniki HTML w historii !!! </blink> </marquee> Nie są one ukryte, po prostu nie są używane z jakiegoś powodu.
Twój przyjaciel Ken
2
Zawijam
3
Proszę. Jedynym legalnym zastosowaniem <blink> jest: kot Schroedingera <blink> nie </blink> jest martwy. (Myślałem, że to na xkcd, ale nie mogę go w tej chwili znaleźć.)
Christopher Creutzig,
84

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 .

aleemb
źródło
Tego nie wiedziałem. Czy można go używać do „ładowania” animacji?
Boris Callens
2
Otrzymuję ostrzeżenie o oszustwie w Operze z linku „wykorzystaj Hotmail”. : o
jrista
2
To witryna bezpieczeństwa, jest bezpieczna.
Joey Robert
27
Ale ten atrybut jest zastrzeżony. msdn.microsoft.com/library/ms534138(VS.85).aspx
Gumbo
17
Ten atrybut jest przestarzały od czasu HTML4 - nie należy go używać w witrynach produkcyjnych.
Ben Hull
67

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

HTML <del>sucks</del> <ins>rocks</ins>!
Gumbo
źródło
10
Zdecydowanie niewystarczająco używane.
powiek
2
@elidlessness: po prostu nie ma wystarczająco dużo sytuacji, w których oznaczanie usuniętego / wstawionego tekstu jest tak przydatne.
DisgruntledGoat
2
Mógłbym przysiąc, że StackOverflow używał <ins>i <del>na stronach wersji w pewnym momencie, ale teraz używa <span class="diff-add">i <span class="diff-delete">. :(
system PAUSE
1
Historia zmian @DisgruntledGoat wiki? wiele zastosowań dla tego
HorusKol
3
@Horus: z pewnością można znaleźć zastosowania, ale w ogólnym schemacie nie jest to duża liczba sytuacji.
DisgruntledGoat
58

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 .

aleemb
źródło
15
Szkoda, że ​​jest zepsuty w IE <8. Możliwe jest obejście problemów, ale może to być bolesne, a czasami trafiasz na ochronę bezpieczeństwa działającą między serwerem WWW a środowiskiem programistycznym po stronie serwera.
Quentin
6
Ale IE <8 poda zawartość elementu, a nie jego wartość. Uważam, że niektóre wersje zawsze będą traktować to jako udaną kontrolę (nawet jeśli nie została kliknięta).
Quentin
4
A jeśli sprawisz, że będzie to <przycisk treści do edycji>, możesz także zmienić tekst przycisku! Wskazuje na każdego, kto mógłby znaleźć dla niego prawidłowe zastosowanie. :)
Gavin
4
Nigdy nie rozumiałem, dlaczego istnieje typ przesyłania „wejściowego”. Nie wprowadza niczego, po prostu przesyła to, co wprowadziłeś w innych polach.
DisgruntledGoat
3
@DisgruntledGoat: jego para nazwa / wartość zostanie faktycznie wysłana. Przydatne, jeśli masz więcej niż jeden przycisk w formularzu (np. Edytuj, usuń, przesuń w górę itp.) I chcesz odróżnić naciśnięty przycisk. Niestety to samo nie działa buttonw IE <8, zadziwiająco wysyła pary nazwa / wartość WSZYSTKICH buttonelementów.
BalusC
56

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" />
Binoj Antony
źródło
1
Odkryłem to kilka tygodni temu
Daniel Moura,
41
Niezbyt ukryte imo.
Dmitri Farkov
To jest w powszechnym użyciu.
UpTheCreek
Jeśli nie zajmowałeś się tym wcześniej, mam nadzieję, że nie
tworzyłeś
jak można to uznać za ukryte?
Marin
54

<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>
Jehiah
źródło
Dodatkowo semantyka dl / dt / dd jest odpowiednia dla podobnych list (np. Struktura została zalecana dla dialogów).
powiek
2
Domyślna prezentacja nie jest zbyt ładna, ale ludzie zapominają, że elementy można stylizować na wiele sposobów za pomocą CSS.
DisgruntledGoat
18
Bardziej interesującą rzeczą, o której często się zapomina, jest to, że format to klucz / wartość / wartość / wartość / wartość / klucz / wartość
Quentin,
1
@D_N, myślę, że różnica polega na tym, że uważam sugerowane zastosowania za część definicji i semantyki, a nie oddzielne od niej i sprzeczne z nią.
powiek
1
@D_N i @eyelidlessness - zapoznaj się z notatką Bruce'a Lawsona na temat semantycznego oznaczania konwersacji ... ponadto jury nadal nie pracuje nad elementem dialogowym HTML5 ... brucelawson.co.uk/2006/…
Fenton
52

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?

annakata
źródło
1
Boris Callens, Tak, zakłada się, że nie ma nikogo z ciała, ciała ani stopy.
powiek
2
Gdyby IE5 poprawnie zaimplementował TBODY, więcej ludzi by z niego korzystało. To był główny problem kilka lat temu. Mozilla i Opera wspierały przewijanie TBODY, co było naprawdę fajne; niestety IE5 nie.
staticsan
9
Są przydatne do drukowania, ponieważ powinny umieszczać theadi tfootna górze i na dole każdej strony. Szkoda, że ​​nie ma mechanizmu powtarzania się theadw przeglądarce, gdy masz długie, długie tabele.
DisgruntledGoat
1
Wiedziałem, że stopa przewyższyła ciało i myślę, że to dość głupie. Umieściłem mój tfoot poniżej, gdzie to miało sens, dostałem błąd walidatora, przeniosłem tfoot nad tbody (zdezorientowany, ale zawsze zgodny) i zgadnij co ?! Kiedy próbujesz podświetlić stół, przeglądarka (przynajmniej FF) podświetla stopę PRZED ciałem, mimo że wizualnie znajduje się poniżej ciała! I wtedy!!! kiedy kopiujesz go do edytora tekstu, wizualnie jest POWYŻEJ ciała. Całkowicie arbitralna zasada.
Anthony
3
@Anthony: ma sens, jeśli masz wolne połączenie, oznacza to, że możesz zobaczyć wszystkie nagłówki i stopki podczas ładowania zawartości tabeli.
me_and
50

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ż &shy;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

aleemb
źródło
2
Uważaj, ponieważ ta przeglądarka jest słabo obsługiwana
Christophe Eblé
7
"IE8 jak IE8" nie obsługuje tego i jest wadliwy w przeglądarce Safari 3.0 dla Windows. Poza tym wsparcie jest całkiem dobre. Zapoznaj się z tabelą zgodności w linku.
aleemb
Hmm, odniesienie do punktu witryny oznaczyło ten tag jako wycofany i bezużyteczny, kto ma rację? reference.sitepoint.com/html/wbr
Christophe Eblé
Może być przestarzały jako część specyfikacji HTML, ale nadal działa w przeglądarkach. W razie wątpliwości postępuj zgodnie z werdyktem QuirksMode (tabele zgodności są teraz sponsorowane przez Google).
aleemb
Wygląda na to, że byłoby to bardzo przydatne do uwzględnienia w następnym standardzie CSS!
James
43

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)

belugabob
źródło
Tak, atrybut „tytuł” ​​jest całkiem przydatny - zwłaszcza w przypadku elementów, które mają być klikane.
Steve Harrison
6
Wyświetlana podpowiedź jest specyficzna dla przeglądarki. Nie wszystkie przeglądarki będą wyświetlać ten sam atrybut tytułu. Ale to fajna funkcja, z której na pewno korzystam.
Travis
8
Atrybut tytułu jest przydatny, ale tylko wtedy, gdy jest odpowiednio używany. Większość przeglądarek renderuje podpowiedź tylko przez kilka sekund, zanim zniknie. Nienawidzę, gdy projektanci czują potrzebę wypełnienia atrybutu tytułu 3 lub 4 wierszami tekstu, co powoduje, że musisz najechać kursorem myszy, a następnie ponownie włączyć kursor myszy, aby przeczytać resztę.
ksiądz
Używanie tego w połączeniu z jQuery to niesamowita rzecz.
Levi Morrison
Levi - czy możesz podać przykłady?
belugabob
38

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>
Binoj Antony
źródło
22
To są klasy HTML, a nie klasy CSS. CSS nie ma klas (ma selektory klas). Klasy HTML są przydatne do innych rzeczy niż CSS.
Quentin
36
Łał! Po prostu nie mogę zapomnieć o tym, że ludzie uważają to za „ukrytą” funkcję. Chłopcze, czy czuję się głupio, umieszczając kilka „naprawdę ukrytych” funkcji, ponieważ ludzie, którzy to głosowali, prawdopodobnie nawet nie będą w stanie zrozumieć, co oznacza rozszerzenie DTD.
aleemb
5
d03boy, p.foo, p.var to nie to samo co p.foo.bar. Pierwsza wybiera dowolny akapit z klasą „foo” lub „var”, druga wybiera akapit z obiema klasami.
powiek
5
Sprawa dotycząca klas HTML jest dobra, ponieważ przenosi mnie do punktu - html nie powinien być świadomy css .. „powinieneś” być w stanie stworzyć html i przekazać go projektantowi, który może zaimplementować swój projekt bez potrzeba zmiany kodu HTML (jeszcze niezupełnie;)) .. więc sprowadza się to do nazewnictwa i sposobu używania klas .. nie twórz klas, które będą kierować właściwościami css .. używaj klas do identyfikowania, czym jest element ”.
meandmycode
1
Technicznie rzecz biorąc, „Foo Bar BlackBg” to pojedyncza klasa, a p.foo to po prostu cukier syntaktyczny dla p [class ~ = foo] (patrz specyfikacja ). Jednak łatwiej o tym myśleć jako o wielu zajęciach.
Tgr
34

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 .

aleemb
źródło
10
Oczywiście oznacza to, że jest to „Prawidłowy: Twój niestandardowy język znaczników”, a nie „Przejściowy XHTML 1.0”
Quentin,
3
+1. Nie wiem, dlaczego to było -1. W każdym razie należy zauważyć, że obsługa przeglądarek jest prawie zerowa.
powiek
Jestem całkiem pewien, że Opera to obsługuje.
Rich Bradshaw
2
@eyelidlessness działa tylko w XHTML. Nie działa w wymyślonym XHTML wysłanym jako tekst / HTML.
Kornel
2
Eesh, nie jestem fanem tego. Dla mnie wartością HTML jest to, że wszyscy na świecie wiedzą, co to znaczy (mniej więcej), ponieważ wszyscy używamy tych samych tagów i atrybutów. Nie jestem pewien, dlaczego ten classatrybut nie jest wystarczająco rozszerzalny.
Paul D. Waite
28

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

Xinus
źródło
4
Niestety, IE <8 tego nie obsługuje. Możesz jednak użyć MHTML zamiast dla tych przeglądarek: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Mathias Bynens,
26

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>
Emil
źródło
Proszę podać próbkę, użyj tego.
Binoj Antony
Odkryto zestaw pól z przykładowej strony aspnet mvc. ^^
Arnis Lapsa
2
Nie wiedziałem o tym. Oto specyfikacja W3c
MitMaro
Zbiory pól i legendy są świetne. Naprawdę fajny sposób na oznaczanie formularzy.
Neil Aitken
25

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>
Zach
źródło
57
Co kończy się działaniem prawie dokładnie tak, jak iframe, z wyjątkiem tego, że jest mniej dobrze obsługiwany i ma mniej funkcji.
Quentin
iframe jest przestarzałe, miejmy nadzieję, że wkrótce otrzymamy lepsze wsparcie,
Gordon Gustafson
12
iframe nie jest przestarzała w HTML 5.
Zach,
Czy zapobiega atakom XSS z osadzonej strony?
anonimowy tchórz
1
Uważam, że używa SOP, tak samo jak w przypadku ramek iframe.
Zach
25

<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>
Justina Johnsona
źródło
25

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.

BalusC
źródło
1
Hej ... To najwyraźniej kolejna ukryta funkcja HTML: /;)
BalusC
1
Jeśli formularz ma wiele przycisków przesyłania, a użytkownik kliknie jeden z nich, niektóre wersje programu Internet Explorer wesoło poinformują serwer, że wszystkie zostały kliknięte. Wspaniale.
detly
1
@detly: tylko jeśli używasz <button type="submit">zamiast <input type="submit">:)
BalusC
1
... buuuuut czy IE6 też nie ma problemów z <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. )
detly
2
To nie jest zbyt przyjazne dla i18n.
zneak
22

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>
çağdaş
źródło
15
Z mojego doświadczenia wynika, że ​​wsparcie grupowe jest w najlepszym razie niestabilne.
powiek
uderzająco podobny jest WPF Grid
Binoj Antony
18

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">
moo
źródło
4
Ale to cieszy się mniejszą obsługą przeglądarki niż atrybut for
Quentin,
4
@David - Czy masz jakąś dokumentację, która to potwierdza? Nie sądzę, żebym kiedykolwiek widział przeglądarkę, która nie obsługuje tego zastosowania. Osobiście testowałem w IE6 / 7, FF2 / 3, Safari 3 i Chrome 1/2. Nie testowałem się w Operze, ale byłbym bardzo zaskoczony, gdyby to nie zadziałało. To zachowanie jest częścią oryginalnej specyfikacji HTML 4.0, opublikowanej po raz pierwszy ponad jedenaście lat temu: w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
Ben Blank
Nie można też umieszczać wejścia wewnątrz etykiety, a DOH nie zamknąłeś tagu wejściowego w żadnym z przykładów!
Anthony
5
Mylisz się w obu przypadkach: jest to prawidłowa praktyka, a tag końcowy nie może zawierać elementów wejściowych.
moo
15

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>
Wadih M.
źródło
27
Przycisk nie będzie miał opcji „Zapisz plik jako”, która może być potrzebna użytkownikom, którym nie podoba się Adobe Acrobat przejmujący kontrolę nad ich przeglądarką.
Kornel
Zachowa się z domyślnym zachowaniem przeglądarki podczas uzyskiwania dostępu do pliku PDF. Może to być plik HTML, plik tekstowy, plik zip lub cokolwiek innego.
Wadih M.,
W jakiej sytuacji tag kotwicy wymaga zdarzenia onclick? i dlaczego 3 linie html byłyby lepsze niż 1? Czy pomysł, że możesz mieć przycisk zamiast linku, więc jest ładny i podobny do przycisku? Mimo że wydaje mi się to dziwne, w rzeczywistości mam stronę, która używa przycisków zamiast linków, ponieważ plik jest tworzony dynamicznie, gdy użytkownik o to poprosi, więc nie chciałem, aby link do: blah.php? Stuff = "userdata" Mimo że mogłem pójść tą drogą, nie chciałem ryzykować, że nazwa pliku będzie miała skrypt generujący plik jako nazwę zamiast nazwy pliku, którą skrypt nadaje plikowi.
Anthony
1
Dlaczego nie nadać tagu <a> po prostu stylu przycisku? Wygląda na to, że w twoim znaczniku jest dużo śmieci.
UpTheCreek
2
@UpTheCreek niektóre aplikacje internetowe chcą wyglądać tak samo jak system operacyjny. Np. Brzydki przycisk, gdy użytkownik korzysta z systemu Windows, i piękny przycisk, gdy użytkownik używa Mac OS X.
13

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)

Binoj Antony
źródło
13
Oczywiście ustalenie, które elementy wymagają odświeżenia, a następnie zaktualizowanie ich przez AJAX skutkuje znacznie przyjemniejszym doświadczeniem użytkownika ...
Steve Harrison,
11
Odświeżanie META tak naprawdę nie robi nic dobrego na stronach, na których występuje również pewien rodzaj aktywności użytkownika w formularzach, ponieważ może przerwać wypełnianie formularza przez użytkownika i porzucić całą pracę. Myślę, że rzadko zdarza się okazja, aby tego rodzaju odświeżenia były najlepsze. Zwykle jest to po prostu łatwe wyjście.
Robert Koritnik
11
/ me nienawidzi stron, które odświeżają się w ten sposób ... powinny zostać zbanowane = /
Svish
3
Może to być również przydatne, jeśli jest ustawione na nieco mniej niż limit czasu sesji, aby powiadomić użytkownika, że ​​jego sesja wygasła i została usunięta.
fforw
1
Przycisk cofania krótkich limitów czasu.
Kornel
12

<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>
porneL
źródło
4
Powinieneś uważać, co reklamujesz. Powyższy kod przejdzie walidację z 4 ostrzeżeniami w walidatorze w3c, ale DocType to HTML 4.0. To całkiem fajne, że HTML 4 jest pochodną SGML i dlatego utrzymuje ten luźny standard walidacji, ale jeśli zmienisz to DTD na XHTML 1.0 STRICT, otrzyma 15 błędów, co jest prawie równe liczbie znaków. XHTML został opracowany, ponieważ HTML był tak leniwy (i przez to niezabezpieczony), więc nie chcemy już z tego korzystać.
Anthony
3
Jeśli zmienisz DOCTYPE dokumentu HTML / SGML na XHTML / XML, otrzymasz bezsensowną mieszankę. To dość oczywiste i nie jestem pewien, dlaczego na to zwracasz uwagę.
Kornel
3
Ten przykład może technicznie być prawidłowym HTML 4, ale przeglądarki nie obsługują tej skróconej składni SGML. Poniżej znajduje się najkrótszy prawidłowy dokument HTML 5, który przeglądarki faktycznie obsługują:<!DOCTYPE html><title></title>
Brian Campbell,
Masz pomysł, jak kompatybilne jest pominięcie head/ body, nie tylko z punktu widzenia walidacji?
kibibu
@kibibu: Przeglądarki nie mają z tym problemów. Stare wersje Opery <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.
Kornel
11

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>
Erik Töyrä
źródło
10

"! 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">
Xn0vv3r
źródło
10
Nie wspominając o „obowiązkowym dla większości obecnych języków znaczników i bez jednego nie można wiarygodnie zweryfikować dokumentu” ... validator.w3.org/docs/help.html#faq-doctype
Svish
Nie sądzę, że jest to już „mało znane”. W okresie między IE 6 a IE 7 użycie doctype wzrosło z ~ 1% do> 50%.
powiek
@eyelidlessness Większość IDE zawiera ten tag, dlatego jego użycie wzrosło. Myślę, że ten tag nie jest dobrze znany.
Daniel Moura
6
A użycie ścisłego typu dokumentu naprawia 95% niespójności przeglądarek.
DisgruntledGoat
3
Część standardu i używana przez 99% programistów nie brzmi jak „ukryta funkcja”.
WhyNotHugo