第二回合：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" 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的应用
时间： 2024-10-10 06:40:23