Wondershare EdrawMind
Galerie de cartes mentales Tipi di tag HTML
- 12
Tipi di tag HTML
Questa è una mappa mentale sui tipi di tag HTML. I contenuti principali includono: 3. Tag comunemente usati all'interno del corpo, 2. La struttura di base dei documenti HTML, 1. Cos'è l'HTML e cosa non lo è? .
Modifié à 2024-04-26 15:22:04
- Recommandé pour vous
- Contour
tag html
etichetta di script
1. Inseriscilo nel tag <head>
Poiché i documenti HTML vengono caricati dal browser dall'alto verso il basso, se inserisci il codice JavaScript nel tag <head>, JavaScript non potrà ottenere gli elementi richiesti dal tag <body> e il DOM non verrà caricato e JavaScript non può essere eseguito. Pertanto, il codice JavaScript viene inserito nel tag <head>, che generalmente viene caricato in anticipo in risposta alle azioni dell'utente. Non influisce sul contenuto visualizzato nel browser del documento HTML e garantisce che lo script venga caricato prima di qualsiasi chiamata.
2. Inseriscilo nel tag <body>
Il tag <script> situato all'interno del tag <body> può contenere funzioni o istruzioni che possono essere eseguite immediatamente, tuttavia, se è necessario interagire con elementi della pagina Web (come ottenere il valore di un determinato tag o assegnare un valore a a determinato tag), è necessario inserire il tag <The script> dopo l'elemento della pagina web.
3. Posizionalo dopo il tag <body>
Quando ci si prepara a interpretare il codice JavaScript qui, l'intera pagina web è già stata caricata, quindi questo è il posto più adatto per i comandi che devono essere eseguiti immediatamente, ma le funzioni personalizzate e simili non sono adatte.
rel=nofollow
Il tag nofollow impedisce agli spider di eseguire la scansione e seguire questo collegamento.
Il tag meta robots impedisce agli spider di tracciare o indicizzare l'intero collegamento della pagina
https://jingyan.baidu.com/article/75ab0bcba6c61fd6874db279.html
Tag comuni
https://blog.csdn.net/qq_46137324/article/details/131971697
Elementi HTML5 standardizzati
elemento radice
Elemento Descrizione <html> Rappresenta la radice di un documento HTML o XHTML. Tutti gli altri elementi devono essere figli di questo elemento.
Metadati del documento
Elemento Descrizione <testa> Rappresenta una raccolta di metadati su un documento, inclusi collegamenti o contenuto di script o fogli di stile. <titolo> Definisce il titolo del documento, che verrà visualizzato nella barra del titolo o nella scheda del browser. Questo elemento può contenere solo testo, i tag contenuti non verranno interpretati. <base> Definisce l'URL di base per gli URL relativi nella pagina. <collegamento> Utilizzato per collegare JavaScript o CSS esterni a questo documento. <meta> Definisce i metadati che non possono essere descritti da altri elementi HTML. <stile> Utilizzato per CSS in linea.
sceneggiatura
Elemento Descrizione <copione> Definire uno script in linea o collegarsi a uno script esterno. Il linguaggio di scripting è JavaScript. <noscript> Definisce il testo alternativo visualizzato quando il browser non supporta lo scripting. Un contenitore che crea un'istanza del contenuto in fase di esecuzione tramite JavaScript.
capitolo
Elemento Descrizione <corpo> Rappresenta il contenuto di un documento HTML. Può esserci un solo elemento <body> in un documento. Definisce una sezione nel documento. Definire sezioni contenenti solo collegamenti di navigazione. Definire un blocco di contenuto completamente indipendente che possa distinguersi dal resto del contenuto. Definisci il contenuto meno rilevante per il contenuto della pagina: se rimosso, il contenuto rimanente avrà comunque senso. <h1>,<h2>,<h3>,<h4>,<h5>,<h6> L'elemento title implementa sei livelli di titoli di documenti, <h1> è il titolo più grande e <h6> è il titolo più piccolo. L'elemento del titolo descrive brevemente l'argomento del capitolo. Definisce l'intestazione della pagina o della sezione. Spesso include un logo, un titolo della pagina e un sommario di navigazione. Definisce la fine di una pagina o sezione. Spesso contiene informazioni sul copyright, collegamenti a informazioni legali e indirizzi per suggerimenti di feedback. <indirizzo> Definire una sezione contenente le informazioni di contatto. Definire il contenuto principale o importante del documento.
Organizzare i contenuti
Elemento Descrizione <p> Definire un paragrafo. <hr> Rappresenta il separatore tra i paragrafi in un capitolo, articolo o altro contenuto lungo. <pre> Significa che il contenuto è stato composto in anticipo e il formato dovrebbe essere mantenuto. <citazione> Rappresenta citazioni da altre fonti. <ol> Definire un elenco ordinato. <ul> Definire un elenco non ordinato. <li> Definisce un elemento dell'elenco in un elenco. <dl> Definire un elenco di definizioni (un elenco di termini e le relative definizioni). <dt> Rappresenta un termine definito dal successivo <dd>. <dd> Rappresenta la definizione del termine che lo precede. Rappresenta una legenda associata al documento. Rappresenta la descrizione di una leggenda. <div> Rappresenta un contenitore generale senza significato speciale.
forma di testo
Elemento Descrizione <a> Rappresenta un collegamento ipertestuale a un'altra risorsa. <em> Rappresenta il testo di enfasi. <forte> Rappresenta un testo particolarmente importante. <piccolo> Rappresenta commenti, ad esempio dichiarazioni di non responsabilità, dichiarazioni di copyright, ecc., che non sono importanti per la comprensione del documento. <s> Rappresenta contenuti imprecisi o irrilevanti. <cita> Rappresenta il titolo dell'opera. <q> Rappresenta un riferimento in linea. <dfn> Rappresenta la definizione di un termine contenuta nel suo antenato più vicino. <abbr> Rappresenta un'omissione o un'abbreviazione e il suo contenuto completo è nell'attributo titolo. Associato all'equivalente leggibile dalla macchina di un contenuto (questo elemento è solo nella versione WHATWG dello standard HTML, non nella versione W3C dello standard HTML5). Rappresenta un valore di data e ora; l'equivalente leggibile dalla macchina è specificato tramite l'attributo datetime. <codice> Rappresenta il codice del computer. <var> Rappresenta le variabili nel codice. <campione> Rappresenta l'output di un programma o di un computer. <kbd> Rappresenta l'input dell'utente, in genere l'output dalla tastiera, ma può anche rappresentare altri input, ad esempio l'input vocale. <sub>,<sup> Rappresenta rispettivamente il pedice e l'apice. <i> Rappresenta un pezzo di testo di diversa natura, come termini tecnici, frasi in lingua straniera, ecc. <b> Rappresenta una parte di testo che necessita di attenzione. <u> Rappresenta un commento testuale che deve essere sottolineato, ad esempio contrassegnando testo con errori di ortografia, ecc. Rappresenta un testo citato che necessita di essere evidenziato. Rappresenta il testo contrassegnato da commenti in rubino, come i caratteri cinesi e il loro pinyin. Rappresenta i commenti in rubino, come il Pinyin cinese. Rappresenta testo extra inserito attorno ai commenti Ruby, utilizzato per fornire una visualizzazione amichevole dei commenti nei browser che non supportano la visualizzazione dei commenti Ruby. Rappresenta una parte di testo che deve essere separata dalla direzione del testo dell'elemento genitore. Permette di incorporare un testo in un formato di orientamento del testo diverso o sconosciuto. <bdo> Specifica la direzione del testo degli elementi figlio, sovrascrivendo esplicitamente la direzione del testo predefinita. <span> Rappresenta una parte di testo senza significato speciale. Questo elemento può essere utilizzato quando altri elementi semantici non sono adatti al testo. <br> Rappresenta una nuova riga. Rappresenta l'opportunità di interruzione di parola (Opportunità di interruzione di parola), in cui verrà aggiunta un'interruzione di riga quando il testo è troppo lungo e deve essere interrotto.
modificare
Elemento Descrizione <ins> La definizione aggiunge contenuto al documento. <canc> Definisce il contenuto da rimuovere dal documento.
Incorpora contenuto
Elemento Descrizione <immagine> rappresenta un'immagine. <iframe> Rappresenta un frame in linea. Rappresenta una risorsa esterna incorporata, ad esempio un'applicazione o un contenuto interattivo. <oggetto> Rappresenta una risorsa esterna, come un'immagine, un documento secondario HTML, un plug-in, ecc. <parametro> Rappresenta i parametri del plug-in specificati dall'elemento <object>. Rappresenta un video, i relativi file video e sottotitoli e fornisce un'interfaccia utente per la riproduzione del video. Rappresenta un pezzo di suono o flusso audio. Specificare la sorgente multimediale per gli elementi multimediali come <video> o <audio>. Specifica una traccia di testo (sottotitolo) per elementi multimediali come <video> o <audio>. Rappresenta un'area bitmap su cui è possibile eseguire il rendering in tempo reale di elementi grafici, ad esempio grafici, disegni di giochi, ecc. tramite script. <mappa> Insieme all'elemento <area> definisce l'area di mappatura dell'immagine. <zona> Insieme all'elemento <map> definisce l'area di mappatura dell'immagine. Definire un'immagine vettoriale incorporata. Definire una formula matematica.
foglio
Elemento Descrizione <tabella> Definire dati multidimensionali. <didascalia> Rappresenta il titolo della tabella. <colgruppo> Rappresenta un gruppo di colonne singole o multiple in una tabella. <col> Rappresenta una colonna in una tabella. <corpo> Rappresenta una parte specifica di dati nella tabella (il corpo della tabella). <testa> Rappresenta un'etichetta di colonna (intestazione) nella tabella. <tpiede> Rappresenta un riepilogo di colonna (piè di pagina) nella tabella. <tr> Rappresenta una riga nella tabella. <td> Rappresenta una cella nella tabella. <th> Rappresenta la cella di intestazione nella tabella.
modulo
Elemento Descrizione <modulo> Rappresenta un modulo, composto da controlli. <insieme di campi> Rappresenta il gruppo di controllo. <legenda> Rappresenta il titolo del gruppo di controllo <fieldset>. <etichetta> Rappresenta il titolo del controllo del modulo. <input> Rappresenta un'area dati (casella di testo, pulsante di opzione, casella di controllo, ecc.) che consente all'utente di modificare i dati. <pulsante> Rappresenta il pulsante . <seleziona> Rappresenta la casella a discesa. Rappresenta un insieme di opzioni predefinite fornite ad altri controlli. <gruppo opt> Rappresenta un raggruppamento di opzioni. <opzione> Rappresenta un'opzione all'interno di un elemento <select> o di un elemento <datalist> <area testo> Rappresenta una casella di testo su più righe. Rappresenta un controllo del generatore di coppie di chiavi. Rappresenta il valore calcolato. Rappresenta una barra di avanzamento. Rappresenta il dispositivo di scorrimento.
elementi interattivi
Elemento Descrizione Rappresenta un widget su cui l'utente può fare clic per ottenere informazioni o controlli aggiuntivi. Rappresenta un riepilogo o un titolo dell'elemento <details>. Rappresenta una voce di menu su cui l'utente può fare clic. Rappresenta il menù.
Tipi di tag HTML
1. 1. Cos'è l'HTML e cosa non lo è?
1.1. Cos'è l'HTML?
Hypertext Markup Language (HTML) è un linguaggio di markup utilizzato per creare pagine web.
Estensione del file della pagina Web: .html o .htm
Essenzialmente, sono regole che possono essere riconosciute dal browser. Scriviamo pagine web secondo le regole e il browser visualizza le nostre pagine web secondo le regole. Lo stesso tag può essere interpretato in modo diverso da browser diversi. (problema di compatibilità)
1.2. Cosa non è l'HTML
L'HTML è un linguaggio di markup, non un linguaggio di programmazione. L'HTML utilizza i tag per descrivere le pagine web.
2. 2. Struttura di base del documento HTML
Esempio di struttura di base
<!DOCTYPEhtml> <html lang="zh-CN"> <testa> <meta charset="UTF-8"> <title>Priorità stile CSS</title> </testa> <corpo> </corpo> </html>
Descrizione del formato base dell'HTML
Nota: per le pagine web cinesi, è necessario utilizzare <meta charset="utf-8"> per dichiarare la codifica, altrimenti appariranno caratteri confusi. Alcuni browser imposteranno GBK come codifica predefinita, quindi è necessario impostarla su <meta charset="gbk">.
2.1 Tag comunemente usati all'interno della testa
<!--Classificazione dei tag<h1></h1>--> <!DOCTYPEhtml> <!--lang="en" indica che la lingua principale della pagina web è l'inglese--> <html lang="zh-CN"> <testa> <!--Definisci le informazioni originali della pagina web--> <meta charset="UTF-8"> <!--È conveniente per i motori di ricerca trovare. Uno è che le parole chiave di ricerca possono portare alla pagina web <meta name="keywords" content="meta riepilogo, meta html, meta attributi, meta jump"> <meta name="description" content="Old Boy Education Python Academy"> <!--Contenuto visualizzato nella scheda--> <title>Il mio primo HTML</title> <!--Definisci lo stile di un tag--> <stile> UN{ colore: rosso scuro; } </stile> <!-- Definisci il codice JS o introduce file JS esterni <script>alert("Ciao mondo")</script> --> <!--Introduci il file del foglio di stile esterno text.css per cambiare il colore del tag a in verde--> <link rel="stylesheet" href="text.css"> <!-- Passa all'URL corrispondente dopo 2 secondi, presta attenzione alle virgolette <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--Di' a IE di eseguire il rendering del documento nella modalità più avanzata--> <meta http-equiv="x-ua-compatibili" content="IE=edge"> </testa>
2.1.1. Supplemento al tag Meta
• L'elemento <meta> fornisce metainformazioni sulla pagina, descrizioni e parole chiave per i motori di ricerca e frequenza di aggiornamento. • Il tag <meta> si trova all'inizio del documento e non contiene alcun contenuto. • <meta> fornisce informazioni che non sono visibili all'utente. La composizione del meta tag: il meta tag ha due attributi, che sono l'attributo http-equiv e l'attributo name. Diversi attributi hanno valori di parametro diversi. Questi diversi valori di parametro realizzano diverse funzioni della pagina web.
Attributo 1.http-equiv:
Equivalente alla funzione di intestazione del file http, può restituire alcune informazioni utili al browser per aiutare a visualizzare correttamente il contenuto della pagina web. Il valore dell'attributo corrispondente è contenuto e il contenuto in contenuto è in realtà il valore variabile di ciascun parametro.
<!--Vai all'URL corrispondente dopo 2 secondi, fai attenzione alle virgolette--> <meta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--Specifica il tipo di codifica del documento--> <meta http-equiv="content-Type" charset=UTF8"> <!--Di' a IE di eseguire il rendering del documento nella modalità più avanzata--> <meta http-equiv="x-ua-compatibili" content="IE=edge">
Attributo 2.nome:
Viene utilizzato principalmente per descrivere le pagine Web e il valore dell'attributo corrispondente è contenuto. Il contenuto in contenuto viene utilizzato principalmente dai robot dei motori di ricerca per trovare informazioni e classificare le informazioni.
<meta name="keywords" content="meta riepilogo, meta html, meta attributi, meta jump"> <meta name="description" content="Old Boy Education Python Academy">
3. 3. Tag comunemente utilizzati all'interno del corpo
3.1. Tag di base
<b>Grassetto</b> <i>corsivo</i> <u>Sottolineato</u> <s>Elimina</s> <p>Tag paragrafo</p> <h1>Titolo 1</h1> <h2>Titolo 2</h2> <h3>Titolo 3</h3> <h4>Titolo 4</h4> <h5>Titolo 5</h5> <h6>Titolo 6</h6> <!--Interruzione di riga--> <br> <!--Linea orizzontale--> <hr>
3.2.tag immagine
<img src="Percorso dell'immagine" alt="Avvisa quando l'immagine non viene caricata correttamente" title="Messaggio di avviso quando il mouse è al passaggio del mouse" width="Larghezza" altezza="Altezza (solo uno dei due attributi di larghezza e altezza attenderanno automaticamente) rispetto allo zoom)">
Oltre agli attributi integrati del tag img, possiamo anche aggiungervi alcuni attributi personalizzati.
<img format="jpg" sx="Attributi personalizzati" src="Percorso immagine" >
3.3. un'etichetta
3.3.1 Introduzione a un tag
Il tag a è il nostro tag di collegamento ipertestuale comune. Il cosiddetto collegamento ipertestuale si riferisce alla relazione di connessione da una pagina Web a una destinazione. La destinazione può essere un'altra pagina Web o una posizione diversa sulla stessa pagina Web. Può anche essere un'immagine, un indirizzo e-mail, un file o persino un'applicazione. Per impostazione predefinita, il collegamento verrà visualizzato nel browser come:
Un collegamento non visitato viene visualizzato in carattere blu e sottolineato.
I collegamenti visitati appaiono viola e sottolineati. Quando si fa clic su un collegamento, questo appare rosso e sottolineato.
Nota: se per questi collegamenti ipertestuali sono impostati stili CSS, lo stile di visualizzazione verrà visualizzato in base alle impostazioni CSS.
3.3.2 Formato sintattico di un tag
<a href="http://www.oldboyedu.com" target="_blank" id="Valore ID personalizzato">Fai clic su di me</a>
L'attributo href specifica l'indirizzo della pagina web di destinazione. L'indirizzo può essere di diversi tipi: • URL assoluto: punta a un altro sito (ad esempio href="http://www.jd.com) • URL relativo: si riferisce al percorso esatto all'interno del sito corrente (href="index.htm") • URL di ancoraggio: punta a un'ancora nella pagina (href="#top")
attributo di destinazione: • _blank significa aprire la pagina di destinazione in una nuova scheda • _self significa aprire la pagina Web di destinazione nella scheda corrente
Attributo id: L'attributo id può essere utilizzato per creare un segnalibro per un documento HTML. Suggerimento: i segnalibri non vengono visualizzati in alcun modo speciale, ovvero non vengono visualizzati nella pagina HTML, quindi sono nascosti ai lettori.
Inserisci l'ID nel documento HTML: <a id="ID is 1">Ora è la posizione con ID 1</a>
3.4 Caratteri speciali nell'HTML
Sebbene HTML non faccia distinzione tra maiuscole e minuscole, i caratteri di entità lo fanno.
3.5, tag div e span
La differenza tra span e div è che div è un elemento a livello di blocco e gli elementi in esso contenuti verranno automaticamente inseriti. Span è un elemento in linea e non ci saranno interruzioni di riga prima e dopo di esso.
span non ha alcun significato strutturale, è solo una semplice applicazione di stili. L'elemento span può essere utilizzato quando altri elementi non sono adatti. span può essere utilizzato come elemento figlio di div, ma div non può essere un elemento figlio di span Se un div appare in span, non è conforme allo standard della pagina ws3c.
3.6 Focus: Classificazione dei tag
3.6.1 Il primo tipo: tag a livello di blocco
Caratteristiche: l'etichetta occupa una riga ed è possibile specificarne la larghezza e l'altezza.
caratteristica: • Capacità di identificare larghezza e altezza • I margini e il riempimento superiore, inferiore, sinistro e destro sono tutti validi. • Può mandare a capo automaticamente le linee • Più tag di elementi di blocco vengono scritti insieme e la disposizione predefinita è dall'alto al basso • È possibile utilizzare margin:0 auto per centrare l'allineamento
Gli elementi di blocco comunemente utilizzati includono: <div>, <p>, <h1>...<h6>, <ol>, <ul>, <dl>, <tabella>, <indirizzo>, <blockquote>, <form>
3.6.2 Il secondo tipo: etichetta in linea (etichetta in linea)
Caratteristiche: l'etichetta è su una riga e la larghezza e l'altezza sono determinate dal contenuto. Verrà inviata a capo solo quando il contenuto supera la larghezza dell'HTML.
caratteristica: • Impossibile impostare larghezza e altezza • I margini superiore e inferiore non sono validi, solo il sinistro e il destro hanno un effetto, e il riempimento ha un effetto, che espanderà lo spazio; box-sizing:border-box non è valido perché questo attributo è per il modello box. • Nessun avvolgimento automatico della linea
Gli elementi in linea comunemente usati sono: <a>, <span>, <i>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>
3.7. Elenca tag
Gli attributi dei tag di elenco sono più o meno i seguenti:
3.7.1 Attributi correlati dell'elenco non ordinato ul
attributo tipo: • disco (punto pieno, predefinito) • cerchio (cerchio aperto) • quadrato (quadrato pieno) • nessuno (nessuno stile)
<ul type="disco"> <li>Punto pieno predefinito</li> </ul> <ul type="cerchio"> <li>Cerchi pieni</li> </ul> <ul type="quadrato"> <li>Quadrato solido</li> </ul> <ul type="none"> <li>Nessuno stile</li> </ul>
Esempio di output:
3.7.2 Attributi correlati dell'elenco ordinato ol
valore dell'attributo del tipo di elenco ordinato Non è che un elenco ordinato possa utilizzare solo 1, 2, 3... per rappresentare una sequenza. Puoi anche utilizzare il seguente metodo:
Altre proprietà delle liste ordinate
3.7.3 Attributi correlati dell'elenco dei titoli
<dl> <dt>Titolo 1</dt> <dd>Contenuto sotto il titolo 1</dd> <dt>Titolo 2</dt> <dd>Contenuto sotto il titolo 2 1</dd> <dd>Contenuto 2 sotto il titolo 2</dd> </dl>
Esempio di uscita
3.8. Tag di formattazione del testo
https://blog.csdn.net/qq_44891434/article/details/113371490
https://blog.csdn.net/qq_46137324/article/details/131971697