是时候全面使用html5标签了
发布在点点滴滴2014年11月11日view:4061
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

html5真的来了

html5,这个词语,不管是业内还是业外,都已经耳熟能详了。因为已经火了这么长的的时间了。但是,真正开始使用的又有多少人呢?只能用呵呵来形容了! 2014年10月28日,历经八年,W3C(万维网联盟)终于完成了HTML5标准的制定工作,html5的规范状态终于变成了RECOMMENDATION。HTML5 IS A W3C RECOMMENDATION英文原文

接下来做什么

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

html5布局基本demo

这里给出一个html5布局的基本demo,欢迎拍砖! 同样,你也可以在这里直接查看源码,不过repo里面包含一些基于gulp的工作流。点击查看仓库

首先,给出图示“ html5基本布局

然后,给出相应的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>

迎接新时代

少年,尽情的迎接这个最坏的年代,这个最好的年代!

点击链接到我的个人小博客查看原文myqianlan.com

评论
发表评论
5年前

忘了苦逼的IE,全面拥抱HTML5吧

5年前
赞了此文章!
5年前

@小黑 反正我关于html5都答了,哈哈。标签,css3,存储,动画,画布。

5年前

@小猩猩君 其实我觉得他们说会不会是指的是canvas 估计就认为只有那个才是真正HTML5吧。。

5年前

现在面试好多公司都在问会不会html5

WRITTEN BY
myqianlan
走走停停,不忘初心。with an unchangable heart, we can expect that a good beginning makes a wonderful ending.
TA的新浪微博
PUBLISHED IN
点点滴滴

遇问题,记录之,分享之。

我的收藏