【HTMLCSS3】新增特性总结！

HTML5 的新特性：

1. 语义化标签（header, nav, section, article, aside, footer）
2. 表单控件（email, url, number, range, date, time）
3. 画布（canvas）
4. 视频和音频（video, audio）
5. 本地存储（localStorage, sessionStorage）
6. 新的API（Geolocation, Web Workers, Web Sockets）

CSS3 的新特性：

1. 边框和背景

   • 圆角（border-radius）
   • 阴影（box-shadow）
   • 背景渐变（gradient）

2. 文字效果

   • 文字阴影（text-shadow）
   • 字体直接提供（@font-face）
3. 变换（transform）
4. 动画（animation）
5. 多列布局（column）
6. 媒体查询（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: