Ściągawka z podstaw HTML: tagi, atrybuty i więcej

Tworzenie stron internetowych zaczyna się od HTML. Upiększanie ich i nadawanie im interaktywności przychodzi później. Jednak aby zacząć tworzyć funkcjonalne, statyczne strony internetowe, potrzebujesz zrozumienia języka HTML. (Chcesz krótkie wprowadzenie do tego języka znaczników? Przeczytaj nasze Często zadawane pytania na temat HTML.)

W ramach nauki języka istnieje długa lista elementów, które musisz dodać do swojego słownika HTML. I to zadanie może początkowo wydawać się zniechęcające, dlatego wymyśliliśmy poniższą ściągawkę. Daje Ci łatwy sposób na odkrycie/zrozumienie/przywołanie elementów HTML w dowolnym momencie, gdy ich potrzebujesz.

Ściągawka obejmuje tagi i atrybuty do tworzenia struktur stron internetowych, formatowania tekstu, dodawania formularzy, obrazów, list, linków i tabel. Zawiera również tagi, które zostały wprowadzone w kodach HTML5 i HTML dla powszechnie używanych znaków specjalnych.

DARMOWE POBIERANIE: Ta ściągawka jest dostępna jako PDF do pobrania od naszego partnera dystrybucyjnego, TradePub. Będziesz musiał wypełnić krótki formularz, aby uzyskać do niego dostęp tylko po raz pierwszy. Pobierać

Ściągawka z podstawami HTML.

Ściągawka z podstawami HTML

... ... ... ... ...

...

Skrót	Akcja
Podstawowe Tagi
...	Pierwszy i ostatni znacznik dokumentu HTML. Wszystkie inne znaczniki znajdują się pomiędzy znacznikami otwierającymi i zamykającymi.
...	Określa kolekcję metadanych dokumentu.
	Opisuje tytuł strony i pojawia się na pasku tytułu przeglądarki.
...	Obejmuje całą zawartość, która będzie wyświetlana na stronie internetowej.
Informacje o dokumencie
Wskazuje podstawowy adres URL i wszystkie względne łącza do dokumentu.
Aby uzyskać dodatkowe informacje o stronie, takie jak autor, data publikacji itp.
Łącza do elementów zewnętrznych, takich jak arkusze stylów.
	Zawiera informacje o stylu dokumentu, takie jak CSS (Kaskadowe arkusze stylów).
	Zawiera linki do zewnętrznych skryptów.
Formatowanie tekstu
... LUB ...	Pogrubia tekst.
...	Kursywa i pogrubienie tekstu.
...	Zapisuje tekst kursywą, ale nie czyni go pogrubionym.
...	Tekst przekreślony.
...	Cytuje autora cytatu.
...	Etykietuje usuniętą część tekstu.
...	Pokazuje sekcję, która została wstawiona do treści.
...	Do wyświetlania cytatów. Często używany z etykietka.
...	Dla krótszych cytatów.
...	Dla skrótów i pełnych form.
...	Określa dane kontaktowe.
...	Definicje.
...	W przypadku fragmentów kodu.
...	Do pisania indeksów
...	Do pisania indeksów górnych.
...	Do zmniejszania rozmiaru tekstu i oznaczania zbędnych informacji w HTML5.
Struktura dokumentu
...	Różne poziomy nagłówków. H1 jest największym, a H6 najmniejszym.
...	Do dzielenia treści na bloki.
...	Zawiera elementy wbudowane, takie jak obraz, ikona, emotikon, bez rujnowania formatowania strony.
...	Zawiera zwykły tekst.
	Tworzy nową linię.
	Rysuje poziomy pasek, aby pokazać koniec przekroju.
Listy
...	Dla uporządkowanej listy pozycji.
...	Dla nieuporządkowanej listy pozycji.
...	Dla poszczególnych pozycji na liście.
...	Lista pozycji z definicjami.
...	Definicja pojedynczego terminu w treści treści.
...	Opis zdefiniowanego terminu.
Spinki do mankietów
...	Znacznik kotwicy dla hiperłączy.
...	Tag do łączenia z adresami e-mail.
...	Zakotwicz znacznik do wyświetlania numerów kontaktowych.
...	Zakotwiczony tag do linkowania do innej części tej samej strony.
...	Przechodzi do sekcji div na stronie internetowej. (Odmiana powyższego tagu)
Obrazy
	Do wyświetlania plików graficznych.
