HTML第二课：块级元素
块级元素
html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML4 块级元素展示</title>
<style type="text/css">
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
table {
width: 90%;
margin: 0 auto;
border-collapse: collapse;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
background-color: white;
}
th, td {
padding: 5px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #3498db;
color: white;
text-align: center;
}
tr:hover {
background-color: #f9f9f9;
}
pre {
font-family: 'Courier New', Courier, monospace;
background-color: #f8f9fa;
padding: 5px;
border-radius: 3px;
white-space: pre-wrap;
}
</style>
</head>
<body style="text-align: center">
<h1>HTML4 块级元素展示</h1>
<table border="1" align="center">
<tr>
<td>块级元素名称</td>
<td>基本语法</td>
<td>代码示列</td>
<td>注释说明</td>
</tr>
<tr>
<td>< div ></td>
<td> <pre > <div> 这是一个 div 元素 </ div> </pre></td>
<td><div>这是一个 div 元素</div></td>
<td>定义一个块级元素</td>
</tr>
<tr>
<td>< p ></td>
<td> <pre > <p> 这是一个 p 元素 </ p> </pre></td>
<td><p>这是一个 p 元素</p></td>
<td>定义段落</td>
</tr>
<tr>
<td>< h1 ></td>
<td> <pre > <h1> 这是一个 h1 元素 </ h1> </pre></td>
<td><h1>这是一个 h1 元素</h1></td>
<td>定义标题</td>
</tr>
<tr>
<td>< h2 ></td>
<td> <pre > <h2> 这是一个 h2 元素 </ h2> </pre></td>
<td><h2>这是一个 h2 元素</h2></td>
<td>定义标题</td>
</tr>
<tr>
<td>< h3 ></td>
<td> <pre > <h3> 这是一个 h3 元素 </ h3> </pre></td>
<td><h3>这是一个 h3 元素</h3></td>
<td>定义标题</td>
</tr>
<tr>
<td>< h4 ></td>
<td> <pre > <h4> 这是一个 h4 元素 </ h4> </pre></td>
<td><h4>这是一个 h4 元素</h4></td>
<td>定义标题</td>
</tr>
<tr>
<td>< h5 ></td>
<td> <pre > <h5> 这是一个 h5 元素 </ h5> </pre></td>
<td><h5>这是一个 h5 元素</h5></td>
<td>定义标题</td>
</tr>
<tr>
<td>< h6 ></td>
<td> <pre > <h6> 这是一个 h6 元素 </ h6> </pre></td>
<td><h6>这是一个 h6 元素</h6></td>
<td>定义标题</td>
</tr>
<tr>
<td>< pre ></td>
<td> <pre > <pre> 这是一个 pre 元素 </ pre> </pre></td>
<td><pre>这是一个 pre 元素</pre></td>
<td>定义预格式文本</td>
</tr>
<tr>
<td>< hr ></td>
<td> <pre > <hr> </pre></td>
<td><hr></td>
<td>定义水平线</td>
</tr>
<tr>
<td>< ul ></td>
<td> <pre > <ul> 这是一个 ul 元素 </ ul> </pre></td>
<td><ul>这是一个 ul 元素</ul></td>
<td>定义无序列表</td>
</tr>
<tr>
<td>< ol ></td>
<td> <pre > <ol> 这是一个 ol 元素 </ ol> </pre></td>
<td><ol>这是一个 ol 元素</ol></td>
<td>子集</td>
</tr>
<tr>
<td>< li ></td>
<td> <pre > <li> 这是一个 li 元素 </ li> </pre></td>
<td><li>这是一个 li 元素</li></td>
<td>定义列表项</td>
</tr>
<tr>
<td>< dl ></td>
<td> <pre > <dl> 这是一个 dl 元素 </ dl> </pre></td>
<td><dl>这是一个 dl 元素</dl></td>
<td>这是一个 dl 元素</td>
</tr>
<tr>
<td>< dt ></td>
<td> <pre > <dt> 这是一个 dt 元素 </ dt> </pre></td>
<td><dt>这是一个 dt 元素</dt></td>
<td>定义列表项的标题</td>
</tr>
<tr>
<td>< dd ></td>
<td> <pre > <dd> 这是一个 dd 元素 </ dd> </pre></td>
<td><dd>这是一个 dd 元素</dd></td>
<td>列表项的描述</td>
</tr>
<tr>
<td>< address ></td>
<td> <pre > <address> 这是一个 address 元素 </ address> </pre></td>
<td><address>这是一个 address 元素</address></td>
<td>定义联系信息</td>
</tr>
<tr>
<td>< blockquote ></td>
<td> <pre > <blockquote> 这是一个 blockquote 元素 </ blockquote> </pre></td>
<td><blockquote>这是一个 blockquote 元素</blockquote></td>
<td>定义引用</td>
</tr>
<tr>
<td>< form ></td>
<td> <pre > <form> 这是一个 form 元素 </ form> </pre></td>
<td><form action="">这是一个 form 元素</form></td>
<td>定义表单</td>
</tr>
<tr>
<td>< fieldset ></td>
<td> <pre > <fieldset> 这是一个 fieldset 元素 </ fieldset> </pre></td>
<td><fieldset>这是一个 fieldset 元</fieldset></td>
<td>描述字段集</td>
</tr>
</table>
</body>
</html>