HTML oznacza hipertekstowy język znaczników. Do tworzenia struktury stron internetowych wykorzystywanych jest kilka tagów. Te tagi są również znane jako elementy HTML. Elementy HTML wyświetlają zawartość w przeglądarce.

Wyniki uczenia się tego artykułu to:

• Co to jest struktura dokumentów HTML?
• Jakie są tagi HTML?
• Jakie są elementy i atrybuty HTML?

W nadchodzącej sekcji zostanie omówiona struktura dokumentów HTML.

Co to jest struktura dokumentu HTML?

Dokument struktury HTML wygląda tak:

Linuxhint

Najlepsza strona internetowa samouczka

Elementy używane w wyżej wymienionym kodzie są wyjaśnione poniżej:

• "”Jest deklaracją dokumentu HTML5.
• "”Jest głównym elementem He Strona HTML. Atrybut LANG o wartości „en”Reprezentuje język angielski.
• "„Zawiera meta-informację o stronie.
• "”Określ kodowanie UTF-8 podczas tłumaczenia kodu na tekst, który można czytać na ludzi na przeglądarkę lub odwrotnie.
• "”Zawiera link do arkusza stylów CSS.
• "”Definiuje tytuł strony HTML, który wyświetli się na pasku tytułu przeglądarki.
• "„Zamknięcie elementu.
• "„Element zawiera zawartość widoczną w przeglądarce.
• "

  ”Element określa nagłówek w dokumencie.

• "

  „Definiuje akapit.

• "”Jest zamykającym znacznikiem elementu ciała.
• "”To znacznik zamykający element główny HTML.

Wyjście

W powyższym wyjściu czerwona strzałka reprezentuje tytuł, niebieska strzałka reprezentuje nagłówek, a zielona strzałka reprezentuje akapit.

Jakie są tagi HTML?

Istnieje kilka tagów używanych do tworzenia strony HTML. Te tagi są również znane jako elementy HTML i są określane przez znacznik początkowe, zawartość w znaczniku i znaczniku końcowym. Tagi są dwóch typów, które są:

• Sparowane tagi
• Puste tagi

Przykład 1: Jak używać sparowanych tagów w HTML?

Elementy HTML mające tagi początkowe i bliskie nazywane są sparowanymi tagami. Niektóre przykłady sparowanych tagów są wspomniane poniżej:

Tag nagłówka

Tag akapitu

Ten tekst jest kursywny
StrikeThrough Tekst

Te elementy są zapisane wewnątrz elementu ciała pliku HTML.

Wyjście wyżej wymienionego kodu pokazano poniżej:

Tak więc wynik

Tag jest wskazany przez niebieską strzałkę,

Tag jest wskazywany przez zieloną strzałkę, Tag jest wskazywany przez różową strzałkę, a czerwona strzałka wskazuje na wynik znacznika.

Przykład 2: Jakie są puste znaczniki w HTML?

Niektóre znaczniki HTML są znane jako puste elementy, ponieważ składają się tylko z tagów startowych, takich jak
,

---

tagi i więcej.

Jakie są elementy i atrybuty HTML?

Elementy HTML, czasem znane jako znaczniki, mogą być powiązane z atrybutami. Te atrybuty są zapisane w znaczniku start i wykorzystywane do dodania dodatkowych informacji do elementów. Atrybuty mają nazwy i wartości.

Przykład: Struktura strony HTML

Poniżej znajduje się przykład strony HTML:

• "”Element określa podział lub komponent w dokumencie HTML.
• "klasa”Jest atrybutem, który określa nazwy klas dla elementu do użycia w CSS i JavaScript:

Po dodaniu kontenera Div. Teraz określamy sekcję nagłówka, wykorzystując następujące elementy:

