Inspekti elemendi arendustööriist Firefoxis võimaldab teil täpselt määrata HTML -koodi, mida näete oma veebisaidil. HTML ja sellega kaasnev CSS -stiilileht on pärast nende tööriistade avamist täielikult muudetavad. Katsetage mis tahes muudatustega, mis teile meeldivad, ja värskendage lehte, et naasta veebilehe soovitud välimusele.
Sammud
Osa 1 /2: Elementide kontrollimine
Samm 1. Paremklõpsake mis tahes veebilehe elementi
Saate paremklõpsata piltidel, tekstil, taustal või mõnel muul elemendil. Kui teil pole kahe nupuga hiirt, klõpsake juhtklahvi all hoides vasakklõpsu.
Samm 2. Klõpsake rippmenüüst Kontrolli elementi
Akna allosas peaks ilmuma tööriistariba. Tööriistariba alla ilmub ka paan, mis kuvab lehe HTML -koodi.
Samm 3. Tuvastage tööriistaribad ja paanid
Kui klõpsate elemendi kontrollimisel, avaneb akna allosas mitu paani. Siin on nende kasutuste ja nimede jaotus:
- Ülemine rida on tööriistakasti tööriistariba. Sellel on mitu arendustööriista, kuid meid huvitab vasakul asuv inspektor. Hoidke see kogu juhendi jaoks valitud (sinisega esile tõstetud).
- Tööriistariba all on üks HTML -elementide rida leiba, mis näitab valitud elemendiga seotud täielikku teed.
- Selle rea all oleval paanil kuvatakse lehe HTML -puu või lehe märgistusvaade. Valitud elemendi HTML on sellel paanil esile tõstetud ja tsentreeritud.
- Parempoolsel paanil kuvatakse selle lehe CSS -stiilileht.
Samm 4. Valige teine element
Kui tööriistariba on avatud, on teise elemendi valimine lihtne. Siin on kolm võimalust seda teha.
- Hõljutage kursorit vastava elemendi esiletõstmiseks HTML -rea kohal (vajalik on Firefox 34+). Selle elemendi valimiseks klõpsake HTML -i.
- Klõpsake tööriistariba vasakus servas tööriista Select Element: ikoon on kursor ruudu kohal. Liigutage kursor lehe kohal elementide esiletõstmiseks ja seejärel klõpsake elemendi valimiseks.
Samm 5. Liikuge koodis
Klõpsake HTML -i paanil ükskõik kus. Koodis liikumiseks kasutage klaviatuuri vasakut ja paremat noolt (vajalik on Firefox 39+). See on kasulik elementide jaoks, mis on käsitsi valimiseks liiga väikesed.
- Hall HTML on seotud elementidega, mida lehel ei kuvata. See hõlmab kommentaare, teatud sõlmi, näiteks ja elemente, mis on CSS -i kuvamisomadusega peidetud.
- Selle sisu laiendamiseks või peitmiseks klõpsake konteinerite vasakul olevat noolt. Kogu sisu laiendamiseks hoidke klõpsates all klahvi alt="Pilt" või suvandit.
Samm 6. Otsige elementi
Otsige otsinguriba (suurendusklaasi ikoon) Rivileiva rea paremas servas. Selle laiendamiseks klõpsake seda ja sisestage otsitav HTML -kood. Sisestades ilmub hüpikaken, milles on loetletud sobivad elemendid. Selle elemendi valimiseks klõpsake ühel ja kerige HTML -paan selle koodini.
Osa 2: HTML -i redigeerimine
Samm 1. Värskendage lehte, et alustada igal ajal uuesti
Kui olete veebiarendaja tööriistade uus kasutaja, siis mõistke, et need ei tee püsivaid muudatusi. Teie muudatused on nähtavad ainult teie ekraanil ja ainult seni, kuni lehe sulgete või värskendate. Ärge kartke katsetada, isegi kui te pole kindel, mis juhtub.
Samm 2. Teksti redigeerimiseks topeltklõpsake HTML -i
Topeltklõpsake HTML -i rida. Sisestage uus tekst ja vajutage muudatuste salvestamiseks sisestusklahvi.
Samm 3. Lisavalikute vaatamiseks klõpsake ja hoidke all riivsaia
Pidage meeles, et tööriistariba Breadcrumb asub HTML -i täispuu ja ülemise tööriistariba vahel. Laia menüü avamiseks klõpsake ja hoidke all mõnda selle rea elementi. Siin on nende valikute mittetäielik juhend:
- „Muuda HTML -ina” muudab sõlme ja kogu selle sisu HTML -puus redigeeritavaks, selle asemel, et iga rida eraldi muuta.
- "Copy Inner HTML" kopeerib kogu sõlme sisu, samas kui "Copy Outer HTML" kopeerib ka sõlme (näiteks või
- "Kleebi →" toob mitu võimalust kleepimiseks, näiteks enne seda sõlme või pärast sõlme esimest tütart.
- : hover,: active ja: focus muudavad elemendi välimust, kui kasutaja sellega suhtleb. Täpse efekti määrab CSS-stiilileht (redigeeritav parempoolselt paanilt).
Samm 4. Lohistage
Koodi elementide ümberkorraldamiseks klõpsake ja hoidke HTML -i all, kuni ilmub katkendlik joon. Liigutage seda puust üles või alla ja laske lahti, kui katkendjoon on soovitud kohas.
Selleks on vaja Firefox 39 või uuemat
Samm 5. Sulgege arendaja tööriistariba
Kõigi nende väljamõeldud akende sulgemiseks vajutage lihtsalt tööriistariba paremas nurgas CSS -paneeli kohal olevat X -i.
Näpunäiteid
- Tööriistariba saate avada ka nende ülemiste menüüvalikute abil.
- Windows: Firefox → Veebiarendaja → Vaheta tööriistu
- Mac või Linux: Tööriistad → Veebiarendaja → Vaheta tööriistu
- Firefox 40 tutvustas võimalust peita CSS -i paan, et anda teile HTML -i redigeerimise ajal rohkem ruumi. Otsige nooleikooni rea Leivaküpsised paremas servas otsinguribast paremal. CSS -i paani peitmiseks klõpsake seda ikooni ja selle laiendamiseks uuesti seda.
- CSS -i paani saab ka redigeerida, kuid see jääb selle juhendi raamest välja. See artikkel õpetab CSS -i põhitõdesid.
