Բոլոր պիտակները եւ HTML5 հատկանիշները: HTML5 տարրեր եւ ատրիբուտներ

Ա! HTML5: Ներկայումս այն արդեն ակտիվորեն օգտագործվում է վեբ ինտերֆեյսեր եւ ծրագրեր մշակելիս: Բոլորս գիտենք, որ HTML5- ը բերեց բազմաթիվ նոր պիտակներ, հատկանիշներ եւ տարրեր: Նրանցից ոմանք իսկապես օգտակար են մեր կայքերի համար: Այսպիսով, այս հոդվածում ես համառոտ կասեմ մի քանի օգտակար եւ կարեւորի մասին HTML5 պիտակներ եւ ատրիբուտներՊրակտիկորեն պետք է իմանաք եւ օգտագործեք:

Կառուցվածքային նշում HTML5

HTML5- ում հայտնվել են մի քանի նոր պիտակ, որոնք նախատեսված են արդեն փոխարինելու արդեն իսկ առգրավված Div Blocks- ը (բոլորը, իհարկե): Արտաքինից, այսպես ասած, ոչինչ չի փոխվել, բայց, ըստ էության, նոր պիտակները կրում են իմաստաբանական (իմաստաբանական) բեռ եւ խստորեն սահմանում են իր տեղը եւ դերը յուրաքանչյուր բլոկի համար.

  • - Նշում է կայքի «գլխարկների» տարածքը `պատկերանշանի, առաջնային նավարկությամբ եւ այլն:
  •  - որոշում է «նկուղը», կայքի վեբ էջերը կամ բաժանումը, որում լրացուցիչ տեղեկատվություն է տեղավորվում կատուում.
  • - Սահմանում է մի բլոկ, որը ծառայում է նույն տեսակի օբյեկտների խմբավորմանը կամ տեքստը առանձնացնել բաժիններին.
  •  - որոշում է էջի ինքնավար մասը, այն կարող է լինել հաղորդագրությունների ֆորում, ամսագիր կամ թերթի հոդված, բլոգի մուտք եւ այլն;
  • - որոշում է նավիգացիայի տարածքը, որպես կանոնների կանոններ.

Ձեւը

Նոր տեսակների մուտքային դաշտեր

HTML5- ը ներկայացրեց նոր տեսակներ Մուտքային դաշտեր, Նրանք թույլ են տալիս գրել ավելի իմաստուն ճիշտ կոդ, որը հարմարեցված է բջջային սարքերի համար: Օրինակ, էլեկտրոնային փոստի տեսակը օգտագործելիս տեղի է ունենում մուտքագրված տեքստի ավտոմատ վավերացում, էլփոստի հասցեի ինքնության եւ այլնի վրա:

1
2
3
4
5
6
7
8
9
10
11
12
13

<Մուտքագրեք տեսակը \u003d «URL»\u003e
<Մուտքագրեք տեսակը \u003d "էլ. Փոստ"\u003e
<Մուտքագրեք տեսակը \u003d «Գույն»\u003e
<Մուտքագրեք տեսակը \u003d «Ամսաթիվ»\u003e
<Մուտքագրեք տեսակը \u003d "DateTime"\u003e\u003e
<Մուտքագրեք Type \u003d "DateTime-local"\u003e
<Մուտքագրեք տեսակը \u003d «ամիս»\u003e
<Մուտքագրեք տեսակը \u003d "համարը"\u003e
<Մուտքագրեք Type \u003d "Range"\u003e
<Մուտքագրեք տեսակը \u003d "Որոնում"\u003e
<Մուտքագրեք Type \u003d "Tel"\u003e
<Մուտքագրեք տեսակը \u003d «Time»\u003e
<Մուտքագրեք տեսակը \u003d «շաբաթ»\u003e

Կանոնավոր վավերացման արտահայտություններ

HTML5- ի տեսքից առաջ, ձեր կայքում ձեւը օգտագործելիս ստիպված եղավ բաց թողնել մուտքագրված տեքստը JavaScript. ստուգման համար: Այժմ HTML5- ով եւ օրինակելի հատկանիշով դուք կարող եք սահմանել կանոնավոր արտահայտման ձեւանմուշ, տվյալները ստուգելու համար:

1
2
3
4
5
6


"Էլեկտրոնային հասցե" Պահանջվող օրինակ \u003d "[^ @] [Email պաշտպանված][^@]+\.{2,6}" / >

«Առնվազն ութ նիշ պարունակող առնվազն մեկ նիշ, ստորին եւ վերին ռեգիստրի մեկ խորհրդանիշ» Պահանջվող օրինակ \u003d. "(? \u003d. * \\ d) (? \u003d. *) (? \u003d. *): (8,)" / >

«Միջազգային, ազգային կամ տեղական հեռախոսահամար»/ >

AutoComplete HTML5 Datalist- ի հետ

Datalist HTML5 Element- ի օգտագործումը թույլ է տալիս ստեղծել տվյալների ցուցակը ավտոմատ մուտքային դաշտերի համար: Սուպեր օգտակար:

1
2
3
4
5
6
7
8
9

Autofocus դաշտային դաշտեր

AutoFocus- ի ատրիբուտը թույլ կտա ձեզ տեղադրել ուշադրության կենտրոնում ցանկացած ձեւի տարր (ներառյալ կոճակը):

Թաքնված տարրեր HTML5- ով

HTML5- ում մուտքագրված թաքնված հատկանիշը, որը թույլ է տալիս թաքցնել որոշակի տարր, ինչպես դա վերաբերում է CSS- ին, օգտագործելով տեղահանություն. Ոչ մեկը

Pellentsque Habitant Morbi Tristique Senectus եւ Netus ....


Վերնագիր 2.

Pellentesque Habitant Morbi Tristique Senectus- ը եւ Malesuada- ն ...

Ստեղծեք ակորդեոն կայքի համար -

Հատկանիշ ներբեռնումը

HTML5- ում նոր ատրիբուտ հայտնվեց հղումների համար: Այժմ զննարկիչը նշելու համար, որ հղումը պետք է ներբեռնվի, եւ ոչ այնքան բացվի այս հատկանիշը օգտագործելու համար:

Թարմ հոդվածներով եւ դասեր դիտելու համար

Շատ առաջ, XHTML / HTML4- ի ընթացքում մշակողները ունեին ընդամենը մի քանի առանձնահատկություններ, որոնք նրանք կարող էին օգտագործել, որպեսզի պահեն Դոմի հետ կամայական տվյալները: Դուք կարող եք հորինել ձեր սեփական ատրիբուտները, բայց ռիսկային է. Ձեր ծածկագիրը վավեր չի լինի, զննարկիչները կարող են անտեսել ձեր տվյալները, եւ այն կարող է խնդիրներ առաջացնել ստանդարտ HTML հատկանիշների հետ:

Հետեւաբար, մշակողների մեծամասնությունը կապված էր դասի կամ վերագրման հատկանիշների հետ, քանի որ դրանք լրացուցիչ տողեր պահելու միակ ողջամիտ միջոցն էին: Օրինակ, ենթադրենք, որ մենք ստեղծում ենք widget, Twitter- ում ժամանակավոր հաղորդագրության գծի նման հաղորդագրություններ ցուցադրելու համար: Իդեալում, JavaScript- ը պետք է կարողանա կազմաձեւել առանց ծածկագիրը վերաշարադրելու անհրաժեշտության, այնպես որ մենք սահմանում ենք օգտվողի ID- ն դասի հատկանիշում, օրինակ.

Մեր JavaScript Code- ը ID- ով տարր է կփնտրի msglist., Օգտագործելով սցենարը, մենք կփնտրենք դասեր, սկսած Օգտագործող_Եվ «Բոբը» մեր դեպքում կլինի օգտվողի ID- ն, եւ մենք կցուցադրենք այս օգտագործողի բոլոր հաղորդագրությունները:

Եկեք ասենք, որ մենք կցանկանայինք նաեւ սահմանել հաղորդագրությունների առավելագույն քանակը եւ բաց թողնել հաղորդագրությունները վեց ամսվա ընթացքում (180 օր).

Մեր հատկանիշը Դասավորել Այն շատ արագ բարձրանում է. Ավելի հեշտ է թույլ տալ սխալ, եւ javaScript- ի տողերի վերլուծությունը ավելի բարդ է դառնում:

HTML5 տվյալների հատկանիշներ

Բարեբախտաբար, HTML5- ում ներդրվեց մաքսային ատրիբուտներ օգտագործելու ունակությունը: Նախածանցով կարող եք օգտագործել ցանկացած անուն ցածր գրանցամատյանում Տվյալներ, օրինակ,

Պատվերով տվյալների հատկանիշներ.

  • Այս տողերը դրանց մեջ են, դուք կարող եք պահպանել ցանկացած տեղեկատվություն, որը կարող է ներկայացվել կամ կոդավորված լինել որպես լար, ինչպիսին է JSON- ը: Տեսակները պետք է բերվեն JavaScript- ի միջոցով
  • պետք է օգտագործվի այն դեպքերում, երբ չկա համապատասխան HTML5 տարրեր կամ հատկանիշներ
  • Դիմեք միայն էջին: Ի տարբերություն միկրոֆերմրների, դրանք պետք է անտեսվեն արտաքին համակարգերի կողմից, ինչպիսիք են որոնիչները եւ որոնողական ռոբոտները

JavaScript- ի վերամշակման օրինակ. GetatTribute եւ setatstribute

Բոլոր զննարկիչները թույլ են տալիս ստանալ եւ փոխել տվյալների հատկանիշները `օգտագործելով GetAtTribute եւ setattribute մեթոդներ.

Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.getattribute («Տվյալների ցուցակ-չափ»); msglist.Setttribute ("Տվյալների ցուցակ-չափս", + ow ույց տալ + 3);

