Al momento ci sono un totale di 142 elementi HTML standardizzati dal W3C, esclusi quelli nelle fasi iniziali della standardizzazione e quelli che sono diventati obsoleti. Detto questo, è possibile perdere o dimenticare alcuni di essi che possono essere utili quando necessario.
In precedenza abbiamo fatto un riepilogo di alcuni dei migliori trucchi CSS che potreste aver trascurato. Questo post ti ricorderà alcuni dei tag HTML che non sapevi di poter utilizzare per implementare funzionalità come:
1. Mappa immagini
L'HTML
Nota: le aree cliccabili non possono essere ridisegnate tramite CSS, quindi, se si desidera che i marcatori siano stilizzati, utilizzare un semplice software di modifica delle immagini per disegnare i marcatori.
Suggerimento: se vuoi conoscere le coordinate di un punto in un'immagine, apri l'immagine in un software di modifica delle immagini e sposta il cursore su quel punto, dovresti essere in grado di vedere le sue coordinate nel software stesso. Per GIMP è mostrato sul lato sinistro della barra in basso.
2. Suggerimenti di input
Uso
3. Evidenzia testo
Il testo evidenziato di solito ha il colore del testo scuro con uno sfondo chiaro. È possibile ottenere quell'effetto di testo evidenziato con il solo markup. Qualsiasi testo racchiuso nel avrà questo effetto
È possibile personalizzare il colore di evidenziazione con la proprietà CSS di background-color di e il colore del testo con la proprietà color .
4. Definisci modelli
Insieme a HTML5 è arrivato il nuovo elemento. Il l'elemento contiene markup al suo interno che non viene visualizzato dai browser, il markup racchiuso da esso deve essere utilizzato per generare contenuti dinamici nella pagina utilizzando JavaScript .
Ad esempio, supponiamo di avere un
dove le righe devono essere aggiunte dinamicamente, puoi semplicemente mettere il markup di una riga vuota di quella tabella all'interno di tag e, quando necessario, chiama una funzione JavaScript contenente script per copiare il markup dall'interno dei tag del modello e aggiungerlo al markup della tabella. Questo non è supportato da IE.
5. Stampa fine
La stampa fine si riferisce al testo del documento tipicamente stampato in dimensioni molto ridotte che contiene informazioni come condizioni, termini, restrizioni, citazioni, diritti legali, ecc. Il tag in HTML può essere usato per mostrare stampe fini. Da HTML5 in poi il tag non mostra solo un testo in stile fine, ma definisce anche semanticamente le stesse dichiarazioni di non responsabilità legali e avvertimenti.
6. Assegna un URL di base
Il L'elemento HTML è molto utile quando si hanno più collegamenti nel documento con gli stessi URL di dominio, consente di aggiungere un URL di base al documento che a sua volta consente di aggiungere solo URL relativi ad altri collegamenti nella pagina, se necessario.
Nota: tutti gli URL relativi nella pagina saranno riferiti in base all'URL di base, se si dispone di collegamenti con un dominio diverso non dimenticare di assegnare l'URL completo ad esso.
7. Immagini reattive
Lo sviluppo web reattivo è in voga per l'accesso mobile in continua crescita. Le immagini possono essere attivate per diverse dimensioni dello schermo con markup. Il L'elemento HTML5 consente di aggiungere varie sorgenti di immagini per supporti diversi per l'immagine al suo interno.
Nota: al momento funziona solo con Chrome. Dovrai impostare dom.image.picture.enable su true in about:config in Firefox.
8. Color Picker
HTML5 ha introdotto molti nuovi elementi del tipo di input; l'elemento di input del colore è uno di questi. Ti consente di scegliere un colore su una pagina web con l'aiuto di un selettore di colori.
9. Opzioni di gruppo
Se hai molte opzioni in un elenco a tendina e vorresti mostrarle raggruppate, l '
10. Il
Il markup dentro
Ora Leggi: 15 utili trucchi CSS che potresti avere trascurato
In passato abbiamo sorvolato il flexbox e le basi su come funziona. Ma in realtà l'applicazione di flexbox al tuo flusso di lavoro può essere difficile perché è un'aggiunta così complicata alle specifiche CSS.Con Flexbox Froggy puoi imparare tutte le basi della flexbox con un divertente gioco web che coinvolge rane e lilypads . So
Trovare strumenti di progettazione web, servizi o risorse che potresti utilizzare non è necessariamente molto più di una sfida. Il mercato è pieno di loro, e ci sono un gran numero di buoni in ciascuna di queste categorie. La difficoltà sta nella localizzazione di un prodotto o servizio che è più adatto per il tuo lavoro .I sit