第二回合：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. Bookstore project using XAMPP 详细配置 Part 3
			
    3. Create PHP 1) “Sublime Text” is used as text editor. 2) HTML part of “hello.php” was created as s ...
    
			
    2. 
						
  2. Android 抗锯齿的两种方法
			
    Android 抗锯齿的两种方法 (其一:paint.setAntiAlias(ture);paint.setBitmapFilter(true))   在Android中,目前,我知道有两种出现锯齿 ...
    
			
    3. 
						
  3. spring  装配核心笔记
			
    (1)自动装配 开启ComponentScan(自动扫描), 通过在类使用注解@Component(默认bean id为类名第一个字符小写), 使用@Autowired实现属性,构造函数,成员函数的自 ...
    
			
    4. 
						
  4. 【转】java.lang.OutOfMemoryError: Java heap space的解决
			
    原文地址:http://blog.sina.com.cn/s/blog_4b12778b0100v0bb.html Myeclipse下java.lang.OutOfMemoryError: Java ...
    
			
    5. 
						
  5. 开始VS 2012中LightSwitch系列的第3部分：我该选择哪一个屏幕模板
			
    [原文发表地址]  Beginning LightSwitch in VS 2012 Part 3: Screen Templates, Which One Do I Choose? [原文发表时间] ...
    
			
    6. 
						
  6. CQRS\ES架构介绍
			
    大家好,我叫汤雪华.我平时工作使用Java,业余时间喜欢用C#做点开源项目,如ENode, EQueue.我个人对DDD领域驱动设计.CQRS架构.事件溯源(Event Sourcing,简称ES). ...
    
			
    7. 
						
  7. 必须知道的SQL编写技巧，多条件查询不拼字符串的写法
			
    在做项目中,我们经常遇到复杂的查询方法,要根据用户的输入,判断某个参数是否合法,合法的话才能当作过滤条件,我们通常的做法是把查询SQL赋值给一个字符串变量,然后根据判断条件动态的拼接where条件进行 ...
    
			
    8. 
						
  8. 使用ACE_Task管理线程
			
    为什么要使用ACE_Task来管理线程 从C#转到C++后,感觉到C++比C#最难的地方,就是在系统编程时,C#中有对应的类库,我接触到一个类后,就可以通过这个类,知道很多相关的功能.而在C++中,必 ...
    
			
    9. 
						
  9. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求
			
    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...
    
			
    10. 
						
  10. QT屏蔽qDebug的方法
			
    在工程文件.pro里面添加 DEFINES += QT_NO_WARNING_OUTPUT\                   QT_NO_DEBUG_OUTPUT 然后rebuild all.这样 ...
    
			
    11.