Html | Tag detale

Organizacja danych na stronie internetowej jest kluczowym zadaniem. Mówiąc dokładniej, gdy dodamy duży tekst, organizacja danych pomaga uniknąć problemów z czytelnością dla użytkowników. W innym scenariuszu użytkownik chce zobaczyć tylko informacje po kliknięciu konkretnej sekcji. W tym celu HTML „<Szczegóły>„Zastosowany jest znacznik, który można kliknąć, aby wyświetlić lub ukryć szczegóły. Ponadto znacznik podsumowujący dodany w znaczniku szczegółów służy do dodania widocznych nagłówków.

Ten samouczek zawiera szczegółowy przewodnik na temat znacznika HTML.

Jak używać znacznika HTML?

Aby użyć znacznika HTML, postępuj zgodnie z podaną składnią:

Niektóre nagłówek

Treść…

W powyższej składni:

• jest tagiem początkowym.
• Tag jest wykorzystywany do określenia widocznego nagłówka dla szczegółów.
• to znacznik zamykający.

• Tag określa część akapitu na stronie.

• to znacznik zamykający.
• to znacznik zamykający.

Przykład: Jak wstawić element do HTML?

Najpierw dodaj/utwórz element DIV o nazwie klasy „desc„W html. W tym elemencie DIV dodaj

element, aby określić część akapitu, jak pokazano poniżej:

Oto lista tagów HTML z ich szczegółami:

W ramach tego elementu Div dodaj tyle szczegółów, ile chcesz. Tutaj w tym przykładzie dodamy trzy tagi szczegółów wraz z znacznikiem HTML i

etykietka:

Tag html BR

Tag HTML BR jest wykorzystywany do dodania przerwy w linii.

Tag nagłówka HTML

Tag nagłówka HTML jest wykorzystywany do przechowywania metadanych.

Tag html P

Tag html p jest wykorzystywany do dodania akapitu.

Powyższy kod spowoduje odpowiednie wyjście:

Więc tak, struktura została ukończona, teraz stosują niektóre właściwości CSS do lepszego układu.

Styl „dec” div

.desc
Wysokość: 250px;
Margines: 0px auto;
Border: 3px Solid #9C2C77;
Szerokość: 80%;
Wyściółka: 5px 10px;
Rozmiar czcionki: 16px;
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;
kolor tła: #F2C0F5;

Element DIV posiadający klasę „desc”Jest stosowany z następującymi właściwościami:

• "wysokość„Własność jest wykorzystywana do ustawienia wysokości elementu.
• "margines„Właściwość z ustawioną wartością jako”0px Auto”Wskazuje przestrzeń 0px w górnym dnie i równą przestrzeń po lewej stronie.
• "granica„Właściwość z ustawioną wartością jako„3px stały szary”Definiuje szerokość linii granicznej jako 3px, styl solidnego granicznego i kolor graniczny.
• "szerokość„Właściwość służy do ustawiania/dostosowania szerokości elementu.
• "wyściółka„Właściwość z ustawioną wartością jako„5px 10px”Wskazuje„5px”Space na najwyższym dnie i„10px„Space na lewej stronie treści elementu.
• "rozmiar czcionki”Atrybut określa rozmiar czcionki elementu.
• "rodzina czcionek”Jest ustawiony na listę stylów czcionek, aby upewnić się, że jeśli jedna rodzina czcionki nie jest obsługiwana przez przeglądarkę, inne zostaną zastosowane.
• "kolor tła„Właściwość jest ustawiona na określenie koloru tła elementu.

Element „Detail” stylu

Detale
Kursor: wskaźnik;
FONT-FAMILY: Kursywna;

Element szczegółów HTML jest stosowany z następującymi właściwościami:

• "kursor„Właściwość z ustawioną wartością jako„wskaźnik”Zmieni kursor myszy jako wskazującą rękę podczas unoszenia się na zawartości elementu.
• "rodzina czcionek„Właściwość przypisana wartością”kursywny”, Określając tekst w stylu kursywnym.

Element „Podsumowanie” stylu

streszczenie
Font-Weight: Bold;

Tag podsumowujący jest stosowany za pomocą „grubość czcionki„Własność o wartości”pogrubiony".

Powyższy kod zapewni wyniki, jak pokazano na poniższym obrazku:

W ten sposób możemy zaimplementować element HTML.

Wniosek

Podczas opracowywania strony internetowej konieczne jest umieszczenie danych w zorganizowany sposób. Zwłaszcza gdy długi tekst jest umieszczony na stronie internetowej, może powodować problemy w czytaniu, śledzeniu informacji i nie tylko. Tag HTML jest wykorzystywany do organizowania danych i zapewnia funkcjonalność do ukrycia lub wyświetlania szczegółów kliknięcia. Ten blog zademonstrował tag HTML z praktycznym przykładem.