Il codice sorgente della pagina è online. Strumenti per i Webmaster di Google Chrome

06.09.2019 Interessante

Ctrl+U

Come visualizzare il codice sorgente di un elemento?

Fare clic con il tasto destro del mouse sull'elemento della pagina di interesse.

Google Chrome : “Visualizza codice elemento”

Musica lirica : "Ispeziona elemento"

Firefox: “Analizza elemento”

In altri browser, cerca una voce di menu simile.

Ciao a tutti!

Soprattutto all'inizio dell'articolo ho esposto l'intero punto, per coloro che cercano una risposta rapida.

L'informazione potrebbe essere nota a molti, ma poiché scrivo per blogger inesperti, programmatori web e altri minatori, questo articolo della guida deve essere presente.

In futuro, studierai sicuramente il codice sorgente delle pagine e dei singoli elementi.

Diamo un'occhiata a un esempio specifico di come utilizzare la visualizzazione origine pagina.

Ad esempio, vogliamo vedere quali parole chiave vengono utilizzate per una determinata pagina. Andiamo alla pagina web che ci interessa e premiamo Ctrl + U. Il codice sorgente di questa pagina si aprirà in una finestra separata o in una scheda separata. Premi CTRL+F per cercare un pezzo di codice. In questo caso, digitiamo nella casella di ricerca la parola “ parole chiave". Verrai reindirizzato automaticamente a uno snippet di codice con questo meta tag e la parola di ricerca verrà evidenziata.

Per analogia, puoi cercare e studiare altri frammenti di codice.

Visualizzare l'intero codice sorgente di una pagina nella maggior parte dei casi non è molto conveniente, quindi in tutti i browser è possibile visualizzare il codice di un singolo elemento o frammento.

Usiamo un esempio concreto per visualizzare il codice dell'elemento. Ad esempio, vediamo se il collegamento ha un attributo nofollow. Facciamo clic con il tasto destro del mouse sul link che ci interessa e, nel menu contestuale a tendina, clicchiamo con il tasto sinistro sulla voce “Visualizza codice elemento” o simili (a seconda del browser). Di seguito, in una finestra speciale per l'analisi del codice, otteniamo qualcosa di simile.

Vediamo che è presente nel codice del collegamento. Ciò significa che questo collegamento non "perderà" e PR. Ne parleremo più dettagliatamente nei prossimi articoli. Per ora l'importante è che ora sappiate come visualizzare il codice sorgente della pagina e il codice sorgente di un singolo elemento.

". La stessa voce si trova anche nel menu contestuale, che, se si fa clic con il tasto destro del mouse sul testo pagine. Puoi anche usare la scorciatoia da tastiera CTRL + U. Mozilla FireFox non utilizza programmi esterni - originale il codice pagine con l'evidenziazione della sintassi si aprirà in una finestra del browser separata.

In Internet Explorer, fai clic sul menu File e seleziona Modifica nel Blocco note. Al posto del nome Blocco note, se ne può scrivere un altro, assegnato nelle impostazioni del browser per visualizzare l'originale il codice un. Al clic pagine Facendo clic con il pulsante destro del mouse si apre un menu contestuale, che contiene anche un elemento che consente di aprire il sorgente il codice pagine in un programma esterno - "Visualizza HTML- il codice un".

Nel browser Opera, apri il menu, vai nella sezione "Pagina" e avrai la possibilità di selezionare la voce "Sorgente" nella sottosezione "Strumenti di sviluppo". il codice” o voce “Iniziale il codice telaio". I tasti di scelta rapida CTRL+U e CTRL+MAIUSC+U sono assegnati rispettivamente a questa selezione. Nel menu contestuale allegato al clic pagine clic destro, c'è anche la voce "Sorgente il codice". Fonte dell'Opera pagine in un programma esterno assegnato nel sistema operativo o nelle impostazioni del browser per la modifica dei file HTML.

Il browser Google Chrome ha senza dubbio la migliore organizzazione del browser di origine. il codice un. Facendo clic con il tasto destro del mouse è possibile selezionare Visualizza il codice un pagine” 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 il codice un elemento" e nella stessa scheda si apriranno due frame aggiuntivi in cui puoi ispezionare HTML e CSS - il codice elemento pagine. Il browser risponderà spostando il cursore attraverso le righe il codice e, evidenziando gli elementi nella pagina che corrispondono a questa sezione di HTML- il codice un.