Այն աշխատում է, բայց պետք է օգտագործվի միայն հին զննարկիչների հետ համատեղելիությունը պահպանելու համար:

Օրինակ # 2 Վերամշակում JavaScript. Տվյալների () մեթոդ JQuery Library

Սկսած JQuery 1.4.3 տվյալների () Մեթոդի գործընթացները HTML5 տվյալների հատկանիշներ: Անհրաժեշտ չէ հստակ հստակեցնել նախածանցը ՏվյալներԱյսպիսով, այդպիսի ծածկագիրը կաշխատի.

Var msglist \u003d $ ("# msglist"); var Show \u003d msglist.data ("List-Size"); msglist.data ("List-Size", Show + 3);

Բայց եղեք, որ հնարավոր է, հիշեք, որ jQuery- ը փորձում է նման հատկանիշների արժեքները վերափոխել մաքրող տեսակներին (բուլյան արժեքներ, համարներ, առարկաներ կամ զրոյական) եւ ազդել DOM- ին: Ի տարբերություն setattribute., Մեթոդ Տվյալներ () ֆիզիկապես չի փոխարինի ատրիբուտը Տվյալների ցուցակ-չափ - Եթե ստուգում եք դրա արժեքը jQuery- ից, այն դեռ կմնա հավասար 5-ի:

