찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML 블록

HTML 블록

WBOY
WBOY원래의
2024-09-04 16:39:25743검색

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

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

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

다양한 HTML 블록의 구문

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

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

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

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

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

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

<h6>An Unordered list </h6>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h4>An Ordered list</h4>
<ol>
<li></li>
<li></li>
<li></li>
</ol>

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

<form>
<input type=”text” name=” ” />
<textarea rows=” 3” col=”5” name=””></textarea>
<input type=”submit” name=”” />
</form>

HTML 블록의 요소

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

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

  10. -

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

    HTML 블록의 예

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

    예시 #1

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

    코드:

    <html>
<head>
<title>HTML Block Level Elements </title>
</head>
<body>
<h1>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>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>Example of Lists</h2>
<h4>An Unordered HTML List showing Countries </h4>
<ul>
<li>Mumbai</li>
<li>Pune</li>
<li>Nagpur</li>
</ul>
<h4>An Ordered HTML List showing Countries</h4>
<ol>
<li>Mumbai</li>
<li>Pune</li>
<li>Nagpur</li>
</ol>
</body>
</html>

    출력:

    HTML 블록

    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>
<table>
<tr>
<th>Sr No</th>
<th>Emp ID</th>
<th>Emp Name</th>
<th>Designation</th>
</tr>
<tr>
<td>1</td>
<td>111</td>
<td>John</td>
<td>Developer</td>
</tr>
<tr>
<td>2</td>
<td>112</td>
<td>Alebela</td>
<td>Tester</td>
</tr>
<tr>
<td>3</td>
<td>113</td>
<td>Rakesh</td>
<td>Project Manager</td>
</tr>
<tr>
<td>4</td>
<td>114</td>
<td>Siya</td>
<td>UX Designer</td>
</tr>
<tr>
<td>5</td>
<td>115</td>
<td>Kuldeep</td>
<td>Web Developer</td>
</tr>
</table>

    Output:

    HTML 블록

    Example #3

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

    Code:

    <!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body >
<form >
<h2>Welcome to HTMl Block Demo</h2>
<h4>Please login here</h4>
User ID : <input type = "text" name = "user_id" />
<br><br>
Password: <input type = "password" name = "password" />
<br><br>
<input type = "checkbox" name = "remember" value = "on"> Remember Me
<br><br>
<input type = "submit" name = "Login" value = "Submit" />
</form>
</body>
</html>

    Output:

    HTML 블록

    Example #4

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

    Code:

    <address>
Presented BY <a href="mailto:[email&#160;protected]">Narendra Modi</a>.<br>
Visit us at:Delhi<br>
primeminister.com<br>
Box 104, Red Fort<br>
Delhi
</address>

    Output:

    HTML 블록

    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.

    위 내용은 HTML 블록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    html if for format include using Generic this column canvas ul table li kind
    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：HTML 디스플레이 블록다음 기사：HTML 디스플레이 블록

    관련 기사

    더보기