传统布局

<!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. codeforces 371c

    #include<stdio.h> int main() { char s[200]; __int64  r,nb,ns,nc,pb,ps,pc,i,sum,tob,tos,toc; wh ...

  2. NOIP2013 提高组合集

    NOIP 2013 提高组 合集 D1 T1 转圈游戏 快速幂裸题 #include <iostream> #include <cstdio> #include <cst ...

  3. - > 动规讲解基础讲解四——最大子段和问题

    给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大?   例如:-2,11,-4,13,-5,-2,和最大的子段为:11,-4,13.和为20. ...

  4. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. ZOJ2599：Graduated Lexicographical Ordering(很经典的数位DP)

    Consider integer numbers from 1 to n. Let us call the sum of digits of an integer number its weight. ...

  6. 浅谈API网关(API Gateway)如何承载API经济生态链

    序言 API经济生态链已经在全球范围覆盖, 绝大多数企业都已经走在数字化转型的道路上,API成为企业连接业务的核心载体, 并产生巨大的盈利空间.快速增长的API规模以及调用量,使得企业IT在架构上.模 ...

  7. mac 浏览器解决跨域问题

    Chrome:命令行执行如下命令open -a Google\ Chrome --args --disable-web-security出现如下提示,说明已经开启: Safari: open -a ' ...

  8. Spark 机器学习 ---CountVectorizer

    文本特征提取->> CountVectorizer:基于词频数的文档向量 package Spark_MLlib import org.apache.spark.ml.feature.Co ...

  9. 【转载】Java中Comparable和Comparator比较

    [本文转自]http://www.cnblogs.com/skywang12345/p/3324788.html Comparable 简介 Comparable 是排序接口. 若一个类实现了Comp ...

  10. Ruby Range类

    创建: 2017/09/30