<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header/footer</title>
    <style type="text/css">
        body{height: 708px}
        header{background: red;width: 100%;height: 10%}
        footer{background: red;width: 100%;height: 10%}
        #div0{width: 100%;height: 80%}
        #div1{width: 20%;height: 100%;float: left;background: #f0f0f0}
        #div2{width: 80%;height: 100%;float: left;background: #f8f8f8}
    </style>
</head>
<body>
    <!-- <pre>
    1类，控制页面内容；
    2类，辅助内容；
    布局新标签，注重内容不是注重形式，语义化，可控性，代码更加简洁，浏览器容易解析
    </pre> -->
<header>头部</header>
<div id="div0">
<div id="div1">侧边</div>
<div id="div2">主体</div>
</div>
<footer>底部</footer>
</body>
</html>

html5-新布局元素header，footer的更多相关文章

  1. 2.html5新布局元素

    1.html5的优点: ①对人友好,更加语义化,更直观,增加了代码的可读性. ②对计算机友好,浏览器更容易解析,搜索引擎更容易抓取文档内容. ③代码更加的简洁. 2.新增的布局标签: Article: ...

  2. html5 文档元素 header footer h1h2h4

    文档元素: 用于在页面的大布局, 区分各个主体和概念. 让整体清晰, 元素有语义, 进一步代替div 具体划分图示: (参考) <hgroup> <section> <n ...

  3. 【HTML5】HTML5新布局元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML5部分元素

    Document HTML4文档声明 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  5. html5新特性-header,nav,footer,aside,article,section等各元素的详解

    Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性.级块性元素.行内语义性元素和交互性元素四大类. 下面是对各标签的详解,section.he ...

  6. 解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  7. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  8. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  9. HTML5结构元素

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

随机推荐

  1. 终于碰到iOS对象集合深拷贝的坑

    从原始数组,拆分排列组合成新数组,同时给新的数组中的模型元素追加字段,数组的容量翻倍,如果不用深拷贝,后面追加的值就把前面的值覆盖了 UnitModel *model1 = [UnitModel ne ...

  2. 【Java】一台服务器配置多个Tomcat

    需求缘由 最近接收了一个新的工具业务:ipublish发布系统,刚接手这个业务的时候,发现每次发布新的代码 需要到群里告知大家,我要停服务几分钟,准备更新代码啦.这尼玛 哪个公司都不敢这么牛逼的和用户 ...

  3. 2018/05/02 每日一学Linux 之 .bash_profile和.bashrc的区别

    最近一直在学习其他,导致博客就疏忽了,很不好(其实就是自己懒了......). -- 为什么要使用 .bash_profile和.bashrc ? 在平常的使用中,有些文件夹或者命令很长,在执行时需要 ...

  4. webstorm背景颜色更改

    一.file --> settings 二.editor-->color scheme  然后右边下拉选择 三.apply -- > ok

  5. pandas基础

    1.相关库导入 2.创建数据结构 pandas 有两个重要的数据结构: Series 和 DataFrame 创建Series数组,代表一行或一列 创建DataFrame ,代表二维数组 第一种方式: ...

  6. 使用jquery.uploadify上传文件

    今天在网上找了一天,想要找到一个比较全的使用案例,结果发现基本上全是一个版本的... 我的问题主要是上传完成后,还需要将路径获取到,然后保存到数据库. 查了一下资料发现有这么一个参数onComplet ...

  7. 跨域的问题（nginx解决才是王道）

    跨域分为两类:一时get跨域,而是post跨域.常见的是三种: 一种是jsonp, $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/ph ...

  8. JDK源代码学习系列04----ArrayList

                                                                             JDK源代码学习系列04----ArrayList 1 ...

  9. 003-docker命令-远程镜像仓库命令,本地镜像管理命令

    1.远程镜像仓库 docker login/logout:查看 [不常用] docker push:查看 [不常用] docker search:从Docker Hub查找镜像 语法:docker s ...

  10. vux 是基于 WeUI 和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

    https://doc.vux.li/zh-CN/ https://vux.li/