1.HTML5中区块的设置

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例：<h1>，<p>，<ul>，<table>。

内联元素在显示时通常不会以新行开始。

实例：<b>，<td>，<a>，<img>。

HTML 可以通过 <div> 和 <span> 两个标签来设置相应的区块。

1.1
标签 

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

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

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

小实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<p>这是一些文本的开始</p>
		<div style="color: crimson;">
			<h3>这是一个在div元素中的标题。。。</h3>
			<p>这是一个在div元素中的段落。。。</p>
		</div>
		<p>这是一些文本的结束</p>
	</body>
</html>

web前端学习（九）——HTML5区块与布局的相关标签设置_HTML

1.2 标签 

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

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

小实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<p>
			Java的三大特性为：
			<span style="color: crimson; font-weight: bold;">封装</span>
			<span style="color: darkorchid; font-weight: bold;">继承</span>
			<span style="color: blue; font-weight: bold;">多态</span>
		</p>
	</body>
</html>

web前端学习（九）——HTML5区块与布局的相关标签设置_html_02

 

2.HTML5中布局的设置

2.1 使用 <table> 标签构造的布局（不建议）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<table width="500" border="0">
			<tr>
				<th colspan="2" style="background-color: aqua;">
					<h1>主要的网页标题</h1>
				</th>
			</tr>
			<tr>
				<td style="background-color: crimson; width: 100px; height: 200px;">
					<strong>菜单</strong><br/>
					HTML<br/>
					CSS<br/>
					JavaScript<br/>
				</td>
				<td style="background-color: darkorchid; width: 400px; height: 200px;">
					内容在这里
				</td>
			</tr>
			<tr>
				<td colspan="2" style="background-color: pink; text-align: center;">
					张起灵-小哥
				</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下： 

web前端学习（九）——HTML5区块与布局的相关标签设置_CSS_03

2.2 使用 <div> 标签构造的布局（建议）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<div id="container" style="width: 500px;">
			<div id="header" style="background-color: aqua; text-align: center;">
				<h1 style="margin-bottom: 0;">主要的网页标题</h1>
			</div>
			<div id="menu" style="background-color: crimson; width: 100px; height: 200px; float: left;">
				<strong>菜单</strong><br/>
				HTML<br/>
				CSS<br/>
				JavaScript
			</div>
			<div id="content" style="background-color: darkorchid; width: 400px; height: 200px; float: left;">
				内容在这里
			</div>
			<div id="footer" style="background-color: pink; text-align: center;">
				张起灵-小哥
			</div>
		</div>
	</body>
</html>

运行结果如下： 

web前端学习（九）——HTML5区块与布局的相关标签设置_CSS_04