Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Windows Phone
  • Codul sursă al tastelor rapide ale paginii. Cum să vizualizați codul sursă al paginii și codul articolului

Codul sursă al tastelor rapide ale paginii. Cum să vizualizați codul sursă al paginii și codul articolului

03.08.2019 Windows Phone
1 vot

O zi bună, dragi cititori ai blogului meu. Se întâmplă să găsești o caracteristică frumoasă pe site și întrebarea începe să chinuie cum a obținut creatorul un efect atât de interesant.

Se pare că găsirea răspunsului este destul de simplă. Și dacă aveți anumite abilități, atunci puteți colecta o mulțime de astfel de jetoane și puteți crea propriul site unic într-un timp scurt.

Astăzi vom vorbi despre cum să deschideți codul unei pagini, un anumit element și să învățăm cum să folosiți această abilitate în avantajul dvs.

Cunoștințe de bază ale codului

Site-ul meu este destinat începătorilor și mai întâi aș dori să vă povestesc pe scurt despre site-uri și cod în general.

Pentru a desena o imagine, apoi tăiați-o în părți mici, scrieți cod, datorită căruia browserul va colecta din nou toate elementele într-un singur întreg. Totul pare foarte complicat? Deloc și nu ar trebui să te întristezi din cauza asta.

Așa sunt create site-urile web de calitate. Dacă vrei - implică-te în această afacere și studiază, nu există dorință - nimeni nu te poate forța.

Pot să spun un singur lucru... nimic nu este mai plăcut decât să vezi cum cuvintele de neînțeles scrise de tine se transformă într-un singur întreg și prind viață: legăturile funcționează, butoanele se mișcă, imaginile se mișcă, textul se târăște. Cred că știu cum s-a simțit Victor Frankenstein.

Când începi să înțelegi limbajul secret și vezi că totul este de fapt mult mai simplu decât părea inițial, nu poți să nu crezi în propriile tale forțe și capacități ale creierului. Este foarte misto.

Cum sunt realizate site-urile? În mod ideal, în primul rând. Doar face o poză. De exemplu, așa cum se arată în imaginea de mai jos. În timp ce aceasta este doar o imagine, o fotografie. Niciun link nu funcționează, când dați clic nu mergeți nicăieri, nu se efectuează nicio căutare.

Conform acestei imagini. Aruncă o privire la captura de ecran de mai jos. Ai putea crede că acesta este un set ridicol și foarte complex de simboluri. De fapt, totul nu este atât de dificil, există un anumit algoritm.

Există doar aproximativ 150 de etichete și fiecare dintre ele este responsabilă pentru o anumită acțiune: link, transfer, bold, culoare, titlu și așa mai departe. Nu este atât de greu să le înțelegi dacă există o dorință și nu te deranjează timpul.

Cu cunoașterea acestor atribute, aproape orice sarcină poate fi rezolvată. Iată doar modalități de a atinge obiectivul, fiecare dezvoltator își găsește pe al lui.

Creatorii cu experiență văd imediat cum să obțină rezultatul, în timp ce alții trebuie să gândească, să caute un răspuns în articole sau în codul sursă al concurenților. Ei doar iau partea de care au nevoie de pe un site terță parte și editează singuri. Acest lucru scurtează semnificativ procesul de lucru.

Mai târziu, vă voi arăta un exemplu concret.

Vedeți codul

Deci, permiteți-mi mai întâi să vă arăt cum să procedați dacă trebuie să învățați codul html al altcuiva. Apoi vom arunca o privire mai atentă asupra tuturor celorlalte probleme.

Cel mai bun mod

Metoda pe care o voi descrie mai întâi este puțin dificilă pentru începători, dar, ca introducere, va funcționa, citiți mai departe. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. Selectați elementul „Salvați ca...”

Salvați întreaga pagină web. După cum puteți vedea în captură de ecran, am descărcat deja totul în avans. Avem două dosare aici.

Tot ce ai nevoie este aici. Fiecare articol. Dacă înțelegeți acest lucru, puteți obține rapid tot ce aveți nevoie. Dar, o astfel de sarcină devine din ce în ce mai imposibilă. Descărcarea nu este în curs. Ce să faci dacă este interzisă copierea paginii?

Acesta este Google Chrome

După cum probabil ați observat deja, eu folosesc cel mai adesea Google Chrome și să găsesc codul altcuiva în acest browser este la fel de ușor ca decojirea perelor. Ca în principiu, și în oricare altul. Schema nu numai că va fi similară, ci și identică. Deschideți pagina, al cărei cod vrem să aflăm și faceți clic oriunde cu butonul din dreapta al mouse-ului. În fereastra care apare, faceți clic pe „Vizualizare codul paginii”.

O foaie de cod se va deschide într-o fereastră nouă, ceea ce este destul de greu de înțeles pentru un începător. Dar, nu vă alarmați din timp.

Dacă trebuie să cunoașteți codul unui singur element, treceți cu mouse-ul peste el și faceți clic dreapta. Selectăm o altă funcție a chrome: „Vizualizare cod element”.

De exemplu, m-ar putea interesa modul în care este realizat logo-ul, folosind o imagine sau un limbaj de programare? La urma urmei, poți desena un pătrat folosind css. Mulți experți recomandă să codificați cât mai multe informații posibil. Cum funcționează pe site-uri populare?

Așa că au apărut informațiile necesare. Sus html, jos css. Acestea sunt două limbi. Primul este responsabil pentru componenta text, iar al doilea pentru design. Dacă nu exista css, atunci ar trebui să prescrieți de fiecare dată culoarea, dimensiunea fontului. Pentru fiecare pagină, este o perioadă foarte lungă. Dar dacă nu ar exista html, atunci nu am avea texte. Grozav explicat, dar, în general, totul este așa.

Apropo, dacă sunteți interesat de cum funcționează aici, puteți vedea linkul către poza de mai jos. Iată răspunsul tău.

Mozilla Firefox

Dacă vă place să lucrați în muf, atunci totul va fi exact la fel. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. „Codul sursă al paginii” dacă doriți să vedeți întregul cod în întregime.

Când treceți cu mouse-ul peste orice element, devine posibil să deschideți codul acestuia.

Aici, datele sunt afișate în partea de jos a ecranului, dar în rest totul este exact la fel.

browser Yandex

În browserul Yandex, totul este exact la fel ca în cele două versiuni anterioare, deschideți pagina, faceți clic dreapta, vedeți codul paginii.

Treceți cursorul peste un element dacă vrem să aflăm exact codul acestuia.

Totul este afișat aici în același mod ca în Chrome.

Operă

Și în sfârșit, Opera.

Apropo, poate ați observat că nu este necesar să folosiți un mouse. Există o comandă rapidă de la tastatură pentru a deschide codul și este aceeași pentru toate browserele: CTRL + U.

Pentru articole: Ctrl + Shift + C.

Așa arată rezultatul.

Va fi interesant pentru începători

Acum urmăriți cum funcționează totul. Găsești un site și îți place foarte mult un element. De exemplu, acesta. Știți deja cum să deschideți codul elementului.

Acum copiați-l.

Folosesc, lipim acest cod într-un fișier html nou, în eticheta body (body în engleză).

Acum să vedem cum arată totul în browser.

Gata. Pentru ca textul să fie aliniat la margini și să dobândească o culoare verzuie, trebuie să conectați css la acest document și să copiați un alt cod de pe site-ul de pe care l-am tastat pe acesta.

Acum nu voi face asta. Este nevoie de mai mult timp, atât al meu, cât și al tău. Cred că voi descrie toate detaliile în viitoarele mele publicații. Abonează-te la newsletter și fii primul care află despre articol.

Dacă nu suportați asta și doriți să aflați mai multe despre html și css chiar acum, atunci vă pot recomanda în mod tradițional cursuri de formare gratuite.

Iată 33 de tutoriale care te vor ajuta să stăpânești html - „Curs HTML gratuit” .

Și iată informațiile complete despre css - „Curs CSS gratuit (45 de tutoriale video!)” .

Acum știi puțin mai mult. Îți doresc mult succes în demersurile tale. Pana data viitoare!

Dacă deschideți orice pagină web, aceasta va conține elemente tipice care nu se schimbă în funcție de tipul și focalizarea site-ului. Exemplul 4.1 arată codul pentru un document simplu care conține etichete de bază.

Exemplul 4.1. Codul sursă al paginii web

Exemplu de pagină web

Titlu

Primul paragraf.

Al doilea paragraf.

Copiați conținutul acestui exemplu și salvați-l în folderul c: \ www \ ca example41.html. După aceea, lansați browserul și deschideți fișierul prin elementul de meniu Fișier> Deschide fișier (Ctrl + O)... În caseta de dialog Selectare document, specificați fișierul example41.html. Pagina web prezentată în Figura 4 se va deschide în browser. 4.1.

Orez. 4.1. Exemplu de rezultat al execuției

Elementeste destinat să indice tipul documentului curent - DTD (definiție tip document, descriere tip document). Acest lucru este necesar pentru ca browserul să înțeleagă cum să interpreteze pagina web curentă, deoarece HTML există în mai multe versiuni și există și XHTML (EXtensible HyperText Markup Language), care este similar cu HTML, dar diferă de acesta prin sintaxă. Pentru ca browserul să nu „se încurce” și să înțeleagă în funcție de ce standard să afișeze pagina web și este necesar să se stabilească în prima linie de cod .

Există mai multe tipuri, ele diferă în funcție de versiunea HTML pe care o vizează. Masa 4.1. enumeră principalele tipuri de documente cu descrierile lor.

Tab. 4.1. DTD-uri valide
DOCTYPE Descriere
HTML 4.01
Sintaxă HTML strictă.
Sintaxă HTML tranzițională.
Cadrele sunt folosite în documentul HTML.
HTML 5
Există un singur doctype în această versiune de HTML.
XHTML 1.0
Sintaxă XHTML puternică.
Sintaxă XHTML de tranziție.
Documentul este scris în XHTML și conține cadre.
XHTML 1.1
Dezvoltatorii XHTML 1.1 anticipează că va înlocui treptat HTML. După cum puteți vedea, această definiție nu are o împărțire în tipuri, deoarece sintaxa este aceeași și se supune unor reguli clare.

Diferența dintre descrierile stricte și tranzitorii ale documentelor este abordarea diferită a scrierii codului documentului. HTML strict necesită respectarea strictă a specificațiilor HTML și este neiertător. HTML tranzițional este mai „relaxat” cu privire la unele defecte ale codului, așa că acest tip este de preferat în anumite cazuri.

De exemplu, în HTML și XHTML strict, eticheta poate fi omis sau omis în HTML tranzițional. În același timp, rețineți că browserul va afișa documentul în orice caz, indiferent dacă se potrivește sau nu cu sintaxa. O astfel de verificare este efectuată folosind un validator și este destinată în primul rând dezvoltatorilor să urmărească erorile din document.</p> <p>În cele ce urmează, vom folosi în principal strictul<!DOCTYPE>, cu excepția cazului în care se prevede altfel. Acest lucru ne va permite să evităm greșelile comune și ne va învăța să scriem cod corect sintactic.</p> <p>Este adesea posibil să găsiți cod HTML fără a utiliza deloc<!DOCTYPE>, pagina web va fi afișată în continuare într-un astfel de caz. Cu toate acestea, se poate întâmpla ca același document să fie afișat diferit în browser în timpul utilizării<!DOCTYPE>si fara el. În plus, browserele pot afișa astfel de documente în felul lor; ca urmare, pagina se va „fărâmi”, adică. va fi afișat într-un mod complet diferit decât dorește dezvoltatorul să fie. Pentru a evita astfel de situații, adăugați întotdeauna<!DOCTYPE>până la începutul documentului.</p><p>Etichetă <html>definește începutul fișierului HTML, în interiorul acestuia se află antetul ( <head>) și corpul documentului ( <body> ).</p><p>Titlul documentului, așa cum este numit și blocul <head>, poate conține text și etichete, dar conținutul acestei secțiuni nu este afișat direct pe pagină, cu excepția containerului <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etichetă <meta>este universal și adaugă o întreagă clasă de capabilități, în special, folosind meta-etichete, așa cum se numește generic această etichetă, puteți schimba codarea paginii, puteți adăuga cuvinte cheie, descriere document și multe altele. Pentru ca browserul să înțeleagă că are de-a face cu codificarea UTF-8 (formatul de transformare Unicode), acest șir este adăugat.</p><p> <title>Exemplu de pagină web

