HTMLTag

图例标记用于定义子内容的标题。图例元素是父元素。此标记用于定义文档的标题

null
要素

语法

<legend> Text </legend>

属性:

  • 排列: 它设置图例元素的对齐方式。

例1:

html

<!DOCTYPE html>
< html >
< head >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< strong >HTML Legend Tag</ strong >
< form >
< fieldset >
<!-- Legend tag using -->
< legend >STUDENT::</ legend >
< label >Name:</ label >
< input type = "text" >
< br >< br >
< label >Email:</ label >
< input type = "text" >
< br >< br >
< label >Date of birth:</ label >
< input type = "text" >
< br >< br >
< label >Address:</ label >
< input type = "text" >
< br >< br >
< label >Enroll No:</ label >
< input type = "text" >
</ fieldset >
</ form >
</ body >
</ html >


输出:

图片[1]-HTMLTag-yiteyi-C++库

例2: 使用CSS属性设置图例标记的样式。

html

<!DOCTYPE html>
< html >
< head >
< style >
form{
width: 50%;
}
legend {
display: block;
padding-left: 10px;
padding-right: 10px;
border: 3px solid green;
background-color:tomato;
color:white;;
}
label {
display: inline-block;
float: left;
clear: left;
width: 90px;
margin:5px;
text-align: left;
}
input[type="text"] {
width:250px;
margin:5px 0px;
}
.gfg {
font-size:40px;
color:green;
font-weight:bold;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< h2 >HTML Legend Tag</ h2 >
< form >
< fieldset >
<!-- Legend tag using -->
< legend >STUDENT:</ legend >
< label >Name:</ label >
< input type = "text" >
< br >
< label >Email:</ label >
< input type = "text" >
< br >
< label >Date of birth:</ label >
< input type = "text" >
< br >
< label >Address:</ label >
< input type = "text" >
< br >
< label >Enroll No:</ label >
< input type = "text" >
</ fieldset >
</ form >
</ body >
</ html >


输出:

图片[2]-HTMLTag-yiteyi-C++库

支持的浏览器:

  • 谷歌浏览器
  • Internet Explorer
  • 火狐
  • 歌剧
  • 游猎
© 版权声明
THE END
喜欢就支持一下吧,技术咨询可以联系QQ407933975
点赞12 分享