지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
목차
다양한 HTML 블록의 구문
HTML 블록의 요소
HTML 블록의 예
예시 #1
Example #4
Conclusion
집 웹 프론트엔드 HTML 튜토리얼 HTML 블록

HTML 블록

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Sep 04, 2024 pm 04:39 PM
html html5 HTML Tutorial HTML Properties HTML tags

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    더보기

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
    3 몇 주 전 By DDD
    Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
    2 몇 주 전 By DDD
    Will R.E.P.O. 크로스 플레이가 있습니까?
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    더보기

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    더보기

    뜨거운 주제

    Gmail 이메일의 로그인 입구는 어디에 있나요?
    7549
    15
    Cakephp 튜토리얼
    1382
    52
    Steam의 계정 이름 형식은 무엇입니까?
    83
    11
    Win11 활성화 키 영구
    57
    19
    NYT 연결 힌트와 답변
    22
    90
    더보기
    Related knowledge
    HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

    HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

    HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

    HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

    HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

    HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

    HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

    HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

    HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

    HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

    HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

    HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

    HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

    HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

    HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

    HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

    See all articles