html5 与css3 基础教程 pdf-CFANZ编程社区

HTML5与CSS3基础教程

引言

HTML5和CSS3是现代Web开发中不可或缺的两个重要技术。HTML5提供了一种标准的结构化语言，用于在Web上呈现内容，而CSS3则负责样式化这些内容。本文将介绍HTML5和CSS3的基础知识，并提供一些代码示例来帮助读者更好地理解这两种技术。

HTML5简介

HTML5是最新的HTML标准，引入了一些新的元素和特性，以支持更丰富的内容和交互。下面是一个简单的HTML5文档结构示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5示例</title>
</head>
<body>
  <header>
    欢迎使用HTML5
  </header>
  <nav>
    <ul>
      <li><a rel="nofollow" href="#">首页</a></li>
      <li><a rel="nofollow" href="#">关于</a></li>
      <li><a rel="nofollow" href="#">联系我们</a></li>
    </ul>
  </nav>
  <section>
    <article>
      <h2>HTML5新特性</h2>
      <p>HTML5引入了语义化标签，如<header>、<nav>和<section>，这些标签使得文档结构更加清晰明了。</p>
    </article>
    <aside>
      <h3>相关链接</h3>
      <ul>
        <li><a rel="nofollow" href="#">HTML5教程</a></li>
        <li><a rel="nofollow" href="#">CSS3教程</a></li>
      </ul>
    </aside>
  </section>
  <footer>
    <p>版权所有 &copy; 2022</p>
  </footer>
</body>
</html>

在这个例子中，我们使用了一些HTML5新增的语义化标签，如<header>、<nav>、<section>等，这些标签有助于更好地描述文档的结构。

CSS3简介

CSS3是CSS的第三个版本，增加了许多新的特性和选择器，使得样式化网页更加灵活和强大。下面是一个使用CSS3样式的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #ff0000;
    }
    p {
      font-size: 1.2em;
    }
    .highlight {
      background-color: #ffff00;
    }
  </style>
</head>
<body>
  欢迎使用CSS3
  <p>这是一个使用CSS3样式的段落。</p>
  <p class="highlight">这个段落有一个特殊的样式。</p>
</body>
</html>

在这个例子中，我们使用了CSS3的选择器和属性来定义文档的样式。我们为``元素设置了红色的文字颜色，为<p>元素设置了1.2倍的字体大小，并为一个特殊的段落添加了一个自定义的样式。

HTML5和CSS3的应用

HTML5和CSS3可以被广泛应用于各种Web开发场景。例如，我们可以使用HTML5的表单元素和CSS3的过渡效果来创建一个简单的用户注册表单：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <style>
    input[type="text"], input[type="password"] {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      outline: none;
      transition: border-color 0.3s;
    }
    input[type="text"]:focus, input[type="password"]:focus {
      border-color: #ff0000;
    }
    input[type="submit"] {
      padding: 10px 20px;
      background-color: #ff0000;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>用户注册
  <form