Etichetă definește titlul paginii web, acesta fiind unul dintre elementele importante menite să rezolve multe probleme. În sistemul de operare Windows, textul titlului este afișat în colțul din stânga sus al ferestrei browser (Fig. 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Orez. 4.2. Vedere antet browser</p> <p>Etichetă <title>este obligatoriu și trebuie să fie prezent în codul documentului.</p><p>Asigurați-vă că adăugați o etichetă de închidere</head> pentru a indica faptul că blocul de titlu al documentului este complet.</p><p>Corpul documentului <body>este destinat să găzduiască etichetele și conținutul paginii web.</p><p> <h1>Titlu</h1> </p><p>HTML oferă șase niveluri diferite de titluri de text care indică importanța relativă a secțiunii de după titlu. Deci, eticheta <h1>reprezintă cel mai important titlu de prim nivel și eticheta <h6>servește pentru a desemna un titlu de nivel al șaselea și este cel mai puțin semnificativ. În mod implicit, titlul de la primul nivel este afișat cu cel mai mare caracter aldine, titlurile de la nivelul următor sunt mai mici. Etichete <h1>...<h6>sunt elemente bloc, ele încep întotdeauna pe o linie nouă, iar după ele alte elemente sunt afișate pe linia următoare. În plus, spațiul alb este adăugat înainte și după titlu.</p><p> <!-- Комментарий --> </p><p>Unele texte pot fi ascunse de afișare în browser făcându-l un comentariu. Deși utilizatorul nu va vedea un astfel de text, acesta va fi totuși transmis în document, așa că, privind codul sursă, puteți găsi note ascunse.</p> <p>Fiecare internaut are propriile site-uri preferate pe care petrece mult timp. Și numai leneșii nu s-au gândit să vadă cum a fost creat și în ce constă. Nu va fi posibil să răspundeți la toate aceste întrebări, deoarece există multe modalități de a crea un site, dar să vă uitați la comenzile și codurile din care constă este posibil și disponibil public pentru toată lumea.</p><p>O altă întrebare este dacă o persoană care nu este implicată în programare va înțelege vreunul dintre simbolurile care compun codul. Dar din exemplele care vor fi plasate mai jos, orice utilizator Google Chrome va putea vizualiza elemente individuale ale site-urilor.</p><h2><span>Cum să vizualizați codul sursă al unei pagini html într-un browser de la Google</span></h2><i> </i><p>Pentru a putea vedea codul paginii în Chrome, trebuie să accesați site-ul care vă interesează și să urmați acești pași:</p><br><img src='https://i2.wp.com/brauzergid.ru/wp-content/uploads/2016/11/kod-elementa-sajta-v-google-chrome1.jpg' align="center" width="100%" loading=lazy loading=lazy><p>Aceste două puncte diferă unul de celălalt prin funcționalitatea și valoarea lor informațională pentru utilizator, programator sau hacker. <br><img src='https://i0.wp.com/brauzergid.ru/wp-content/uploads/2016/11/kod-elementa-sajta-v-google-chrome2.jpg' align="center" width="100%" loading=lazy loading=lazy></p><h2><span>Care este diferența dintre codul paginii și doar comanda „Vizualizare cod”.</span></h2><p>Analizând fiecare dintre aceste funcții, puteți scrie un articol separat. Pentru programatori, această diferență este semnificativă și înțeleg în ce cazuri este necesar să se folosească „Vizualizați codul” și în care „Vizualizați codul paginii” în browserul Google Chrome.</p><p>Dar explicând pentru utilizatorul obișnuit, puteți împărți aceste funcții în următoarele sarcini:</p><ol><li>„Vizualizarea codului paginii” este necesară doar pentru a vedea combinația principală a paginii. Practic, aceasta este structura site-ului (fără modele suplimentare sub formă de fișiere CSS și alte completări care au rămas în folderul creatorului site-ului). Această structură nu este potrivită pentru crearea propriei pagini prin „copy-paste”, dar vă va permite să vedeți ce anume a făcut programatorul și în ce secvență pentru ca site-ul din browserul Google Chrome să aibă un astfel de design extern.</li> <li>Vizualizare cod afișează o structură detaliată care evidențiază toate zonele care sunt afectate pe pagină. Dacă treceți cu mouse-ul peste un anumit cod de listă, acesta va evidenția elementul de pe site căruia îi aparține.</li> <li>Vizualizarea codului paginii se deschide într-un browser separat, fără posibilitatea de a o edita. Adică este potrivit doar pentru copierea și citirea codului site-ului. Dar aceasta este o caracteristică la fel de utilă.</li> <li>„Vizualizare cod” este modificabil și puteți edita orice element, așa cum vă convine. Desigur, toate aceste modificări vor „vii” până când pagina este reîmprospătată, dar uneori este amuzant să treci prin acele setări și să înțelegi doar pentru ce este aceasta sau acea valoare și ce se va întâmpla dacă o schimbi. Nu presupuneți că, făcând acest lucru, vă veți face rău dvs. sau site-ului - aceste modificări sunt valabile doar în codul Google Chrome și nu sunt online.</li> </ol><h2><span>Luați în considerare întrebarea cum să vizualizați codul elementului</span></h2><p>Dacă trebuie să răspundem la o astfel de întrebare, atunci se sugerează doar o variantă cu un exemplu. Pentru că într-un articol este foarte greu să devii o persoană care să înțeleagă acest subiect (dezvoltator web), dar să arăți prin exemplu pentru ca întrebarea să fie rezolvată este mult mai ușor de făcut.</p> <p>Funcționalitatea codului elementului este foarte largă, așa că luăm unul dintre cuvintele de pe site-ul browserului Google Chrome. Am vrut să luăm în considerare ce cuvinte cheie (în cod va fi scris „cuvinte cheie”) au fost folosite pentru site-ul nostru. Pentru a face acest lucru, efectuăm următorul algoritm:</p><h2><span>Alte modalități de a utiliza această funcție în browserul Google Chrome</span></h2><p>În general, continuând să răspundeți la întrebarea cum să vizualizați codul elementului și de ce este necesar, ar trebui să enumerați funcțiile acestuia. Și anume, datorită capacității de a vizualiza codul unui element al oricărui site în browserul Google Chrome, putem:</p><ul><li>Vezi structura site-ului începând de la head ("site header") și terminând cu end (comanda finală a oricărui program);</li> <li>Vizualizați toate funcțiile site-ului, și anume: link-uri către alte site-uri, module suplimentare de pe site-uri externe și prezența contoarelor încorporate pentru colectarea diverselor informații;</li> <li>Aflați dacă copierea de pe site este interzisă sau nu;</li> <li>Codul va conține toate linkurile către alte pagini ale site-ului, precum și designul acestora și acțiunile ulterioare după clic pe ele.</li> </ul><blockquote><p>Aceasta este departe de a fi o listă finită. Dar trebuie amintit că fără cunoștințe speciale este aproape imposibil să „citești” codul unei pagini Google Chrome, iar datele obținute sunt practic inutile pentru un utilizator obișnuit.</p> </blockquote><h2><span>Elementul „Vizualizare cod articol” nu funcționează</span></h2><p>Trebuie spus imediat că fiecare site va avea acces liber la codurile de elemente. Adică, chiar și cele mai populare și scumpe site-uri vor fi deschise pentru a-și vizualiza codul. Prin urmare, dacă elementul din browserul Google Chrome nu este activ sau dă o eroare, are următoarele motive posibile:</p><ul><li>Profilul utilizatorului este corupt;</li> <li>Prezența malware pe computer;</li> <li>Blocare cu o anumită extensie pentru a crește performanța (chiar și asta poate fi).</li> </ul><h2><span>Remedierea unui profil de utilizator deteriorat</span></h2><p>Pentru a crea un profil nou, trebuie să-l ștergeți pe cel vechi de pe computer. Pentru a face acest lucru, faceți următoarele:</p><ol><li>Închideți Google Chrome și lansați browserul Windows Explorer încorporat.</li> <li>Introduceți următoarea comandă în bara de adrese:% LOCALAPPDATA% \ Google \ Chrome \ Date utilizator \.</li> <li>Când directorul se deschide, căutați folderul „Default” și adăugați „Backup” la numele acestuia pentru a obține următoarele: „Backup Default”.</li> <li>Acum, după repornirea browserului Chrome, va fi creat un nou profil.</li> </ol><h2><span>Îndepărtăm programele malware sau rămășițele acestuia</span></h2><p>Dacă noul profil nu ne-a dat acces la codul elementului de pagină și tot vedem eroarea, ar trebui să facem următoarele:</p><ol><li>Deschideți linia de comandă Windows ("Run") și introduceți comanda "cmd" acolo.</li> <li>Introduceți următoarea comandă în linie: RD / S / Q "% WinDir% \ System32 \ GroupPolicyUsers".</li> <li>După confirmarea acțiunii, mergem în acest: RD / S / Q „% WinDir% \ System32 \ GroupPolicy”.</li> <li>Acum „gpupdate / force” (fără ghilimele).</li> </ol><p>Dacă totul a fost făcut corect, atunci după repornirea computerului, Google Chrome va deschide codul elementului și browserul va funcționa normal.</p><p><span class="vrPtdr-yGzE"></span></p> <p>Așadar, astăzi ne vom uita la câteva instrumente utile pentru un webmaster care ușurează viața pentru aspectul site-ului web. Să începem cu consola pentru webmasteri din Google Chrome. Și să trecem peste întrebările care apar cel mai adesea de la web-master în timpul aspectului site-ului.</p> <p>Pentru a ajunge la consolă, deschideți site-ul în Google Chrome, faceți clic dreapta oriunde pe pagina web și selectați „Vizualizare codul paginii” în meniul derulant contextual sau pe un anumit element pentru cercetare selectând „Vizualizare element de cod".</p> <p>În partea de sus, veți avea mai multe file listate. Astăzi vom vorbi despre fila „Elemente”. <b>, </b> care prezintă elementele unei pagini web cu evidențierea etichetelor, proprietăților, evidențierea imbricației elementelor, reprezentând ierarhia unui element în arborele DOM (hint în partea de jos, de la părintele rădăcină până la cel explorat curent), capacitatea de a editați elemente, o listă a proprietăților lor, luați în considerare căutarea după elemente, precum și să ne familiarizăm cu vizualizarea stilurilor CSS asociate elementelor etc.</p> <h3>Cum pot vedea toate stilurile care sunt asociate cu un anumit element? Care se aplică acum? În ce fișiere se află?</h3> <p>Deci, nimic nu poate fi mai ușor! Deschideți browserul Google Chrome, deschideți site-ul nostru - sursa întrebărilor, faceți clic dreapta pe elementul dorit, dacă acesta este vizibil în contextul paginii și selectați „Vizualizare cod element” din meniul contextual.</p> <p>În partea de jos, avem o consolă cu o filă evidențiată în stânga „Elemente” și toate stilurile asociate cu elementul din dreapta, unde: <b>Stiluri calculate</b>- acestea sunt stiluri generale „rezumat” care au fost atribuite unui element din regulile css și setările browserului utilizatorului (mediul său), iar fila este restrânsă.</p> <p>Dar ne interesează fila „Stiluri”, extinsă sub ea, în care sunt listate pe rând toate stilurile alocate unui element, precum și fișierele în care aceste reguli sunt indicate pentru acest element prin tipul, id-ul, clasa, numele acestuia. , proprietate, atribut etc... În același timp, dacă regula css este tăiată, atunci a fost redefinită mai devreme/mai târziu (ceea ce face ușor de urmărit care dintre regulile css are prioritate și se aplică în acest caz elementului).</p> <p>Sub consolă este o linie care arată un element din ierarhia documentului, vă permite cu ușurință să vizualizați întreaga listă de elemente părinte de la rădăcină la elementul selectat. Ceva de genul pesmeturilor de pâine.</p> <h3>Eticheta HTML nu este vizibilă în contextul paginii? Sau trebuie să găsiți toate etichetele, de exemplu, după o anumită clasă, nume, proprietate, tip?</h3> <p>Deschideți site-ul în Google Chrome, faceți clic dreapta, deschideți meniul contextual, selectați <b>« </b> Vizualizați codul paginii <b>» </b>... Apăsați combinația de taste „CTRL + F” în același timp, introduceți expresia de care avem nevoie ( <b>De exemplu</b><i>: </i><i>clasa = "</i><i>umplutura "</i>) și navigați prin lista de rezultate găsite, pe parcurs căutând prin toate stilurile asociate elementelor dorite din partea dreaptă a paginii.</p> <h3>Cum să vizualizați codul html al elementului (ele) încărcate dinamic (de exemplu: de Ajax)</h3> <p>Asteptam ca pagina sa se incarce in Google Chrome. Efectuăm acțiunile necesare pentru ca Ajax-ul să funcționeze. Faceți clic dreapta pe datele încărcate, selectați „Vizualizare cod element” din meniul contextual, examinați rezultatul în consolă din fila „Elemente” din stânga.</p> <h3>Vizualizați modificările stilurilor CSS în timp real</h3> <p>Apropo, este, de asemenea, convenabil să observați, dacă este necesar, ce stiluri sunt atribuite unui element din mers, de exemplu, atunci când derulați galeria și alte evenimente prin cronometru. Toate stilurile atribuite de javascript în timp real vor fi afișate în proprietate <b>stil</b> elementul selectat în fereastra din fila „Elemente”.</p> <h3>Previzualizare live a efectului regulilor css asupra prezentării etichetelor html</h3> <p>Google Chrome oferă o consolă interactivă pentru stiluri CSS. Aceasta înseamnă că nu puteți doar să vizualizați ce stiluri sunt aplicate elementului, ci și să mutați cursorul mouse-ului peste CSS specificat din proprietăți, să îl activați folosind caseta de selectare pop-up din dreapta sau să îl dezactivați debifând steag și vizualizarea rezultatului rezultat pe pagină.</p> <h3>Modificarea structurii de prezentare a elementelor html din mers (chiar în browser)</h3> <p>Deci, am învățat deja cum să explorăm structura unui document web în Google Chrome, acum ne vom uita pe scurt la editarea elementelor din mers. Mergem la consolă în orice mod convenabil pentru noi. Găsim elementul necesar în fila „Elemente”, faceți clic dreapta pe el, apelând astfel meniul contextual pop-up:</p> <ul><li><b>Adăugați un atribut</b>- adaugă un atribut pentru elementul specificat. De îndată ce cursorul devine activ, începem să setăm proprietatea dorită. <b>de exemplu</b>: să scriem nume = „itemImage”, care va fi adăugat imediat articolului nostru.</li> <li><b>Editați atributul</b>- dacă faceți clic dreapta pe un atribut de element, articolul devine disponibil <b>Editați | ×</b><b>atribut</b>... Faceți clic, editați.</li> </ul><p><b>Exemplu de utilizare:</b> am uitat parola salvată sub asteriscuri în Google Chrome (dacă parola a fost salvată în acest browser). Faceți clic dreapta pe elementul cu o parolă, faceți clic pe „Vedeți codul articolului” <b>, </b>în consola din stânga în filă <b>Elemente</b> faceți clic pe tipul de atribut = „parolă” cu butonul dreapta al mouse-ului, faceți clic stânga pe <b>Editați | ×</b><b>atribut,</b> schimbarea atributului <i>tip = "</i><i>parola "</i> pe <i>tip = "</i><i>text "</i>, iar acum, în loc de asteriscuri, aceeași parolă este afișată sub formă de text.</p> <ul><li><b>Editați | ×</b><b>html</b>- faceți clic dreapta pe un element din consolă <b>Elemente</b>, alege <b>Editați | ×</b><b>html,</b> schimba codul dupa bunul plac.</li> <li><b>Copie</b><b>la fel de</b><b>HTML</b>- copiați porțiunea HTML de care avem nevoie pentru cercetări ulterioare, să zicem, într-un bloc de note sau pentru alte scopuri în care trebuie să aplicăm exact același aspect. Economisim timp.</li> <li><b>Copie</b><b>XPATH</b>- copiează reprezentarea XPATH a structurii de la rădăcina elementului părinte în elementul selectat.</li> <li><b>Șterge</b><b>nodul</b>- dacă trebuie să eliminați elementul selectat curent și toți copiii acestuia din contextul paginii web și să vedeți rezultatul.</li> <li><b>Cuvânt</b><b>înfășura</b>- va reda vizualizarea paginii web în contextul consolei <b>Elemente</b> mai lizibil.</li> </ul><p>În articolele următoare, vom continua analiza instrumentelor pentru webmaster și, în special, ne vom familiariza cu restul filelor instrumentelor pentru webmaster în <b>Google Chrome</b>, și luați în considerare, de asemenea, depanarea erorilor javascript utilizând browsere diferite</p> <p>". Există același element în meniul contextual, care, dacă faceți clic dreapta pe text <b>pagini</b>... De asemenea, puteți utiliza comanda rapidă de la tastatură CTRL + U. Mozilla FireFox nu folosește programe externe - originalul <b>Codul</b> <b>pagini</b> cu evidențierea sintaxă se va deschide într-o fereastră separată a browserului.</p> <p>În Internet Explorer, faceți clic pe secțiunea Fișier din meniu și selectați Editați în Notepad. În loc de numele Notepad, se poate scrie un altul, pe care l-ați atribuit în setările browserului pentru a vizualiza originalul <b>Codul</b> A. La clic <b>pagini</b> făcând clic dreapta pe meniul contextual, care are și un element care vă permite să deschideți originalul <b>Codul</b> <b>pagini</b>într-un program extern - „Vizualizare HTML- <b>Codul</b> A".</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p> <p>În browser Opera, deschideți meniul, accesați secțiunea „Pagină” și veți putea selecta în subsecțiunea „Instrumente de dezvoltare” articolul „Sursă”. <b>Codul</b>„Sau articolul” Inițiala <b>Codul</b> cadru". Comenzile rapide CTRL + U și, respectiv, CTRL + SHIFT + U sunt alocate acestei selecții. În meniul contextual ancorat la un clic <b>pagini</b> faceți clic dreapta, există și elementul „Inițial <b>Codul</b>". Sursa opera <b>pagini</b>într-un program extern care este alocat în sistemul de operare sau în setările browserului pentru editarea fișierelor HTML.</p> <p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p> <p>Browserul Google Chrome are, fără îndoială, cea mai bună organizare pentru vizualizarea originalului <b>Codul</b> A. Făcând clic dreapta, puteți selecta Vizualizare <b>Codul</b> A <b>pagini</b>„Și apoi sursa cu evidențierea sintaxelor va fi deschisă într-o filă separată. Sau puteți selecta linia „Vizualizare <b>Codul</b> un element „și în aceeași filă se vor deschide două cadre suplimentare în care puteți inspecta HTML și CSS <b>Codul</b> element <b>pagini</b>... Browserul va reacționa la mutarea cursorului de-a lungul liniilor <b>Codul</b> a, evidențiind elementele de pe pagină care corespund acestei secțiuni a HTML- <b>Codul</b> A.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Top articole similare</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/fallout-4-izmenenie-vneshnosti-konsol-otlichaetsya-dvizhenie-myshi-po.html"> <div class="img_container"><img src="/uploads/686669656a5df8de6a6f9d463fe60026.jpg" border="0" alt="Mișcare diferită a mouse-ului pe verticală și pe orizontală" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Mișcare diferită a mouse-ului pe verticală și pe orizontală</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/kak-szhat-tekstury-v-fallout-4-ruchnaya-nastroika-grafiki.html"> <div class="img_container"><img src="/uploads/d7c98012600dd0a7e0e0c14fa8d2e1eb.jpg" border="0" alt="Cum să comprimați texturile în Fallout 4" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Cum să comprimați texturile în Fallout 4</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/nizkie-nastroiki-grafiki-fallout-4-ostalos-tolko-ponyat-nuzhnyi-uroven.html"> <div class="img_container"><img src="/uploads/da3d853bd41405e0322c2a1e985df14b.jpg" border="0" alt="Rămâne doar să înțelegem nivelul cerut" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Rămâne doar să înțelegem nivelul cerut</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Categorii:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/ro/category/programs/">Programe</a></li> <li class=""><a href="https://bumotors.ru/ro/category/safety/">Siguranță</a></li> <li class=""><a href="https://bumotors.ru/ro/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/ro/category/iron/">Fier</a></li> <li class=""><a href="https://bumotors.ru/ro/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/ro/category/vkontakte/">In contact cu</a></li> <li class=""><a href="https://bumotors.ru/ro/category/errors/">Erori</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2021 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.</span> </div> </div> </div> </div> </body> </html>