Elementy i techniki układu HTML
Elementy układu HTML określają układ strony, że należy ułożyć elementy, aby uzyskać dobrze ustrukturyzowaną stronę. Podczas gdy techniki układu HTML upiększają elementy, aby uzyskać stronę w formacie prezentacyjnym. Biorąc pod uwagę znaczenie elementów HTML i technik HTML, ten przewodnik zamierza zapewnić następujące wyniki uczenia się:
- Jakie są elementy układu HTML
- Frameworki CSS
- Układ siatki
- Układ FlexBox
- Float Property
Elementy układu HTML
HTML5 opracował wsparcie różnych elementów semantycznych, które można wykorzystać do zaprojektowania układu strony HTML. Można użyć elementów semantycznych w zorganizowany sposób, aby uzyskać pożądany układ. Poniższe elementy HTML są ustawione tak, aby odpowiednio ustawić układ strony.
: Sekcja nagłówka określa część nagłówka dokumentu
: Ten element służy do utworzenia nowej sekcji wewnątrz strony
: Artykuł na stronie HTML można zdefiniować za pomocą tego znacznika.
: Ten element tworzy nagłówek w celu podsumowania wszelkich informacji lub szczegółów na temat tego nagłówka. Po kliknięciu tego nagłówka wyświetlane będą informacje, które są przechowywane w nim.
: Tag służy do wymienienia szczegółowych informacji o dowolnej konkretnej rzecz/obiektu.
: Reprezentuje stopkę sekcji/dokumentu.
Aby dowiedzieć się więcej o elementach semantycznych HTML, kliknij tutaj.
Techniki układu HTML
Techniki układu HTML pomagają w tworzeniu układu wielobarstwowego, a techniki można wybrać z jednego z poniższych tutaj podanych tutaj.
Frameworki CSS
Frameworki CSS pomogłyby w stworzeniu responsywnego i atrakcyjnego układu strony internetowej. Ramy te obejmują różne wbudowane klasy wyposażone w style, dlatego nie musisz tworzyć własnych stylów. Wśród różnych ram CSS, W3.CSS i bootstrap są szeroko stosowane.
Jak korzystać z W3.Framework CSS
Jest to dobrze zdefiniowana nowoczesna framework CSS, który ma zapewnić wysoką funkcjonalność stylów dla strony internetowej. Jego celem jest zapewnienie różnorodnej alternatywy dla ram bootstrap. Aby użyć W3.Klasa CSS, musisz po prostu wstawić następujący link do strony HTML.
Jak korzystać z frameworka bootstrap
Bootstrap Framework to kolejna framework CSS, który ma również wbudowane klasy, aby zapewnić różnego rodzaju style na stronach HTML. Aby korzystać z frameworka Bootstrap, masz dwie możliwości:
- Pobierz bootstrap
- Użyj linku CDN bezpośrednio w dokumencie HTML (zalecane)
Poniższe linki CDN pomagają w importowaniu instancji bootstrap w celu stylizacji strony internetowej.
Wklej następujący link do znacznika głowy (zalecany)
Umieść następujący skrypt na końcu (zalecany) znacznika dokumentu
Umieszczając powyższe linki, będziesz mógł użyć różnych klas bootstrap, aby odpowiednio stylizować stronę HTML.
Float CSS
Ta technika jest bardzo pomocna w umieszczeniu elementów HTML. Domyślnie elementy są umieszczane jeden po drugim. Możesz jednak użyć właściwości Float/Clear, aby manipulować domyślnym umieszczeniem elementów. Wyczyść właściwość służy do przełamania ciągłości właściwości pływakowej, tak że jeśli chcesz umieścić element w następnym wierszu, musisz użyć właściwości Clear.
Funkcjonalność CSS Float i Clear Properties jest łatwa do nauczenia się, ale trudna do wdrożenia. Poniższy przykład odnosi się do użycia właściwości pływakowych i wyraźnych.
Html
Html
CSS
JavaScript
Powyższy kod HTML tworzy trzy podziały z nazwami klas „Prim1„”Prim2" I "Prim3".
CSS
.Prim1float: lewy;
Szerokość: 33%;
kolor tła: pomarańczowy;
.Prim2
float: lewy;
Szerokość: 33%;
kolor tła: LightkyBlue;
.Prim3
Clear: lewy;
Szerokość: 66%;
kolor tła: Lightgreen;
Głównym składnikiem tego przykładu jest CSS, który pokazuje, w jaki sposób używane są właściwości pływakowe i czyste. Float = ”lewy„Własność jest używana w pierwszych dwóch Divs podczas gdy trzeci div ma clear = ”lewy".
Wyjście
Układ FlexBox
Moduł CSS Flexbox (elastyczne skrzynkę) pomaga w tworzeniu elastycznej struktury układu bez użycia pływaka lub dowolnego elementu pozycjonującego. Ponadto elementy mogą być ułożone w rzędu lub w kolumnie (tylko jeden wymiar). Aby użyć techniki CSS FlexBox, musisz dodać klasę = ”Flex-Container”Do elementu i„wyświetlacz„Własność Flex-Container musi być ustawiona na„przewód". Elementy dziecięce nie wymagają żadnej klasy, są po prostu dostosowane do klasy nadrzędnej.
Poniższy przykład lepiej pokazuje użycie elastycznego układu.
.flex-containerWyświetlacz: Flex;
Html
CSS
W powyższym kodzie a div jest tworzony z klasą = ”Flex-Container”, A jego właściwość wyświetlacza jest ustawiona na„przewód".
Wyjście
Układ siatki
Układ siatki umożliwia organizowanie różnych elementów dziecka w sposób reprezentacyjny. Układ siatki oferuje układ w dwóch wymiarach (jednocześnie z wierszem i kolumną). Aby użyć tego, klasa = ”Container”Jest używany dla elementu nadrzędnego, podczas gdy klasa =”Strona siatki”Jest używany do elementów dziecięcych. Ponadto wyświetlacz właściwość kontenera siatki może być ustawiona na siatka lub sieć rzędowa.
.Grid-ContainerWyświetlacz: siatka;
Html
CSS
JavaScript
W powyższym kodzie klasa rodzica div jest ustawione na "Container”A przedmioty dziecięce mają zajęcia„Strona siatki".
Wyjście
Wyjście pokazuje podstawową różnicę między układem siatki i elastycznym. Układ siatki został rozszerzony w wielu wymiarach, podczas gdy układ elastyczny układa elementy w jednym wymiarze.
Wniosek
Elementy układu HTML i techniki układu HTML zapewniają funkcjonalność do projektowania strony internetowej w sposób prezentacyjny. W tym artykule znajdują się różne elementy semantyczne HTML i układy HTML. Elementy semantyczne najlepiej służą celowi ich wykorzystania, a zatem są uważane za ważny składnik strony internetowej. Techniki układu HTML mogą obejmować frameworki CSS (Bootstrap lub W3.CSS), CSS Float, CSS Elastyczny pudełko i siatka CSS.