HTML 中的块级元素
HTML 有一些预定义的标签和元素；它可能具有元素中的一些功能和类型，例如块级、内联 html 元素。网页有一组不同的导航，逻辑将从前端 html 实现，用户定义的或自定义的要求将用于突出显示网页，如使用 css、引导框架。我们已经讨论了上一篇文章，如 span 和div element 用于 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 有自己的 border-style 属性，使用户能够使用一些值设置自己的自定义边框样式，例如 none、solid、double、隐藏、点线、虚线、凹槽、脊线、嵌入和起始。如果我们将文档与边框对齐，则不指定任何值，默认值“none”未分配，这意味着没有为网页分配边框。这些边框样式包含在 css1 版本中并可用，但隐藏值除外，这些隐藏值是在下一版本（即 css2 版本）中添加的。
Html 4以后，div元素是块级元素，用于设计和分隔文档的指定分区；该元素没有特定的特征格式，并且在 HTML 中不推荐使用 Align 属性，它可以用于居中或在
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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
您如何在PHP中解析和处理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示了如何使用PHP有效地处理XML文档。 XML（可扩展的标记语言）是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储