Abilità cambia il codice sorgente della pagina- una competenza utile per un utente Internet avanzato. Con l'aiuto della sostituzione del codice HTML, puoi modificare la pagina Web aperta come preferisci. In questo articolo lo diremo come modificare il codice della pagina in Google Chrome. Tuttavia, in altri browser tutto è fatto allo stesso modo, quindi non dovrebbero esserci difficoltà.

Qual è il codice HTML di una pagina?

Ogni pagina che apri nel tuo browser ha il proprio codice nel linguaggio di markup HTML. Questo codice è tag e testo. I tag sono una sorta di etichette che indicano al browser come visualizzare una parte particolare del sito. Il testo è il contenuto della pagina, ciò che l'utente vede. Inoltre, gli stili CSS possono essere collegati alla pagina, che impostano l'aspetto degli elementi della pagina. Per modificare il codice sorgente del sito non è necessario conoscere a fondo HTML e CSS e presto lo vedrai di persona.

Perché cambiare una pagina web?

Puoi modificare i dati sul sito, cambiare il testo del messaggio, fare uno screenshot falso. Tieni presente che tutte le modifiche sono visibili solo a te e scompaiono quando ricarichi la pagina. Anche i dati modificati non saranno reali. Ad esempio, se non ho $ 10 e lo cambio in $ 100, non avrò più soldi. È solo il rendering della pagina da parte del browser. Esempio:

Dopo:

Ad esempio, prenderò lo stesso sito e modificherò l'annuncio precedente dell'articolo “” Apro la pagina principale in Google Chrome. Faccio clic destro sull'elemento che voglio modificare, ad esempio il titolo dell'annuncio e seleziono “Visualizza codice”.

Nella finestra che si apre, vai alla scheda Elementi e guarda il codice HTML della pagina. Dobbiamo trovare il testo che ci interessa. (evidenziato in rosso)

Ora eliminerò il vecchio testo e inserirò quello nuovo.

Ecco fatto, il nome dell'annuncio è stato cambiato. Ora cambierò l'annuncio stesso, i tag e la categoria.

Puoi inserire un'altra immagine modificando l'attributo src nel tag img.

La probabilità di esaminare l'iniziale il codice ragnatela pagine, ricevuto dal browser a seguito di una richiesta al server, si trova infatti in ogni browser Internet. L'accesso al comando corrispondente è organizzato all'incirca in modo identico, ma ci sono differenze significative in quale metodo e in quale forma ti verrà presentato l'iniziale il codice .

Istruzione

1. Nel browser Mozilla FireFox, espandi la sezione "Visualizza" dal menu e fai clic su "Iniziale il codice pagine". La stessa voce si trova anche nel menu contestuale che appare quando si fa clic con il tasto destro del mouse sul testo pagine. È consentita anche la scorciatoia da tastiera CTRL + U. Mozilla FireFox non utilizza programmi esterni: l'iniziale il codice pagine con l'evidenziazione della sintassi si aprirà in una finestra del browser separata.

2. In Internet Explorer, fai clic sul menu File e seleziona Modifica nel Blocco note. Al posto del nome Blocco note, puoi scrivere un altro programma che hai assegnato nelle impostazioni del tuo browser per visualizzare l'iniziale il codice un. Al clic pagine con il tasto destro del mouse si apre un menu contestuale, che ha anche una voce che permette di aprire l'iniziale il codice pagine in un programma esterno - "Visualizza HTML- il codice un".

3. Nel browser Opera, apri il menu, vai alla sezione "Pagina" e probabilmente preferirai la voce "Iniziale" nella sottosezione "Strumenti di sviluppo". il codice” o la voce “Iniziale il codice telaio". I tasti di scelta rapida CTRL+U e CTRL+MAIUSC+U sono assegnati rispettivamente a questa selezione. Nel menu contestuale allegato al clic pagine click destro, c'è anche la voce "Initial il codice". Opera open source pagine in un programma esterno assegnato nel sistema operativo o nelle impostazioni del browser per la modifica dei file HTML.

4. Il browser Google Chrome, senza alcun dubbio, ha la migliore organizzazione per la navigazione iniziale il codice un. Facendo clic con il pulsante destro del mouse su una pagina, potresti preferire la visualizzazione il codice un pagine” e quindi il codice sorgente con l'evidenziazione della sintassi verrà aperto in una scheda separata. Oppure puoi preferire nello stesso menu la riga "Visualizza il codice un elemento" e il browser nella stessa scheda aprirà due frame aggiuntivi in cui puoi ispezionare HTML e CSS - il codice qualsiasi elemento pagine. Il browser risponderà spostando il cursore attraverso le righe il codice e, evidenziando gli elementi nella pagina che corrispondono a questa sezione di HTML- il codice un.