JavaScript- ի վերամշակման օրինակ. API տվյալների հավաքածուների հետ աշխատելու համար

Եվ, վերջապես, մենք ունենք API, HTML5 տվյալների հավաքածուների հետ աշխատելու, որը վերադարձնում է DomStringMAP օբյեկտը: Պետք է հիշել, որ տվյալների հատկանիշները ցուցադրվում են օբյեկտում, առանց նախածանցների ՏվյալներԱնուններից հանվում են հիպենայի նշանները, եւ անուններն իրենք վերածվում են ուղտի, օրինակ.

Հատկանիշ անուն Անունը տվյալների հավաքածու API- ում
Տվյալների օգտագործող: Օգտվող
Տվյալների առավելագույնը: Առավելագույնը:
Տվյալների ցուցակ-չափ Ցուցակագրել

Մեր նոր կոդը.

Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.dataset.listies; MSGLIST.DATASET.Listsize \u003d + Ցույց + 3;

Այս API- ն աջակցում է բոլոր ժամանակակից զննարկիչները, բայց ոչ IE10- ը եւ ներքեւում: Նման զննարկիչների համար կա աշխատանքներ, բայց, հավանաբար, ավելի գործնական է jQuery- ի օգտագործումը, եթե գրում եք հին զննարկիչների համար:

