所有HTML元素都可以分为两类(a)块级元素(b)内联元素.
块元素出现在屏幕上,就好像它们之前和之后有换行符一样.例如,< p>,< h1>,< h2>,< h3>,< h4>,< h5>,< h6>,< ul>,< ol>,< ; dl>,< pre>,< hr/>,< blockquote>和< address>元素都是块级元素.它们都是从他们自己的新行开始的,并且跟随它们的任何内容都出现在它自己的新行上.
内联元素,在另一方面,可以出现在句子内而不必出现在自己的新行上. < b>,< i>,< u>,< em>,< strong>,< sup>,< sub>,< big>,< small>,< li> ,< ins>,< del>,< code>,< cite>,< dfn>,< kbd>和< var>元素都是内联元素.
我们经常使用两个重要的标记来组合各种其他HTML标记(i) < DIV>标签和(ii)< span>标签
这是非常重要的块级标记,它在将各种其他HTML标记分组并在元素组上应用CSS方面发挥着重要作用.即使现在< div> tag可用于创建网页布局,我们使用< div>定义页面的不同部分(左,右,顶部等).标签.此标记不会对块提供任何可视更改,但在与CSS一起使用时具有更多含义.
以下是一个简单的< div>的示例标签.我们将在单独的章节中学习层叠样式表(CSS),但我们在此处使用它来显示< div>的用法. tag :
<!DOCTYPE html> <html> <head> <title>HTML div Tag</title> </head> <body> <!-- First group of tags --> <div style = "color:red"> <h4>This is first group</h4> <p>Following is a list of vegetables</p> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </div> <!-- Second group of tags --> <div style = "color:green"> <h4>This is second group</h4> <p>Following is a list of fruits</p> <ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> <li>Strawberry</li> </ul> </div> </body> </html>
这将产生以下结果 :
HTML <span>是一个内联元素,可用于对HTML文档中的内联元素进行分组。 此标记也不会在块上提供任何视觉更改,但与CSS一起使用时具有更多含义。
<span>标记和<div>标记之间的区别在于,<span>标记与内联元素一起使用,而<div>标记与块级元素一起使用。
以下是<span>标签的简单示例。 我们将在单独的章节中学习级联样式表(CSS),但是我们在这里使用它来显示<span>标签的用法:
<!DOCTYPE html> <html> <head> <title>HTML span Tag</title> </head> <body> <p>This is <span style = "color:red">red</span> and this is <span style = "color:green">green</span></p> </body> </html>