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

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. idhttp.post方式 调用datasnap rest 远程方法

    idhttp.get方式调用,这种比较简单,大家都会.post方式网上却没有任何成功的代码,本人也是摸索了一个上午才搞定. 分享给大家. (1)post方式调用的远程方法,方法名必须加“update” ...

  2. [iOS基础控件 - 6.5] UITableView的数据刷新

    A.需求 1.以LOL英雄列表为蓝本,给其加上实时修改英雄名称的功能 2.使用UIAlertView 3.全局刷新reloadData 4.局部刷新     B.实现 1.使用UIAlertView ...

  3. [OC Foundation框架 - 9] NSMutableArray

    可变的NSArray,可以随意添加OC对象   1.创建 void arrayCreate() { NSMutableArray *array = [NSMutableArray arrayWithO ...

  4. Winfrom treeview 如何从多个数据表中获取数据动态生成

    本文转载:http://www.cnblogs.com/VincentLuo/archive/2008/03/29/1128987.html 在 汪洋怡舟的这篇文章中[http://www.cnblo ...

  5. spring mvc处理json

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. cocos2d-x 动画加速与减速

    转自:http://novacreo.com/%E7%A8%8B%E5%BA%8F%E7%BB%84/cocos2d-x%E5%8A%A8%E7%94%BB%E5%8A%A0%E9%80%9F%E4% ...

  7. Android 3D emulation 架构理解

    Android Emulator 给用户提供  GPU on 选项,意思是利用 Host ( 就是执行 Emulator 的PC机) 的 GPU. 当然PC机必须把 OpenGL 的驱动装好 在实现上 ...

  8. 【转】C++对象内存分配问题

    原文:http://blog.csdn.net/c504665913/article/details/7797859 如果一个人自称为程序高手,却对内存一无所知,那么我可以告诉你,他一定在吹牛.用C或 ...

  9. MySQL to Redis

    [TOC] 简介 使用mysql2redis可以非常便捷的将mysql中的数据导出到redis中去, 通常是需要一个select语句即可实现. 软件安装 // 安装apr + apr-util $ w ...

  10. Web应用Word生成

    前段时间接到一个Web应用自己主动生成Word的需求,现整理了下一些关键步骤拿来分享一下. 思路:(注:这里仅仅针对WORD2003版本号.其他版本号大同小异.) 由于WORD文件内部的数据及格式等是 ...