• 是时候全面使用html5标签了


    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;
         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>
    

    迎接新时代

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

  • 相关阅读:
    JUnit4.13环境配置
    OO第5-7次作业总结
    电梯的一点浅优化
    C++变量作用域、生存期、存储类别
    最后一次OO博客
    OO第三次总结
    OO第二次总结
    OO第一次总结
    POJ3934
    POJ刷题计划
  • 原文地址:https://www.cnblogs.com/myqianlan/p/4195979.html
Copyright © 2020-2023  润新知