5. Nel browser Apple Safari, espandi la sezione "Visualizza" e seleziona la riga "Visualizza HTML il codice un". Nel menu che appare quando fai clic con il pulsante destro del mouse su Apri pagine, l'elemento corrispondente è intitolato "Visualizza sorgente". I tasti di scelta rapida CTRL + ALT + U sono stati assegnati a questa azione. il codice si apre in una finestra del browser separata.

Se apri una qualsiasi pagina web, questa 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 esempio41.html. Successivamente, avvia il browser e apri il file tramite la voce di menu File > Apri file (Ctrl+O). Nella finestra di dialogo 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 comprenda come interpretare la pagina Web corrente, poiché l'HTML esiste in diverse versioni, inoltre esiste XHTML (EXtensible HyperText Markup Language, extended hypertext markup language), che è simile all'HTML, ma differisce da nella sintassi. Affinché il browser "non si confonda" e capisca in base a quale standard visualizzare una pagina web, è necessario impostare nella prima riga di codice .

Ci sono diversi tipi, differiscono a seconda della versione dell'HTML di destinazione. In tavola. 4.1. vengono fornite le principali tipologie di documenti con la loro descrizione.

Tab. 4.1. DTD validi

DOCTYPE	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 divisione in tipi, poiché la sintassi è la stessa e obbedisce a regole chiare.

La differenza tra le descrizioni dei 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ù "silenzioso" su alcuni difetti del codice, quindi questo tipo è preferibile in alcuni casi.

Ad esempio, HTML e XHTML rigorosi 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, utilizzeremo principalmente lo stretto<!DOCTYPE>, salvo ove 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 nessuno<!DOCTYPE>, in tal caso la pagina Web verrà comunque visualizzata. 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 "sbriciolerà", ad es. verrà visualizzato in un 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 anche chiamato il blocco <head>, può contenere testo e tag, ma il contenuto di questa sezione non è 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, puoi 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 pensati per risolvere molti problemi. Nel sistema operativo Windows, il testo del titolo viene visualizzato nell'angolo superiore sinistro 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. Visualizzazione dell'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>HTML offre sei diversi livelli di intestazioni di testo che indicano l'importanza relativa della sezione che segue l'intestazione. si, tagga <h1>rappresenta l'intestazione di primo livello più importante e il tag <h6>serve a designare un'intestazione di sesto livello ed è la meno significativa. Per impostazione predefinita, l'intestazione del primo livello viene 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 nella 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 creando un commento. Sebbene l'utente non vedrà tale testo, verrà comunque trasmesso nel documento, quindi guardare il codice sorgente può rivelare note nascoste.</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">Articoli correlati in alto</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/it/skachat-play-market-versiya-android-4-4-2-servisy-google-play-vozmozhnosti-i-osobennosti.html"> <div class="img_container"><img src="/uploads/9e5be7753d71e508a6970118b6e2f58a.jpg" border="0" alt="Scarica la versione Play Market per Android 4" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Scarica la versione Play Market per Android 4</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/it/tarif-vodafon-red-s-dlya-razgovorov-po-ukraine-i-v-rouminge-tarif-red-xs.html"> <div class="img_container"><img src="/uploads/733672c5e8037c62aed0eb0b5799078f.jpg" border="0" alt="Tariffa Vodafone red s - per chiamate in Ucraina e in roaming" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Tariffa Vodafone red s - per chiamate in Ucraina e in roaming</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/it/nastroika-televizora-dlya-priema-kanalov-kabelnogo.html"> <div class="img_container"><img src="/uploads/b64481e304c155801b2b15e6d090b9de.jpg" border="0" alt="Come impostare i canali su una TV I canali non vengono salvati su una vecchia TV shivaki" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Come impostare i canali su una TV I canali non vengono salvati su una vecchia TV shivaki</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-onlain-google-chrome-instrumenty-dlya-web-mastera.html" class="vk social-ico"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/ishodnyi-kod-stranicy-onlain-google-chrome-instrumenty-dlya-web-mastera.html" class="fb social-ico"></a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Fit%2Fishodnyi-kod-stranicy-onlain-google-chrome-instrumenty-dlya-web-mastera.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">© 2022 bumotors.ru. Come configurare smartphone e PC. Portale informativo.</span> </div> </div> </div> </div> </body> </html>