Atrybuty dla etykietka
src=”url”	Link do ścieżki źródłowej obrazu.
alt=”tekst”	Tekst wyświetlany po najechaniu myszą na obraz.
wysokość=” ”	Wysokość obrazu w pikselach lub procentach.
szerokość=” ”	Szerokość obrazu w pikselach lub procentach.
wyrównaj=” ”	Względne wyrównanie obrazu na stronie.
granica=” ”	Grubość obramowania obrazu.
	Link do mapy, którą można kliknąć.
	Nazwa obrazu mapy.
Obszar obrazu mapy obrazu.
Atrybuty dla etykietka
kształt=””	Kształt obszaru obrazu.
współrzędne =” ”	Współrzędne obszaru obrazu mapy.
Formularze
...	Znacznik nadrzędny formularza HTML.
Atrybuty dla etykietka
akcja=”adres URL”	Adres URL, pod którym przesyłane są dane formularza.
metoda=” ”	Określa protokół przesyłania formularza (POST lub GET).
enctype=” ”	Schemat kodowania danych dla zgłoszeń POST.
autouzupełnienie	Określa, czy autouzupełnianie formularza jest włączone, czy wyłączone.
nowalidat	Określa, czy formularz powinien zostać zweryfikowany przed przesłaniem.
akceptuj zestawy znaków	Określa kodowanie znaków do przesyłania formularzy.
cel	Pokazuje, gdzie zostanie wyświetlona odpowiedź na przesłanie formularza.
...	Grupuje powiązane elementy w formularzu/
...	Określa, co użytkownik powinien wpisać w każdym polu formularza.
...	Podpis elementu zestawu pól.
Określa typ danych wejściowych do pobrania od użytkownika.
Atrybuty dla etykietka
typ=””	Określa typ danych wejściowych (tekst, daty, hasło).
imię=””	Określa nazwę pola wejściowego.
wartość=””	Określa wartość w polu wejściowym.
rozmiar=””	Ustawia liczbę znaków w polu wejściowym.
maksymalna długość=””	Ustawia limit dozwolonych znaków wejściowych.
wymagany	Sprawia, że ​​pole wejściowe jest obowiązkowe.
szerokość=””	Ustawia szerokość pola wejściowego w pikselach.
wysokość=””	Ustawia wysokość pola wejściowego w pikselach.
symbol zastępczy =””	Opisuje oczekiwaną wartość pola.
wzór=””	Określa wyrażenie regularne, którego można użyć do wyszukiwania wzorców w tekście użytkownika.
min=””	Minimalna wartość dozwolona dla elementu wejściowego.
max=””	Maksymalna wartość dozwolona dla elementu wejściowego.
wyłączone	Wyłącza element wejściowy.
...	Do przechwytywania dłuższych ciągów danych od użytkownika.
...	Określa listę opcji, z których użytkownik może wybierać.
Atrybuty dla etykietka
imię=””	Określa nazwę listy rozwijanej.
rozmiar=””	Liczba opcji przyznanych użytkownikowi.
wiele	Określa, czy użytkownik może wybrać wiele opcji z listy.
wymagany	Określa, czy wybór opcji jest konieczny do przesłania formularza.
autofokus	Określa, że ​​lista rozwijana automatycznie staje się aktywna po załadowaniu strony.
...	Definiuje pozycje na liście rozwijanej.
wartość=””	Wyświetla tekst dla dowolnej danej opcji.
wybrany	Ustawia wyświetlaną opcję domyślną.
...	Tag do tworzenia przycisku do przesłania formularza.
Obiekty i ramki iFrame
	Opisuje osadzony typ pliku.
