Նկարագրեք HTML-ում բացատները և դրանց օգտագործումը.

HTML-ում բացատները, որոնք նաև կոչվում են "whitespace", դա այն նշաններն են, որոնք բրաուզերը չի ցուցադրում (բացատներ, տաբուլացիաներ, նոր տողերի նշաններ): Բրաուզերները սովորաբար միավորում են դրանք մեկ բացատում ռենդերինգի ժամանակ, բացառությամբ որոշ տարրերի և CSS հատկությունների:

Օգտագործում:

1. Կոդի ընթերցելիության բարելավում: Դիզայներները օգտագործում են բացատները HTML կոդում տեսողական բաժանման համար՝ այն դարձնելով ավելի հստակ և կառուցվածքային: Դա չի ազդում էջի ցուցադրման վրա:

2. Տողային տարրերի բաժանում: Բրաուզերները ավտոմատ կերպով ավելացնում են բացատ տողային տարրերի միջև, որոնք գտնվում են կողք կողքի HTML կոդում: Այս վարքագիծը կարելի է փոխել CSS-ի միջոցով:

3. Բացատներ պահող տարրեր:

   • <pre>: Պահպանում է բոլոր բացատները և տողանցումները, ձևաչափելով տեքստը այնպես, ինչպես այն գրված է սկզբնաղբյուրում:
   • <code>: Հաճախ օգտագործվում է <pre>-ի ներսում՝ կոդի ձևաչափումը պահպանելու համար:
   • <textarea>: Տեքստային դաշտում բացատներն ու տողանցումները պահվում են:

4. CSS հատկություն white-space: Կարգավորում է, թե ինչպես է բրաուզերը մշակելու բացատները՝

   • normal (նույնպես՝ ստանդարտ): Բացատները միավորվում են, տողանցումները անտեսվում են (բացի <br>-ից):
   • nowrap: Բացատները միավորվում են, բայց կանխում է տողանցումները:
   • pre: Համապատասխանում է <pre>-ին:
   • pre-wrap: Պահպանում է բացատներն ու տողանցումները, ինչպես նաև թույլ է տալիս ավտոմատ տողանցում՝ ըստ կոնտեյների լայնության:
   • pre-line: Բացատները միավորվում են, բայց տողանցումները պահվում են:

Բացատների միավորման օրինակ:

HTML:

<p>
    Շատ        բացատներ

    և
    տողանցումներ
    տողեր
</p>

Արդյունք բրաուզերում:

Շատ բացատներ և տողանցումներ

Օրինակ <pre>-ի օգտագործմամբ:

HTML:

<pre>
    Պահպանում են
        բոլոր
            բացատները
    և
    տողանցումները
</pre>

Արդյունք բրաուզերում:

    Պահպանում են
        բոլոր
            բացատները
    և
    տողանցումները

CSS white-space հատկության օգտագործմամբ օրինակ:

HTML:

<div class="pre-wrap">
    Այս տեքստը պահպանում է
        իր բացատները
            և տողանցումները

    տողերը,
    ինչպես նաև կոտրվում է լայնության վրա:
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}