传统布局

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .header {

            width: 1000px;

            height: 120px;

            background-color: pink;

            margin: 0 auto;

        }

        .nav {

            width: 1000px;

            height: 60px;

            background-color: #daa520;

            margin: 0 auto;

        }

        .section {

            width: 1000px;

            height: 400px;

            background-color: #ccc;

            margin: 0 auto;

        }

        .section .aside {

            float: left;

            height: 400px;

            background-color: red;

            width: 400px;

        }

        .section .article {

            float: right;

            height: 400px;

            background-color: green;

            width: 600px;

        }

        .footer {

            width: 1000px;

            height: 90px;

            background-color: #333;

            margin: 0 auto;

        }

    </style>

</head>

<body>

<!--网页经典布局-->

<!--头部-->

<div class="header"></div>

<!--导航-->

<div class="nav"></div>

<!--主体-->

<div class="section">

    <div class="aside"></div>

    <div class="article"></div>

</div>

<!-- 底部-->

<div class="footer"></div>

</body>

</html>

html5布局

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        header {

            width: 1000px;

            height: 120px;

            background-color: pink;

            margin: 0 auto;

        }

        nav {

            width: 1000px;

            height: 60px;

            background-color: #daa520;

            margin: 0 auto;

        }

        section {

            width: 1000px;

            height: 400px;

            background-color: #ccc;

            margin: 0 auto;

        }

        section aside {

            float: left;

            height: 400px;

            background-color: red;

            width: 400px;

        }

        section article {

            float: right;

            height: 400px;

            background-color: green;

            width: 600px;

        }

        footer {

            width: 1000px;

            height: 90px;

            background-color: #333;

            margin: 0 auto;

        }

    </style>

    <!-- 注意：ie8以下的浏览器不支持h5标签-->

    <!--解决办法： 引入html5shiv.js文件-->

    <!--条件注释只有ie能够识别-->

    <!--[if lte ie 8]>

    <script src="html5shiv.min.js"></script>

    <![endif]-->

    <!--

        l:less 更小

        t：than 比

        e:equal等于

        g：great 更大

    -->

</head>

<body>

<!-- 新增的h5有语义的标签 -->

<header>header</header>

<nav>nav</nav>

<section>

    <aside>侧边栏</aside>

    <article>文章</article>

</section>

<footer>底部</footer>

</body>

</html>

兼容问题

<!-- 注意：ie8以下的浏览器不支持h5标签-->

<!--解决办法： 引入html5shiv.js文件-->

<!--  条件注释 只有ie能够识别-->

<!--[if lte ie 8]>

<script src="html5shiv.min.js"></script>

<![endif]-->

<!--

    l:less 更小

    t：than 比

    e:equal等于

    g：great 更大

-->

常用新语义标签

<nav>       //表示导航

<header>    //表示页眉

<footer>    //表示页脚

<section>   //表示区块

<article>   //表示文章 如文章、评论、帖子、博客

<aside>     //表示侧边栏 如文章的侧栏

<figure>    //表示媒介内容分组 与 ul > li 做个比较

<mark>      //表示标记 (带用“UI”，不怎么用)

<progress>  // 表示进度 (带用“UI”，不怎么用)

<time>      //表示日期

html5——语义标签的更多相关文章

  1. html5-7 html5语义标签和视频

    html5-7  html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...

  2. Html5 -- 语义标签兼容性处理

    方法一:通过js处理 方法二:完美的处理方式 no.1 !--[if lte IE 8]> <script type="text/javascript" src=&qu ...

  3. HTML5语义标签的实践

    <article> 定义一篇文章 论坛发帖 博客文章 一篇文章 <article>  <h1>标题</h1>  <p>内容</p> ...

  4. 使用HTML5语义标签时要注意的问题

    header,nav,section,article,aside,figue,figcaption,footer以上这些标签(除figcaption标签外)都是块级标签,为了让这些标签及元素在所有的浏 ...

  5. html5语义标签

  6. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  7. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  8. IE8兼容H5语义标签

    //IE浏览器定义的特殊属性,通过hack方式判断IE版本来执行不同的代码,IE8以下浏览器自动创建html5语义标签,从而实现兼容<!--[if lte IE 8] <script sr ...

  9. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

随机推荐

  1. hdu 2546 0-1背包

    #include<stdio.h> #include<string.h> #define N 1100 int dp[N],a[N]; int main() { int n,m ...

  2. [codeVS1404] 字符串匹配

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master         题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度. ...

  3. 这个函数有搞头，要调试通过就差不多啦--ImpersonateActiveUserAndRun

    //Function to run a process as active user from windows service void ImpersonateActiveUserAndRun() { ...

  4. 武大OJ 622. Symmetrical

    Description          Cyy likes something symmetrical, and Han Move likes something circular. Han Mov ...

  5. Vue插槽的另外一些特性

    之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...

  6. _deque实现

    /* deque是一种双向开口的连续线性空间,可以在头尾两端分别做元素的插入和删除操作 常用接口:back(), front(), push_back(), pop_back(), push_fron ...

  7. [JavaEE] JTA, Java Transaction API, Repository for DB opreations

    Mainly two things: 1. For all the creating and deleting opreations for the DB, we want to use 'REQUI ...

  8. zookeeper+kafka配置

    ZooKeeper 安装 #将ZooKeeper解压到/usr/local中 tar –zxvf zookeeper-3.4.6.tar.gz –C /usr/local cd /usr/local ...

  9. Cocos Code IDE + Lua初次使用FastTiledMap的坑

    近期想玩玩Lua.又想玩玩Cocos Code IDE.更加想写一个即时战斗的.防守的.会动的.有迷雾的.要探索的(旁白:给我停!)跑地图游戏. 于是我就用Cocos Code IDE来写游戏了.挑战 ...

  10. LeetCode 125. Valid Palindorme (验证回文字符串)

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...