首页 >web前端 >html教程 >HTML 部分标签

HTML 部分标签

WBOY原创: 2024-09-04 16:31:331139浏览

下面的文章提供了 HTML 部分标签的概述。 HTML 标签定义文档的部分，例如页眉、章节、页脚等。标签将网页内容分成部分和子部分。它通常在需要两个页脚、页眉或任何其他新部分时使用。部分标签通常对相关内容的通用块进行分组。使用

的主要优点是标签的特点是它是一个语义元素，向开发者和浏览器描述其含义。

版块标签需要注意的要点

HTML5中的Section标签需要同时包含开始和结束标签，即

……..

<部分>标签用于将内容分为两部分，即它分配节和子节。
节标签允许的内容类型是流内容，意味着；作为父标签，不能嵌套
标签。元素;然后相同的内容不能有标签作为其父级；分段内容和可触摸内容。
<部分>元素不能是
的后代。元素。
每个应通过引入标题标签作为
的子标签来可视化。元素。
如果我们需要联合
的内容；单独的元素，那么我们可以使用
；代替标签。
<部分>元素不应该被用作通用容器；这就是
的内容是为了，特别是当切片仅用于样式目的时。经验法则是
标签逻辑上应该出现在文档的大纲上。
<部分>元素是语义元素，它提供有关所包含内容的含义，重点关注人类和用户代理的文档部分。它是一个通用语义元素，因此当没有其他语义容器元素（article、aside 和 nav）合适时，应该使用它。

语法：

下面是提到的语法：

HTML/XHTML
```
<body>
<section> ... </section>
<body>
```
CSS
```
section{
--your css code—
}
```
Html 部分标签的属性

以下是提到的一些属性：

1.标签特定属性

没有与
一起使用的特定属性标签。

2.全局属性

像所有其他 HTML 标签一样，
标签还支持HTML5中的全局属性。

以下是全局属性：
- 中止
- 自动完成
- 自动完成错误
- onblur
- 取消
- 可以玩
- 可以通关
- onchange
- 点击
- 关闭
- 上下文菜单
- 提示改变
- 单击
- ondrag
- ondragend
- ondragenter
- 关于dragage退出
- 拖拽离开
- ondragover
- ondragstart
- ondrop
- 持续时间变化
- 已清空
- 已结束
- 错误
- 焦点
- 输入
- 无效
- 按下按键
- 按键
- onkeyup
- 加载
- 已加载数据
- 已加载元数据
- onloadstart
- 鼠标按下
- 鼠标输入
- 鼠标离开
- 鼠标移动
- 鼠标移出
- 鼠标悬停
- 鼠标松开
- 鼠标滚轮
- 暂停
- 比赛中
- 正在播放
- 进行中
- 汇率变化
- 重置
- 调整大小
- 滚动
- 寻求
- 寻求
- 选择
- 现场表演
- onsort
- 已安装
- 提交
- 暂停
- 准时更新
- 打开
- 音量变化
- 等待中
3.事件属性

不存在可与
一起使用的事件属性标签。

中的 CSS 文本格式属性标签

下面给出的是 CSS 文本格式属性：
- 文字颜色
- 文本对齐
- 文字装饰
- 文本转换
- 行高
- 文本方向
- 文字阴影
- 字间距
中的 CSS 字体属性标签

下面给出的是 CSS 字体属性：
- font-style: normal|italic|oblique|initial|inherit
- font-variant: normal|small-caps|initial|inherit
- font-weight: normal|bold|bolder|lighter|number|initial|inherit
- font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
- font-family: family-name|generic-family|initial|inherit
CSS Test Shadow Property for
Tag

Given below is the CSS Test Shadow Property:
```
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>
```
Examples of HTML section Tag

Given below are the examples of HTML section Tag:

Example #1

Code:
```
<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
</section>
</body>
</html>
```
Output:

Example #2

Nested Section Tag.

The
tag can be nested wherein the font size of the subsection is smaller than the section only if both have the same font properties. The subsection is used for organizing complex data.

Code:
```
<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
</body>
</html>
```
Output:

Example #3

Code:
```
<!DOCTYPE html>
<html>
<head> . . . </head>
<body>
<header>
<h1>HTML Section tag example</h1>
</header>
<main>
<article> An article on HTML Section tag</article>
</main>
<aside> Body of an article </aside>
<footer>
<section>Copyright &copy;2020- EDUCBA.</section>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</footer>
</body>
</html>
```
Output:

Example #4

Code:
```
<!DOCTYPE>
<html>
<head>
<style&gt
section{
border:1px solid pink;
padding:15px;
margin:10px;
}
</style>
</head>
<body>
<h2> List of Articles</h2>
<section>
<h3>Article 1 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 2 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 3 heading</h3>
<p> Body of article </p>
</section>
</body>
</html>
```
Output:

Example #5

While creating a
tag in HTML5, we can use either the class or id attributes wherein each id should be unique, and the class can be used multiple times when necessary.

The section should always have a header element (H1 to H6). If a title cannot be given for the section, we can use the
element, which will probably be more appropriate, and always never use the
tag just for putting styles.

Code:

<!DOCTYPE> <html> <head> <style> section{ border:1px solid pink; padding:15px; margin:10px; } </style> </head> <body> <section id="sectiontag" class="sectionclass"> <h2>HTML Section tag</h2> <p>Random text Random text Random text...</p> </section> <section id="articletag"> <h2>HTML Article tag</h2> <p>Random text Random text Random text...</p> </section> <section id="footertag"> <h2>HTML Footer tag</h2> <p>Random text Random text Random text...</p> </section> </body> </html>

Output:

Conclusion

The
element is a structural HTML element that groups all the related elements. Each
usually includes one or more heading elements and additional elements presenting related content.
is a new HTML5 element used to define an important document section. It is better to use it within articles, to define navigation, or in the header or footer. If a section of the content deserves its heading, which would be listed in a theoretical or actual table of contents, it should be placed as a
.