Come sviluppatore web, non posso fare a meno di pensare che tutti questi consigli siano incredibilmente fuorvianti nel 2015.
Ovviamente il tag "p" a un certo punto doveva essere usato come paragrafo... ma nel 100% delle mie app, progetti e solo sviluppo generale quotidiano, non abbiamo visto altro che i limiti imposti dalla "p" tag... non offre alcun vantaggio nell'Internet di oggi.
Direi "sì", "p" è un elemento descrittivo, e per questo, se tutto questo accadesse; "descrivi qualsiasi cosa", sarò tutto per quello... ma NON descrive solo il contenuto, sostituisce direttamente ALTERS con il contenuto che, sebbene sia già limitato di per sé, non tutto ciò che fa, LIMITA anche il contenuto. Perché qualcuno sano di mente copre di proposito l'ultimo elemento costitutivo quando si tratta di sviluppo web è al di là di me. Dal punto di vista del design, non ha senso. Da un punto di vista strutturale, questo non ha senso. Da nessuna delle manipolazioni di PERIOD DOM, questo non ha senso.
Abbiamo smesso collettivamente di usare il tag "p", tranne quando è assolutamente necessario (come la stampa del dizionario lato client, cose stupide del genere). Non ci sono scuse per cui non possiamo descrivere quasi tutto con classi e ID ben definiti, quindi non vediamo alcun motivo per piegarci a "standard" che non servono a nulla, e in realtà CONTA ogni pezzo del puzzle, "p " il tag non aiuta lo sviluppatore, utente finale o moderno motori di ricerca. In poche parole... il tag "p" è quasi deprecato in implementazioni anche remotamente complesse (e con ottime ragioni), non lasciare che i commenti di quei controlli nazisti standard mostrino il tuo contenuto!
Anche su questo sito molto orientato agli sviluppatori ha un MOLTO ALTO propria pagina c'è una piccola parte pop che potrebbe usare il tag "p" in quanto contiene abbastanza testo per passare alla seconda riga, ma è completamente catturata in un DIV (e solo un div, non un div → p) per quasi un numero infinito ragioni... prima di tutto che oggi "p" FA SCHIFO rispetto a qualsiasi blocco ben descritto creato da un DIV che è altrettanto ben descritto (per di più... dico io) come un paragrafo "p" con un carattere molto descrittivo id = "sfocatura" .
Da stackoverflow:
sto parlando con
e vivi a lungo
E sì, apprezzo i nostri attuali standard web e cose del genere esistono ancora, offrendo anche la possibilità di fare cose con alcuni browser moderni cosa che non puoi realizzare con un contenitore, ma è solo che è specificamente un elemento "p" rotto, come parte di un HTML ristrutturato e modernizzato... avrebbe dovuto essere lasciato nella tomba a cui appartiene... è una generazione di siti Web in cui i paragrafi non sono più paragrafi per sempre. i blocchi stanno letteralmente cambiando... è semplicemente antiquato e poco pratico.
In questo post tratteremo due argomenti importanti: l'utilizzo dell'elemento span e la creazione di testo in corsivo e in grassetto utilizzando em e tag forti. Probabilmente imparerai qualcosa di nuovo e utile. Ricordando e catturando le sottigliezze una volta, in futuro applicherai questi elementi in modo più corretto.
Utilizzo dell'elemento span
Elemento è il secondo elemento più frainteso Dizionario HTML, dopo l'elemento di blocco. Può essere utile pensare agli elementi span in questo modo: è un tag inline che è una sorta di ancora di salvezza in HTML e viene utilizzato solo dopo che tutti gli altri elementi sono stati esclusi in questa situazione. Ci sono quasi sempre soluzioni migliori.
L'elemento span si applica solo come ultima risorsa, poiché non ha significato semantico: non c'è modo di dire quale contenuto ci sia in esso. Elemento è del tutto inutile senza il codice CSS applicato: di per sé non ha assolutamente alcun effetto sul display. La combinazione di queste due caratteristiche porta al fatto che l'elemento campata sul sito dovrebbe essere utilizzato con parsimonia, deliberazione e attenzione.
Un tipico caso d'uso per un elemento in elemento di blocco- contenuto di confezionamento che altrimenti non potrebbe essere specificato stili CSS. Per esempio:
Per qualche motivo dobbiamo farlo certa parola visualizzato altrimenti in questo paragrafo.
Ovviamente, prima di usare l'elemento span, dovevamo escludere tutte le altre possibilità, per smettere di usare il markup inline come: (usato per le definizioni) e (usato per le abbreviazioni), (usato per creare testo in corsivo) e (utilizzato per creare testo in grassetto), a ciascuno dei quali può essere applicato codice CSS.
Crea testo in corsivo e grassetto
Il codice HTML è progettato per essere il più possibile indipendente dall'ambiente e dall'utente. Sebbene di solito si interagisca con la maggior parte delle pagine Web visualizzandole sullo schermo, ci sono molte altre opzioni per visualizzare i contenuti, come la stampa, lettori di testo, traduttori braille e altri.
Per questo motivo, i tag utilizzati per contrassegnare il testo nel codice HTML hanno una portata molto ampia. Ad esempio, tag evidenzia il testo. Nella maggior parte dei casi, il contenuto di questo tag viene visualizzato visivamente in una vista obliqua e i lettori di testo evidenzieranno il testo leggendolo più forte.
Tagga il contenuto visualizzato visivamente in grassetto e, come nel caso precedente, questo tag avrà un significato diverso in diversi contesti.
Entrambi i tag devono essere applicati a piccole quantità di testo - una o due parole o una frase - in un paragrafo lungo diverse frasi. Se ti imbatti nel seguente codice:
In una situazione del genere, è quasi sempre meglio non utilizzare i tag per creare testo in corsivo o grassetto, ma impostare gli stili nel codice CSS.
Allo stesso modo, non ha senso usare il tag per creare testo in grassetto negli elementi di intestazione, è meglio usare il codice CSS per questo.
La specifica HTML5 reintroduce i tag e per creare rispettivamente testo in grassetto e corsivo, ma consigliamo comunque di continuare a utilizzare i tag e per questi scopi, in quanto hanno una più ampia applicabilità e adattabilità.
Traduzione - Scrivania
Ciao a tutti!
Andrey è di nuovo con te.
Oggi ti verranno offerte 2 versioni della lezione. Uno in forma di testo- lo vedi davanti ai tuoi occhi, e il secondo VIDEO - dovrai scaricarlo.
A nostro avviso, la versione video sarà più comprensibile per te.
Quindi, circa aggiuntivo elementi html…
Diciamo che devi evidenziare qualche singola parola nel testo (supponiamo un colore e uno sfondo diversi), o in modo che l'immagine e il testo ad essa relativi siano in alto e a destra in una cella di tabella, e il contenuto principale della pagina , diciamo, in basso e più vicino al bordo sinistro. Per quanto riguarda il primo esempio, dirò che puoi farlo con un tag con set parametri desiderati, ma è uno dei tag proibiti (i nuovi browser potrebbero non supportarlo) e non ha la proprietà di sostituzione in background.
Per tali casi sono previsti due tag specifici, che di fatto non fanno nulla da soli. Ma applicando loro gli stili giusti, puoi ottenere qualsiasi cosa. In generale, utilizzando solo questi due tag e applicando loro degli stili, puoi creare l'intera pagina del sito.
Sì, questi sono i tag. e .
Qual è la differenza tra loro se sono usati per la stessa cosa?
elemento div - questo è etichetta di blocco, e può contenere qualsiasi tag a noi noto (elenchi, immagini, tabelle...).
elemento spanè un tag inline e si applica solo al testo (evidenzia un pezzo di testo con un colore diverso).
Gli stili applicabili a questi tag sono tutti gli stili che abbiamo studiato. Non ci sono restrizioni sull'uso di qualsiasi stile.
Diamo un'occhiata agli stili più tipici per questi tag. Sono applicabili anche a tutti gli altri tag e vengono utilizzati allo stesso modo, vengono semplicemente utilizzati più spesso con questi tag (soprattutto per ) .
La prima cosa da cui vorrei iniziare è il posizionamento degli elementi.
Questa proprietà:
posizione- imposta o determina la posizione di un elemento.
I valori:
statico- predefinito. La posizione dell'oggetto è determinata dalla corrente Marcatura HTML secondo regole standard.
assoluto- la posizione dell'oggetto è determinata rispetto alla posizione dell'oggetto genitore o rispetto all'oggetto corpo. parente- La posizione dell'oggetto è determinata dall'offset rispetto alla posizione in cui è apparso per impostazione predefinita.
sinistra/in alto- imposta o determina la posizione dell'elemento rispetto al bordo sinistro/superiore.
I valori:
X– numero in percentuale o pixel.
autoè il valore predefinito.
Considera un esempio:
XHTML
Questo esempio mostra che il nostro riquadro largo 300px si sposterà in basso di 350px e a sinistra di 200px da dove appare per impostazione predefinita.
La prossima proprietà importante:
margine- la quantità di rientro dal nostro blocco agli oggetti vicini su quattro lati.
I valori:
margine superiore— imposta il valore del rientro superiore dell'oggetto
margine sinistro— imposta il valore del rientro sinistro dell'oggetto
margine-destra— imposta il valore del rientro destro dell'oggetto
margine inferiore- imposta il valore del rientro inferiore dell'oggetto
XHTML
Abbiamo creato una scatola con un'imbottitura intorno ad essa di 30px da tutti i lati.
Su cos'altro vorrei concentrarmi:
imbottitura– la proprietà specifica la quantità di spazio inserita tra l'oggetto ei suoi contorni.
I valori:
fondo imbottito Specifica la quantità di spazio inserita tra un oggetto dal bordo inferiore.
imbottitura a sinistra— specifica la quantità di spazio inserita tra l'oggetto dal bordo sinistro.
imbottitura a destra- imposta la quantità di spazio inserita tra l'oggetto dal suo bordo destro.
parte superiore imbottita- specifica la quantità di spazio inserita tra l'oggetto dal suo bordo superiore.
XHTML
Abbiamo creato un blocco con un riempimento di 30px dal contenuto a tutti i suoi lati.
E considera un esempio usando il tag:
Diciamo che abbiamo una struttura come questa:
Qualsiasi testo!
Vogliamo creare testo di parole su sfondo giallo in lettere blu. Per fare ciò, avvolgilo in un tag e applica gli stili appropriati.
