你的位置:首页 > 网页设计

[网页设计]HTML5第二节


第二回合:HTML5的新特性

与之前的HTML4.01相比,HTML5增加了非常多的改变:

① 新的语义元素:<article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<hgroup>、<nav>和<section>等等

② 新的元素特性:增加新的元素属性、表单元素、验证功能等内容。

③ 多媒体:增加<audio>音频、<video>视频元素等内容。

④ 2D/3D 绘图:增加<canvas>绘图元素。

⑤ 存储:增加在线、离线存储功能。

⑥ 连通性:增加客户端与服务器交互的两个内容:Web Sockets(客户端与服务器持久连接)和Server-sent events(服务器推送数据)等。

⑦ 集成:提供Web Workers、History API、requestAnimationFrame、地理位置等强大的功能。

⑧ 设备访问:提供对摄像头、移动设备的支持。

⑨ CSS3样式:提供了新的背景样式特性、动画、边框等样式。

下面我们用实例来说明下各个标签的使用以及h5与c3的配合。

html代码如下:

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>HTML5</title> <link rel="stylesheet" href="html5.css"></head><body>  <header class="show">   <h1>Header</h1>   <h2>Subtitle</h2>  </header><!-- 头部结束 -->  <div id="container">    <nav>     <h3>Nav</h3>     <a href="">HTML5</a>     <a href="">CSS3</a>     <a href="">Javascript</a>    </nav><!-- 导航链接部分 -->    <section>      <article>        <header>          <h1>Article Header</h1>        </header><!-- 定义头部 -->        <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>        <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p>        <footer>          <h2>Article Footer</h2>        </footer><!-- 定义尾部 -->      </article><!-- 定义文章 -->      <article>        <header>          <h1>Article Header</h1>        </header>        <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>        <footer>          <h2>Article Footer</h2>        </footer>      </article>    </section><!-- 定义文档中的节 -->    <aside>      <h3>Aside</h3>      <p>do you love this case? if you want make friends with me ,you can add my qq: 1125911451,thank you for your join.</p>      <img src="lian.jpg" alt="" width="220" height="250">    </aside><!-- 定义侧边栏目 -->    <footer>      <h2>Footer</h2>    </footer>  </div></body></html>

css代码如下:
body {  background-color:#CCCCCC;  font-family:Geneva,Arial,Helvetica,sans-serif;  margin: 0px auto;  max-width:900px;  border:solid;  border-color:#FFFFFF;}header {  background-color: #F47D31;  display:block;  color:#FFFFFF;  text-align:center;}header h2 {  margin: 0px;}h1 {  font-size: 72px;  margin: 0px;}h2 {  font-size: 24px;  margin: 0px;  text-align:center;  color: #F47D31;}h3 {  font-size: 18px;  margin: 0px;  text-align:center;  color: #F47D31;}h4 {  color: #F47D31;  background-color: #fff;  -webkit-box-shadow: 2px 2px 20px #888;  -webkit-transform: rotate(-45deg);  -moz-box-shadow: 2px 2px 20px #888;  -moz-transform: rotate(-45deg);  position: absolute;  padding: 0px 150px;  top: 50px;  left: -120px;  text-align:center;  }nav {  display:block;  width:25%;  float:left;}nav a:link, nav a:visited {  display: block;  border-bottom: 3px solid #fff;  padding: 10px;  text-decoration: none;  font-weight: bold;  margin: 5px;}nav a:hover {  color: white;  background-color: #F47D31;}nav h3 {  margin: 15px;  color: white;}#container {  background-color: #888;}section {  display:block;  width:50%;  float:left;}article {  background-color: #eee;  display:block;  margin: 10px;  padding: 10px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}article header {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;  padding: 5px;}article footer {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;  padding: 5px;}article h1 {  font-size: 18px;}  aside {  display:block;  width:25%;  float:left;}aside h3 {  margin: 15px;  color: white;}aside p {  margin: 15px;  color: white;  font-weight: bold;  font-style: italic;}  footer {  clear: both;    display: block;  background-color: #F47D31;  color:#FFFFFF;  text-align:center;  padding: 15px;}footer h2 {  font-size: 14px;  color: white;}/* links */a {  color: #F47D31;}a:hover {  text-decoration: underline;}.show {                 -webkit-animation: show 25s ease-out infinite;      -moz-animation: show 25s ease-out infinite;      -o-animation: show 25s ease-out infinite;      animation: show 25s ease-out infinite;      -webkit-transform: translate3d(0, 0, 0);      -ms-transform: translate3d(0, 0, 0);      -o-transform: translate3d(0, 0, 0);      transform: translate3d(0, 0, 0);    }/*调用动画*/ @-webkit-keyframes show {      0% {        background: #f47d31;        color: white;      }      50% {        background: #e0a014;        color: #a3d9ff;      }      100% {        background: purple;        color: pink;      }    }/*定义动画*/
效果图如下图所示

我相信 现在大家对h5已经产生了浓厚的兴趣,那么现在可以自己动手去撸代码,用h5开发页面,在下一节里我将继续为大家讲解h5的应用