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;
20%; }
section {
height: 300px;
background-color: #006dcc;
margin-right: 100px; }
aside {
position: fixed;
right: 0;
top: 226px;
height: 300px;
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>
迎接新时代
少年,尽情的迎接这个最坏的年代,这个最好的年代!