第二回合：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的应用


 


												


											
HTML5第二节的更多相关文章
	

    
								
  1. 自学HTML5第二节（标签篇---新增标签详解）
		
    HTML5新增标签: <article> 标签 规定独立的自包含内容.一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源 ...
    
		
    2. 
						
  2. 《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第二节：MVC5项目结构
		
    第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...
    
		
    3. 
						
  3. android内部培训视频_第二节 布局基础
		
    第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
    
		
    4. 
						
  4. seajs第二节，seajs各模块依赖关系
		
    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
    
		
    5. 
						
  5. 学习javascript基础知识系列第二节 - this用法
		
    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
    
		
    6. 
						
  6. VUE2.0实现购物车和地址选配功能学习第二节
		
    第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
    
		
    7. 
						
  7. 第二节 安装CentOS
		
    Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...
    
		
    8. 
						
  8. 源码讲解 node+mongodb 建站攻略（一期）第二节
		
    源码讲解 node+mongodb 建站攻略(一期)第二节 上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...
    
		
    9. 
						
  9. 第二节：Web前端-ASP.NET之C#基础
		
    第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. TP-LINK telnet远程 重启路由器
			
    突然断网,以前房东的路由器管理页面可以打开,今天突然间就打不开了.ping了下,可以ping通,于是就想起了房东的路由器是TP-LINK的 可以 telnet登陆的.每次,断网,我都会重启房东的路由器 ...
    
			
    2. 
						
  2. iPhone的Push(推送通知)功能原理浅析
			
    第一部分:Push原理(以下绝大多数内容参考自.图片来自iPhone OS Reference Library)机制简介Push 的工作机制可以简单的概括为下图图中,Provider是指某个iPhon ...
    
			
    3. 
						
  3. PHPBB公布新的维护版本
			
    9月28日,PHPBB官方网站公布了新PHPBB的最新消息.这个版本命名为:"Richard 'D¡cky' Foote",版本号为3.0.12.据官方的说明,“这个版本是一个维护 ...
    
			
    4. 
						
  4. Percona Server 5.6.13-61.0 首个 GA 版本发布
			
    Percona Server 5.6 的首个 GA 版本发布了,版本号是 5.6.13-61.0 ,该版本基于 MySQL 5.6.13 改进内容包括: New Features: Percona S ...
    
			
    5. 
						
  5. 浅论Android网络请求库——android-async-http
			
    在iOS开发中有大名鼎鼎的ASIHttpRequest库,用来处理网络请求操作,今天要介绍的是一个在Android上同样强大的网络请求库android-async-http,目前非常火的应用Insta ...
    
			
    6. 
						
  6. objective-c（类别）
			
    objective-c中的Categary(类别)使用相当广泛,其内涵类似于javascript中的prototype,可以扩展某一个类的方法. 下面给出一个基本的例子,参考oc程序设计一书: 实现一 ...
    
			
    7. 
						
  7. 通过Measure & Arrange实现UWP瀑布流布局
			
    简介 在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...
    
			
    8. 
						
  8. 在.net中使用aquiles访问Cassandra(一)
			
    aquiles是.net下基于Thrift协议访问Cassandra的第三方类库,官方地址是: http://aquiles.codeplex.com/   1.下载类库文件: http://aqui ...
    
			
    9. 
						
  9. Direct2D教程（外篇）环境配置
			
    2014年世界杯首场淘汰赛马上开始了,闲着没事,整理以前的博客草稿打发时间,意外的发现这篇文章,本来是打算加入到Direct2D那个系列的,不知道为什么把它给遗漏了.环境配置,对于熟手来说,不是什么重 ...
    
			
    10. 
						
  10. 谈谈c#中异步编程模型的变迁
			
    大家在编程过程中都会用到一些异步编程的情况.在c#的BCL中,很多api都提供了异步方法,初学者可能对各种不同异步方法的使用感到迷惑,本文主要为大家梳理一下异步方法的变迁以及如何使用异步方法. Beg ...
    
			
    11.