"Pārbaudīt elementu" ir izstrādātāja rīks pārlūkprogrammā Firefox, kuru varat izmantot, lai izsekotu HTML kodu jebkurā tīmekļa lapā. Web lapas HTML un CSS stila lapas var rediģēt, izmantojot "Inspect Element". Jūs varat mēģināt rediģēt lapu, kā vēlaties, un atjaunot to tādā veidā, kāda tā bija, vienkārši atkārtoti ielādējot rediģēto tīmekļa lapu.
Solis
1. daļa no 2: Elementu pārbaude
1. solis. Atjauniniet Firefox (pēc izvēles)
Ja izmantojat vecāku Firefox versiju, iespējams, nevarēsit piekļūt šajā rakstā apskatītajām funkcijām. Atjauninājums tiks instalēts automātiski, pārbaudot, kuru Firefox versiju izmantojat.
Firefox 9 un vecākās versijās vispār nav rīka "Pārbaudīt elementu"
2. solis. Ar peles labo pogu noklikšķiniet uz jebkura tīmekļa lapas elementa
Varat ar peles labo pogu noklikšķināt uz jebkura attēla, teksta, fona vai elementa. Ja pelei ir tikai viena poga, ar peles kreiso taustiņu un taustiņu Control var noklikšķināt ar peles labo pogu.
Solis 3. Nolaižamajā izvēlnē noklikšķiniet uz "Pārbaudīt elementu"
Loga apakšā parādīsies rīkjosla. Tiks parādīts arī panelis zem rīkjoslas, un aktīvajā lapā tiks parādīts HTML kods.
4. solis. Iepazīstiet esošās rīkjoslas un paneļus
Kad izmantojat elementu "Pārbaudīt elementu", zem pārlūkprogrammas loga tiks atvērti vairāki paneļi. Tālāk ir aprakstīti rīkjoslu un paneļu nosaukumi un funkcijas sadaļā "Pārbaudīt elementu":
- Augšējā rindā ir rīkjoslas rīkjosla. Šeit ir atrodami vairāki rīki, taču mēs koncentrēsimies uz pogu Inspektors kreisajā pusē. Pārliecinieties, ka šī rokasgrāmata ir aktīva (norādīta ar pogas krāsu, kas kļūst zila, kad tā ir aktīva).
- Zem tā ir HTML elementu rīvmaizes rinda, kas norāda pašlaik atlasītā elementa atrašanās vietu.
- Rūtī zem navigācijas uzvednēm tiek parādīts tīmekļa lapas HTML koks vai “iezīmēšanas skats”. Šajā rūtī atlasītā elementa HTML tiks atzīmēts un centrēts.
- Labajā rūtī tiek parādīta pašreizējās tīmekļa lapas CSS stilu lapa.
5. solis. Izvēlieties citu elementu
Kad rīkjosla ir atvērta, varat viegli atlasīt citus elementus. Ir trīs veidi, kā to izdarīt:
- Virziet kursoru virs HTML rindas, lai atzīmētu atlasīto elementu (šai funkcijai ir nepieciešama pārlūkprogramma Firefox 34+). Noklikšķiniet uz HTML, lai atlasītu šo elementu.
- Rīkjoslas kreisajā stūrī noklikšķiniet uz rīka "Atlasīt elementu": virs lodziņa ir kursora formas ikona. Pārvietojiet kursoru uz tīmekļa lapas, lai atzīmētu elementu, un noklikšķiniet, lai to atlasītu.
6. solis. Izsekojiet HTML kodu
Noklikšķiniet jebkurā HTML rūtī. Izmantojiet tastatūras kreiso un labo virziena taustiņu, lai pārietu no koda uz kodu (šai funkcijai ir nepieciešama pārlūkprogramma Firefox 39+). Šī metode ir noderīga, lai atlasītu elementus, kas ir pārāk mazi, lai tos atlasītu ar kursoru.
- Pelēks HTML norāda elementus, kas lapā netiek parādīti. Tajā iekļautie elementi ir komentāri, piemēram, mezgli, un citi elementi, kurus slēpj CSS displeja rekvizīts.
- Noklikšķiniet uz bultiņas pa kreisi no lodziņa, lai parādītu vai paslēptu saturu. Lai parādītu visu saturu, turiet nospiestu alt="Attēls" vai opciju, vienlaikus noklikšķinot uz bultiņas.
7. solis. Atrodiet elementu
Rīvmaizes rindas labajā stūrī meklējiet meklēšanas lauku (cilpas formas ikona). Noklikšķiniet, lai izvērstu meklēšanas lauku, un ierakstiet HTML kodu, kuru vēlaties meklēt. Rakstīšanas laikā tiks parādīts uznirstošais logs ar atbilstošiem meklēšanas rezultātiem. Meklēšanas rezultātos noklikšķiniet uz elementa un ritiniet HTML rūti līdz vajadzīgajam kodam.
2. daļa no 2: HTML rediģēšana
1. solis. Lai sāktu no jauna, atkārtoti ielādējiet lapu
Ja neesat iepazinies ar vietņu izstrādes rīkiem, ņemiet vērā, ka neveicat neatgriezeniskas izmaiņas rediģētajās lapās. Jūsu veiktie labojumi tiek parādīti ekrānā tikai līdz lapas atkārtotai ielādēšanai vai aizvēršanai. Jūtieties brīvi eksperimentēt, pat ja nezināt, kas notiks.
2. solis. Veiciet dubultklikšķi uz HTML, lai rediģētu
Veiciet dubultklikšķi uz rindas HTML. Ierakstiet jauno tekstu un nospiediet taustiņu Enter, lai saglabātu izmaiņas.
3. solis. Noklikšķiniet un turiet rīku rīvmaizē, lai parādītu vairāk iespēju
Ņemiet vērā, ka navigācijas rīkjosla atrodas starp HTML koku un rīkjoslu virs tā. Noklikšķiniet un turiet rīku šajā rindā, lai atvērtu citas izvēlnes. Tālāk ir sniegts mājiens par pieejamajām iespējām (nav izsmeļošs):
- “Rediģēt kā HTML” ļauj rediģēt visu HTML saturu no HTML koka tieši, nevis rediģēt katru rindu.
- “Kopēt iekšējo HTML” kopē visu saturu mezglā, bet “Kopēt ārējo HTML” kopē saturu un mezglus (piemēram, vai
- "Ielīmēt →" parāda vairākas iespējas, kur ielīmēt kopiju, piemēram, pirms mezgla vai pēc mezgla pirmā pakārtotā.
- : kursors,: aktīvs un: fokuss maina elementa izskatu, kad lietotājs mijiedarbojas. Mainītie efekti tiek definēti no CSS stilu lapas (rediģējams no paneļa labajā pusē).
4. solis. Velciet un nometiet
Lai pārkārtotu koda elementus, noklikšķiniet un turiet HTML, līdz parādās punktēta līnija. Pārvietojiet līniju uz augšu un uz leju kokā un atlaidiet peles pogu, kad līnija atrodas vēlamajā vietā.
Šai funkcijai ir nepieciešama pārlūkprogramma Firefox 39 un jaunāka versija
5. solis. Aizveriet izstrādātāja rīkjoslu
Lai aizvērtu visu Inspect Element logu, noklikšķiniet uz pogas X rīkjoslas augšējā labajā stūrī, kas atrodas virs CSS paneļa.
Padomi
- Rīkjoslu var atvērt arī no izvēlnes opcijām loga augšdaļā:
- Windows: Firefox → Web izstrādātājs → Pārslēgt rīkus
- Mac vai Linux: Rīki → Web izstrādātājs → Pārslēgt rīkus
- Firefox 40 ir iespēja paslēpt CSS paneli, lai jums būtu vairāk vietas HTML rediģēšanai. Atrodiet bultiņas ikonu rīvmaizes rindas labajā stūrī un pa labi no meklēšanas lauka. Noklikšķiniet uz šīs ikonas, lai paslēptu CSS paneli, un noklikšķiniet vēlreiz, lai to parādītu.
- Varat arī rediģēt CSS paneļus, taču tie nav uzskaitīti šajā rakstā. Norādījumus par CSS koda rediģēšanu varat atrast internetā.
