【JavaWeb基础 · HTML块标签】

261 阅读3分钟

“这是我参与8月更文挑战的第9天,活动详情查看: 8月更文挑战

我们不难发现,基本上每一个网页都是由一块一块区域组成的,那么如何使用HTML来实现这样的功能的,那就是块标签<div></div><span></span>,下面我们就来学习如何使用块标签吧。

<div>标签

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。这通常使用class属性和id属性结合CSS来实现。

可以对同一个 <div> 标签同时应用 class 或 id 属性,但通常情况下我们偏向于只使用其中一种。

提示: <div> 元素经常与 CSS 一起使用,用来布局网页。

注释: 默认情况下,浏览器通常会在 <div> 元素前后放置一个换行符。然而,您可以通过使用 CSS 改变这种情况。

那div标签有什么属性呢?让我们一起来看看吧。

  属性                	描述                                           
  class             	规定元素的类名(classname)           
  contenteditable	规定是否可编辑元素的内容。                
  contextmenu   	指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单                 
  dir               	设置元素中内容的文本方向。                
  draggable     	指定某个元素是否可以拖动                 
  dropzone      	指定是否将数据复制,移动,或链接,或删除         
  hidden        	hidden 属性规定对元素进行隐藏。          
  id                	规定元素的唯一 id                   
  lang              	设置元素中内容的语言代码。                
  spellcheck   	        检测元素是否拼写错误                   
  style             	规定元素的行内样式(inline style)      
  tabindex          	设置元素的 Tab 键控制次序。             
  title             	规定元素的额外信息(可在工具提示中显示)         
  translate      	指定是否一个元素的值在页面载入时是否需要翻译       

<span>标签

还有一种块标签就是<span>标签,span标签用与独立出文档或文本的一部分。

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

提示: 可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。

span标签和div标签元素的属性基本相同,这里就不再给出,下面让我们通过具体例子理解块标签的作用。

<div id="1">
			这是第一个块
		</div>
		<div id="2" >
			这是第二个块
		</div>
		<span >
			我是第一个<span style="color: red;">span</span>
		</span>
		<span >
			我是第二个<span style="color: red;">span</span>
		</span>

image.png

写在最后

以上就是HTML中的块标签,其中div标签是使用最多的。块标签大多是结合CSS来使用,给一块区域特定的样式。

好了,块标签我们就学习到这里。如有不正之处,欢迎掘友们批评指正。