html5元素周期表

作者：缺爱╮不缺钙发布日期:2025-07-19 浏览:131

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5元素周期表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>HTML5元素周期表</h1>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>元素符号</th>
                <th>元素名称</th>
                <th>原子量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>H</td>
                <td>氢</td>
                <td>1.0079</td>
            </tr>
            <tr>
                <td>2</td>
                <td>He</td>
                <td>氦</td>
                <td>4.0026</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Li</td>
                <td>锂</td>
                <td>6.94</td>
            </tr>
            <!-- 可以继续添加更多元素 -->
        </tbody>
    </table>
</body>
</html>

解释说明：

HTML结构：使用了标准的HTML5文档结构，包括<!DOCTYPE html>声明、<html>标签、<head>和<body>部分。
表格布局：通过<table>标签创建了一个简单的元素周期表。表格包含表头（<thead>）和表体（<tbody>），每一行元素用<tr>表示，每个单元格用<td>或<th>表示。
样式：使用内联CSS对表格进行了简单的样式设置，包括边框、填充和背景颜色，使表格看起来更整洁。
内容：表格中包含了元素的序号、符号、名称和原子量，可以继续添加更多的元素。

如果你需要更详细的解释或有其他问题，请告诉我！

上一篇：html基础

下一篇：html下拉列表