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

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. nyoj 16 矩形嵌套

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a& ...

  2. nyoj 448 寻找最大数

    寻找最大数 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比如当n=920813467185 ...

  3. JQuery事件处理的注意事项

    1.jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式. 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号. jQuery 使用 ...

  4. Tomcat服务器配置文件uri编码设置

    <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" ...

  5. CSS文本与文字

    -255之间 14.2 CSS中的文字属性 属性名称                    属性值                       说明 font-style          norma ...

  6. 【Stage3D学习笔记续】山寨Starling（九）：上下文丢失处理方法

    Stage3D在运行中是存在随时会丢失上下文的尴尬情况. 渲染内容丢失的问题本身就说明是因为丢失了Context3D对象.出现此问题的原因很多,通常还不是因为Stage3D应用.比如在win7系统中, ...

  7. C++学习笔记（八）：函数重载、函数指针和函数对象

    函数重载 函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数.重载函数通常用来命名一组功能相似的函数,这样做减少了函数名的数量,避免了名字空间的污染,对于 ...

  8. ios之runtime学习

    今天学习了一下ios的runtime,看了其他博主的博客写的很不错,自己就不班门弄斧了,仅在此转载: 1.关于oc中类和元类:http://husbandman.diandian.com/post/2 ...

  9. Scribefire发CSDN博客

    历史 在非常久非常久曾经,CSDN是支持外部工具来写文章的,但是在还有一个非常久非常久曾经就不行了. 突然看到CSDN有能够用外部工具来写博客了(CSDN的公告),一直以来都纠结这个问题,CSDN的编 ...

  10. 【转】如何从零开始学会 Ruby on Rails?

    文章转自:http://huacnlee.com/blog/how-to-start-learning-ruby-on-rails/ 这个话题曾经给身边的很多朋友说过同样的话题,这里整理以下. 如果你 ...