HTML 블록 요소-HTML 튜토리얼-php.cn

Html은 모든 웹페이지의 구성 요소 역할을 하는 다양한 요소로 구성됩니다. 각 웹페이지마다 서로 다른 관점이 존재하며 프런트엔드와 백엔드 모두 로직을 구현합니다. HTML에는 CSS, 부트스트랩 프레임워크 등과 같은 웹 페이지를 강조하는 사용자 정의 또는 사용자 정의 요구 사항이 있습니다. 일반적으로 CSS 스타일은 목적에 따라 HTML 요소를 1. 블록 수준 요소와 2. 인라인 요소의 두 가지 범주로 나눕니다. 우리는 이미 span 및 div 과 같은 이전 기사를 논의했습니다. 요소는 HTML 및 의 인라인 요소에 사용됩니다. 태그는 HTML의 블록 수준 요소에 사용됩니다.

구문:

----------codes------ ---------------------- 로그인 후 복사 일반적으로 모든 HTML 태그에는 미리 정의된 구조와 기능이 있습니다. HTML의 블록 요소에는 문서에서 사용할 다른 태그가 있습니다. 일부 태그는 다음과 같습니다.

태그:

, , , , - , , , , , , , ,

, , , , , 언급된 태그는 HTML에 사전 정의된 블록 요소입니다. 각 태그는 HTML 문서에서 호출될 때 서로 다른 기능을 제공합니다. 아마도 우리는 블록 수준 요소의 태그. 코드는 HTML의 블록 수준 요소에 대한 일반적인 구문이며 필요할 경우 위에서 언급한 사전 정의된 태그를 사용합니다. 각 태그는 HTML에서 독립적이고 독립적인 콘텐츠를 갖습니다.

HTML에서 블록 요소는 어떻게 작동하나요? 형식 지정 모델과 함께 CSS 스타일을 사용하고 인라인 요소와 블록 요소를 모두 포함합니다. 아마도 블록 요소의 형식 지정을 처리할 것입니다. 블록 요소 형식 지정은 HTML의 블록 수준 요소 중 하나입니다. 모든 CSS 요소는 양식처럼 보입니다. 콘텐츠, 패딩, 테두리와 같은 일부 구성 요소가 포함된 상자가 포함되어 있습니다. 이는 CSS 스타일의 다양한 구성요소입니다.

내용 : 텍스트, 그림, 동영상 등 HTML 요소의 일반적인 내용을 나타냅니다. 패딩: padding-top, padding-left, padding-right, padding-bottom 등과 같은 형식으로 모든 내용에 포함된 패딩을 나타냅니다. 이러한 속성이 있습니다. 테두리: HTML 콘텐츠와 패딩의 테두리를 나타냅니다. border-top, border-bottom 등을 사용하여 테두리를 설정합니다. 블록 요소는 HTML 문서에서 여백과 안쪽 여백을 설정하려고 합니다. 사용자가 본질적으로 더 매력적으로 보이도록 하려면 웹 페이지를 적절하게 정렬해야 하기 때문입니다. 어떤 경우에는 블록 요소 섹션에 요소 외부의 여백이 포함됩니다. 요소 내부의 패딩은 내용을 둘러쌉니다. 요소에 배경색이나 이미지가 필요한 경우 이를 할당하면 콘텐츠와 패딩 영역 모두에 표시됩니다. 일반적으로 여백 영역은 투명하며 상위 요소의 배경을 표시합니다. 그러나 본문 섹션과 같은 상위 요소에 표시 속성이 할당되지 않은 경우에는 예외가 발생합니다. 이러한 경우 여백과 패딩 영역 모두 색상이나 이미지를 표시합니다. 여백은 콘텐츠와 패딩을 모두 포함하는 HTML 요소의 바깥쪽 가장자리 사이의 거리를 나타냅니다.

또한 웹페이지를 강조하기 위해 테두리 색상, 스타일, 너비, 여백 등 테두리를 설정했습니다. 요소 주위의 테두리 모양을 제어하고 다양한 테두리 유형을 지정할 수 있습니다. CSS의 테두리 스타일 속성을 사용하면 사용자는 없음, 실선, 이중, 숨김, 점선, 점선, 홈, 능선, 삽입 및 시작과 같은 값으로 지정된 사용자 정의 테두리 스타일을 설정할 수 있습니다. 문서를 테두리에 맞춰 정렬한 경우 값을 지정하지 않으면 기본값은 없음을 의미합니다. 이는 페이지에 테두리가 할당되지 않았음을 의미합니다. CSS2 버전에 추가된 숨겨진 값을 제외하고 이러한 모든 테두리 스타일은 CSS1 버전에 포함되어 있습니다.

Starting from HTML 4, the div element is a block-level element for designing documents with specified divisions. Div elements lack specific formatting characteristics by default. However, you can still use the deprecated Align attributes in HTML to the center or align content to the right side; it’s a default in deprecated elements in HTML. In tag was intended to take any format in CSS styles, and div has the options like nested div tags and other elements nested with div elements whatever styles, borders, and alignments we specified it would affect for those nested elements. Some basic codes for div tags with border, background image, and other user-defined format styles.

Code:

div.sample {width:150px;background:#FF0002;border:2px dotted black;padding:7px;} div.sample ul {color:green;} 로그인 후 복사 The above codes are samples to understand the CSS attributes and functionalities implemented with the div tag. We will discuss some basic examples in the below sections.

Examples of HTML Block Elements Given below are the following examples:

Example #1 Code:

div.sample {width:150px;border:2px dotted black;padding:7px;} div.sample ul {color:green;} Samples

Apple Orange Pineapple 로그인 후 복사 Output:

Example #2 Code:

div.sample {width:150px;border:2px dotted black;padding:7px;} div.sample ul {color:green;} Sample green black

로그인 후 복사 Output:

Example #3 Code:

.first { background-color: green; list-style-type: none; text-align: center; margin: 2; padding: 2; } .second { display: inline-block; font-size: 30px; padding: 23px; } Home AboutUs Contact Us 로그인 후 복사 Output:

In the above example, we see the different scenarios for the block-level elements first two examples, we use and align the menus or tabs or text values in the and tags. is used for inline elements, but paragraph tag will use for blocking the text or values which is to be specified in the user-level areas. A final example will be used for the element in HTML for navigating the web pages with some block-level contents. We already discussed the working of block-level elements area; block-level attributes enable the activation of specific CSS properties such as background color, text styles with list options, text alignments, padding and margins, and font styles; these attributes have values specified with the navigation web pages.

Conclusion In the conclusion part, the HTML block elements will occupy the entire space for its parent elements (containers) to create the blocks. Browsers will generally display the block-level elements with the new line and full width before and after the HTML elements. We can visualize the elements with boxes like a stack.