1 voto
Buona giornata, cari lettori del mio blog. A volte trovi qualche bella funzionalità sul sito e la domanda inizia a tormentare come il creatore abbia ottenuto un effetto così interessante.
Si scopre che la risposta è piuttosto semplice. E se hai delle abilità, puoi raccogliere molti di questi chip e creare il tuo sito Web unico in breve tempo.
Oggi parleremo di come aprire il codice di una pagina, un determinato elemento e impareremo come utilizzare questa abilità a nostro vantaggio.
Conoscenza di base del codice
Il mio sito è per principianti e prima vorrei parlare brevemente dei siti e del codice in generale.
Per disegnare un'immagine, quindi tagliarla in piccoli pezzi, scrivere il codice, grazie al quale il browser raccoglierà nuovamente tutti gli elementi in un unico insieme. Sembra tutto molto complicato, vero? Niente affatto, e non vale la pena preoccuparsene.
Ecco come vengono costruiti i siti web di qualità. Se vuoi, entra in questo business e studia, non c'è desiderio, nessuno può costringerti.
Posso solo dire una cosa... non c'è niente di più piacevole che vedere come le parole incomprensibili da te scritte si trasformano in un tutt'uno e prendono vita: i link funzionano, i pulsanti si muovono, le immagini si muovono, il testo scorre. Penso di sapere come si sentiva Victor Frankenstein.
Quando inizi a comprendere il linguaggio segreto e vedi che tutto è in realtà molto più semplice di quanto sembrasse inizialmente, non puoi fare a meno di credere nei tuoi poteri e capacità del cervello. Questo è molto bello.
Come sono fatti i siti web? Idealmente, prima. Sta solo dipingendo un quadro. Ad esempio, come mostrato nella figura seguente. Finora, questa è solo un'immagine, una fotografia. Nessun link funziona, quando clicchi non vai da nessuna parte, la ricerca non viene effettuata.
Secondo questo disegno. Guarda lo screenshot qui sotto. Potresti pensare che questo sia un insieme di personaggi ridicolo e molto complesso. In effetti, non tutto è così difficile, c'è un certo algoritmo.
Ci sono solo circa 150 tag e ciascuno di essi è responsabile di un'azione specifica: collegamento, trasferimento, grassetto, colore, titolo e così via. Capirli non è così difficile se hai il desiderio e non ti dispiace il tempo.
Grazie alla conoscenza di questi attributi, quasi tutti i problemi possono essere risolti. Qui ci sono solo modi per raggiungere l'obiettivo, ogni sviluppatore trova il proprio.
I creatori esperti vedono subito come ottenere risultati, mentre altri devono pensare, cercare una risposta negli articoli o nel codice sorgente dei concorrenti. Prendono semplicemente la parte necessaria su un sito di terze parti e la modificano da soli. Ciò riduce notevolmente il processo di lavoro.
Poco dopo, ti mostrerò un esempio specifico.
Visualizza codice
Quindi, lascia che ti mostri prima come procedere se hai bisogno di imparare l'html di qualcun altro. Quindi esamineremo più da vicino tutte le altre questioni.
Il modo migliore
Il metodo che descriverò per primo è un po' complicato per i principianti, ma come introduzione, continua a leggere. Apri la pagina e clicca con il tasto destro del mouse. Seleziona "Salva con nome..."
Salva l'intera pagina web. Come puoi vedere nello screenshot, ho già scaricato tutto in anticipo. Qui abbiamo due cartelle.
Tutto ciò di cui hai bisogno è qui. Ogni elemento. Se lo capisci, puoi ottenere rapidamente tutto ciò di cui hai bisogno. Ma un tale compito sta diventando sempre più impossibile. Il download non viene eseguito. Cosa fare se è vietato copiare la pagina?
È Google Chrome
Come avrai notato, utilizzo più spesso Google Chrome ed è facile riconoscere il codice di qualcun altro in questo browser. Come in linea di principio e in qualsiasi altro. Lo schema non sarà simile, ma identico. Apriamo la pagina di cui vogliamo conoscere il codice e clicchiamo ovunque con il tasto destro del mouse. Nella finestra che appare, fai clic su "Visualizza codice pagina".
Un foglio di codice si aprirà in una nuova finestra, il che è abbastanza difficile da capire per un principiante. Ma non aver paura prima del tempo.
Se hai bisogno di conoscere il codice di un solo elemento, passaci sopra con il mouse e fai clic con il pulsante destro del mouse. Selezioniamo un'altra funzione di Chrome: "Visualizza codice elemento".
Ad esempio, potrei essere interessato a come è stato realizzato il logo, utilizzando un'immagine o un linguaggio di programmazione? Dopotutto, puoi disegnare un quadrato usando css. Molti esperti consigliano di scrivere quante più informazioni possibili nel codice. E come funzionano i siti popolari?
Ecco le informazioni di cui hai bisogno. HTML in alto, CSS in basso. Queste sono due lingue. Il primo è responsabile del componente di testo e il secondo del design. Se non ci fosse css, dovresti prescrivere ogni volta il colore e la dimensione del carattere. Per ogni pagina, è molto lungo. Ma se non ci fosse l'html, non avremmo i testi. Spiegato approssimativamente, ma in generale è tutto così.
A proposito, se sei interessato a come funziona qui, puoi vedere il link all'immagine qui sotto. Ecco la tua risposta.
Mozilla Firefox
Se ti piace lavorare in museruola, allora tutto sarà esattamente lo stesso. Apri la pagina e clicca con il tasto destro del mouse. "Codice sorgente della pagina" se vuoi vedere l'intero codice.
Quando passi con il mouse sopra un elemento, puoi aprire il suo codice.
Qui i dati vengono visualizzati nella parte inferiore dello schermo, ma tutto il resto è esattamente lo stesso.
Browser Yandex
Nel browser Yandex, tutto è esattamente come nelle due opzioni precedenti, apri la pagina, fai clic con il tasto destro, vedi il codice della pagina.
Passiamo sopra l'elemento se vogliamo scoprire esattamente il suo codice.
Tutto viene visualizzato qui allo stesso modo di Chrome.
musica lirica
E infine Opera.
A proposito, potresti aver notato che non è necessario utilizzare il mouse. Per aprire il codice c'è una rapida scorciatoia da tastiera e per tutti i browser è la stessa: CTRL+U.
Per gli elementi: Ctrl+Maiusc+C.
Ecco come appare il risultato.
Sarà interessante per i principianti
Ora guarda come funziona. Trovi un sito e ti piace davvero qualche elemento. Ad esempio, questo. Sai già come aprire il codice dell'elemento.
Ora copialo.
Io uso , incollo questo codice in un nuovo file html, nel tag body (body in inglese).
Ora vediamo come appare tutto nel browser.
Pronto. Affinché il testo sia allineato ai bordi e acquisisca un colore verdastro, è necessario collegare css a questo documento e copiare un altro codice dal sito da cui abbiamo rubato questo.
Ora non lo farò. Ci vuole più tempo: sia mio che tuo. Penso che descriverò tutti i dettagli nelle mie future pubblicazioni. Iscriviti alla newsletter e sii il primo a sapere quando appare un articolo.
Se non lo sopporti, ma vuoi saperne di più su html e css in questo momento, allora posso tradizionalmente consigliarti corsi di formazione gratuiti.
Ecco 33 lezioni che ti permetteranno di padroneggiare l'html - "Corso HTML gratuito"
.
Ed ecco le informazioni complete su css - "Corso CSS gratuito (45 lezioni video!)"
.
Ora ne sai un po' di più. Ti auguro successo nei tuoi sforzi. A presto!
Se apri una qualsiasi pagina web, conterrà elementi tipici che non cambiano a seconda del tipo e della direzione del sito. L'Esempio 4-1 mostra il codice per un semplice documento contenente tag di base.
Esempio 4.1. Codice sorgente della pagina web
Esempio di pagina web
intestazione
Primo paragrafo.
Secondo comma.
Copia il contenuto di questo esempio e salvalo nella cartella c:\www\ come example41.html. Successivamente, avvia il browser e apri il file tramite la voce di menu File > Apri file (Ctrl+O). Nella finestra di selezione del documento, specifica il file example41.html. La pagina web mostrata in Fig. 4.1.
Riso. 4.1. Risultato dell'esecuzione dell'esempio
Elementoha lo scopo di indicare il tipo di documento corrente - DTD (definizione del tipo di documento, descrizione del tipo di documento). Ciò è necessario affinché il browser capisca come interpretare la pagina Web corrente, poiché l'HTML esiste in diverse versioni, inoltre esiste XHTML (EXtensible HyperText Markup Language, linguaggio di markup ipertestuale esteso), che è simile all'HTML, ma differisce da nella sintassi. Affinché il browser "non si confonda" e capisca secondo quale standard visualizzare una pagina web, è necessario impostare nella prima riga di codice
.
Ci sono diversi tipi, differiscono a seconda della versione dell'HTML a cui si rivolgono. A tavola. 4.1. vengono forniti i principali tipi di documenti con la loro descrizione.
Scheda. 4.1. DTD validi | DOCTIPO |
Descrizione |
|---|
| HTML 4.01
|
|
|
Sintassi HTML rigorosa. |
|
|
Sintassi HTML di transizione. |
|
|
I frame vengono utilizzati in un documento HTML. |
| HTML 5
|
|
|
Questa versione di HTML ha un solo doctype. |
| XHTML 1.0
|
|
|
Sintassi XHTML rigorosa. |
|
|
Sintassi XHTML di transizione. |
|
|
Il documento è scritto in XHTML e contiene frame. |
| XHTML 1.1
|
|
|
Gli sviluppatori di XHTML 1.1 si aspettano che sostituisca gradualmente l'HTML. Come puoi vedere, questa definizione non ha una divisione in tipi, poiché la sintassi è la stessa e obbedisce a regole chiare. |
La differenza tra descrizioni di documenti rigorose e transitorie è il diverso approccio alla scrittura del codice del documento. L'HTML rigoroso richiede una stretta aderenza alle specifiche HTML e non perdona gli errori. L'HTML di transizione è più "tranquillo" riguardo ad alcuni difetti del codice, quindi questo tipo è preferibile in alcuni casi.
Ad esempio, HTML rigoroso e XHTML richiedono il tag
, ma nell'HTML di transizione può essere omesso e non specificato. Allo stesso tempo, ricorda che il browser visualizzerà comunque il documento, indipendentemente dal fatto che corrisponda o meno alla sintassi. Tale convalida viene eseguita utilizzando un validatore ed è destinata principalmente agli sviluppatori per tenere traccia degli errori in un documento.</p>
<p>In quanto segue, useremo principalmente lo strict<!DOCTYPE>, salvo dove espressamente indicato. Questo ci permetterà di evitare errori comuni e ci insegnerà a scrivere codice sintatticamente corretto.</p>
<p>Spesso è possibile imbattersi in codice HTML senza utilizzarne alcuno<!DOCTYPE>, la pagina Web verrà comunque visualizzata in tal caso. Tuttavia, può accadere che lo stesso documento venga visualizzato in modo diverso nel browser durante l'utilizzo<!DOCTYPE>e senza di essa. Inoltre, i browser possono visualizzare tali documenti a modo loro, di conseguenza la pagina si "sbriciolerà", ad es. verrà visualizzato in modo completamente diverso, come richiesto dallo sviluppatore. Per evitare tali situazioni, aggiungi sempre<!DOCTYPE>all'inizio del documento.</p><p>Etichetta <html>definisce l'inizio del file HTML, l'intestazione è memorizzata al suo interno ( <head>) e corpo del documento ( <body>
).</p><p>Il titolo del documento, come viene chiamato anche il blocco <head>, può contenere testo e tag, ma il contenuto di questa sezione non viene mostrato direttamente nella pagina, ad eccezione del contenitore <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Etichetta <meta>è universale e aggiunge un'intera classe di funzionalità, in particolare, con l'aiuto dei meta tag, come viene generalmente chiamato questo tag, è possibile modificare la codifica della pagina, aggiungere parole chiave, descrizione del documento e molto altro. In modo che il browser capisca che ha a che fare con la codifica UTF-8 (formato di trasformazione Unicode, formato di trasformazione Unicode) e questa riga viene aggiunta.</p><p>
<title>Esempio di pagina web
Etichetta
definisce il titolo di una pagina web, questo è uno degli elementi importanti progettati per risolvere molti problemi. Nel sistema operativo Windows, il testo del titolo viene visualizzato nell'angolo in alto a sinistra della finestra del 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>Riso. 4.2. Vista intestazione nel browser</p>
<p>Etichetta <title>è obbligatorio e deve essere presente nel codice del documento.</p><p>Assicurati di aggiungere un tag di chiusura</head> per indicare che il cartiglio del documento è completo.</p><p>Corpo del documento <body>è inteso per inserire tag e il contenuto della pagina web.</p><p>
<h1>intestazione</h1>
</p><p>L'HTML offre sei diversi livelli di intestazioni di testo che indicano l'importanza relativa della sezione che segue l'intestazione. si, etichetta <h1>rappresenta l'intestazione di primo livello più importante e il tag <h6>serve a designare un titolo di sesto livello ed è il meno significativo. Per impostazione predefinita, l'intestazione del primo livello è visualizzata con il carattere in grassetto più grande, le intestazioni del livello successivo sono più piccole. tag <h1>...<h6>sono elementi a livello di blocco, iniziano sempre su una nuova riga e, dopo di essi, compaiono altri elementi sulla riga successiva. Inoltre, viene aggiunto uno spazio vuoto prima e dopo l'intestazione.</p><p>
<!-- Комментарий -->
</p><p>Alcuni testi possono essere nascosti dalla visualizzazione nel browser trasformandoli in commenti. Anche se l'utente non vedrà tale testo, verrà comunque trasmesso nel documento, quindi guardare il codice sorgente può rivelare note nascoste.</p>
<p>Ogni utente di Internet ha i suoi siti preferiti sui quali trascorre molto tempo. E solo i pigri non hanno pensato di vedere come è stato creato e in cosa consiste. Non sarà possibile rispondere a tutte queste domande, poiché ci sono molti modi per creare un sito, ma guardare i comandi e i codici che lo compongono è possibile e disponibile pubblicamente a tutti.</p><p>Un'altra domanda è se una persona che non è impegnata nella programmazione capirà alcuni dei simboli che compongono il codice. Ma dagli esempi che verranno mostrati di seguito, qualsiasi utente di Google Chrome potrà visualizzare i singoli elementi dei siti.</p><h2><span>Come visualizzare il codice sorgente di una pagina html in un browser Google</span></h2><i>
</i><p>Affinché tu possa visualizzare il codice della pagina in Chrome, devi andare sul sito che ti interessa e seguire questi passaggi:</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>Questi due punti differiscono nella loro funzionalità e contenuto informativo per l'utente, il programmatore o l'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>Qual è la differenza tra il codice della pagina e solo il comando "Visualizza codice".</span></h2><p>Analizzando ciascuna di queste funzioni, puoi scrivere un articolo separato. Per i programmatori, questa differenza è significativa e comprendono in quali casi è necessario utilizzare "Visualizza codice" e in quale "Visualizza codice pagina" nel browser Google Chrome.</p><p>Ma spiegando per l'utente medio, queste funzioni possono essere suddivise nei seguenti scopi:</p><ol><li>"Visualizzazione codice pagina" è necessaria solo per visualizzare la combinazione principale della pagina. Fondamentalmente, questa è la struttura del sito (senza modelli aggiuntivi sotto forma di file CSS e altre aggiunte rimaste nella cartella del creatore del sito). Questa struttura non è adatta per creare la tua pagina copia-incolla, ma ti permetterà di vedere cosa ha fatto esattamente il programmatore e in quale sequenza in modo che il sito nel browser Google Chrome avesse un tale design esterno.</li>
<li>"Visualizza codice" visualizza una struttura dettagliata che evidenzia tutte le aree interessate nella pagina. Se passi con il mouse su un codice elenco specifico, evidenzierà l'elemento sul sito a cui appartiene.</li>
<li>La visualizzazione del codice della pagina si apre in un browser separato senza la possibilità di modificarlo. Cioè, è adatto solo per copiare e leggere il codice del sito. Ma è una caratteristica altrettanto utile.</li>
<li>"Visualizza codice" è modificabile e puoi modificare qualsiasi elemento nel modo che preferisci. Naturalmente, tutte queste modifiche "vivranno" fino a quando la pagina non verrà aggiornata, ma a volte è divertente scavalcare quelle impostazioni e capire semplicemente perché è necessario questo o quel valore e cosa accadrà se lo cambi. Non dovresti presumere che con tali azioni danneggerai te stesso o il sito: queste modifiche influiscono solo sul codice di Google Chrome e non vanno online.</li>
</ol><h2><span>Considerando la questione di come visualizzare il codice dell'elemento</span></h2><p>Se dobbiamo rispondere a una domanda del genere, allora solo una variante con un esempio suggerisce se stessa. Perché è molto difficile diventare una persona che comprende questo argomento (sviluppatore web) in un articolo, ma è molto più facile mostrarlo con un esempio in modo che la domanda sia risolta.</p> <p>La funzionalità del codice dell'elemento è molto ampia, quindi prendiamo una delle parole sul sito Web del browser Google Chrome. Abbiamo voluto considerare quali parole chiave (nel codice sarà scritto come "parole chiave") sono state utilizzate per il nostro sito. Per fare ciò, eseguiamo il seguente algoritmo:</p><h2><span>Altri modi per utilizzare questa funzione nel browser Google Chrome</span></h2><p>In generale, continuando a rispondere alla domanda su come guardare il codice dell'elemento e perché è necessario, si dovrebbero elencare le sue funzioni. In particolare, grazie alla possibilità di visualizzare il codice di un elemento di qualsiasi sito nel browser Google Chrome, possiamo:</p><ul><li>Vedere la struttura del sito partendo da head ("intestazione del sito") e finendo con end (il comando finale di qualsiasi programma);</li>
<li>Visualizza tutte le funzionalità del sito, ovvero: collegamenti ad altri siti, moduli aggiuntivi da siti esterni e presenza di contatori integrati per la raccolta di informazioni varie;</li>
<li>Scopri se la copia dal sito è vietata o meno;</li>
<li>Il codice registrerà tutti i collegamenti ad altre pagine del sito, nonché il loro design e le azioni successive dopo aver cliccato su di essi.</li>
</ul><blockquote><p>Questo è tutt'altro che un elenco esaustivo. Ma va ricordato che senza conoscenze particolari è quasi impossibile "leggere" il codice di una pagina di Google Chrome ei dati ricevuti non sono praticamente necessari a un normale utente.</p>
</blockquote><h2><span>La voce "Visualizza codice elemento" non funziona</span></h2><p>Va detto subito che ogni sito avrà libero accesso ai codici degli elementi. Cioè, anche i siti più popolari e costosi saranno aperti per visualizzare il loro codice. Pertanto, se l'elemento nel browser Google Chrome non è attivo o dà un errore, ha i seguenti possibili motivi:</p><ul><li>Il profilo utente è danneggiato;</li>
<li>La presenza di malware sul computer;</li>
<li>Blocco di una certa estensione per aumentare le prestazioni (anche questo potrebbe essere).</li>
</ul><h2><span>Correzione di un profilo utente danneggiato</span></h2><p>Per creare un nuovo profilo, devi rimuovere quello vecchio dal tuo computer. Per fare ciò, procedi come segue:</p><ol><li>Chiudi Google Chrome e avvia il browser Windows Explorer integrato.</li>
<li>Immettere il seguente comando nella barra degli indirizzi: %LOCALAPPDATA%\Google\Chrome\User Data\.</li>
<li>Quando la directory si apre, cerca la cartella "Default" e aggiungi "Backup" al suo nome per ottenere quanto segue: "Backup Default".</li>
<li>Ora, dopo un nuovo lancio del browser Chrome, verrà creato un nuovo profilo.</li>
</ol><h2><span>Rimozione di malware o dei suoi resti</span></h2><p>Se il nuovo profilo non ci ha dato accesso al codice dell'elemento della pagina e continuiamo a vedere l'errore, dovremmo fare quanto segue:</p><ol><li>Apri il prompt dei comandi di Windows (Esegui) e digita "cmd" al suo interno.</li>
<li>Immettere il seguente comando nella riga: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".</li>
<li>Dopo aver confermato l'azione, guidiamo in questo: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".</li>
<li>Ora "gpupdate /force" (senza virgolette).</li>
</ol><p>Se tutto è stato eseguito correttamente, dopo aver riavviato il computer, Google Chrome aprirà il codice degli elementi e il browser funzionerà normalmente.</p><p><span class="vrPtdr-yGzE"></span></p>
<p>Quindi, oggi esamineremo diversi strumenti utili per la procedura guidata Web che semplificano la vita durante la creazione di un sito. Iniziamo con la console per i webmaster in Google Chrome. E ripassiamo le domande che più spesso si pongono al webmaster durante l'impaginazione del sito.</p>
<p>Per accedere alla console, apri il tuo sito in Google Chrome, fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina web e scegli Visualizza codice pagina dal menu a discesa contestuale oppure su un elemento specifico da esplorare selezionando Visualizza elemento codice".</p>
<p>In alto avrai diverse schede elencate. Oggi parleremo della scheda "Elementi". <b>,
</b> che presenta gli elementi di una pagina web con evidenziazione di tag, proprietà, evidenziazione dell'annidamento degli elementi, rappresentazione della gerarchia degli elementi nell'albero DOM (accenno in basso, dalla root parent a quella corrente in esame), la possibilità di modificare elementi, un elenco delle loro proprietà, prendere in considerazione la ricerca per elementi e anche familiarizzare con la visualizzazione degli stili css associati agli elementi, ecc..</p>
<h3>Come visualizzare tutti gli stili associati a un particolare elemento? Quale è in uso adesso? In che file si trovano?</h3>
<p>Quindi, non c'è niente di più facile! Apriamo il browser Google Chrome, apriamo il nostro sito - la fonte delle domande, facciamo clic con il tasto destro sull'elemento desiderato se è visibile nel contesto della pagina e selezioniamo la voce "Visualizza codice elemento" nel menu contestuale.</p>
<p>In basso, abbiamo una console con una scheda evidenziata a sinistra " Elementi"E tutti gli stili associati all'elemento a destra, dove: <b>Stili calcolati</b>- si tratta di stili generali di "riepilogo" che sono stati assegnati all'elemento dalle regole css e dalle impostazioni del browser dell'utente (il suo ambiente), e allo stesso tempo la scheda è compressa.</p>
<p>Ma siamo interessati alla scheda "Stili" distribuita sotto di essa, che elenca a sua volta tutti gli stili assegnati all'elemento, nonché i file in cui queste regole sono specificate per questo elemento per tipo, id, classe, nome, proprietà, attributo, ecc. Allo stesso tempo, se la regola css è barrata, significa che è stata ridefinita prima/successiva (il che rende facile tenere traccia di quale delle regole css è una priorità e viene applicata all'elemento in questo caso).</p>
<p>Sotto la console c'è una riga che mostra l'elemento nella gerarchia del documento, consentendo di visualizzare facilmente l'intero elenco di elementi padre dalla radice all'elemento selezionato. Qualcosa come il pangrattato.</p>
<h3>Tag HTML non visibile nel contesto della pagina? O hai bisogno di trovare tutti i tag, ad esempio, per una certa classe, nome, proprietà, tipo?</h3>
<p>Apri il sito in Google Chrome, fai clic con il pulsante destro del mouse, richiama il menu di scelta rapida, seleziona <b>«
</b> Visualizza il codice della pagina <b>»
</b>. Premi contemporaneamente la combinazione di tasti "CTRL + F", inserisci la frase di cui abbiamo bisogno ( <b>per esempio</b><i>:
</i><i>classe="</i><i>imbottitura"</i>) e spostati nell'elenco dei risultati trovati, scorrendo contemporaneamente tutti gli stili associati agli elementi desiderati sul lato destro della pagina.</p>
<h3>Come visualizzare il codice html dell'elemento (elementi) caricato dinamicamente (ad esempio: da Ajax)</h3>
<p>In attesa del caricamento della pagina in Google Chrome. Eseguiamo le azioni necessarie affinché Ajax funzioni. Facciamo clic con il tasto destro sui dati scaricati, selezioniamo "Visualizza codice elemento" nel menu contestuale, esaminiamo il risultato nella console nella scheda "Elementi" a sinistra.</p>
<h3>Visualizza i cambiamenti di stile css in tempo reale</h3>
<p>A proposito, è anche conveniente osservare al volo, se necessario, quali stili sono assegnati a un elemento, ad esempio scorrendo la galleria e altri eventi del timer. Tutti gli stili assegnati tramite javascript in tempo reale verranno visualizzati nella proprietà <b>stile</b> elemento selezionato nella finestra della scheda Elementi.</p>
<h3>Visualizzazione interattiva dell'impatto delle regole css sulla presentazione dei tag html</h3>
<p>Google Chrome fornisce una console interattiva per gli stili css. E questo significa che puoi non solo vedere quali stili sono applicati all'elemento, ma anche spostare il cursore del mouse su una determinata proprietà css, abilitarlo con un segno di spunta a comparsa sulla destra o disabilitarlo deselezionando il flag e visualizzando il risultato risultante sulla pagina.</p>
<h3>Modifichiamo al volo la struttura della presentazione degli elementi html (direttamente nel browser)</h3>
<p>Quindi, abbiamo già imparato come esplorare la struttura di un documento Web in Google Chrome, ora diamo una rapida occhiata alla modifica degli elementi al volo. Andiamo alla console in qualsiasi modo conveniente per noi. Troviamo l'elemento desiderato nella scheda "Elementi", fai clic destro su di esso, chiamando così il menu contestuale a comparsa:</p>
<ul><li><b>Aggiungi attributo</b>- Aggiunge un attributo all'elemento specificato. Non appena il cursore diventa attivo, iniziamo a impostare la proprietà desiderata. <b>Per esempio</b>: Scriviamo name="itemImage", che verrà immediatamente aggiunto al nostro elemento.</li>
<li><b>Modifica attributo</b>– se fai clic con il pulsante destro del mouse su un attributo di un elemento, l'elemento diventa disponibile <b>modificare</b><b>attributi</b>. Clicca, modifica.</li>
</ul><p><b>Esempio di utilizzo:</b> abbiamo dimenticato la password salvata sotto gli asterischi in Google Chrome (se la password è stata salvata in questo browser). Fare clic con il tasto destro sull'elemento con la password, fare clic su "Visualizza codice elemento" <b>,
</b> nella console sul lato sinistro della scheda <b>Elementi</b> fare clic con il pulsante destro del mouse sull'attributo type="password", fare clic con il pulsante sinistro su <b>Modificare</b><b>attributi,</b> cambia attributo <i>tipo="</i><i>parola d'ordine"</i> Su <i>tipo="</i><i>testo"</i>, e qui abbiamo già la stessa password sotto forma di testo anziché di asterischi.</p>
<ul><li><b>Modificare</b><b>html</b>- fare clic con il tasto destro su un elemento nella console <b>Elementi</b>, scegliere <b>Modificare</b><b>HTML,</b> cambia il codice a tuo piacimento.</li>
<li><b>copia</b><b>come</b><b>HTML</b>- copiare la porzione di HTML di cui abbiamo bisogno per ulteriori ricerche, diciamo, in un taccuino, o per altri scopi in cui abbiamo bisogno di applicare esattamente lo stesso layout. Risparmiamo tempo.</li>
<li><b>copia</b><b>XPATH</b>– copia la rappresentazione XPATH della struttura dalla radice dell'elemento genitore all'elemento selezionato.</li>
<li><b>Elimina</b><b>nodo</b>– se è necessario rimuovere l'elemento attualmente selezionato e tutti i suoi figli dal contesto della pagina Web e vedere il risultato.</li>
<li><b>Parola</b><b>avvolgere</b>- renderà la visualizzazione della pagina web nel contesto della console <b>Elementi</b> più leggibile.</li>
</ul><p>Nei seguenti articoli, continueremo a esaminare gli strumenti per i webmaster e, in particolare, faremo conoscenza con il resto delle schede degli strumenti per i webmaster in <b>Google Chrome</b> e prendere in considerazione anche il debug degli errori javascript utilizzando browser diversi</p>
<p>". Lo stesso elemento si trova anche nel menu contestuale, che, se fai clic con il pulsante destro del mouse sul testo <b>pagine</b>. Puoi anche utilizzare la scorciatoia da tastiera CTRL + U. Mozilla FireFox non utilizza programmi esterni - originali <b>il codice</b> <b>pagine</b> con l'evidenziazione della sintassi si aprirà in una finestra separata del browser.</p> <p>In Internet Explorer, fai clic sul menu File e seleziona Modifica in Blocco note. Invece del nome Blocco note, può essere scritto un altro, che hai assegnato nelle impostazioni del browser per visualizzare l'originale <b>il codice</b> un. Al clic <b>pagine</b> Facendo clic con il pulsante destro del mouse si apre un menu contestuale, che ha anche un elemento che consente di aprire la fonte <b>il codice</b> <b>pagine</b> in un programma esterno - "Visualizza HTML- <b>il codice</b> un".</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>Nel browser Opera, apri il menu, vai alla sezione "Pagina" e avrai la possibilità di selezionare la voce "Sorgente" nella sottosezione "Strumenti di sviluppo". <b>il codice</b>” o voce “Initial <b>il codice</b> telaio". I tasti di scelta rapida CTRL+U e CTRL+MAIUSC+U sono assegnati rispettivamente a questa selezione. Nel menu contestuale allegato fare clic <b>pagine</b> tasto destro, c'è anche la voce "Source <b>il codice</b>". Fonte dell'opera <b>pagine</b> in un programma esterno assegnato nel sistema operativo o nelle impostazioni del browser per la modifica dei file 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>Il browser Google Chrome ha senza dubbio la migliore organizzazione del browser di origine. <b>il codice</b> un. Facendo clic con il tasto destro del mouse, è possibile selezionare Visualizza <b>il codice</b> un <b>pagine</b>” e quindi il codice sorgente con l'evidenziazione della sintassi verrà aperto in una scheda separata. Oppure puoi selezionare nello stesso menu la riga "Visualizza <b>il codice</b> un elemento" e nella stessa scheda si apriranno due frame aggiuntivi in cui è possibile ispezionare HTML e CSS - <b>il codice</b> elemento <b>pagine</b>. Il browser risponderà allo spostamento del cursore tra le righe <b>il codice</b> e, evidenziando gli elementi sulla pagina che corrispondono a questa sezione di HTML- <b>il codice</b> un.</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">Principali articoli correlati</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/it/programmy-shpiony-kak-obnaruzhit-shpionskoe-po-na-svoem-kompyutere-kak.html">
<div class="img_container"><img src="/uploads/7194b7b0e129fefa33d3bb329a79d334.jpg" border="0" alt="Come rilevare spyware sul tuo computer Come creare spyware" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Come rilevare spyware sul tuo computer Come creare spyware</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/it/chto-takoe-server-i-zachem-on-nuzhen-chto-takoe-server-i-chem-on-otlichaetsya-ot.html">
<div class="img_container"><img src="/uploads/3197ad442e993ba103ae3f405649ae21.jpg" border="0" alt="Che cos'è un server e in che modo è diverso da un normale computer o hosting?" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Che cos'è un server e in che modo è diverso da un normale computer o hosting?</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/it/sravnitelnyi-obzor-pyati-igrovyh-noutbukov-asus-rog-obzor-noutbuka-asus-rog-g703.html">
<div class="img_container"><img src="/uploads/1afa3ff394877ec26b92e664174865cd.jpg" border="0" alt="Recensione ASUS ROG G703: sfruttare al massimo la durata della batteria del gioco" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Recensione ASUS ROG G703: sfruttare al massimo la durata della batteria del gioco</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">Categorie:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/it/category/programs/">Programmi</a></li>
<li class=""><a href="https://bumotors.ru/it/category/safety/">Sicurezza</a></li>
<li class=""><a href="https://bumotors.ru/it/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/it/category/iron/">Ferro da stiro</a></li>
<li class=""><a href="https://bumotors.ru/it/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/it/category/vkontakte/">In contatto con</a></li>
<li class=""><a href="https://bumotors.ru/it/category/errors/">Errori</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="https://vk.com/share.php?url=https://bumotors.ru/ishodnyi-kod-stranicy-goryachie-klavishi-kak-posmotret-ishodnyi-kod-stranicy-i.html" class="vk social-ico"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/ishodnyi-kod-stranicy-goryachie-klavishi-kak-posmotret-ishodnyi-kod-stranicy-i.html" class="fb social-ico"></a>
<a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Fit%2Fishodnyi-kod-stranicy-goryachie-klavishi-kak-posmotret-ishodnyi-kod-stranicy-i.html" 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">© 2023 bumotors.ru. Come configurare smartphone e PC. Portale informativo.</span>
</div>
</div>
</div>
</div>
</body>
</html>