HTML5 的新特性：
- 语义化标签（header, nav, section, article, aside, footer）
- 表单控件（email, url, number, range, date, time）
- 画布（canvas）
- 视频和音频（video, audio）
- 本地存储（localStorage, sessionStorage）
- 新的API（Geolocation, Web Workers, Web Sockets）
CSS3 的新特性：
边框和背景
- 圆角（border-radius）
- 阴影（box-shadow）
- 背景渐变（gradient）
文字效果
- 文字阴影（text-shadow）
- 字体直接提供（@font-face）
- 变换（transform）
- 动画（animation）
- 多列布局（column）
- 媒体查询（media queries）
示例代码：
HTML5 新特性（语义化标签和表单控件）：
<header>头部信息</header>
<nav>导航链接</nav>
<section>
<article>
<header>文章标题</header>
<p>文章内容...</p>
<footer>文章底部信息</footer>
</article>
</section>
<aside>侧边内容</aside>
<footer>底部信息</footer>
<form>
<input type="email" name="userEmail" placeholder="请输入邮箱">
<input type="url" name="userUrl" placeholder="请输入URL">
<input type="number" name="quantity" min="1" max="5">
<input type="range" name="volume" min="0" max="100">
<input type="date" name="userDate">
<input type="time" name="userTime">
<input type="submit">
</form>
CSS3 新特性（边框和背景渐变）：
div {
border: 1px solid #000;
border-radius: 10px; /* 圆角 */
box-shadow: 5px 5px 5px #888; /* 阴影 */
background: -webkit-gradient(linear, left top, right bottom, from(#ff0), to(#f00)); /* 渐变 */
background: gradient(linear, left top, right bottom, from(#ff0), to(#f00));
}
p {
color: #333;
text-shadow: 2px 2px 2px #aaa; /* 文字阴影 */
}
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* 现代浏览器 */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
div {
transform: rotate(30deg); /* 旋转 */
}
@keyframes myAnimation {
from {background: red;}
to {background: yellow;}
}
div {
animation: myAnimation 5s infinite; /* 动画 */
}
div {
column-count: 3; /* 列数 */
column-gap: 20px; /* 列间隙 */
}
/* 媒体查询：当屏幕宽度小于600px时，背景变为蓝色 */
@media screen and (max-width: