HTML5 Kā lietot

un

tagus

Šis raksts ir daļa no mūsu "HTML5 / CSS3 konsultāciju sērija" - veltīts, lai palīdzētu jums kļūt par labāku dizaineru un / vai izstrādātāju. Noklikšķiniet šeit lai redzētu vairāk rakstu no vienas sērijas.

Starp vairākiem jauniem tagiem, kas ir pieejami HTML5, specifikācijas (piemēram, skaitlis, figūra, un malā), detalizēti un kopsavilkums atzīmes, manuprāt, ir visnoderīgākās. Izmantojot šos jaunos tagus, varat paslēpt kādu garo saturu un rādīt tikai kopsavilkumu.

Mēs to bieži redzam apkārt, bet lielākā daļa no tiem joprojām ir balstīti uz JavaScript vai tā brāli: jQuery, ko lielākā daļa cilvēku nesaprot. Tagad, ar šiem jaunajiem elementiem - detaļas un kopsavilkums - lietas būs vieglākas.

Tātad, pieņemsim, kā tagi darbojas reālā scenārijā.

Šajā demonstrācijā apkoposim produkta aprakstu. Vispirms izveidosim "detaļu" tagu un pēc tam ievietojiet visu saturu kopā ar "kopsavilkuma" tagu tajā, piemēram, tālāk redzamajā piemērā:

 
 
MacBook Pro specifikācija
 
 
13,3 collu LED apgaismots spīdīgs platekrāna displejs ar nepārtrauktu un nepārtrauktu stiklu (1280 x 800 pikseļu izšķirtspēja).
 
2,4 GHz Intel Core i5 divkodolu procesors ar 3 MB kopīgu L3 kešatmiņu, lai veiktu lieliskus uzdevumus.
 
Intel HD Graphics 3000 ar 384 MB DDR3 SDRAM, kas koplietots ar galveno atmiņu.
 
500 GB sērijas ATA cietais disks (5400 RPM)
 
4 GB uzstādītā RAM (1333 MHz DDR3; atbalsta līdz 8 GB)
 
 
 

Šajā piemērā es esmu pievienojis MacBook Pro specifikācijas informāciju, un tagad redzēsim, kā pārlūks šos tagus padara.

Es arī pievienoju virsrakstu un vairāk produkta aprakstus virs detaļām, lai padarītu iepriekš minēto demonstrāciju jums saprātīgāku. Tātad, ko jūs domājat? Tas ir diezgan vienkārši, labi?

Pārlūka atbalsta

Tomēr, pirms steidzaties piemērot šo tagu savai vietnei, jāatzīmē, ka informācija un kopsavilkuma atzīme pašlaik tiek atbalstīta tikai pārlūkprogrammā Chrome 12 un jaunāka.

Pat jaunākais Firefox tos neatbalsta.

Tātad, ja vēlaties lietot šo tagu, jums ir jāiekļauj rezerves funkcija neatbalstītām pārlūkprogrammām. Labā ziņa, tā ir vienkārša; jūs varat izmantot šo informāciju par polifilumu, kas automātiski atkārtos veco pārlūkprogrammu tagu funkcionalitāti.

Lejupielādējiet šo failu un pievienojiet to html dokumentam kopā ar jQuery (vismaz 1,7+) un pārliecinieties, vai pirms aizvērtā ķermeņa atzīmes ievietojat polifilu..

Un iekšpusē galvas tagu, ievietojiet šādu nosacītu tagu, lai iekļautu HTML5shiv par IE8 un agrāk, pretējā gadījumā Internet Explorer neatpazīst šos jaunos tagus.

Tagad aplūkosim, kā Internet Explorer izrādās:

Un tas tagad darbojas arī pārlūkprogrammā Internet Explorer.

• Demo
• Lejupielādēt avotu

Secinājums

Šāda paslēpuma efekta radīšana ar JavaScript vai jQuery faktiski ir salīdzinoši vienkārša, bet, ja tā ir atbalstīta no pārlūka, tas noteikti ir daudz vieglāks risinājums daudziem cilvēkiem. Vai vēlaties to darīt JavaScript vai HTML5, tas ir jūsu lēmums. Paldies par lasīšanu, un es ceru, ka jums tas patika.