HTML의 블록 수준 요소
- WBOY원래의
- 2024-09-04 16:19:051168검색
HTML에는 사전 정의된 태그와 요소가 있습니다. 블록 수준, 인라인 HTML 요소와 같은 요소에 일부 기능과 유형이 있을 수 있습니다. 웹 페이지에는 다양한 탐색 세트가 있으며, 논리는 사용자가 정의한 프런트 엔드 HTML에서 구현되거나 사용자 정의 요구 사항은 CSS, 부트스트랩 프레임워크 사용과 같은 웹 페이지를 강조하는 데 사용됩니다. 우리는 이미 범위와 같은 이전 기사에 대해 논의했습니다. div 요소는 html 및
구문:
html 태그에는 사전 정의된 태그 및 요소에 대해 자체적으로 사전 정의된 구조와 기능이 있습니다. HTML의 블록 수준 요소에는 몇 가지 다른 태그 세트가 있습니다. 요소는 웹 페이지에서 사용됩니다. 아래에 나열된 태그 중 일부입니다.
<address>,<article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption> <figure>,<footer>,<form>,<h1>-<h6>,<header>,<hr>,<li>,<main>,<nav>,<noscript>,<ol>,<p> <pre class="brush:php;toolbar:false">,<section>,<table>,<tfoot>,<ul>,<video>
위에 언급된 태그는 html 블록 수준 태그에 사전 정의된 태그입니다. 모든 태그는 HTML 페이지에서 태그를 호출할 때 서로 다른 사용법과 기능을 갖습니다. 아마도 우리는
<html> <body> <div> ----------codes------ ---------------------- </div> </body> </html>
위 코드는 HTML의 블록 수준 요소에 대한 일반적인 구문입니다. 또한 이전 단락에서 언급한 사전 정의된 태그도 사용할 것입니다. 필요한 경우 각 태그는 html로 독립적이고 독립적인 콘텐츠를 갖게 됩니다.
HTML의 블록 수준 요소란 무엇인가요?
블록 수준 요소는 웹 페이지를 강조하기 위해 CSS 스타일을 사용하고 HTML 형식 모델을 사용하여 비즈니스 성장을 개발하기 위해 웹 사용자에게 더욱 정교한 스타일을 사용합니다. 인라인 요소와 블록 요소를 모두 다루는 규칙이 있습니다. 아마도 이는 형식 지정 블록 수준 요소를 다루는 데 사용됩니다. 모든 CSS 요소는 html 태그를 사용하여 양식을 생성하며 여기에는 상자가 포함됩니다. 콘텐츠, 패딩, 테두리와 같은 일부 구성요소가 있을 수 있습니다. CSS 스타일의 일부 구성요소입니다.
블록 수준 요소는 적절한 정렬과 보기가 필요하기 때문에 웹 페이지의 여백과 패딩을 설정하려고 합니다. 동시에 요소 섹션에는 요소 패딩 외부에 존재하는 데 사용되는 여백도 포함됩니다. 요소 내부에 존재하며 전체 HTML 본문 내용을 다룹니다. 요소에 배경색이나 이미지가 필요한 경우 해당 요소가 할당되고 콘텐츠와 패딩 영역 모두에 동일하게 표시됩니다. 일반적으로 여백 영역은 항상 투명 영역을 덮고 상위 요소의 배경을 표시합니다. 디스플레이 속성이 할당되지 않은 상위 요소가 본문 섹션에 할당되어 두 여백에 색상이나 이미지가 표시되는 경우 예외가 발생합니다. 및 패딩 영역 참고: 여백은 HTML 요소(콘텐츠와 패딩 모두)의 외부 가장자리 사이의 거리를 나타냅니다.
웹 페이지를 다음 단계로 강조 표시하기 위해 테두리 영역을 설정할 수도 있습니다. 여기에는 테두리 색상, 스타일, 너비 및 여백이 포함됩니다. 요소 주위의 테두리와 모든 유형이 웹 페이지에 나타나는 것과 동일합니다. CSS에는 사용자가 없음, 단색, 이중 등의 값을 사용하여 사용자 정의된 테두리 스타일을 설정할 수 있도록 하는 고유한 테두리 스타일 속성이 있습니다. 숨김, 점선, 점선, 홈, 능선, 삽입 및 시작. 문서를 테두리에 맞춰 정렬한 경우 어떤 값도 지정하지 않습니다. 기본값 없음이 할당되어 있으면 웹 페이지에 테두리가 할당되지 않음을 의미합니다. 이러한 테두리 스타일은 다음 버전, 즉 CSS2 버전에 추가된 숨겨진 값을 제외하고 CSS1 버전에 포함되어 사용할 수 있습니다.
Html 4 이상에서는 div 요소가 블록 수준 요소이며 디자인에 사용되며 지정된 구분으로 문서를 구분합니다. 요소에는 특정 특성 형식이 없으며 HTML의 정렬 속성은 더 이상 사용되지 않으며
div.sample {width:137px;background:green;border:7px dotted black;padding:3px;}
div.sample ul {color:blue;}
표시된 코드는 div 태그로 구현된 CSS 속성과 기능을 이해하기 위한 샘플입니다.
HTML의 블록 수준 요소 예
HTML의 블록 수준 요소의 예는 다음과 같습니다.
예시 #1
<html>
<head>
<style>
div.sample {width:133px;border:5px dotted green;padding:13px;}
div.sample ul {color:red;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Mango</li>
<li>Coconut</li>
<li>Lemon</li>
</ul>
</div>
</body>
</html>
출력:
예시 #2
<html>
<head>
<style>
div.sample {width:123px;border:10px dotted blue;padding:18px;}
div.sample ul {color:yellow;}
</style>
</head>
<body>
<p>Sample <span style = "color:black">Home</span><br/>
<span style = "color:LightGreen">Contactus</span></p>
</body>
</html>
출력:
Example #3
<html>
<head>
<style>
.example1 {
background-color: darkgreen;
list-style-type: none;
text-align: center;
margin: 3;
padding: 13;
}
.example2 {
display: inline-block;
font-size: 32px;
padding: 27px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#products">Products</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#support">Support</a></li>
</ul>
</body>
</html>
Output:
In the above examples, we have used the basics of the block-level elements in the first two examples and also aligned the menus tabs with text values in the
paragraph tag will be used for blocking the text which has already specified in the user-level areas. In the final example, we will use for
Conclusion
The block-level elements are covered with the entire space for elements that are used to create the blocks. The User browsers will display the block-level elements by using the new line and full-width for both before and after the html elements. We can visualize the elements using boxes like a stack.
위 내용은 HTML의 블록 수준 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!