第二回合：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. input只读属性区别
			
    readonly disabled 相同点:都是禁止输入 不同点:readonly属性会把该input提交到form表单 disabled属性不会把该input提交到form表单
    
			
    2. 
						
  2. 字符串混淆技术在.NET程序保护中的应用及如何解密被混淆的字符串
			
    Visual Studio提供的Dotfuscator保护程序,可以对用户代码中包含的字符串进行加密.比如下面的例子,为了找到这个程序的注册算法,用.NET Reflector加载程序集后,发现代码中 ...
    
			
    3. 
						
  3. HTML5优秀图表控件
			
    不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字.在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用flash实现的图表控件. 在HTML5非常流行的当 ...
    
			
    4. 
						
  4. EQueue - 详细谈一下消息持久化以及消息堆积的设计
			
    前言 之前写了一篇文章,总体介绍了EQueue.在看这篇文章之前如果还没看过那篇文章,可能会看不懂这篇文章.所以建议没看过的朋友务必先看一下那篇文章中所提到的各种概念,这样才能更好的理解本文所说的内容 ...
    
			
    5. 
						
  5. 解决IE6下png图片透明度不显示的问题
			
    世界上最遥远的距离,不外乎我在搞前端,你却在用旧IE,现在随着XP要退休了,IE6的市场占有率应该也会逐步下滑.不过基于天朝人民的惰性以及企鹅微软的“扎篱笆”活动,做网站的朋友依旧不能忽视IE6的存在 ...
    
			
    6. 
						
  6. 《OOC》笔记(4)——自动化地将C#代码转化为C代码(结构版)
			
    <OOC>笔记(4)——自动化地将C#代码转化为C代码(结构版) 我在<C表达面向对象语言的机制——C#版>中已经说明了从C#到C的转换方法.这次看<OOC>也是想 ...
    
			
    7. 
						
  7. 跟我一起云计算（6）——openAPI
			
    介绍 Open API即开放API,也称开放平台. 所谓的开放API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网站服务封装成一系列API(Application Program ...
    
			
    8. 
						
  8. NanoProfiler - 适合生产环境的性能监控类库 之 实践ELK篇
			
    上期回顾 上一期:NanoProfiler - 适合生产环境的性能监控类库 之 大数据篇 上次介绍了NanoProfiler的大数据分析理念,一晃已经时隔一年多了,真是罪过! 有朋友问到何时开源的问题 ...
    
			
    9. 
						
  9. Git学习笔记（9）——自定义配置
			
    本文主要记录了Git的一些易用化的配置和别名的使用 配置Git的命令输出带有颜色,更加醒目 //配置输出颜色 $ git config --global color.ui true //取消输出颜色  ...
    
			
    10. 
						
  10. Javascript隐式转换
			
    乱想 javascript为什么需要隐式转换?如果没有会出现什么情况? 找了一圈没有看到关于这个的讨论,只好自己研究了,可能不一定正确,自行辨知. 郁闷就是郁闷在好好的,为什么要搞个隐式转换,一般来讲 ...
    
			
    11.