传统布局

<!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. 布局（codevs 1242）

    题目描述 Description 当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些.FJ有N(2<=N<=1000)头奶牛,编号从1到N,沿一条直线站着等候喂食.奶牛排在队伍中的顺序和它们 ...

  2. 【BZOJ2434】阿狸的打字机（fail树，DFS序）

    题意: 1<=N<=10^5 1<=M<=10^5 输入总长<=10^5   思路: From http://blog.csdn.net/lych_cys/article ...

  3. Sql语句中关于如何在like '%?%'中给？赋值

    做模糊查询用户的时候,如果 String sql="select * from users where name like %?%"; String[] param={userna ...

  4. Win32编程API 基础篇 -- 2.一个简单的窗口 根据英文教程翻译

    一个简单的窗口 例子:简单的窗口 有时人们在IRC提问,”我应该怎样制作一个窗口”...嗯,这恐怕不是完全这么简单好回答!其实这并不难一旦你明白你在做什么,但在你得到一个可展示的窗口之前还有一些事情需 ...

  5. Spring MVC中@RequestMapping注解使用技巧（转）

    @RequestMapping是Spring Web应用程序中最常被用到的注解之一.这个注解会将HTTP请求映射到MVC和REST控制器的处理方法上. 在这篇文章中,你将会看到@RequestMapp ...

  6. memory management in oracle 11G R2

    When we talking about memory management in Oracle, we are refering to SGA and PGA. The management me ...

  7. autoconfig

    實例:假設我們有個資料夾為d:\tmp和e:\tmp ,而我們只要將d:\tmp中有異動的檔案複製到e:\tmp下的話,用法如下xcopy d:\tmp\. e:\tmp\ /D /S /Y實例:如果 ...

  8. HDU 4499 Cannon （暴力搜索）

    题意:在n*m的方格里有t个棋子,问最多能放多少个炮且每一个炮不能互相攻击(炮吃炮) 炮吃炮:在同一行或同一列且中间有一颗棋子. #include <stdio.h> #include & ...

  9. MVC之使用Nhibernate

    NHibernate是一个基于.Net,用于关系数据库的对象持久化类库.它是著名的Hibernate的.Net版本,NHibernate用于把你的.Net对象持久化到底层的关系数据库中.你完全不用自己 ...

  10. The Breakpoint will not currently be hit. No executable code associated with this line

    首先.请确认solutin的属性 C/C++->General-> Debug Information Format 选择Program Database(/Zi) Linking-> ...