示例1：最简单的HTML页面

这个例子包含了HTML文档最基本的骨架,一个标题和一些文本。

求用html做的简单网页示例代码
（图片来源网络，侵删）

代码 (保存为 simple.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落，这里是一些简单的文本内容。</p>
</body>
</html>

代码解释

  • <!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个HTML5文档。
  • <html lang="zh-CN">: 根元素，包裹了整个页面的内容。lang="zh-CN" 指明了页面语言是中文（中国），有助于搜索引擎和屏幕阅读器。
  • <head>: 文档的“头部”，包含页面的元数据（metadata），这些数据不会直接显示在页面上，但提供了关于页面的信息。
    • <meta charset="UTF-8">: 指定字符编码为UTF-8，这是一个国际标准编码，可以正确显示中文、英文等多种语言。
    • <title>: 页面的标题，会显示在浏览器的标签页上。
  • <body>: 文档的“主体”，包含了所有在页面上可见的内容。
    • <h1>: 一级标题，通常用于页面的主标题。
    • <p>: 段落标签，用于包裹一段文本。

示例2：包含常用元素的网页

这个例子在前一个基础上增加了更多常见的HTML元素,如列表、链接、图片和表格。

代码 (保存为 with-elements.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">包含常用元素的网页</title>
</head>
<body>
    <h1>我的爱好</h1>
    <p>下面列出了我的一些爱好：</p>
    <!-- 无序列表 -->
    <h2>我喜欢做的事情</h2>
    <ul>
        <li>阅读</li>
        <li>编程</li>
        <li>看电影</li>
    </ul>
    <!-- 有序列表 -->
    <h2>我的学习计划</h2>
    <ol>
        <li>学习HTML</li>
        <li>学习CSS</li>
        <li>学习JavaScript</li>
    </ol>
    <!-- 链接 -->
    <p>如果你想了解更多关于HTML的信息，可以访问
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN的HTML教程</a>。
    </p>
    <!-- 图片 -->
    <!-- 注意：你需要自己准备一张名为 "my-image.jpg" 的图片，并和HTML文件放在同一个文件夹里，或者替换成网络图片的URL -->
    <h2>一张图片示例</h2>
    <img src="my-image.jpg" alt="一张美丽的风景图" width="300">
    <!-- 表格 -->
    <h2>课程表</h2>
    <table border="1">
        <thead>
            <tr>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>上午 9:00</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>下午 2:00</td>
                <td>英语</td>
                <td>体育</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

新增元素解释

  • <!-- ... -->: 这是HTML注释，浏览器会忽略它，用于在代码中添加说明。
  • <ul> (Unordered List): 无序列表，项目符号通常是圆点。
  • <ol> (Ordered List): 有序列表，项目符号是数字。
  • <li> (List Item): 列表中的每一项。
  • <a> (Anchor): 超链接。
    • href: 链接的目标地址。
    • target="_blank": 表示在新的浏览器标签页中打开链接。
  • <img>: 图片标签。
    • src: 图片的来源路径（可以是本地文件或网络URL）。
    • alt: 图片的替代文本，如果图片无法加载，会显示这段文字；对于屏幕阅读器来说，这是描述图片内容的关键。
    • width: 图片的宽度（也可以使用 height）。
  • <table>: 表格。
    • <thead>: 表格的头部。
    • <tbody>: 表格的主体。
    • <tr> (Table Row): 表格的行。
    • <th> (Table Header): 表格的表头单元格（通常文字会加粗居中）。
    • <td> (Table Data): 表格的数据单元格。

示例3：添加一点样式（CSS）

纯HTML的页面比较朴素,我们可以通过CSS（层叠样式表）来美化它，这里我们使用最简单的方式——在HTML文件内部嵌入CSS。

代码 (保存为 styled.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">添加了样式的网页</title>
    <style>
        /* 这里是CSS样式代码 */
        body {
            font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 设置字体 */
            background-color: #f0f0f0; /* 设置背景色 */
            color: #333; /* 设置默认文字颜色 */
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #0056b3; /* 标题颜色 */
            text-align: center; /* 标题居中 */
        }
        p {
            line-height: 1.6; /* 增加行高，让文本更易读 */
        }
        table {
            width: 100%; /* 表格宽度占满容器 */
            border-collapse: collapse; /* 合并边框 */
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ccc; /* 单元格边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: left;
        }
        th {
            background-color: #e9ecef; /* 表头背景色 */
        }
        a {
            color: #007bff; /* 链接颜色 */
        }
        a:hover {
            text-decoration: none; /* 鼠标悬停时去掉下划线 */
        }
    </style>
</head>
<body>
    <h1>我的爱好</h1>
    <p>下面列出了我的一些爱好：</p>
    <h2>我喜欢做的事情</h2>
    <ul>
        <li>阅读</li>
        <li>编程</li>
        <li>看电影</li>
    </ul>
    <h2>我的学习计划</h2>
    <ol>
        <li>学习HTML</li>
        <li>学习CSS</li>
        <li>学习JavaScript</li>
    </ol>
    <p>如果你想了解更多关于HTML的信息，可以访问
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN的HTML教程</a>。
    </p>
    <h2>课程表</h2>
    <table>
        <thead>
            <tr>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>上午 9:00</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>下午 2:00</td>
                <td>英语</td>
                <td>体育</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

解释

  • <style>: 在<head>标签内使用<style>标签，可以编写CSS代码来直接为HTML元素添加样式。
  • CSS语法：选择器 { 属性: 值; }
    • body { ... } 是选择器，表示样式将应用于所有的<body>元素。
    • font-family, background-color, color, text-align 等都是CSS属性，用于控制元素的视觉表现。

如何运行这些代码？

  1. 创建文件: 在你的电脑上创建一个新的文本文档。
  2. 复制粘贴: 将上面任意一个示例的代码完整地复制并粘贴到这个文本文档中。
  3. 保存文件:
    • 点击“文件” -> “另存为”。
    • 在“保存类型”中，选择“所有文件 (*.*)”。
    • 在“文件名”中，输入 index.html (或其他你喜欢的名字，但后缀必须是 .html)。
    • 点击“保存”。
  4. 打开: 找到你保存的 index.html 文件，用任意一个浏览器（如 Chrome, Firefox, Edge）双击打开它，就能看到网页效果了。

希望这些示例能帮助你快速入门HTML！

求用html做的简单网页示例代码
（图片来源网络，侵删）