HTML 블록

HTML은 다양한 블록을 사용하여 웹페이지를 구축하는 데 사용되는 언어입니다. 이러한 요소는 스타일이며 HTML 블록 수준 요소와 인라인 요소라는 두 가지 유형으로 나뉩니다. 이러한 모든 종류의 요소는

HTML 블록의 태그입니다. 웹페이지의 메인 레이아웃을 디자인할 수 있도록 블록 수준의 요소가 구성되어 있습니다.

구조 뷰에 관해 말하면 인라인 요소 뷰보다 더 큰 구조 뷰를 생성합니다. 모든 블록 수준 요소는 화면의 전체 너비를 차지하는 새 줄로 시작합니다. 오프닝 닫는 태그 .

요소 그룹화는 레이아웃을 섹션 또는 하위 섹션 형태로 나누는 중요한 방법입니다. 모든 블록 요소를 다른 블록 요소에 넣을 수 있을 뿐만 아니라 인라인 요소를 HTML 블록 요소에 넣을 수도 있지만 블록 수준 요소를 대신 인라인 요소에 넣을 수는 없습니다. 요소 태그.

다양한 HTML 블록의 구문

다양한 HTML 블록 수준 요소의 구문은 다음과 같습니다.

1. div 요소: 화면의 전체 너비를 차지하고 항상 새 줄에서 시작하는 블록 요소로 작동합니다.

<div>
{ ……Lines of code…...}
</div>

2. table: table은 테이블 헤더, 테이블 행과 테이블 열을 포함하는 테이블 본문을 포함하여 데이터를 테이블 형식으로 표시하는 데 사용됩니다.

3. 요소 나열: 순서가 있는 목록 및 순서가 없는 목록

<h6 id="An-Unordered-list">An Unordered list </h6>

An Ordered list

4. 양식 요소 넣기: 양식 요소를 넣어 HTML 양식을 만드는 방법은 다음과 같습니다.

HTML 블록의 요소

HTML 블록 수준 요소로 사용되는 다양한 요소는 다음과 같습니다.

1. :
   주소 태그는 HTML 기사에서 작성자의 연락처 정보를 지정하는 데 사용됩니다.
2. :
    관사는 독립적인 콘텐츠를 지정하는 데 사용됩니다.
3. :
   메인 콘텐츠와 별도로 위치한 일종의 요소입니다. 일반적으로 사이드바로 처리됩니다.

4. :

   다른 소스에서 콘텐츠를 가져올 때마다 blockquote가 사용됩니다.
5. : 캔버스는 웹 문서에서 그래픽 공간을 제공하기 위해 사용되는 요소입니다.
6. : HTML 문서를 섹션이나 구분으로 나누는 데 사용되는 웹 개발 전반에 있어서 가장 중요한 요소입니다.
7. :
   필드 세트로 함께 묶이는 웹 양식에 사용되는 그룹 관련 레이블 또는 요소.
8. :
   HTML 양식은 이 블록 수준 요소를 사용하여 정의됩니다. 웹 개발 과정에서 가장 일반적으로 사용됩니다.
9. :
   웹페이지의 바닥글 부분을 나타내는 데 사용됩니다.

10. -

    :

    레벨 1~6을 정의하는 HTML 언어에서 사용되는 제목입니다.
11. :
    이 요소는 웹페이지의 헤더 부분을 나타내는 데 사용됩니다.
12. :
    이는 HTML 5에 도입된 최신 요소로, 탐색 링크를 포함하여 페이지 섹션을 나타내는 데 사용됩니다.
13. :
    섹션 요소는 문서의 일반 섹션을 나타내는 데 사용됩니다.
14. : 데이터를 표 형식으로 표시하려는 경우 표가 완벽한 솔루션입니다. HTML 문서에 대한 테이블이 생성됩니다.
    HTML 문서에 비디오 콘텐츠를 포함하려면 코드에 간단한 비디오 요소를 사용하는 것도 가능합니다.
    : 사용자가 항목 목록을 표시하려는 경우
    요소.
    : 순서대로 목록을 보여줍니다.
    :

    순서 없이 목록을 보여줍니다.
    :

    설명 목록의 형식으로 다양한 용어를 설명하는 데 사용되는 요소입니다.

    HTML 블록의 예

    다음은 HTML 블록의 몇 가지 예입니다.

    예시 #1

    아래 예에서는 div, p, 제목, 정렬된 목록과 정렬되지 않은 목록이 있는 목록 요소 등과 같은 몇 가지 기본 Html 블록 요소를 사용합니다.

    코드:

    
    <title>HTML Block Level Elements </title>
    
    
    <h1 id="HTML-Block-Level-Elements">HTML Block Level Elements </h1>
    <p>This is the example of HTML block elements showing multiple block
    level elements enclosed within it .Here we can also use inline elements too
    </p>
    <div>
    <h3 id="Example-including-div-p-headings-elements-list-elements">Example including div , p , headings elements, list elements</h3>
    <p>This example shows different kind of HTML block elements like div, p
    , headings in between h1 to h6 </p>
    </div>
    <h2 id="Example-of-Lists">Example of Lists</h2>
    <h4 id="An-Unordered-HTML-List-showing-Countries">An Unordered HTML List showing Countries </h4>
    

    • Mumbai
    • Pune
    • Nagpur

    An Ordered HTML List showing Countries

    1. Mumbai
    2. Pune
    3. Nagpur

    출력:

    

    Example #2

    Here we will see another example in which we are creating a table.

    Code:

    <style>
    table {
    border-collapse: collapse;
    }
    th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
    }
    </style>
    

    Sr No	Emp ID	Emp Name	Designation
    1	111	John	Developer
    2	112	Alebela	Tester
    3	113	Rakesh	Project Manager
    4	114	Siya	UX Designer
    5	115	Kuldeep	Web Developer

    Output:

    

    Example #3

    Now by using HTML blocks elements, we are going to create an HTML form as follows:

    Code:

    
    
    <title>Password Input Control</title>
    
    
    

    Welcome to HTMl Block Demo

    Please login here

    User ID :
    
    Password:
    
    Remember Me
    
    

    Output:

    

    Example #4

    Here we are trying to Address the element in HTML blocks.

    Code:

    <address>
    Presented BY <a href="mailto:%5Bemail%C2%A0protected%5D">Narendra Modi</a>.<br>
    Visit us at:Delhi<br>
    primeminister.com<br>
    Box 104, Red Fort<br>
    Delhi
    </address>

    Output:

    

    Conclusion

    The above information concluded that the HTML blocks level element included in the HTML document’s body. It will create some large HTML blocks of sections like paragraphs or pages with the division. One can include another block-level element into the block-level elements. It’s also possible to include inline elements into the block-level element but including block-level elements into the inline elements is not possible.