传统布局

<!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. [K/3Cloud]在插件中根据条件取消表单打开过程

    新建一个类,继承自动态表单抽象插件类AbstractBillPlugIn,重写PreOpenForm. /// <summary> /// 销售订单 单据维护界面插件 /// </s ...

  2. BZOJ1452 count （树状数组）

    一道比较水的二维树状数组,开100个即可,只有100种颜色还是比较EZ的. Program BZOJ1452; ; maxc=; ..maxn,..maxn,..maxc] of longint; f ...

  3. java虚拟机（二）--垃圾收集器与内存分配策略

    1.判断对象是否存活的算法: 1.1.引用计数算法:给对象添加一个引用计数器,每当有一个地方引用他时,计数器+1,当引用失效时,计数器-1,任何时刻计数器为0的对象就是不可能再被引用的,但是他很难解决 ...

  4. Docker Command

    1. #docker inspect id           这个命令给出和容器相关的所有信息(https://www.imooc.com/video/15730) 2. #docker searc ...

  5. 分析helo1项目中的 Web.xml

    web.xml文件位于hello1 中target/WEB-INF/classes/javaeetutorial目录下. 这个web.xml文件包含Facelets应用程序所需的几个元素: 其中(1) ...

  6. 复习es6-解构赋值+字符串的扩展

    1. 数组的解构赋值 从数组中获得变量的值,给对应的声明变量赋值,,有次序和对应位置赋值 解构赋值的时候右边必须可以遍历 解构赋值可以使用默认值 惰性求值,当赋值时候为undefined时候,默认是个 ...

  7. 安装 openCV 2.4.10

    近期试验了一下 ubuntu 12.06 (x86) 安装.openCV 安装脚本 最好的文章是 https://help.ubuntu.com/community/OpenCV. 它提供一个脚本( ...

  8. 解析cocos2d-lua项目中的Hello World

    创建完cocos2d-x的lua项目后.打开项目的Resources目录,找到hello.lua.cocos2d-x的lua项目的測试样例主要就是由这个脚本文件运行的. require "A ...

  9. LeetCode OJ 322. Coin Change DP求解

    题目链接:https://leetcode.com/problems/coin-change/ 322. Coin Change My Submissions Question Total Accep ...

  10. LeetCode 804. Unique Morse Code Words (唯一摩尔斯密码词)

    题目标签:String 题目给了我们 对应每一个 字母的 morse 密码,让我们从words 中 找出 有几个不同的 morse code 组合. 然后只要遍历 words,把每一个word 转换成 ...