html5，这个词语，不管是业内还是业外，都已经耳熟能详了。因为已经火了这么长的的时间了。但是，真正开始使用的又有多少人呢？只能用呵呵来形容了！

html5真的来了

2014年10月28日，历经八年，W3C（万维网联盟）终于完成了HTML5标准的制定工作，html5的规范状态终于变成了RECOMMENDATION。HTML5 IS A W3C RECOMMENDATION英文原文。

接下来做什么

作为一个web开发者，特别是前端开发从业者，需要真正从自身开始，逐渐习惯使用html5标签了。

html5布局基本demo

这里给出一个html5布局的基本demo，欢迎拍砖！

同样，你也可以在这里直接查看源码，不过repo里面包含一些基于gulp的工作流。点击查看仓库

首先，给出图示“

然后，给出相应的html代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>网站标题，控制在25个字、50个字节以内</title>

    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">

    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="http://cdn.bootcss.com/normalize/3.0.1/normalize.css" rel="stylesheet">

    	<style>

    	body {

  color: #f5f5f5; }

header {

  background-color: #006dcc;

  font-size: 35px;

  text-align: center; }

nav {

  text-align: center; }

  nav li {

    list-style: none;

    background-color: forestgreen;

    display: inline-block;

    height: 36px;

    line-height: 36px;

    width: 20%; }

section {

  height: 300px;

  background-color: #006dcc;

  margin-right: 100px; }

aside {

  position: fixed;

  right: 0;

  top: 226px;

  height: 300px;

  width: 100px;

  background-color: forestgreen; }

footer {

  height: 80px;

  background-color: gray; }

    </style>

</head>

<body>

    <!--[if lt IE 9]>

    <style>.browsehappy {margin: .2em;background: #ccc;color: #000;padding: .5em;}</style>

    <p class="browsehappy">

        您使用的浏览器 <strong>版本过低</strong>

        ，请

        <a href="http://browsehappy.com/">升级您的浏览器</a>

        以获得更好的体验。

    </p>

    <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>

    <![endif]-->

    <!-- CONTENT -->

<header>

    <h1>hello world</h1>

</header>

<nav>

    <ul>

    <li>home</li>

    <li>contact</li>

    <li>about</li>

    </ul>

</nav>

<section>section

    <article></article>

    <article></article>

</section>

<aside>aside</aside>

<footer>footer</footer>

</body>

</html>

迎接新时代

少年，尽情的迎接这个最坏的年代，这个最好的年代！

是时候全面使用html5标签了的更多相关文章

  1. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  2. HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

    (1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...

  3. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

  4. [js开源组件开发]html5标签audio的样式更改

    html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...

  5. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  6. 关于HTML5标签不兼容(IE6~8)

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 比较常用的HTML5的新标签元素有: <hea ...

  7. HTML5标签一览

    HTML5标签一览,点击下载 访问密码:1907

  8. html5标签兼容ie6，7，8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  9. 在IE6/7/8下识别html5标签

    识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...

随机推荐

  1. Base64.java 工具类

    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOExceptio ...

  2. Unity3D行为树插件Behave学习笔记

    Behave1.4行为树插件 下载地址:http://pan.baidu.com/s/1i4uuX0L 安装插件和使用 我们先来看看插件的安装和基本使用方法,新建一个Unity3D项目,这里我使用的是 ...

  3. Unity中2D和UGUI图集的理解与使用

    图集 什么是图集? 在使用3D技术开发2D游戏或制作UI时(即使用GPU绘制),都会使用到图集,而使用CPU渲染的2D游戏和UI则不存在图集这个概念(比如Flash的原生显示列表),那么什么是图集呢? ...

  4. 简单http笔记

    https是以安全为目的的网络传输协议,可以认为是http的安全版,https使用ssl协议保证安全传输.https位于网络模型的应用层,使用默认端口443进行通信,URL以https开头是https ...

  5. mysql数据库表间内外链接详解

    1. 内连接(自然连接) 2. 外连接 (1)左外连接 (左边的表不加限制)(2)右外连接(右边的表不加限制)(3)全外连接(左右两表都不加限制) 3. 自连接(同一张表内的连接) SQL的标准语法: ...

  6. pygame简单动态图 & 动态图片的移动

    之前在学pygame 时看了一些博客(来自http://eyehere.net/2011/python-pygame-novice-professional-plant-zombie-1/),觉得写得 ...

  7. Unity中关于等待的函数

    public void InvokeRepating(string methodName,float time,float repeatRate); 语法 注: 1.methodeName为调用的方法 ...

  8. delphi 插入 HTML代码 播放器

    Delphi在Webbrowser中插入 HTML/java script代码 使用方法将下面的代码赋值到1个记事本里保存,然后保存为xxx.htm就可以看到效果使用PasteHtml实现功能 的事件 ...

  9. vector<int> v2 = 42; 为何非法

    C++ Primer 第四版,第十三章“复制控制” 习题13.2,为何vector<int> v2 = 42; 不能编译? 百度贴吧里的一位楼主给出了答案,本人认为正确,特此引用: 参考链 ...

  10. Java 中队列的使用

    刚才看见群里的一个朋友在问队列的使用,确实在现实的写代码中非常少使用队列的,反正我是从来没使用过.仅仅是学数据结构的时候学过. 以下是我写的一个小样例,希望有不足之处请提出改正.O(∩_∩)O~ 看代 ...