当前位置：首页 > 行业动态 > 正文

html简单网页成品

admin
行业动态
2025-04-27
4332

示例链接列表

简单HTML网页成品及说明

页面主体内容

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">简易网页示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        h1 {
            color: #333;
        }
        p {
            text-align: justify;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的个人网页</h1>
        <p>这是一个使用HTML基础标签制作的简单网页示例，本页面展示了文字排版、列表、图片、链接和表格等基本元素的应用。</p>
    </div>
</body>
</html>

代码说明：

标签类型	功能说明
`<!DOCTYPE html>`	声明文档类型为HTML5
`<html lang="zh">`	定义HTML文档语言为中文
`<meta charset="UTF-8">`	设置字符编码为UTF-8
`<style>`	内联CSS样式定义页面基础样式
`<div class="container">`	容器，控制页面宽度和边距
`<h1>`	，显示页面主标题
`<p>`	段落标签，用于文本内容排版

列表展示

<h2>我的兴趣爱好</h2>
<ul>
    <li>网页设计</li>
    <li>摄影</li>
    <li>旅行</li>
    <li>阅读</li>
</ul>
<h2>每日学习计划</h2>
<ol>
    <li>早上7:00 英语晨读</li>
    <li>上午9:00 编程学习</li>
    <li>下午2:00 专业课程</li>
    <li>晚上8:00 阅读时间</li>
</ol>

列表说明：

标签类型	特点	应用场景
`<ul>`	无序列表	展示并列关系的内容项
`<ol>`	有序列表	展示有顺序步骤的内容
`<li>`	列表项	具体条目内容

图片与链接

<h2>作品展示</h2>
<div style="text-align:center;">
    <img src="https://via.placeholder.com/400x300" alt="设计作品" style="border-radius:5px;">
    <p><a href="https://www.example.com" target="_blank">查看完整作品集</a></p>
</div>

元素解析：

元素	属性说明	作用
`<img>`	src指定图片路径，alt提供替代文本	显示图片内容
`<a>`	href设置链接地址，target控制打开方式	创建超链接
`style`	行内样式	调整图片圆角和文本居中

表格示例

<h2>个人信息表</h2>
<table border="1" cellpadding="10" cellspacing="0" style="width:100%; border-collapse:collapse;">
    <thead>
        <tr>
            <th>项目</th>
            <th>详情</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>姓名</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>25</td>
        </tr>
        <tr>
            <td>专业</td>
            <td>计算机科学与技术</td>
        </tr>
    </tbody>
</table>

表格结构：

功能	使用位置
`<table>`	定义表格	容器标签
`<thead>`	表头区域	行
`<tbody>`	表体区域	存放数据行
`<th>`	表头单元格	通常加粗显示
`<td>`	数据单元格	存放具体内容