HTML 图例标签

图例标签用于定义的标题或标题。标签，并且它被认为是该元素的第一个子元素。作为标题，它通常放置在框架的顶部。 的目的是是在特定元素的内容上创建一个包围框。主要目的是借助字段集包装表单、图像、内容，也用于描述信息的上下文。在下面的部分中，我们将讨论有关

的信息。标签以及深入的示例。本文的主要座右铭是展示如何简单且创造性地使用 HTML 元素标签进行演示。

语法

<legend>
……
</legend>

HTML

;元素被放置在 内元素，其周围标记为黑色边框；如果你想要一个时尚的或改变框架的行为，那么这里使用CSS。这个标签与

完全不同。标签。此标签支持所有浏览器，如 Chrome、android、firefox、Opera、Internet Explorer。所有这些元素在所有浏览器中都是统一的。

代码：

Text

… Content

必须提供开始和结束标签。

属性

一般来说，HTML 标签具有一个或多个属性，这些属性提供了 HTML 元素的重要方面。图例标签支持所有已定义的全局属性。某些属性不支持现代网络浏览器。下表给出了标签属性及其描述。

1.标签特定属性

align：定义表单中给定的标题或说明文字相对于父级

的对齐方式。

代码：

Align demo:

注意：为了清晰对齐，最好对元素的变体使用 CSS-Align。

2.标准属性

这些属性的描述已经在上一篇文章中讨论过。

• 访问密钥
• 班级
• 目录
• id
• 风格
• 郎
• id
• 标签索引
• 标题

3.全局属性

图例标签还接受之前讨论的全局属性，这是所有 HTML5 元素的标准。下面列出了一些：

Context	Define the Context
Dir	The values give the path of the text.
Id	Its identifier must match the value of a name.
Style	Specifies the inline and external styles.
Lang	Determines the language used in the text.

上下文

onabort	It is called when a particular event has been aborted. For example, the web browser immediately video before it is completely downloaded.
onblur	Defines the focus of the element.
oncancel	Stops the processed event handler.
Onclick	Triggers when a click is done
onchange	When a click is done somewhere.
onfocus	Triggered when the focus is on the given element

定义上下文

目录

这些值给出了文本的路径。

Id

其标识符必须与名称值匹配。

样式

 指定内联样式和外部样式。

朗

确定文本中使用的语言。

表> 4.事件属性

5. Other Attributes Are

onmouse down, onmouse up, onmouse over, onmouse move, onmouse out, on focus, on blur, onkey press,onkey down,onkey up. The tags that come with the

tag are listed below:

• 
  
• 
• <script></script>

Examples to Implement Area Tag in HTML

Below are the examples of implementing the area tag in HTML:

Example #1

This section focuses on the form and fieldset. Association of legend tags with the fieldset and preferring to use with the forms gives the best option.

Code:

Personal Information:

FirstName: 
LastName: 
Email:
Age:

Output:

Example #2

The below examples show how the fieldset element groups the labels and radio buttons and checklist together. Meanwhile, the legend tag should be given for the caption for the group. A similar approach can be implemented with other controls.

Code:

Tutorial

Online Offline

Output:

Example #3

In the following example, we group the information under the HTML tag

. And each control has been declared under the element as the first child to it.

Code:

<title>HTML Test with buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Selection options list

Checkbox:
RadioButton1:
RadioButton2:

Input Text

Login Id:
Password:

Employee Designation

Software Engineer

Data Analyst

Web Developer

Senior Analyst

Output:

Example #4

Using Align Attributes Demo. Align attributes has three values

• align= “center”,
• align= “right”
• align= “left”

Code:

Align demo:

City:
State:

Output:

Example #5

Using CSS- Style. Using CSS, the Legend caption/Title colour is changed by declaring a color attribute to various colors.

Code:

<title>Legend Tag Implementation</title>
<style>
form{
width: 45%;
}
legend {
display: block;
padding-left: 12px;
padding-right: 12px;
border: 2px solid pink;
background-color:green;
color:white;;
}
label {
display: inline-block;
float: left;
clear: left;
width: 91px;
margin:4px;
text-align: center;
}
input[type="text"] {
width:250px;
margin:4.5px 0px;
}
.cba {
font-size:35px;
color:blue;
font-weight:500;
font-style :italic;
}
</style>


<div class="cba"> Research Organization</div>
<h2 id="Legend-tag">Legend tag</h2>

Employee:

EName:
Email id:
Contact No:
Residence:
Emp number:

Output:

Conclusion – HTML Legend Tag

To conclude, we have seen how the legend tag has been used as a caption for a group element. The use of this article benefits the HTML components. Also, the legend improves good accessibility when the fieldset is null. It is considered to be the best design-related group tag in HTML5. These tags are very useful in web development with proper CSS code with proper design techniques.

以上是HTML 图例标签的详细内容。更多信息请关注PHP中文网其他相关文章！