Quali sono le differenze tra kbd, samp e codice in HTML

Question

Attualmente sto leggendo il tutorial HTML su w3schools (non c'è ancora CSS o JavaScript) e mi chiedo perché ci sono così tanti tag diversi che sembrano uguali dopo tutto?

Ad esempio, non vedo alcuna differenza (ottica) tra kbd, samp e code eccetto il "significato" di ciascun tag.

Quindi la mia domanda: è solo la meta informazione che differisce da questi tag?

Answer 1

Corretto. Il significato semantico è diverso. Il rendering predefinito consiste nell'utilizzare un carattere tipografico monospace perché è il più appropriato.

<kbd> rappresenta l'input da tastiera, sebbene StackOverflow renda come chiavi reali.

<samp> rappresenta output del computer del campione, e in origine i computer erano Monospaced :)

<code> rappresenta ingresso codice di programmazione, e la stragrande maggioranza dei linguaggi di programmazione sono progettati per assumere un editor di font a spaziatura fissa - ad eccezione del libro C++ s ', che preferisce variabile larghezza, per qualche motivo, e alcune razze di Python. Notare che <code> è un elemento inline, mentre <pre> viene utilizzato per il markup a livello di blocco (cioè i paragrafi) del codice.

Il fatto che il rendering predefinito sia lo stesso non significa che non è possibile assegnare i propri stili di rendering come StackOverflow.

Answer 2

In HTML si ottengono diversi bucket di zuppa di tag per creare i componenti. Esistono la famiglia di tag <TABLE> e le relative proprietà e CSS correlato, la famiglia di tag e proprietà <SECTION> e CSS (utilizzata per creare notizie e layout di blog, ad esempio).

Poi c'è un gruppo di cose relative a SVG, la famiglia <OBJECT> per plugin incorporati e così via. Ogni caratteristica che è stata aggiunta ha il proprio set limitato di termini e definizioni specifici del dominio. Le regole di layout sono diverse, non è possibile utilizzare lo stesso CSS con lo <TABLE>, ad esempio con lo <SECTION>.

Quindi c'è una differenza logica/meta-dati e una differenza funzionale/d'uso. A seconda del browser in uso, il foglio di stile del browser predefinito può rendere visivamente simili alcuni elementi se li si inserisce in una pagina, uno accanto all'altro senza alcuna struttura.

L'idea è per voi a comporre queste cose uno dentro l'altro, in questo modo:

<section name="blogpost"> 
    <article class="entry"> 
     <h1>Page Title</h1> 
     <p>Hello world.</p> 

con i CSS che sembra qualcosa di simile:

section p { 
    margin-top:1.5em; 
    margin-bottom:1.5em; 
} 
article h1+p { 
    margin-top:1em; 
} 

Se si prende il sopra <p> di <article> contesto o rimuovere il <h1> prima che il CSS che lo rende diverso da un normale <p> non funzionerà. Gli stili di browser predefiniti sono simili.

Studiare come vengono utilizzate queste categorie di tag. Guarda un codice di esempio di Bootstrap su Twitter.

Tutti questi tag sono per 1) da utilizzare, 2) i motori di ricerca per capire, 3) voi/qualcuno da capire in seguito.

Basta imparare quali sono i diversi bucket e iniziare a utilizzare i tag; in realtà non ci sono molte categorie di essi.

Answer 3

L'elemento kbd rappresenta l'input dell'utente. Esempi di input da parte dell'utente sono:

Key Input

<p>Please, press <kbd><kbd>Shift</kbd>+<kbd>A</kbd></kbd></p> 

Terminal Command

<p>Please, input "<kbd>Yes</kbd>" or "<kbd>No</kbd>"</p> 

pulsanti o Menu (GUI-Input)

<kbd>File | Open...</kbd> 

File | Apri ...

---

L'elemento samp rappresenta l'uscita da un sistema di programma o di calcolo. Per esempio un'uscita cmd:

Come sembrare in HTML usando samp:

Directory of D:\mydir 

11/15/2007 03:03 PM <DIR>   . 
11/15/2007 03:03 PM <DIR>   .. 
11/15/2007 01:38 PM     0 10oct2006.txt 
11/08/2007 04:28 PM    368 11nov2007.do 
11/15/2007 01:39 PM     0 5june2007.txt 
03/11/2007 10:39 AM   1,869,429 beameruserguide.pdf 
08/10/2007 01:24 PM   22,016 blog - jsm 2007.doc 
04/25/2007 03:07 PM   199,887 clarify.pdf 
11/15/2007 01:40 PM     0 houseplants.txt 
04/25/2007 11:42 AM   371,225 Mardia 1970 - multivar skew and kurt.pdf 
03/27/2007 01:18 PM   319,864 multiple imputation a primer by schafer.pdf 
11/15/2007 02:49 PM     0 output 1.txt 
11/15/2007 02:49 PM     0 output 2.txt 
11/15/2007 02:49 PM     0 output 3.txt 
11/15/2007 02:49 PM     0 output 4.txt 
11/08/2007 03:59 PM    8,514 results.dta 
11/15/2007 01:31 PM <DIR>   sub1 
11/15/2007 01:31 PM <DIR>   sub2 
11/14/2007 04:27 PM    952 test.txt 
05/21/2007 03:23 PM   1,430,743 zelig.pdf 
       18 File(s)  4,225,738 bytes 
       4 Dir(s) 249,471,307,776 bytes free 

---

L'elemento code rappresenta un frammento di codice del computer. Esempi di codice di computer sono: XML nome dell'elemento, il nome del file, programma per computer ecc

Codice esempio:

<pre> 
    <code> 
    function Panel(element, canClose, closeHandler) { 
    this.element = element; 
    this.canClose = canClose; 
    this.closeHandler = function() { if (closeHandler) closeHandler() }; 
    } 
    </code> 
</pre> 

---

Voglio anche dire che hai ragione in termini di aspetto visivo. Al massimo c'è una differenza di nota tra kbd, samp e codice. Tutti usano lo stesso tipo di carattere. Comunque sarebbe meglio se lo si usi in modo discribuito, perché il sistema fa la differenza tra loro.