• "”Element zawiera początkową część wprowadzającą.
• "”To znacznik zakotwiczenia, który tworzy hiperłącze do plików HTML.
• "Href”To atrybut z tagiem zawierającym link innych plików HTML.
• "
• "
  ”Jest wykorzystywany do dodania nieuporządkowanej listy do dokumentu HTML, takiej jak lista Bulleted.
  • "
  • ”Reprezentuje element na liście:

  
  LOGO
  
  

  Po dodaniu elementu nagłówka dodaj element DIV z nazwą klasy „główny„To trzyma obraz. Aby umieścić obraz, html „„Tag jest wykorzystywany powiązany z atrybutami:

  • "src”Jest atrybutem, który określa ścieżkę obrazu.
  • "Alt„Atrybut jest wykorzystywany do określania tekstu, który wyświetli się na ekranie zamiast obrazu, jeśli obraz nie załaduje się:

  
  
  

  Następnie dodaj Div z nazwą klasy „artykuł". Posiada elementy wymienione poniżej:

  • "”Element określa samodzielną i niezależną treść.
  • "

    ”Jest dodawany do nagłówka.

  • "

    „Element służy do określenia akapitu w HTML:

  
  

  
  

  Nagłówek artykułu

  
  

  Linuxhint to najlepsza strona internetowa. Jest opracowywany do celów edukacyjnych. Piszemy artykuły i tworzymy filmy, aby uczyć świata online!

  
  

  
  

  Następnie dodaj element stopki w następujący sposób:

  • "”Element dodaje stopkę do dokumentu HTML. Zwykle zawiera informacje o danych dotyczących praw autorskich, linkach i autora.
  • "„Element określa mały rozmiar czcionki:

  Dowiedzieliśmy się więc o kilku elementach i atrybutach używanych w dokumencie HTML. Teraz zapisz zmiany w pliku i otwórz je w przeglądarce internetowej. W rezultacie Twoja strona internetowa będzie wyglądać tak:

  Teraz stylizujmy naszą stronę internetową za pomocą CSS.

  Element „Body” stylu

  ciało
  Margines: 0;
  Wyściółka: 0;
  Rozmiar pola: granica;
  Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;
  

  Poniżej znajdują się właściwości zastosowane do sekcji ciała HTML:

  • "margines„Własność jest wykorzystywana do dodawania przestrzeni wokół elementu.
  • "wyściółka„Właściwość używana do wstawienia przestrzeni do granicy elementu lub wokół zawartości elementu.
  • "rozmiar pudełka”Z wartością„Box-box”Rozszerza szerokość i wysokość zwierzęcia na krawędzie graniczne.
  • "rodzina czcionek„Właściwość jest ustawiona z listą wartości. Ta lista jest dostarczana, aby upewnić się, że jeśli przeglądarka nie obsługuje pierwszego stylu, druga zostanie użyta.

  Styl „kontener” div

  .pojemnik
  maksymalna szerokość: 90%;
  Margines: 0 Auto;
  

  Tutaj:

  • "maksymalna szerokość„Właściwość określa maksymalną szerokość elementu.
  • "margines„Właściwość dodaje przestrzeń wokół elementu.

  Styl „główny” div

  główny
  Wyświetlacz: Flex;
  Justify-Content: Center;
  

  Główny element jest stylizowany z następującymi właściwościami:

  • "wyświetlacz„Property Flex sprawia, że ​​układ elementu jest elastyczny dla elementów w nim.
  • "justify-content”Właściwość ustawia wyrównanie elementu elastycznego elementu pionowo.

  Element stylu „nagłówka”

  nagłówek
  Wyściółka: 10px;
  Wyściółka: 10px;
  kolor tła: #ffffff;
  Wyświetlacz: Flex;
  Justify-Content: Space-Between;
  Wyrównanie: Center;
  

  Element nagłówka jest ozdobiony właściwościami wymienionymi poniżej:

  • "Wyściółka”Właściwość dodaje przestrzeń u góry elementu.
  • "Wyściółka„Właściwość ustawia przestrzeń od dołu elementu.
  • "kolor tła„Właściwość przydziela kolor tła elementu.
  • "wyświetlacz„Własność o wartości”przewód”Sprawił, że element elastyczny dla elementów w nim.
  • "justify-content”Z wartością przestrzeni doda przestrzeń między jej przedmiotami.
  • "Wyrównanie”Właściwość ustawia wyrównanie pozycji w poziomie.

  Styl „ul” elementu „nagłówka”

  nagłówek ul
  List Style: Brak;
  Wyświetlacz: Flex;
  

  Element UL znacznika nagłówka jest stosowany z tymi właściwościami stylizacji:

  • "List w stylu„Własność jest ustawiona na„nic„To usunę z listy styl z liście.
  • "wyświetlacz„Własność będzie działać tak samo, jak omówione wcześniej.

  Styl „A” element

  nagłówek ul li a
  Dekoracja tekstu: Brak;
  Wyściółka: 10px;
  Kolor: #000000;
  

  Tutaj:

  • "dekoracja tekstu„Własność o wartości”nic”Usuwa podkreślenie z tekstu.
  • "wyściółka„Właściwość dodaje miejsce wewnątrz granicy elementu.
  • "kolor„Właściwość określa kolor czcionki.

  Element stylu „IMG”

  img
  Object-Fit: Cover;
  szerokość: 100%;
  Wysokość: 300px;
  

  „„img„Element jest stylizowany przez dostarczanie następujących nieruchomości:

  • "obiekt-dopasowanie”Ustawia zawartość zastąpionego elementu.
  • "szerokość„Właściwość określa szerokość elementu.
  • "wysokość„Właściwość służy do zdefiniowania wysokości elementu.

  Element stylu „artykułu”

  artykuł
  szerokość: 450px;
  Text-Align: Center;
  Margines: Auto;
  

  Element artykułu jest stylizowany z nieruchomościami wyjaśnionymi poniżej:

  • "szerokość„Własność jest wykorzystywana do ustawienia szerokości elementu.
  • "tekst-align”Definiuje wyrównanie tekstu elementu.
  • "margines„Właściwość generuje przestrzeń wokół elementu.

  Element stylu „stopki”

  stopka
  Wyściółka: 20px;
  Wyściółka: 20px;
  kolor tła: #000000;
  Kolor: #ffffff;
  Text-Align: Center;
  

  „„stopka„Element jest stylizowany z właściwościami, które zostały wyjaśnione poniżej:

  • "Wyściółka„Właściwość dodaje miejsce na górze treści elementu.
  • "Wyściółka„Właściwość służy do dodania dolnej przestrzeni treści elementu.
  • "kolor tła”Ustawia kolor tła elementu.
  • "kolor”Jest wykorzystywany do określenia koloru czcionki.

  Styl „H2” elementu „artykułu”

  Artykuł H2
  Text-Align: Center;
  

  Element H2 w tagu artykułu jest stosowany z „tekst-align„Własność z centrum wartości.

  Styl „P” elementu „artykułu”

  Artykuł P
  Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;
  Rozmiar czcionki: 20px;
  

  Tutaj:

  • "rodzina czcionek”Własność jest ustawiona za wartości Verdana, Genewa, Tahoma, bez-serif. Ta lista jest dostarczana w celu zapewnienia, że ​​jeśli pierwszy styl nie jest obsługiwany przez przeglądarkę, druga zostanie zastosowana.
  • "rozmiar czcionki”Ustawia rozmiar czcionki.

  Oto ostateczny wygląd strony HTML po zastosowaniu właściwości CSS:

  To były wszystkie istotne informacje związane ze strukturą strony HTML.

  Wniosek

  Dokument HTML to struktura strony internetowej. Kilka elementów jest używanych w dokumentach HTML, które instruują przeglądarkę, co wyświetlić na stronie internetowej. Te elementy mogą być sparowane z ich tagami początkowymi i końcowymi lub mogą być puste, takie jak
  ,

  ---

  tagi i więcej. Elementy HTML są stosowane właściwości stylizacji przy użyciu CSS. Aby lepiej zrozumieć, ten artykuł wyjaśnił strukturę strony HTML za pomocą praktycznego przykładu.