zoukankan      html  css  js  c++  java
  • 是时候全面使用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>
    

    迎接新时代

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

  • 相关阅读:
    Leetcode Binary Tree Preorder Traversal
    Leetcode Minimum Depth of Binary Tree
    Leetcode 148. Sort List
    Leetcode 61. Rotate List
    Leetcode 86. Partition List
    Leetcode 21. Merge Two Sorted Lists
    Leetcode 143. Reorder List
    J2EE项目应用开发过程中的易错点
    JNDI初认识
    奔腾的代码
  • 原文地址:https://www.cnblogs.com/myqianlan/p/4195979.html
Copyright © 2011-2022 走看看