Ինչ է նշանակում div html-ում: Խուսափեք HTML5 նշագրման ընդհանուր սխալներից: Օրինակ. Գեղեցիկ շրջանակ div
Ցանկացած վեբ էջ բաղկացած է դրա վրա տեղակայված տարրերից, և div բլոկների դասավորությունը գրեթե միշտ պատասխանատու է դրանց տեղադրման համար: Իհարկե, կա նաև աղյուսակի դասավորություն՝ օգտագործելով պիտակներ
| , և նույնիսկ բանավեճ կա այն մասին, թե որ համակարգն է ավելի լավ օգտագործել՝ բլոկ կամ սեղանի վրա հիմնված: Սակայն իրականում ներկայումս չեք գտնի ժամանակակից, հայտնի և հարմար կայքերից որևէ մեկը, որն օգտագործում է միայն աղյուսակային դասավորությունը։ Լավագույն դեպքում այն օգտագործվում է միայն այն բանի համար, ինչի համար նախատեսված է, այսինքն՝ աղյուսակներ ստեղծելու համար, բայց ոչ ինքնին կայքի կառուցվածքը ձևավորելու համար։
Փաստն այն է, որ կայքի div դասավորությունը թույլ է տալիս սահմանել բազմաթիվ CSS հատկություններ, որոնք հասանելի չեն աղյուսակների համար: Բացի այդ, սեղանի համակարգի ամենամեծ թերությունն այն է, որ աղյուսակը չի ցուցադրվի էկրանին, քանի դեռ այն ամբողջությամբ չի բեռնվել բրաուզերի կողմից: Եթե ամբողջ կայքը կազմված է աղյուսակով, ապա այն էկրանին կհայտնվի միայն էջի ամբողջ html կոդը ամբողջությամբ բեռնվելուց հետո։ DIV պիտակ և float հատկությունԲլոկային համակարգի հիմքը պիտակն է, որը կոնտեյներ է բովանդակության համար։ Այն կարող է պարունակել նաև այլ տարաներ իր ներսում: DIV պիտակի օգտագործումն ավելի դժվար չէ, քան . Որպես կանոն, կայքի ստանդարտ կառուցվածքը ձևավորվում է հետևյալ կերպ. կա հիմնական կոնտեյներ (հաճախ դրան վերագրվում է դաս, որը կոչվում է wrapper, container, main և այլն)։ Այս կոնտեյների ներսում կան մենյուի բլոկներ, բովանդակության մաս և կողագոտ: Լռելյայնորեն, յուրաքանչյուր նոր բլոկ տեղադրվում է նոր տողում: Բլոկը մյուսի ձախ կամ աջ կողմում տեղադրելու համար (օրինակ՝ աջ կողմում կողագոտին տեղադրելու համար) օգտագործվում է float հատկությունը։ Լռելյայն այն ունի «ոչ մի» արժեքը, բայց կարող եք նաև սահմանել «ձախ» և «աջ» արժեքները: Դիտարկենք այս հատկությունը՝ օգտագործելով երկու բլոկների օրինակ: Արգելափակել բովանդակության համար Արգելափակել կողագոտու համար Այս կոդը կտա հետևյալ արդյունքը. հստակ սեփականությունԿարևոր է հաշվի առնել, որ float հատկությունը վերաբերում է ոչ միայն բլոկին, որում այն գրանցված է, այլ նաև այն հաջորդ տարրին, որը կհետևի այս բլոկին: Այսինքն, եթե վերը նկարագրված երկու բլոկներին ավելացնենք ևս մեկ բլոկ՝ առանց դրան որևէ հատկություն նշելու, ապա այն չի տեղակայվի նոր տողի վրա, այլ կսկսի երկրորդ բլոկի աջ կողմը։ Դրանից խուսափելու համար block div դասավորությունը օգտագործում է հստակ հատկություն, որը պետք է սահմանվի այն բլոկի համար, որը մենք ցանկանում ենք տեղադրել նոր տողի վրա: Ամենից հաճախ դրա համար դրվում է «երկուսն էլ», բայց մենք կարող ենք նաև դնել «ձախ» կամ «աջ», եթե ցանկանում ենք ոչ միայն բլոկը տեղադրել նոր գծի վրա, այլև սահմանել դրա հավասարեցումը: Եկեք ավելացնենք նոր տարր վերը նշված օրինակին. Բովանդակության բլոկ Կողային բլոկ Նոր բլոկ, որը գտնվում է ներքևում Արդյունք:
Ի լրումն բլոկների գտնվելու վայրի, կարևոր է նաև բլոկների միջև և դրանց ներսում անցումներ սահմանել: Դրա համար օգտագործվում են համապատասխանաբար լուսանցքը և լիցքավորման հատկությունները: Տարրի վերին, աջ, ներքևի և ձախ մասերի համար անցքերն առանձին են սահմանվում: Դրանք կարելի է նշել մեկ տողում՝ թվարկելով չորս արժեք. Լուսանցք՝ 20px 10px 0 40px Այս պարամետրերով բլոկը կտեղադրվի մայր տարրից 20 պիքսել ներքև, աջակողմյան տարրից՝ տասը պիքսել, ներքևում կունենա զրոյական լցոն, իսկ ձախում՝ 40 պիքսել: Եթե բոլոր նույն ցուցանիշները նշված են padding հատկության մեջ, ապա դրանք կլինեն բովանդակության ներքին լիցք՝ կապված բլոկի սահմանների հետ, որտեղ այն գտնվում է: Դուք կարող եք նաև սահմանել անհատական հատկություններ առանձին եզրերի համար՝ օգտագործելով լուսանցք-վերև, լուսանցք-ներքև, լուսանցք-ձախ, լուսանցք-աջ (և նմանապես լցոնման համար): Այս դեպքում, եթե եզրերից որևէ մեկը նշված չէ, ապա դրա կողմի նահանջը կզրոյի կամ կորոշվի էջի բլոկների համար նշված ընդհանուր css հատկություններով: HTML Content Division տարրը ( ) հոսքի բովանդակության ընդհանուր կոնտեյներ է: Այն ոչ մի ազդեցություն չի թողնում բովանդակության կամ դասավորության վրա մինչև ոճավորվի CSS-ի միջոցով: Այս ինտերակտիվ օրինակի աղբյուրը պահվում է GitHub պահեստում: Եթե ցանկանում եք նպաստել ինտերակտիվ օրինակների նախագծում, խնդրում ենք կլոնավորել https://github.com/mdn/interactive-examples և ուղարկել մեզ հետաձգման հարցում: Որպես «մաքուր» կոնտեյներ՝ տարրը ի սկզբանե ոչինչ չի ներկայացնում: Փոխարենը, այն օգտագործվում է բովանդակությունը խմբավորելու համար, որպեսզի այն հեշտությամբ ձևավորվի՝ օգտագործելով դասը կամ ատրիբուտները, նշելով փաստաթղթի մի հատվածը որպես այլ լեզվով գրված (օգտագործելով lang հատկանիշը) և այլն:
Նշում. align հատկանիշը հնացած է. մի օգտագործեք այն այլևս: Փոխարենը, դուք պետք է օգտագործեք CSS հատկությունները կամ մեթոդները, ինչպիսիք են CSS Grid-ը կամ CSS Flexbox-ը՝ տարրերը էջում հարթեցնելու և տեղադրելու համար: Օգտագործման նշումներ
Ցանկացած տեսակի բովանդակություն այստեղ: Ինչպիսին է ,
Այս էջի համատեղելիության աղյուսակը ստեղծվում է կառուցվածքային տվյալների հիման վրա: Եթե ցանկանում եք նպաստել տվյալներին, խնդրում ենք ստուգել https://github.com/mdn/browser-compat-data և ուղարկել մեզ հետ կանչելու հարցում: Թարմացրեք համատեղելիության տվյալները GitHub-ում
Բարի երեկո ընկերներ: Ինչ-որ կերպ html-ի իմ մի քանի դասերի ընթացքում ես խոսեցի և օգտագործեցի այնպիսի հասկացություն, ինչպիսին է div layout-ը: Դուք հավանաբար հարցեր ունեք, հատկապես, եթե դուք նորեկ եք, ի՞նչ է դա: Այսօրվա հոդվածում ես կփարատեմ ձեր բոլոր կասկածները և կպատասխանեմ այն հարցերին, թե ինչում են գտնվում div բլոկները Սկսենք ուսումնասիրել։ HTML div բլոկներ և դասավորությունՈրպեսզի ձեր ուղեղը չխառնվի և չաղբի, ես միայն հակիրճ կասեմ, որ նախկինում բոլոր վեբ դիզայներներն ու մշակողները էջեր և կայքեր ստեղծելիս օգտագործում էին աղյուսակի դասավորություն, որտեղ յուրաքանչյուր բջիջ ներկայացնում էր որոշակի տարր: Դա նման բան էր թվում. Ահա թե ինչպիսին էր կայքի ստեղծումը. Սա շատ պարզունակ օրինակ է, բայց դուք կարող եք հստակ պատկերացնել, թե ինչպես են ստեղծվել կայքերը այդ հեռավոր ժամանակներում։ Ինտերնետային տեխնոլոգիաները դեռ չեն կանգնում, և ինչ-որ պահի մեզ մոտ եկավ html div դասավորության հայեցակարգը: Եվ հետո, ինչպես ասում են, ամեն ինչ սկսվեց։ Դրա նշանակությունը կայքի մշակման գործում իսկապես մեծ է։ Այժմ կայքերի ստեղծումը և html բլոկների կառավարումը դարձել է ավելի հեշտ, քան երբևէ: Կայքերը սկսեցին գեղեցիկ և հետաքրքիր դառնալ։ Հիմա ամբողջ աշխարհը նոր է իր ճանապարհը բացում։ Այսպես մենք այժմ կարող ենք պարզեցված ձևով պատկերել div html բլոկների օգտագործման մոդելը: Հարմարավետությունը կայանում է նրանում, որ բլոկները միմյանցից անկախ են, դրանք հեշտ է կառավարել անհատապես, շարժվել այնպես, ինչպես ցանկանում եք, ավելացնել ոճեր, դուք կարող եք սահմանել ընդհանուր ոճեր CSS կանոնների միջոցով մի քանի Div խմբերի համար: Համաձայնեք, սա հարմար է: Div պիտակների օգտագործման օրինակներԵկեք նայենք մի քանի գործնական օրինակների, թե ինչպես կարող եք կիրառել div պիտակներ html էջում: Պարզ օրինակով էջում մենք կստեղծենք 4 բլոկ։ Այս և հետագա օրինակներում ես միշտ կօգտագործեմ Notepad++-ը:
Այսպիսով, թույլ տվեք բացատրել: Մենք ունենք դիզայն< ! DOCTYPE html >այն հարմար է ժամանակակից բրաուզերների համար և աջակցում է HTML 5 նշագրմանը, մենք դրա մասին կխոսենք հետագա համարներում: Հաջորդը, բացվում է մեծ «ծնող» կոնտեյներ< html >. Այն զուգակցված է և պետք է փակվի վերջում: Այնուհետև գալիս է ծառայության պիտակի բացումը< head >, որը նույնպես զուգակցված է և պարունակում է ծառայության տեղեկատվություն կոդավորման մասին< meta charset >, SEO-ի ամենակարևոր էջի վերնագիրը, նկարագրությունը (այստեղ չեմ ներառել, քանի որ կարիք չկա, մենք վերլուծում ենք զուտ տեխնիկական կողմը), այստեղ ներառված են նաև CSS ոճերը, տառատեսակները (Google Fonts գրադարան), JavaScript-ը։ Հաջորդը գալիս է պիտակը< body >. Այն արդեն կպահի մեր բոլոր բլոկային գծանշումները և պիտակներով բոլոր բեռնարկղերը: Պարզապես հիշեք այն որպես հսկայական «տակառ»: Եվ վերջապես, ահա մեր դիվի կոնտեյներները:
Կարևոր. Նրանք նաև զուգակցված են, դրանք նույնպես պետք է փակվեն այլ պիտակների հետ միասին: Ինչպես տեսնում եք, յուրաքանչյուր div բլոկ ունի դասի հատկանիշ հավասարման նշանից հետո, դուք կարող եք ինքնուրույն և կամայականորեն սահմանել դրանք: Այս դասերը ստեղծվել են հատուկ CSS-ի համար: Այսինքն, բրաուզերը գալիս է էջ, տեսնում է div բլոկը և նայում, թե ինչ տեղեկատվություն է այն պարունակում և գնում է CSS ֆայլ և փնտրում է այնտեղ պահանջվող դասը։ Դուք կարող եք սահմանել ոչ միայն class հատկանիշը, այլ նաև կարող եք օգտագործել id-ը (իդենտիֆիկատորը): Դուք կարող եք հարց տալ. «Ինձ համար ի՞նչ տարբերություն, թե որն եմ ես օգտագործում»: Ես կպատասխանեմ, դասավորության համար կարող եք օգտագործել ցանկացած մեթոդ: Միայն մեկ տարբերությամբ՝ առաջնահերթության առումով id-ն ավելի շատ արտոնություններ ունի, քան դասը։ Ես դա կբացատրեմ ստորև ներկայացված տեսանյութի խաբեության թերթիկում: Յուրաքանչյուր ոք ունի կայքեր ստեղծելու իր ոճը, ես նախընտրում եմ օգտագործել class, քանի որ CSS-ում այս գրառումը ցուցադրվում է կետով: ընտրիչ Այո, ի դեպ, ուզում եմ ասել, որ header-ը, sidebar-ը, content-ը, footer-ը բոլորը CSS-ի ընտրիչներ են, և դրանք արդեն կունենան ատրիբուտներ։ Այսպիսով, մենք շարունակում ենք մաքրել օգտատերերի գլխում առկա խառնաշփոթը։ Մենք դասի հետ ստեղծել ենք div բլոկներ, հիմա անցնենք CSS-ին։ Եկեք բացենք մեր էջի css կանոնները head tag-ի ներսում, այսինքն՝ մենք այն կձևաչափենք։ Եկեք դա անենք այսպես.
Մուտքը կլինի հետևյալը (ուղղակի պատճենեք և տեղադրեք ձեր օրինակում և նայեք բրաուզերում) Div պիտակներ օգտագործելու օրինակ .header ( լայնությունը՝ 600px; բարձրությունը:120px; եզրագիծը:1px պինդ սև; 370px բարձրություն:300px; 1px պինդ սև:230px;
Այս հոդվածում մենք կհասկանանք, թե ինչ է պիտակը, որտեղ է այն օգտագործվում, ինչպես օգտագործել պիտակը նկարներ, տեքստեր տեղադրելու համար և շատ ավելին: Բացի այդ, ոչ պակաս կարևոր է, որ պիտակը շատ հաճախ օգտագործվում է CSS ոճի թերթիկների հետ համատեղ: Մենք կզբաղվենք նաև դրանցից մի քանիսի հետ: Այսպիսով, պիտակը html էջի բլոկ տարր է, որը նախատեսված է վերահսկելու տեղաբաշխումը և տեքստերին, պատկերներին, հղումներին և այլ օբյեկտներին հատկությունների լայն տեսականի տալու համար: Ինքնին (առանց ատրիբուտների և css ոճերի), թեգը որևէ կերպ չի ազդում html էջերի տարրերի վրա։ Առանց ոճերի օգտագործման, պիտակը նախատեսված է տարրերը html էջում տեղադրելու համար: Դա անելու համար պիտակը պետք է ունենա align հատկանիշը: Բայց եկեք չխփենք բուշի շուրջ և անմիջապես անցնենք պրակտիկայի: 2. Ինչպե՞ս են պիտակները օգտագործվում html էջում տեքստային բլոկներ տեղադրելու համար:Օգտագործելով թեգ՝ կարող եք ցանկացած տարր տեղադրել էջի ցանկացած մասում։ Օրինակ՝ ունենք «ՏԵՔՍՏ» բառը։ Այն տեղադրելու համար օգտագործեք հետևյալ պիտակը. Բրաուզերում այն ունի հետևյալ տեսքը. 3. Ինչպե՞ս տեղադրել նկար (պատկեր) օգտագործելով պիտակը:Օգտագործելով թեգը՝ մենք կարող ենք արագ և հեշտությամբ տեղադրել ոչ միայն տեքստը, այլև նկարները html էջի անհրաժեշտ տեղում։ Սա արվում է այսպես. Ենթադրենք, մենք ունենք նկար, որը կոչվում է flow.jpg, և այն տեղադրված է նույն գրացուցակում (նույն թղթապանակում), ինչ ֆայլը, որի վրա այն պետք է տեղադրվի։ Այն ունի նաև 100 պիքսել լայնություն և 72 պիքսել բարձրություն: Այս դեպքում թեգերը գրվում են այսպես. Բրաուզերում այն ունի հետևյալ տեսքը.
Օգտագործելով թեգերը, դուք կարող եք տեղադրել ոչ միայն պարզ տեքստ կամ պատկերներ html էջում, այլև հղումներ: Սա արվում է այսպես. Ենթադրենք, մենք պետք է հղում տեղադրենք html էջի վրա, որը տանում է դեպի http://site կայք։ Ինչպես արդեն պետք է իմանաք անցյալից, կայքի հղումն ինքնին գրված է այսպես՝ դասեր
Դե, մենք պարզեցինք, թե ինչպես են տեքստերը, պատկերները և հղումները տեղադրվում html կայքի էջերում՝ օգտագործելով պիտակներ: Այստեղ ոչ մի բարդ բան չկա։ 5. Ինչպե՞ս ընդգծել ցանկացած օբյեկտ html էջի վրա՝ օգտագործելով պիտակ և css ոճեր, կամ ինչպես ստեղծել շրջանակ օբյեկտի շուրջ՝ օգտագործելով թեգ և css ոճեր:Այս թեման մի փոքր ավելի դժվար է հասկանալ, քանի որ մենք ստիպված կլինենք ավելացնել css ոճերը: Այսպիսով, սովորաբար ոճերի համար ստեղծվում է css ընդլայնմամբ առանձին տեքստային ֆայլ, որը միացված է իր վերնագրի էջին, այսինքն՝ . Մենք դա չենք անի, այլ ուղղակիորեն պիտակի մեջ կգրենք բոլոր անհրաժեշտ ոճերը։ CSS ոճերը պիտակի մեջ տեղադրելու համար օգտագործեք style=="ոճերը պետք է գրվեն՝ բաժանված կիսատ-սևակետերով":
7. padding-top:30px;
- վերին լուսանցք 20 պիքսել 8. padding-left:15px; - լրացրեք բլոկը կանաչով (կարող եք նաև գույները սահմանել տասնվեցական) Ֆայլը պահելուց հետո դիտարկիչում կտեսնենք հետևյալը.Այստեղ մենք կարող ենք մի փոքր կրճատել ոճի կոդը։ Օրինակ, դուք կարող եք կրճատել արտաքին ներքևի ծածկագիրը այսպես.
- նշելով կապույտ գույնը (ոճերի գույնը կարող է նշվել ինչպես գույները նշելու տասնվեցական համակարգում, այնպես էլ սովորական սովորական անգլերեն բառերով, ինչպիսիք են կարմիր, կապույտ, դեղին)
3. տառաչափ՝ 12px; Իհարկե, եթե դուք ունեք հսկայական քանակությամբ բովանդակություն, ապա ուղղակիորեն պիտակի մեջ ոճեր օգտագործելը հարմար չէ, քանի որ դրանք խմբագրելը և ավելացնելը շատ ժամանակ է պահանջում: Եվ, ինչպես արդեն գրել եմ այս հոդվածում, մշակումը պարզեցնելու համար բոլոր ոճերը տեղադրվում են css ընդլայնմամբ առանձին ֆայլում, որը ներառված է էջի html թեգում։ Բայց մենք դա չենք դիտարկի, քանի որ այս թեման բոլորովին այլ ծրագրավորման լեզու է, որը կապված է կայքի ձևավորման հետ: Եթե ցանկանում եք հասկանալ css-ը, html-ը և ընդհանրապես սովորել, թե ինչպես ստեղծել կայքեր՝ օգտագործելով վիդեո դասեր, այցելեք իմ կայքը: Եվ եթե դուք նախատեսում եք սովորել, թե ինչպես ստեղծել պրոֆեսիոնալ առցանց խանութներ՝ օգտագործելով Magento շարժիչը, ապա դա ամենահեշտն է անել իմ հեղինակային վիդեո դասընթացի օգնությամբ: Տարրը բլոկային տարր է և նախատեսված է փաստաթղթի մի հատված ընդգծելու համար՝ բովանդակության տեսքը փոխելու համար: Սովորաբար, բլոկի տեսքը վերահսկվում է ոճերի միջոցով: Որպեսզի ամեն անգամ պիտակի ներսում ոճը չնկարագրվի, կարող եք ոճը առանձնացնել արտաքին ոճաթերթի և ընտրիչի անունով պիտակին ավելացնել դաս կամ id պարամետր: Ինչպես մյուս բլոկի տարրերի դեպքում, պիտակի բովանդակությունը միշտ սկսվում է նոր տողից: Դրանից հետո ավելացվում է նաև տողերի ընդմիջում:... ՇարահյուսությունParameters align Նշում է պիտակի բովանդակության հավասարեցումը: title Բովանդակությանը գործիքի հուշում է ավելացնում: Փակման պիտակ
.block2 (
Չի թույլատրվում XHTML 1.1-ում Նկարագրություն... Փաստարկների կենտրոն Հավասարեցնում է տեքստը կենտրոնին: Տեքստը հորիզոնական տեղադրվում է դիտարկիչի պատուհանում կամ կոնտեյներով, որտեղ գտնվում է տեքստային բլոկը: Տեքստի տողերը կարծես թեքված են անտեսանելի առանցքի վրա, որն անցնում է վեբ էջի կենտրոնով: Հարթեցման այս մեթոդը ակտիվորեն օգտագործվում է վերնագրերում և տարբեր ստորագրություններում, ինչպիսիք են ենթագրերը, այն պաշտոնական և ամուր տեսք է հաղորդում տեքստի ձևավորմանը:Մնացած բոլոր դեպքերում կենտրոնական հավասարեցումը հազվադեպ է օգտագործվում այն պատճառով, որ անհարմար է մեծ քանակությամբ նման տեքստ կարդալը:
#շերտ1 ( Նկարագրություն... ֆոն՝ #fc0;լիցք՝ 5px; #շերտ2 (ֆոն՝ #fff;
լիցք՝ 10px; TITLE պարամետր
Բացատրական տեքստ է ավելացնում կոնտեյների մեջ գործիքի հուշման տեսքով, որը հայտնվում է, երբ մկնիկի կուրսորը սավառնում է բովանդակության վրա:
ՓաստարկներՑանկացած տեքստային տող: Տողը պետք է փակցված լինի կրկնակի կամ մեկ չակերտների մեջ:
Ձեզ նույնպես կարող է դուր գալ |
