Dobre, rozoberme, ako text a grafika vedia, kam majú ísť, keď požiadate o webovú stránku prostredníctvom prehliadača. Tento proces zahŕňa niekoľko kľúčových technológií a vrstiev komunikácie. Zameram sa na to, ako server komunikuje s prehliadačom rozloženie obsahu, aby ho mohol správne zobraziť.

1. Žiadosť a odpoveď:

* požiadavka: Keď do prehliadača zadáte adresu URL (napr. `Www.example.com`) a stlačte kláves Enter, prehliadač odošle požiadavku na server.

* Odpoveď: Server spracuje požiadavku a odošle späť odpoveď. Táto odpoveď zvyčajne obsahuje dokument HTML.

2. HTML štruktúra a obsah

HTML (Hypertext Markup Language) je chrbtica.

Tento jazyk je kostrou stránky a má kód, ktorý vytvára polia a pokyny na získanie obrázkov, videí a iných textov a grafiky.

3. CSS (kaskádové listy v štýle):

* Účel: CSS je zodpovedný za * prezentáciu * obsahu HTML. Diktuje to, ako sú prvky štylizované, vrátane ich:

* Umiestnenie: Kde sú prvky umiestnené na stránke (napr. Absolútna, relatívna, pevná, statická, lepkavá).

* rozloženie: Ako sú prvky usporiadané do svojich kontajnerov (napr. Používanie flexboxu, mriežky alebo starších techník, ako sú plaváky).

* vzhľad: Farby, písma, veľkosti, rozstupy atď.

* Ako to funguje: Pravidlá CSS sa používajú na prvky HTML pomocou selektorov. Selektory sa zameriavajú na konkrétne prvky (napr. `

`,`

`, prvky s konkrétnou triedou alebo ID). Napríklad:

`` CSS

.my-para

veľkosť písma:16px;

Farba:#333;

margin-dno:10px;

}

#Header { / * zacieľuje na prvok pomocou id ="header" * /

pozadie:#F0F0F0;

vypchávka:20px;

Text-Align:Center;

}

`` `

* Prepojenie CSS: CSS je možné aplikovať tromi hlavnými spôsobmi:

* Externé štýly: Samostatný súbor `.css` je prepojený s HTML pomocou` `Značka v` Sekcia `. Toto je najbežnejší a odporúčaný prístup k udržateľnosti.

`` `html

`` `

* Interné štýly: Pravidlá CSS sú umiestnené priamo do značky `` v ` `Sekcia HTML.

`` `html

telo {

pozadie zafarbenie:#FFF;

}

`` `

* Inline štýly: Pravidlá CSS sa používajú priamo na jednotlivé prvky HTML pomocou atribútu „Style`“. Všeobecne sa to odrádza, s výnimkou veľmi špecifických prípadov.

`` `html

Toto je modrý odsek.

`` `

4. Motory rozloženia:

* rola: Motor rozloženia prehliadača (napr. Blikanie v prehliadači Chrome, Gecko v Firefoxe, WebKit v Safari) je zodpovedný za interpretáciu HTML a CSS a výpočet presnej polohy a veľkosti každého prvku na stránke.

* Proces: Motor rozloženia zostavuje strom vykresľovania *alebo *Dom Tree *, ktorý predstavuje štruktúru stránky a štýly, ktoré sa vzťahujú na každý prvok. Potom použije tento strom na určenie konečného rozloženia.

* Model boxu: Model CSS Box je základom rozloženia. Každý prvok HTML sa považuje za obdĺžnikový box s obsahom, čalúnením, okrajom a okrajom. Motor rozloženia vypočíta veľkosť a polohu týchto polí.

5. Techniky umiestnenia:

* Normálny tok: V predvolenom nastavení sú prvky HTML uvedené v „normálnom toku“, čo znamená, že sú umiestnené jeden po druhom v poradí, v akom sa objavia v dokumente HTML.

* `pozícia` vlastnosť: Vlastnosť „pozície“ vám umožňuje zmeniť správanie polohy prvku. Bežné hodnoty zahŕňajú:

* `static` (predvolené): Prvok je umiestnený podľa normálneho toku.

* `relatívne: Prvok je umiestnený vzhľadom na svoju normálnu polohu v toku. Na kompenzáciu prvku môžete použiť `top`,` right`, `spodnej časti" a `ľavú časť".

* `Absolute`: Prvok je umiestnený v porovnaní s jeho predkom * najbližším umiestneným predkom * (predchodca s inou pozíciou ako `statickým"). Ak nie je umiestnený predchodca, je umiestnený v porovnaní s počiatočným blokom obsahujúcim (` `element). `TOP`,` right`, `Bottom` a` ľavákov sa používajú na určenie ofsetu.

* `Fixed`: Prvok je umiestnený vo vzťahu k výrezu (okno prehliadača) a zostáva v rovnakej polohe, aj keď je stránka posúvaná.

* `Sticka`: Prvok sa správa ako „relatívny“, až kým nedosiahne určitý bod vo výreze, kedy sa stane „fixným“.

6. Metódy rozloženia (moderné prístupy):

* flexbox: Výkonný model rozloženia na vytváranie flexibilných a citlivých rozložení, najmä pre jednorozmerné usporiadanie (riadky alebo stĺpce). Poskytuje jemnozrnnú kontrolu nad zarovnaním a rozdelením prvkov v kontajneri.

* mriežka: Dvojrozmerný systém rozloženia, ktorý vám umožňuje vytvárať komplexné rozloženia založené na mriežke s riadkami a stĺpcami. Poskytuje veľkú kontrolu nad umiestnením prvkov v mriežke.

* plaváky (staršia technika): Používa sa na zabalenie textu okolo obrázkov alebo na vytvorenie rozloženia viacerých stĺpcov. Môže byť zložité správne používať a často vyžaduje vyčistenie plavákov, aby sa zabránilo problémom s rozložením. Všeobecne nahradené flexboxom a mriežkou.

7. Mediálne dotazy (responzívny dizajn):

* Účel: Mediálne dopyty vám umožňujú uplatňovať rôzne pravidlá CSS založené na charakteristikách zariadenia alebo výrezu, ako je veľkosť obrazovky, rozlíšenie alebo orientácia.

* Ako fungujú: Vo svojom CSS definujete mediálne dopyty pomocou pravidla `@Media`. Pravidlá v rámci mediálneho dotazu sa uplatňujú iba vtedy, keď sú splnené podmienky.

`` CSS

@Media (max-šírka:768px) {

/ * Štýly, ktoré sa majú použiť na obrazovkách menších ako 768px široké */

telo {

veľkosť písma:14px;

}

}

`` `

8. Obrázky a ďalšie aktíva:

* URL: Obrázky a iné aktíva (napr. Videá, písma) sa načítajú pomocou URL špecifikovaných v HTML (napr. V atribúte `SRC`` ` `TAG alebo funkcia` url () `v CSS).

* Cesty: Tieto adresy URL môžu byť absolútne (napr. `Https:// www.example.com/images/logo.png`) alebo relatívne (napr.` Images/logo.png`). Relatívne cesty sú relatívne k umiestneniu súboru HTML.

* Stiahnite si: Prehliadač poskytuje samostatné požiadavky HTTP pre každý obrázok a aktívum na ich stiahnutie.

* Optimalizácia obrázka: Na zlepšenie časov načítania stránky je dôležité použiť optimalizované obrázky (správna veľkosť, formát a kompresia).

Zhrnutie procesu

1. Prehliadač požaduje stránku HTML z webového servera založeného na adrese URL.

2. Server odpovedá s označením HTML stránky.

3. prehliadač analyzuje html Na zostavenie modelu objektu dokumentu (DOM), reprezentácie štruktúry stránky podobnej stromu.

4. prehliadač načíta súbory CSS prepojené v HTML's ` `alebo analyzované štýly.

5. Prehliadač uplatňuje pravidlá CSS do DOM, určovanie vzhľadu a rozloženia každého prvku.

6. Motor rozloženia vypočíta polohy prvkov Na základe vlastností CSS vrátane polohy, plavákov, flexboxu, mriežky atď.

7. Prehliadač načíta obrázky, písma a ďalšie externé zdroje uvedené v HTML a CSS.

8. Prehliadač vykresľuje stránku, Zobrazovanie textu, obrázkov a ďalších prvkov vo svojich vypočítaných pozíciách so špecifikovanými štýlmi.

9. JavaScript Môže ďalej upravovať DOM a CSS po počiatočnom vykresľovaní, čím sa vytvorí dynamické a interaktívne zážitky.

Dajte mi vedieť, či by ste chceli, aby som vysvetlil niektorý z týchto konceptov podrobnejšie!

• Predchádzajúca strana: Ak chcete dať ikonu Yahoo na paneli nástrojov, aby moja domovská stránka pomocou Modzilla Firefox? 
• Ďalšia strana: Váš profil Webs.com sa zobrazuje?