HTMLCSS新特性

HTML5 的新特性包括：

1. 语义化标签（如 <header>, <nav>, <section>, <article>, <aside>, <footer>）
2. 表单控件增强（如数值输入、日期选择、时间输入、颜色选择）
3. 多媒体标签（<video>, <audio>, 可以直接嵌入视频和音频）
4. 画布（<canvas>）和 SVG 绘图
5. 本地存储（localStorage, sessionStorage）
6. 新的表单属性（如 required, pattern, placeholder）

CSS 的新特性包括：

1. 边框、背景、文字效果（如圆角、阴影、渐变）
2. 弹性布局（Flexbox）
3. 网格布局（Grid）
4. 行内块（Inline-block）
5. 自定义属性和变量（Custom Properties）
6. 混合模式（Blend modes）
7. 过渡和动画（Transitions, Animations）

示例代码：

HTML5:

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
    </ul>
  </nav>
</header>
<section>
  <article>
    <h2>Article Title</h2>
    <p>This is an article paragraph...</p>
  </article>
</section>
<footer>
  Copyright © 2023 My Website
</footer>

CSS:

body {
  background: linear-gradient(to right, #FF7E5F, #Feb47B);
  font-family: Arial, sans-serif;
  color: white;
}
 
header {
  display: flex;
  justify-content: center;
}
 
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
article {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
 
footer {
  text-align: center;
  font-size: 0.8em;
}

以上代码展示了如何使用HTML5语义化标签以及CSS的一些新特性来改善页面的布局和样式。