Ściągawka HTML i CSS: z wyszukiwarką, do druku, z demami | We.Inc
Przeszukaj wszystkie popularne znaczniki HTML i właściwości CSS w jednej ściągawce: układ semantyczny, tekst, formularze, media, selektory, jednostki, układ i wygląd, z małymi demami na żywo i układem przyjaznym do druku.
Ściągawka HTML i CSS
Ta ściągawka zawiera znaczniki HTML i właściwości CSS używane na niemal każdej stronie, pogrupowane według zadania: konfiguracja dokumentu, układ semantyczny, tekst, listy, media, formularze, selektory, jednostki, układ i styl wizualny. Wpisz coś w filtrze, aby znaleźć wpis, otwórz małe demo, aby zobaczyć go w działaniu, albo naciśnij Drukuj, aby otrzymać czystą wersję papierową.
Co zawiera ściągawka
Część
Wpisy
HTML
CSS
Z demem na żywo
Filtruj według słowa kluczowego lub przełączaj między HTML a CSS, a lista zawęża się podczas pisania. Wpisy z demem otwierają mały podgląd w piaskownicy. Układ do druku ukrywa elementy sterujące i trzyma tabelę każdej grupy razem na stronie.
Wpisz w pole filtra znacznik, właściwość lub zadanie, na przykład table, sticky lub email.
Zawęź do HTML lub CSS przyciskami albo zostaw włączone oba.
Naciśnij Pokaż demo przy wpisie, aby zobaczyć go wyrenderowanego, i Kopiuj, aby pobrać składnię.
Naciśnij Drukuj, aby otrzymać wersję papierową lub PDF bez elementów interfejsu strony.
Zanim sięgniesz po div, użyj elementu semantycznego. header, nav, main i footer dają czytnikom ekranu punkty orientacyjne za darmo.
Każda kontrolka formularza potrzebuje etykiety. Tekst placeholdera znika podczas pisania i jej nie zastępuje.
Zaczynaj każdy arkusz stylów od box-sizing: border-box dla wszystkiego. Szerokości oznaczają wtedy to, czego się spodziewasz.
Używaj rem dla rozmiarów czcionek i odstępów, które mają podążać za ustawieniem tekstu czytelnika, a px dla cienkich obramowań.
Najczęściej zadawane pytania
Ile jest znaczników HTML?
HTML Living Standard definiuje znacznie ponad sto elementów, ale codzienne strony używają kilkudziesięciu. Ta ściągawka obejmuje te, które spotkasz na niemal każdej stronie; MDN prowadzi pełne kompendium elementów.
Czym różni się znacznik od elementu?
Znacznik to kod, który wpisujesz, na przykład <p> lub </p>. Element to całość, którą przeglądarka z niego buduje: znacznik otwierający, jego zawartość i znacznik zamykający. Elementy puste, takie jak <img> i <br>, w ogóle nie mają znacznika zamykającego.
Czy mogę wydrukować tę ściągawkę?
Tak. Przycisk Drukuj otwiera okno drukowania przeglądarki z układem, który pomija filtr, przyciski i dema, a zachowuje tabele ze składnią. Wybierz Zapisz jako PDF, aby zachować cyfrową kopię.
Czy najpierw uczyć się CSS, czy frameworka takiego jak Tailwind?
Najpierw naucz się właściwości CSS. Frameworki narzędziowe są dla nich skrótem, więc wiedza, że p-4 oznacza padding: 1rem, ułatwia pracę z frameworkiem, a debugowanie w narzędziach deweloperskich zawsze pokazuje CSS, który jest pod spodem.
Jak HTML i CSS dzielą się pracą
HTML mówi, czym jest każdy fragment treści: nagłówkiem, listą, polem formularza, blokiem nawigacji. CSS mówi, jak wygląda i gdzie się znajduje. Rozdzielenie ich oznacza, że jeden arkusz stylów może zmienić wygląd setek stron, a kod pozostaje czytelny dla wyszukiwarek i technologii wspomagających.
Gdy nie wiesz, którego elementu użyć, zastanów się, jak nazywałaby się ta treść w drukowanym dokumencie. Lista kroków to ol, zestaw faktów to dl lub table, notka na marginesie to aside.
Jak czytać reguły CSS
Reguła to selektor, a po nim nawiasy klamrowe z parami właściwość i wartość rozdzielonymi średnikami. Gdy dwie reguły dotyczą tego samego elementu, wygrywa selektor o większej specyficzności; jeśli jest remis, wygrywa ta, która występuje później w arkuszu stylów.
Wszystko razem na jednej małej stronie
Kod semantyczny plus kilka linii CSS
Nagłówek, główna treść z formularzem i stopka, ostylowane garstką właściwości ze ściągawki.
Pierwsza linia każdej strony; włącza tryb standardów
Element główny; lang ustawia język strony
Metadane, tytuł, odnośniki do CSS i skryptów
Kodowanie, viewport, opis i tagi społecznościowe
Podłącza arkusze stylów, ikony i preloady
Wczytuje JavaScript; defer uruchamia go po parsowaniu
Wstęp lub górny pasek strony albo sekcji
Blok głównych linków nawigacyjnych
Unikalna główna treść; jedna na stronę
Tematyczna grupa treści, zwykle z nagłówkiem
Samodzielna treść, taka jak wpis lub karta produktu
Powiązana, ale drugorzędna treść, jak pasek boczny
Informacje końcowe: kontakt, kwestie prawne, linki
Natywny widżet rozwijany, bez skryptu
Okno dialogowe modalne lub niemodalne
Nagłówki w kolejności; normą jest jeden h1 na stronę
Akapit
Silna waga i wyróżnienie, domyślnie pogrubienie i kursywa
Wyróżniony tekst
Kod w tekście i bloki preformatowane
Dłuższy cytat
Skrót z rozwinięciem
Data lub godzina czytelna dla maszyn
Łamanie wiersza w tekście; podział tematyczny między blokami
Listy nieuporządkowane i uporządkowane
Lista opisowa par nazwa i wartość
Dane tabelaryczne z podpisem, nagłówkiem i treścią
Komórka nagłówka; scope łączy ją z kolumną lub wierszem
Link; dodaj target i rel dla nowych kart
Obraz; oczekiwane są alt, width i height
Kierowanie kadrem i formaty zapasowe
Samodzielne media z podpisem
Osadzone wideo
Osadza inną stronę
Grafika wektorowa w kodzie
Otacza pola i wysyła je
Nazywa kontrolkę; kliknięcie ustawia na niej fokus
Tekst, e-mail, liczba, data, pole wyboru, przycisk opcji i więcej
Lista rozwijana
Wielowierszowe pole tekstowe
Przycisk; ustaw type, aby uniknąć przypadkowego wysłania
Grupuje powiązane kontrolki pod podpisem
Wbudowane sprawdzanie przed wysłaniem
Selektory nazwy elementu, klasy i ID
Dowolna głębokość lub tylko bezpośrednie dzieci
Następne rodzeństwo lub dowolne późniejsze rodzeństwo
Dopasowuje po obecności lub wartości atrybutu
Stany najechania kursorem i fokusu z klawiatury
Wybiera elementy według pozycji
Dopasowanie rodzica i grupowanie selektorów
Generowana treść przed elementem lub po nim
Bezwzględny piksel CSS
Względem rozmiaru czcionki elementu głównego / rozmiaru czcionki elementu
Względem rodzica (który wymiar, zależy od właściwości)
Jednostki viewportu; dvh uwzględnia paski narzędzi na telefonach
Szerokość znaku 0, przydatna przy długości wiersza
Udział w wolnej przestrzeni siatki
Płynna wartość między minimum a maksimum
Szerokość obejmuje padding i obramowanie
Odstęp na zewnątrz i wewnątrz obramowania
Jak pole uczestniczy w układzie
Jednowymiarowe wiersze lub kolumny
Dwuwymiarowe wiersze i kolumny
Wyjmuje pole z normalnego przepływu lub przypina je w nim
Kolejność nakładania elementów pozycjonowanych
Co dzieje się z treścią, która się nie mieści
Style dla rozmiaru ekranu lub preferencji
Kolor tekstu i tło
Grubość, rozmiar, wysokość linii i rodzina w jednej linii
Obramowanie i zaokrąglone rogi
Cień wokół pola
Przezroczystość całego elementu
Przesuwanie, obracanie, skalowanie lub pochylanie bez wpływu na układ