第三章 HTML5新增内容 CSS补充

在HTML5中，新增了一些语义化的标签，如<header>, <nav>, <section>, <article>, <aside>, <footer>等，这些标签可以让页面的结构更清晰，有利于搜索引擎的爬取和页面的重构。

在CSS方面，新的选择器规则也被引入，如:first-of-type, :last-of-type, :only-of-type, :nth-of-type(), :first-child, :last-child, :only-child, :nth-child(), :root等，这些选择器可以更加精确地选择元素，并提供更多样化的页面样式。

以下是一个简单的HTML和CSS的例子，展示了如何使用HTML5标签和CSS选择器来创建一个有基本样式的页面布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<style>
  :root {
    --main-bg-color: #f0f0f0;
  }
  
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--main-bg-color);
  }
  
  header, nav, section, article, aside, footer {
    margin: 10px;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  header {
    margin-bottom: 20px;
  }
  
  nav ul {
    list-style-type: none;
    padding: 0;
  }
  
  nav ul li {
    display: inline;
    margin-right: 10px;
  }
  
  section {
    margin-bottom: 20px;
  }
  
  article {
    padding: 20px;
  }
  
  aside {
    margin-bottom: 20px;
  }
</style>
</head>
<body>
<header>
  <h1>我的网站</h1>
</header>
<nav>
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>
<section>
  <article>
    <h2>文章标题</h2>
    <p>这里是文章内容...</p>
  </article>
  <article>
    <h2>文章标题2</h2>
    <p>这里是另一篇文章内容...</p>
  </article>
</section>
<aside>
  <h3>侧边栏</h3>
  <p>一些辅助信息...</p>
</aside>
<footer>
  <p>版权所有 &copy; 2023</p>
</footer>
</body>
</html>

在这个例子中，我们使用了HTML5的语义化标签来构建页面结构，并使用CSS变量来定义颜色。我们也使用了新的CSS选择器来为不同的元素设置样式，并且为页面中的元素添加了阴影来增加深度感，从视觉上更好地区分不同的区块。

第三章 HTML5新增内容 CSS补充

评论已关闭

推荐阅读