Atrybuty dla
wysokość=””	Wysokość obiektu.
szerokość=””	Szerokość obiektu.
typ=””	Typ mediów, które zawiera obiekt.
	Wbudowana ramka do osadzania informacji zewnętrznych.
imię=””	Nazwa iFrame.
src=””	Źródłowy adres URL treści w ramce.
dokumentacja =””	Zawartość HTML w ramce.
wysokość=””	Wysokość ramki iFrame.
szerokość=” ”	Szerokość ramki iFrame.
Dodaje dodatkowe parametry, aby dostosować ramkę iFrame.
...	Osadza zewnętrzną aplikację lub wtyczkę.
Atrybuty dla
wysokość=””	Ustawia wysokość osadzenia.
szerokość=” “	Ustawia szerokość osadzania.
typ=””	Typ lub format osadzania.
src=””	Ścieżka źródłowa osadzonego pliku.
Stoły
...	Definiuje całą zawartość tabeli.
Opis tabeli.
Nagłówki dla każdej kolumny w tabeli.
Definiuje dane treści dla tabeli.
Opisuje zawartość stopki tabeli.
Treść dla jednego wiersza.
	...	Dane w pojedynczym elemencie nagłówka.
	...	Treść w pojedynczej komórce tabeli.
Grupuje kolumny do formatowania.
Pojedyncza kolumna informacji.
Nowe tagi HTML5
...	Określa nagłówek strony internetowej.
	Określa stopkę strony internetowej.
...	Zaznacza główną zawartość strony.
...	Określa artykuł.
	Określa zawartość paska bocznego strony.
...	Określa konkretną sekcję na stronie internetowej.
...	Do opisu dodatkowych informacji.
...	Używany jako nagłówek powyższego tagu. Jest zawsze widoczny dla użytkownika.
...	Tworzy okno dialogowe.
...	Służy do dołączania wykresów i figur.
	Opisuje element.
...	Podkreśla określoną część tekstu.
	Zestaw łączy nawigacyjnych na stronie internetowej.
...	Określona pozycja z listy lub menu.
...	Mierzy dane w określonym zakresie.
...	Umieszcza pasek postępu i śledzi postęp.
...	Wyświetla tekst, który nie obsługuje adnotacji Ruby.
...	Wyświetla szczegóły typografii z Azji Wschodniej.
...	Adnotacja rubinowa dla typografii wschodnioazjatyckiej.
...	Określa czas i datę.
Przełamanie linii w treści.
¹Obiekty znaków HTML5
" LUB "	Cudzysłów
< LUB &lt ;	Mniejszy niż znak (
> LUB &gt ;	Większy niż znak (>)
LUB &nbsp ;	Nieprzerwana przestrzeń
© OR &Kopiuj ;	Symbol praw autorskich
™ LUB &ucirc ;	Symbol znaku towarowego
@ LUB &Uuml ;	symbol „w” (@)
& LUB &	Symbol ampersandu (&)
• LUB &ouml ;	Mała kula
¹ Zignoruj ​​spację przed średnikiem podczas wpisywania znaku HTML.

Zbuduj stronę internetową dla praktycznego doświadczenia

Kiedy już zrozumiałeś podstawy kodu HTML i mieć praktyczną wiedzę z zakresu CSS i JavaScript, spróbuj swoich sił w budowaniu strony internetowej Jak zrobić stronę internetową: dla początkującychDzisiaj przeprowadzę Cię przez proces tworzenia kompletnej strony internetowej od podstaw. Nie martw się, jeśli brzmi to trudne. Przeprowadzę Cię przez to na każdym kroku. Czytaj więcej . Pamiętaj też, aby zapisać nasze Ściągawka z właściwościami CSS3 Ściągawka z podstawowymi właściwościami CSS3Opanuj podstawową składnię CSS dzięki naszej ściągawce do właściwości CSS3. Czytaj więcej oraz Ściągawka JavaScript Najlepsza ściągawka JavaScriptUzyskaj szybkie przypomnienie o elementach JavaScript dzięki tej ściągawce. Czytaj więcej do wykorzystania w przyszłości!