HTML - Հիպերտեքստի նշման լեզու: Այն հիմնված է այսպես կոչված պիտակների վրա: Պիտակներ Նույն էջում մենք ձեզ համար հավաքեցինք HTML պիտակի ներկայիս գրացուցակը:

Ընդհանուր առմամբ, կան ավելի քան հարյուր նշման տարրեր: Յուրաքանչյուրը ունի մի շարք հատկություններ եւ իր շարահյուսություն: HTML պիտակի ուղեցույցը կօգնի արագ գտնել ձեզ անհրաժեշտ իրը:

HTML պիտակների ցուցակ

Ստորեւ բերված աղյուսակը ցույց է տալիս HTML5 պիտակների ցանկը ռուսերենով համառոտ նկարագրությամբ:

Պիտակ Կարճ նկարագրություն
Մեկնաբանություն
Սահմանում է փաստաթղթի տեսակը:
Հղում, հղում, խարիսխ:
Տեքստը որոշում է որպես հապավում:
Կոնտակտային տվյալներ փաստաթղթի հեղինակ կամ սեփականատիրոջը:
Որոշում է քարտեզի պատկերի տարածքը
Հոդված
Բովանդակությունը մի կողմ (բովանդակությունը էջում հիմնականը չէ)
Թույլ է տալիս տեղադրել վերարտադրելի աուդիո ֆայլ:
Համարձակ տեքստ:
Նշում է փաստաթղթում հարաբերական հղումների հիմնական URL կամ նպատակային հատկանիշը:
Այն տարածքը, որտեղ տեքստի գրությունը կարող է ունենալ այլ ուղղություններ:
Սահմանում է տեքստի գրելու ուղղությունը: Ի տարբերություն Ուղղությունը ցույց է տալիս ֆիզիկական ուղղությունը
Մեջբերում:
Նշում է մարմնի փաստաթղթերի տարածքը:

Տողի ընդմիջում:
Կտտացվող կոճակը
Օգտագործվում է գծապատկերներ նկարելու համար, օգտագործելով սցենարներ
Ստորագրության աղյուսակներ:
Ծանոթագրվել նյութի անվան վրա:
Օգտագործվում է համակարգչային կոդը տեքստի ձեւով տեղադրելու համար:
Նշում է աղյուսակում սյուների բնութագրերը:
Նշում է ձեւաչափման մեկ կամ մի քանի սեղանի սյուների խումբ:
Օգտագործվում է կանխորոշված \u200b\u200bտարբերակները ընտրելու համար ընտրելու համար տեքստի դաշտում մուտք գործելիս
Որոշում է տերմինի նկարագրությունը պիտակից
Պայմանների ցանկում
.
Տեքստ, որը հանվում է նոր տարբերակ Փաստաթուղթ:
Սահմանում է լրացուցիչ տեղեկություններ, որոնք օգտագործողը կարող է դիտել կամ թաքցնել
Ցույց է տալիս, որ բովանդակությունը տերմին է:
Որոշում է երկխոսության տուփը կամ ինտերակտիվ տարրը
Block Element- ը դասավորության հիմնական տարրերից մեկն է:
Սահմանում է սահմանումների ցուցակը:
Տերմինի անվանումը սահմանումների ցանկում
.
Իմաստով նվիրված տեքստը (սովորաբար, տեքստի մեջ ընտրված տեքստը):
Արտաքին կիրառման բեռնարկղ
Առնչվող տարրերի խումբ ձեւով
Վերնագիր
Տարր
Որոշում է մի քանի տարրերի ինքնավար խումբը (օրինակ, նկարը `ստորագրությամբ)
ոտնաթաթ
Սահմանում է օգտվողի ներդրման ձեւը

-

HTML վերնագրեր տարբեր մակարդակներից:

,

,

,

,

,
.
Ցույց է տալիս գլխի փաստաթղթի տարածքը:
Բլոկի վերնագիր
Հորիզոնական գիծ - թեմատիկ տարանջատող:
Արմատային տարր: Զննարկչի մասին հաղորդում է, որ այս փաստաթուղթը HTML փաստաթուղթ է:
Ընտրում է տեքստը Italics- ում: