Kas yra html dokumento elementų medis. Darbas su DOM modeliu. Elementų pasirinkimas naudojant CSS selektorius

HTML pagrindus sudaro pagrindinės HTML kalbos taisyklės, HTML puslapio struktūros aprašymas, HTML dokumento struktūros ryšiai tarp HTML elementų.

HTML dokumentas – tai įprastas tekstinis dokumentas, kurį galima sukurti tiek įprastu teksto rengykliu (Notepad), tiek specializuotu su kodų paryškinimu (Notepad++, Visual Studio Code ir kt.). HTML dokumentas turi .html plėtinį.

HTML dokumentą sudaro HTML elementų ir teksto medis. Kiekvienas elementas pirminiame dokumente identifikuojamas pradžios (pradžios) ir pabaigos (uždarymo) žyma (su retomis išimtimis).

Pradžios žyma rodo, kur prasideda elementas, o pabaigos žyma rodo, kur jis baigiasi. Baigiamoji žyma sudaroma pridedant pasvirąjį brūkšnį / prieš žymos pavadinimą: .... Tarp pradžios ir pabaigos žymų yra žymos turinys – turinys.

Pavienės žymos negali saugoti turinio tiesiogiai, jis rašomas kaip atributo reikšmė, pavyzdžiui, žyma sukurs mygtuką su tekstu Button viduje.

Žymos gali būti įdėtos viena į kitą, pavyzdžiui,

Tekstas

. Sudėdami lizdus turėtumėte vadovautis jų uždarymo tvarka ("matryoshka" principas), pavyzdžiui, šis įrašas bus neteisingas:

Tekstas

.

HTML elementai gali turėti atributus (visuotinius, taikomus visiems HTML elementams ir savo). Atributai įrašomi į pradinę elemento žymą ir turi pavadinimą bei reikšmę, nurodytą formatu atributas name="value" . Atributai leidžia keisti elemento, kuriam jie nustatyti, savybes ir elgesį.

Kiekvienas elementas gali turėti kelias klasės reikšmes ir tik vieną ID reikšmę. Kelių klasių reikšmės rašomos atskirtos tarpu, . Klasės ir ID reikšmėse turi būti tik raidės, skaičiai, brūkšneliai ir apatiniai brūkšniai ir prasidėti tik raidėmis arba skaičiais.

Naršyklė peržiūri (interpretuoja) HTML dokumentą, kurdama jo struktūrą (DOM) ir rodydama pagal instrukcijas, pateiktas šiame faile (stilių lapai, scenarijai). Jei žymėjimas teisingas, naršyklės lange bus rodomas HTML puslapis su HTML elementais – antraštėmis, lentelėmis, vaizdais ir kt.

Aiškinimo procesas (analizavimas) prasideda prieš tai, kai tinklalapis visiškai įkeliamas į naršyklę. Naršyklės apdoroja HTML dokumentus nuosekliai nuo pat pradžių, apdorodamos CSS ir susiejant stiliaus lapus su puslapio elementais.

HTML dokumentas susideda iš dviejų skyrių - antraštės - tarp žymų ... ir turinio dalies - tarp žymų ....

Tinklalapio struktūra 1. HTML dokumento struktūra

HTML laikosi taisyklių, esančių dokumento tipo deklaracijos faile (Dokumento tipo apibrėžimas arba DTD). DTD yra XML dokumentas, apibrėžiantis, kurios žymos, atributai ir jų reikšmės galioja tam tikram HTML tipui. Kiekviena HTML versija turi savo DTD.

DOCTYPE yra atsakingas už tai, kad naršyklė tinkamai parodytų tinklalapį. DOCTYPE nurodo ne tik HTML versiją (pvz., html), bet ir atitinkamą DTD failą internete.

...

Žymos viduje esantys elementai sudaro dokumentų medį, vadinamąjį dokumento objekto modelį, DOM (dokumento objekto modelį). Šiuo atveju elementas yra šakninis elementas.


Ryžiai. 1. Paprasčiausia tinklalapio struktūra

Norint suprasti tinklalapio elementų sąveiką, būtina atsižvelgti į vadinamuosius „šeimos santykius“ tarp elementų. Kelių įdėtųjų elementų ryšiai klasifikuojami kaip tėvas, vaikas ir sesuo.

Protėvis yra elementas, kuriame yra kitų elementų. 1 paveiksle visų elementų protėvis yra . Tuo pačiu metu elementas yra visų jame esančių žymų protėvis: ,

, ir kt.

Palikuonis yra elementas, esantis viename ar keliuose elementų tipuose. Pavyzdžiui, yra , ir elemento palikuonis

Yra abiejų ir palikuonis.

Pirminis elementas yra elementas, kuris yra susijęs su kitais elementais žemesniame lygyje ir yra virš jų medyje. 1 paveiksle ir . Žyma

Ar tėvai tik .

Antrasis elementas yra elementas, kuris yra tiesiogiai pavaldus kitam aukštesnio lygio elementui. 1 paveiksle yra tik elementai , ,

Ir yra vaikai .

Sesuo elementas – elementas, turintis bendrą pirminį elementą su nagrinėjamu elementu, vadinamuosius to paties lygio elementus. 1 paveiksle ir yra to paties lygio elementai, taip pat elementai , ir

Jos viena kitai yra seserys.

1.1. 1.2 elementas. Elementas

Skyriuje ... yra techninė informacija apie puslapį: pavadinimas, aprašymas, raktiniai žodžiai paieškos sistemoms, kodavimas ir kt. Ten įvesta informacija nerodoma naršyklės lange, tačiau joje yra informacijos, nurodančios naršyklei, kaip apdoroti puslapį.

1.2.1. Elementas

Reikalinga skyriaus žyma yra . Šios žymos viduje esantis tekstas rodomas žiniatinklio naršyklės pavadinimo juostoje. Pavadinimas turi būti ne ilgesnis nei 60 simbolių, kad jis visiškai tilptų į pavadinimą. Pavadinimo tekste turi būti išsamiausias tinklalapio turinio aprašymas.

1.2.2. Elementas

Pasirenkama skilties žyma yra viena žyma. Su jo pagalba galite nustatyti puslapio turinio aprašymą ir raktinius žodžius paieškos sistemoms, HTML dokumento autorių ir kitas metaduomenų savybes. Elemente gali būti keli elementai, nes jie turi skirtingą informaciją, priklausomai nuo naudojamų atributų.

Puslapio turinio aprašymas ir raktiniai žodžiai gali būti vienu metu nurodyti keliomis kalbomis, pavyzdžiui, rusų ir anglų kalbomis:

Naudodami žymą galite blokuoti arba leisti paieškos sistemoms indeksuoti tinklalapį:

Norėdami automatiškai iš naujo įkelti puslapį po nurodyto laiko, turite naudoti atnaujinimo reikšmę:

Puslapis bus įkeltas iš naujo po 30 sekundžių. Norėdami nukreipti lankytoją į kitą puslapį, url parametre turite nurodyti URL: