显示的效果如上边这样，但是有没有发现内容的外侧没有边线（这个难道是因为浏览器不同吗？有待测试）

html5中新增加的元素<header>可以明确的告诉浏览器此处是页头，<nav>标记用于构建页面的导航，<article>标记用于构建页面内容的一部分，<footer>元素表明页面已到页脚或根元素部分，并且这些标记可以重复使用，极大的提高了开发者的效率。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        header,nav,footer{
            border: solid 1px #666;
            padding : 10px;
            margin: 6px;
        }
        header{
            width: 500px
        }
        nav{
            float: left;
            width: 60px;
            height: 100px;
        }
        article{
            float: left;
            width: 406px;
            height: 100px;
        }
        footer{
            clear: both;
            width: 500px;
        }

    </style>
</head>
<body>
<header>导航</header>
<nav>菜单</nav>
<article>内容</article>
<footer>底部说明</footer>
</body>
</html>

使用html5结构化元素的更多相关文章

  1. HTML5语义化元素

    语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...

  2. opencv_形态学结构化元素对形态学图像处理的影响

    场景 对大米预处理之后的二值图像做开运算再做canny边缘检测. python代码: # kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE,(3 ...

  3. HTML5结构化标签

    一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...

  4. HTM5新增结构化元素&非结构化元素&新增属性详解

    (1)HTML5 新增的主体结构元素 (2)HTML5 新增的的非主体结构元素 (3)HTML5 表单新增元素与属性 (4)HTML5 改良的 input 元素的种类

  5. XHTML 结构化：使用 XHTML 重构网站

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

  6. XHTML 结构化：使用 XHTML 重构网站 分类： C1_HTML/JS/JQUERY 2014-07-31 15:58 249人阅读 评论(0) 收藏

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

  7. HTML5结构元素

    前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...

  8. HTML5 常用的结构化标签整理

    一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...

  9. css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

随机推荐

  1. mssql函数demo

    ALTER FUNCTION [dbo].[f_GetCookType] (@saleDate datetime)RETURNS varchar(6)ASBEGIN declare @cookType ...

  2. C++学习笔记（十五）：异常

    C++之父Bjarne Stroustrup在<The C++ Programming Language>中讲到:一个库的作者可以检测出发生了运行时错误,但一般不知道怎样去处理它们(因为和 ...

  3. php中带mb的字符串处理函数

    int strlen ( string $string ) int mb_strlen ( string $str [, string $encoding ] ) encoding参数为字符编码.如果 ...

  4. Modernizr 与 Polyfill

    之前提到,Modernizr 是 HTML5 和 CSS3 的特性检测工具,这里简单介绍一下它的用法.最简单的用法是在页面的 <head> 中添加 Modernizr 的 JavaScri ...

  5. 搭架私有Git服务器Gogs

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:搭架私有Git服务器Gogs.

  6. 看文章《EAI和SOA的比较》有感(1)

    <EAI和SOA的比较>http://www.cnblogs.com/asdling/archive/2007/11/26/973100.html这篇文章写的很全面,至少自己这么认为,也解 ...

  7. nginx+tomcat动静分离的核心配置

    #所有jsp的页面均交由tomcat或resin处理 location ~ .(jsp|jspx|do)?$ { proxy_set_header Host $host; proxy_set_head ...

  8. [Bootstrap] 7. Working Herader

    <header class="navbar navbar-default navbar-static-top"> <div class="contain ...

  9. SQL Server 性能优化3 该指数（Index）保养

    前言 之前的一篇文章介绍了索引来提高数据库的查询性能,这其实仅仅是个开始.也许假设缺乏适当的保养,索引你以前建立的,甚至成为拖累,成为帮凶下降数据库的性能. 寻找碎片 消除碎片索引维护可能是最常规的任 ...

  10. 用 jQuery Masonry 插件创建瀑布流式的页面(转)

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...