搜索

首页  >  文章  >  web前端  >  HTML 中的块级元素

HTML 中的块级元素

WBOY
WBOY原创
2024-09-04 16:19:051202浏览

HTML 有一些预定义的标签和元素；它可能具有元素中的一些功能和类型，例如块级、内联 html 元素。网页有一组不同的导航，逻辑将从前端 html 实现，用户定义的或自定义的要求将用于突出显示网页，如使用 css、引导框架。我们已经讨论了上一篇文章，如 span 和div element 用于 html 和

中的内联元素。标签用于 html 中的块级元素。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 中块级元素中的标签。 
<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 属性，它可以用于居中或在

中默认其内容的右侧。标签旨在采用 CSS 样式中的任何格式。此外，它还有嵌套 div 标签等选项。它必须组合与 div 嵌套的其他元素。无论我们声明和分配什么，样式、边框和对齐方式都在文档中的 div 标记中指定，从而影响那些特定的嵌套元素区域。用于 div 标签的一些基本属性和值是边框、背景图像和其他用户定义的格式样式。 
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>

输出：

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>

输出：

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:

HTML 中的块级元素

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

and tags. is used for in-line elements but

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

以上是HTML 中的块级元素的详细内容。更多信息请关注PHP中文网其他相关文章！

css bootstrap html edge if for format double using Property default display margin padding border background
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：HTML Inline-Block下一篇：HTML Form Attribute

相关文章

查看更多