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

html5真的来了

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

接下来做什么

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

html5布局基本demo

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

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

首先，给出图示“

然后，给出相应的html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>网站标题，控制在25个字、50个字节以内</title>
  6.     <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
  7.     <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1">
  10.     <link href="http://cdn.bootcss.com/normalize/3.0.1/normalize.css" rel="stylesheet">
  11.     	<style>
  12.     	body {
  13.   color: #f5f5f5; }
  15. header {
  16.   background-color: #006dcc;
  17.   font-size: 35px;
  18.   text-align: center; }
  20. nav {
  21.   text-align: center; }
  22.   nav li {
  23.     list-style: none;
  24.     background-color: forestgreen;
  25.     display: inline-block;
  26.     height: 36px;
  27.     line-height: 36px;
  28.     width: 20%; }
  30. section {
  31.   height: 300px;
  32.   background-color: #006dcc;
  33.   margin-right: 100px; }
  35. aside {
  36.   position: fixed;
  37.   right: 0;
  38.   top: 226px;
  39.   height: 300px;
  40.   width: 100px;
  41.   background-color: forestgreen; }
  43. footer {
  44.   height: 80px;
  45.   background-color: gray; }
  46.     </style>
  47. </head>
  48. <body>
  49.     <!--[if lt IE 9]>
  50.     <style>.browsehappy {margin: .2em;background: #ccc;color: #000;padding: .5em;}</style>
  51.     <p class="browsehappy">
  52.         您使用的浏览器 <strong>版本过低</strong>
  53.         ，请
  54.         <a href="http://browsehappy.com/">升级您的浏览器</a>
  55.         以获得更好的体验。
  56.     </p>
  57.     <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
  58.     <![endif]-->
  59.     <!-- CONTENT -->
  60. <header>
  61.     <h1>hello world</h1>
  62. </header>
  64. <nav>
  65.     <ul>
  66.     <li>home</li>
  67.     <li>contact</li>
  68.     <li>about</li>
  69.     </ul>
  70. </nav>
  71. <section>section
  72.     <article></article>
  73.     <article></article>
  74. </section>
  75. <aside>aside</aside>
  76. <footer>footer</footer>
  77. </body>
  78. </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. java 字符串String操作工具类

    /** * StrKit. */ public class StrKit { /** * 首字母变小写 */ public static String firstCharToLowerCase(Str ...

  2. javascript实现队列功能

  3. 在没备份undo的情况下，undo丢失，重启数据库报ORA-01157错误

    今天做了一下undo隐藏参数的实验 在没有备份的情况下,删除正在使用的undo,然后关机 (本次使用的的oracle的隐藏参数,慎用!!!!!!!!!!!!!!) idle> select * ...

  4. POJ 1751 Highways (kruskal)

    题目链接:http://poj.org/problem?id=1751 题意是给你n个点的坐标,然后给你m对点是已经相连的,问你还需要连接哪几对点,使这个图为最小生成树. 这里用kruskal不会超时 ...

  5. [置顶] a+=1/a=+1/a-=1区别-c语言

    1.解释 a+=1/a=+1/a-=1 含义 a+=1 实质等于 a += 1,也就是等于 a = a + 1: a=+1 实质等于 a = +1:[因为运算符中没有=+,很多人误以为是 a =+ 1 ...

  6. easyUI之tree

    转自:http://www.cnblogs.com/CoreCaiNiao/archive/2010/08/20/1804387.html http://blog.csdn.net/l27775918 ...

  7. 在VB中利用Nuget包使用SQLite数据库和Linq to SQLite

    上午解决了在C#中利用Nuget包使用SQLite数据库和Linq to SQLite,但是最后生成的是C#的cs类文件,对于我这熟悉VB而对C#白痴的来说怎么能行呢? 于是下午接着研究,既然生成的是 ...

  8. 80端口被NT kernel & System 占用pid 4

    前段时间停止了Apache,结果在打开的时候发现无法打开,80端口被占用,于是win+r 运行cmd 输入netstat -ano 可以看到80端口被PID4占用,于是打开任务管理器-进程-查看,选择 ...

  9. cmp排序hdoj 1106排序

    上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下cmp排序 /*标题还是比拟的水吧,但是花的时间还是比拟的多,心不够静*/ #include <iostrea ...

  10. 进程和cpu的相关知识和简单调优方案

    进程就是一段执行的程序,每当一个程序执行时.对于操作系统本身来说,就创建了一个进程,而且分配了相应的资源.进程能够分为3个类别:     1.交互式进程(I/O)     2.批处理进程 (CPU) ...