块级标签
一个页面的布局就像一张报纸需要排版，需要分为多个区块。块内为多行逐一排列的文字、图片、超链接等内容，这些区块一般称之为块级标签；而文字、图片、超链接等称之为行级标签。
块级标签显示的外观按“块”来显示，具有一定的高度和宽度，如：<div>、<p>等；
行级标签显示的外观按“行”来显示，类似于文本的显示，如：<img>、<a>等。
1.基本的块级标签
1.1.标题标签<h1>~<h6>
标题标签表示一段文字的标题（主题），并且支持多层次的内容结构，一级标签使用<h1>，二级标签使用<h2>，以此类推。html提供六级，<h1>最大，<h6>最小代码及显示效果如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>标题标签对比</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>1.2.段落标签<p>
段落标签是表示一段文字内容的，一个段落可以包含多行文字，文字内容将随浏览器窗口的大小自动换行。
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>段落标签</title>
</head>
<body>
<h1>标题</h1>
<p>第一段文字</p>
<p>第一段文字</p>
</body>
</html>
1.3.水平线标签<hr/>
水平线标签显示一条水平线，这个标签比较特殊没有结束标签，直接是用来<hr/>表示标签的开始和结束。
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>段落标签</title>
</head>
<body>
<h1>标题</h1>
<hr/>
<p>第一段文字</p>
<p>第一段文字</p>
</body>
</html>2.常用于布局的块级标签
2.1.有序列表标签<ol>
使用<ol>,</ol>(有序列表)，<li></li>(列表项)HTML代码如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>有序列表</title>
</head>
<body>
<ol>
<li>第一条数据</li>
<li>第二条数据</li>
<li>第三条数据</li>
</ol>
</body>
</html>2.2.无序列表标签<ul>
使用<ul>,</ul>(无序列表)，<li></li>(列表项)HTML代码如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>无序列表</title>
</head>
<body>
<ul>
<li>第一条数据</li>
<li>第二条数据</li>
<li>第三条数据</li>
</ul>
</body>
</html>2.3.定义列标签<dl>
使用<dl>（定义列表）<dt> （定义列表中的项目）和 <dd> （列表中项目的描述）HTML代码如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>dl-dt-dd的使用</title>
</head>
<body>
<dl>
<dt>项目名称</dt>
<dd>项目描述的第一行</dd>
<dd>项目描述的第二行</dd>
</dl>
</body>
</html>2.4.表格标签<teble>
使用<teble>，</teble>（表格），<tr>，</tr>（行），<td>，</td>（列）HTML代码如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>table标签的使用</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
</body>
</html>2.5.表单标签<form>
使用<form>,</form>（表单），<input/>（内容）HTML代码如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
<title>form的使用</title>
</head>
<body>
<form action="" method="post">
<p>
用户名：
<input name="username" type="text" size="20" />
</p>
<p>
密 码：
<input name="password" type="password" size="20" />
</p>
<input name="submit" type="button" value="登录" />
</form>
</body>
</html>
2.6.分区标签<diy>
<diy>标签相当于一个大容器，可以容纳无序、有序列表，表格等标签，也可以容纳图片、文字、标题、段落等内容HTML代码如下：
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>div的使用</title>
</head>
<body>
<div style="width: 500; height: 300; background-color: aquamarine;">
<p>段落标签</p>
<h1>标题标签</h1>
<ul>
<li>无序列表标签第一行</li>
<li>无序列表标签第二行</li>
</ul>
文字可以直接输入在这里
</div>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)