HTML第二课:块级元素

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>&lt; div &gt;</td>
        <td>  <pre > &lt;div&gt; 这是一个 div 元素 &lt;/ div&gt; </pre></td>
        <td><div>这是一个 div 元素</div></td>
        <td>定义一个块级元素</td>
    </tr>
    <tr>
        <td>&lt; p &gt;</td>
        <td>  <pre > &lt;p&gt; 这是一个 p 元素 &lt;/ p&gt; </pre></td>
        <td><p>这是一个 p 元素</p></td>
        <td>定义段落</td>
    </tr>

    <tr>
        <td>&lt; h1 &gt;</td>
        <td>  <pre > &lt;h1&gt; 这是一个 h1 元素 &lt;/ h1&gt; </pre></td>
        <td><h1>这是一个 h1 元素</h1></td>
        <td>定义标题</td>
    </tr>
    <tr>
        <td>&lt; h2 &gt;</td>
        <td>  <pre > &lt;h2&gt; 这是一个 h2 元素 &lt;/ h2&gt; </pre></td>
        <td><h2>这是一个 h2 元素</h2></td>
        <td>定义标题</td>
    </tr>
    <tr>
        <td>&lt; h3 &gt;</td>
        <td>  <pre > &lt;h3&gt; 这是一个 h3 元素 &lt;/ h3&gt; </pre></td>
        <td><h3>这是一个 h3 元素</h3></td>
        <td>定义标题</td>
    </tr>
    <tr>
        <td>&lt; h4 &gt;</td>
        <td>  <pre > &lt;h4&gt; 这是一个 h4 元素 &lt;/ h4&gt; </pre></td>
        <td><h4>这是一个 h4 元素</h4></td>
        <td>定义标题</td>
    </tr>
    <tr>
        <td>&lt; h5 &gt;</td>
        <td>  <pre > &lt;h5&gt; 这是一个 h5 元素 &lt;/ h5&gt; </pre></td>
        <td><h5>这是一个 h5 元素</h5></td>
        <td>定义标题</td>
    </tr>
    <tr>
        <td>&lt; h6 &gt;</td>
        <td>  <pre > &lt;h6&gt; 这是一个 h6 元素 &lt;/ h6&gt; </pre></td>
        <td><h6>这是一个 h6 元素</h6></td>
        <td>定义标题</td>
    </tr>
    <tr>
        <td>&lt; pre &gt;</td>
        <td>  <pre > &lt;pre&gt; 这是一个 pre 元素 &lt;/ pre&gt; </pre></td>
        <td><pre>这是一个 pre 元素</pre></td>
        <td>定义预格式文本</td>
    </tr>
    <tr>
        <td>&lt; hr &gt;</td>
        <td>  <pre > &lt;hr&gt; </pre></td>
        <td><hr></td>
        <td>定义水平线</td>
    </tr>
    <tr>
        <td>&lt; ul &gt;</td>
        <td>  <pre > &lt;ul&gt; 这是一个 ul 元素 &lt;/ ul&gt; </pre></td>
        <td><ul>这是一个 ul 元素</ul></td>
        <td>定义无序列表</td>
    </tr>
    <tr>
        <td>&lt; ol &gt;</td>
        <td>  <pre > &lt;ol&gt; 这是一个 ol 元素 &lt;/ ol&gt; </pre></td>
        <td><ol>这是一个 ol 元素</ol></td>
        <td>子集</td>
    </tr>
    <tr>
        <td>&lt; li &gt;</td>
        <td>  <pre > &lt;li&gt; 这是一个 li 元素 &lt;/ li&gt; </pre></td>
        <td><li>这是一个 li 元素</li></td>
        <td>定义列表项</td>
    </tr>
    <tr>
        <td>&lt; dl &gt;</td>
        <td>  <pre > &lt;dl&gt; 这是一个 dl 元素 &lt;/ dl&gt; </pre></td>
        <td><dl>这是一个 dl 元素</dl></td>
        <td>这是一个 dl 元素</td>
    </tr>
    <tr>
        <td>&lt; dt &gt;</td>
        <td>  <pre > &lt;dt&gt; 这是一个 dt 元素 &lt;/ dt&gt; </pre></td>
        <td><dt>这是一个 dt 元素</dt></td>
        <td>定义列表项的标题</td>
    </tr>
    <tr>
        <td>&lt; dd &gt;</td>
        <td>  <pre > &lt;dd&gt; 这是一个 dd 元素 &lt;/ dd&gt; </pre></td>
        <td><dd>这是一个 dd 元素</dd></td>
        <td>列表项的描述</td>
    </tr>
    <tr>
        <td>&lt; address &gt</td>
        <td>  <pre > &lt;address&gt; 这是一个 address 元素 &lt;/ address&gt; </pre></td>
        <td><address>这是一个 address 元素</address></td>
        <td>定义联系信息</td>
    </tr>
    <tr>
        <td>&lt; blockquote &gt;</td>
        <td>  <pre > &lt;blockquote&gt; 这是一个 blockquote 元素 &lt;/ blockquote&gt; </pre></td>
        <td><blockquote>这是一个 blockquote 元素</blockquote></td>
        <td>定义引用</td>
    </tr>
    <tr>
        <td>&lt; form &gt;</td>
        <td>  <pre > &lt;form&gt; 这是一个 form 元素 &lt;/ form&gt; </pre></td>
        <td><form action="">这是一个 form 元素</form></td>
        <td>定义表单</td>
    </tr>
    <tr>
        <td>&lt; fieldset &gt;</td>
        <td>  <pre > &lt;fieldset&gt; 这是一个 fieldset 元素 &lt;/ fieldset&gt; </pre></td>
        <td><fieldset>这是一个 fieldset 元</fieldset></td>
        <td>描述字段集</td>
    </tr>

</table>
</body>
</html>
相关推荐
喜欢你,还有大家2 小时前
Linux笔记14——shell编程基础-8
linux·前端·笔记
dreams_dream2 小时前
HTML 标签
前端·html
烟雨迷3 小时前
web自动化测试(selenium)
运维·开发语言·前端·python·selenium·测试工具
wow_DG3 小时前
【Vue2 ✨】Vue2 入门之旅(九):Vue Router 入门
前端·javascript·vue.js
OpenTiny社区3 小时前
“AI 乱炖等于没 AI?”这些AI知识图谱教你秒锁正确场景
前端·开源·agent
zkkkkkkkkkkkkk4 小时前
vue组件中实现鼠标右键弹出自定义菜单栏
javascript·vue.js·vue
夕水4 小时前
原生js实现常规ui组件之input-number篇
javascript
维维酱4 小时前
useMemo 实现原理
前端·react.js
夕水4 小时前
原生js实现常规ui组件之checkbox篇
前端·javascript