静态网页制作：HTML和CSS入门详解

前端

2022-12-19 15:00:12

HTML和CSS初学者指南：制作你的第一个静态网页

欢迎来到令人兴奋的网页设计世界！使用HTML和CSS，你可以创建引人入胜且功能齐全的网站，而无需编程经验。本指南将带你了解HTML和CSS的基础知识，教你如何构建你的第一个静态网页。

HTML：内容与结构

超文本标记语言（HTML）是网页的骨架，它定义了内容和页面结构。HTML元素就像乐高积木，你可以将它们组合在一起形成不同的页面布局。

CSS：样式与美观

层叠样式表（CSS）是HTML的伴侣，它负责网页的外观。使用CSS，你可以自定义字体、颜色、背景和布局，为你的页面增添视觉吸引力。

资源路径：连接外部资源

当你在HTML中引用图像、CSS文件或JavaScript文件时，需要指定资源路径。路径可以是绝对的（以“https://”开头）或相对的（以“/”开头）。

HTML的页面布局：构建页面骨架

页面布局是网页的不同元素的组织方式。HTML提供了一系列元素，例如<div>和<section>，可用于创建复杂且灵活的布局。

HTML和CSS的联系：携手合作

HTML和CSS密不可分。HTML提供内容，而CSS提供样式。它们相互作用，形成一个完整的网页。

HTML的表单和表格：交互式元素

表单和表格是HTML中重要的交互式元素。表单允许用户输入信息，而表格用于展示数据。

示例代码：一步一步构建你的页面

现在，让我们用实际示例了解如何使用HTML和CSS构建你的第一个静态网页。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>欢迎来到我的第一个静态网页</h1>
  <p>这是一个简单的静态网页，由HTML和CSS制作而成。</p>
  <form action="submit.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name">
    <br>
    <label for="email">电子邮件：</label>
    <input type="email" id="email">
    <br>
    <input type="submit" value="提交">
  </form>
  <table>
    <tr>
      <th>姓名</th>
      <th>电子邮件</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>zhangsan@example.com</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>lisi@example.com</td>
    </tr>
  </table>
</body>
</html>