|
主题设置

卡片式面板通常用于非白色背景色的主体内

区块标签

HTML 区块通常用 <div><span> 标签表示,其结束标签分别为 </div></span>

区块示例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>笔记本代码(bjbcode.com)</title>
	</head>
	<body>
		<div>我是区块标签 div</div>
		<div>我是区块标签 span</div>
	</body>
</html>
尝试一下

示例解析

  • <div> 是块级元素,独占一行。
  • <span> 是行内元素,大小由内容决定。

div 标签

<div> 标签属于 块级元素(block level element),所以它会单据占据一行,它可以作为组合其他 HTML 元素的容器。

<div> 标签没有特定的语义,属于无语义标签。

如果与 CSS 一同使用,<div> 标签可用于对大的内容块设置样式属性。

<div> 标签的另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。

div 示例:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>笔记本代码(bjbcode.com)</title>
	</head>
	<body>
		<div>我是区块标签 div,是块级元素,单独占据一行。</div>
		<div>我也是区块标签 div,是块级元素,同样单独占据一行。</div>
	</body>
</html>
尝试一下

有用的提示 - div

  • 如果 div 里面没有任何内容,要想使它显示出来,就必须有宽高、边框宽度、边框颜色、边框样式。
  • 只对 div 设置边框颜色,不设置边框样式,div 不会在浏览器中显示。

span 标签

<span> 标签属于行内元素(inline level element),其大小由内容决定,可用作为文本的容器。

<span> 标签也没有特定的语义,同样属于无语义标签。

当与 CSS 一同使用时,<span> 标签可用于为部分文本设置样式属性。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>笔记本代码(bjbcode.com)</title>
	</head>
	<body>
		<div>我是区块标签 span,是行内元素,大小由内容决定。</div>
		<div>我也是区块标签 span,是行内元素,大小由内容决定。</div>
	</body>
</html>
尝试一下

有用的提示 - span

  • span 标签的大小由其内容决定,正常情况下对其指定宽、高无效。只有将其设置为块元素或行内块元素,才能对其指定宽、高。