这个是最简单的html5的一个布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xufei html5</title> <link href="../css/index.css" rel="stylesheet" type="text/css"> </head> <body> <div id='div1' class='content'> <header> <h1>Welcome to my homepage</h1> <p>My name is xufei</p> </header> <nav style='text-align: left'> <a href=''>test1</a> <a href=''>test2</a> <a href=''>test3</a> </nav> <div class='content'> content </div> <footer>This document was written in 2013/4/2</footer> </div> </body> </html>
@CHARSET "UTF-8";
body {
text-align: center;
}
.content {
width : 800px;
height: 400px;
border: 1px solid;
margin-right: auto;
margin-left: auto;
}
说明：
1，在 HTML5 中，文档类型声明 <!DOCTYPE html> 没有以前那么多了
2，引入外部css <link href="../css/index.css" rel="stylesheet" type="text/css">
可以没有 type, 但是必须有rel
3，<header> 页面上部<footer>页面下部，<nav>导航
4，body的样式 text-align:center 对 3的标签都起作用，但对div没有作用
5，<footer>虽然在 <div id='div1'>的内部，但却显示在他的外面
6，<nav style='text-align: left'> 在div1的内部 左侧，如果没有div1他就会在页面的左侧
这四个新元素：section、article、aside和nav，之所以说它们强大，原因在于它们代表了一种新的内容模型，一种HTML中前所未有的内容模型——给内容分区。迄今为止，我们一直都在用div来组织页面中的内容，但与其他类似的元素一样，div本身并没有语义。但section、article、aside和nav实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容，都可以拥有自己的概要、标题，自己的脚部。 其中最为通用的section，可以说是与内容最相关的一个。而article则是一种特殊的section。Aside呢，是一种特殊的section。最后，Nav也是一种特殊的section。
以上转自这个链接
http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html
相关推荐
HTML5是下一代网页标准，它的出现极大地扩展了Web应用程序的功能性，特别是在多媒体处理方面。相较于HTML4，HTML5引入了许多新特性，使得开发者能够更直接地在网页中嵌入音频和视频，无需依赖第三方插件如Flash。本...
在本篇“Html5小游戏----初探”中，我们将深入探讨HTML5游戏开发的基础知识。 首先，HTML5的核心在于其强大的新元素和API，使得开发者无需依赖Flash或其他插件即可创建动态内容。其中，Canvas是用于绘制2D图形的...
Html5开发PPT资料，参考别人，自己整理的
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，其文档扩展名为.html或.htm。HTML文件由一系列的元素组成，这些元素通过开始标签和结束标签来定义，比如`<html>`、`<head>`、`<body>`等。下面我们...
1. **什么是BFC**： BFC是一个独立的渲染区域，每个元素都会创建自己的BFC，内部的元素会按照一定的规则进行排列，不会影响外部元素的布局。BFC主要用于解决元素重叠、清除浮动等问题。 2. **创建BFC的条件**： -...
1. **HTML文档结构**：每个HTML文档通常以`<!DOCTYPE html>`声明开头，表明它是一个HTML5文档。接着是`<html>`标签，这是整个页面的根元素，包含两个重要的子元素——`<head>`和`<body>`。`<head>`用于定义文档元...
1.初探安全 00:36:48 2.网络安全法 00:17:13 3.提问的艺术 00:05:29 【二、环境搭建】 1.搭建phpstudy环境&hosts讲解&cdn讲解 00:24:32 3.搭建Kali Linux和Metasploitable2 00:28:14 【三、学习基础】 1.HTML基础 00...
ViewState的工作原理相当简单：在服务器端，当ASP.NET页面执行时，页面上所有控件的状态（比如Label控件的文本）会被序列化成一个加密的字符串，然后放入一个隐藏的HTML表单字段中。这个隐藏字段随着页面一起发送到...
该项目为家具设计领域的Html前端源码，整合了275个文件，涵盖73个PNG图片、61个JPG图片、57个Java源码、37个WOFF2字体、23个HTML页面、7个XML文件、5个CSS样式表、3个JavaScript脚本以及2个Git忽略文件和2个EOT字体...
"Weex 初探" Weex 是一款轻量级的移动端跨平台动态性技术解决方案，前身是WeApp，目标是Write Once, Run Everywhere。它借鉴了React Native的思想，并结合Web Component和Vue.js而诞生。Weex 使用V8引擎，官方支持...
JavaScript 初探 本资源主要介绍了 JavaScript 的基础知识，包括 JavaScript 的历史、引擎工作原理、组成、主要特点、相关应用等。同时，也涵盖了 JavaScript 编程的基本步骤，如选择 JavaScript 脚本编辑器、引入 ...
NodeJS初探已经让我们对NodeJS有了一个大致的了解，并通过实例演示了如何快速开启一个简单的服务器。本文是在此基础上进一步深入，通过构建一个更加完整的示例来全面理解NodeJS。在这个示例中，我们将构建一个简单的...
### PHP模板技术初探 #### 一、引言 在Web开发中，PHP作为一种流行的服务器端脚本语言，被广泛应用于动态网站的构建之中。PHP不仅支持强大的后端逻辑处理能力，同时也具备灵活的前端展示功能。而在实际项目中，...
同时，Java的Servlet和JSP技术则为Web应用程序开发提供了便利，它们可以用来处理HTTP请求，动态生成HTML页面。 Spring框架是Java开发中不可或缺的一部分。它提供了一种模块化的方式来管理应用程序的组件，包括依赖...
在"Extjs portal 应用初探"这个主题中，我们将深入探讨如何利用ExtJS构建门户应用。 首先，门户应用是一种组织和展示信息的框架，它允许用户自定义和个性化他们的工作环境。在ExtJS中，"portal"通常指的是Portlet...
【Nginx 作为动静分离、缓存与负载均衡初探1】 在现代Web服务架构中，Nginx因其高效、稳定以及丰富的功能而被广泛用作反向代理服务器、负载均衡器和静态内容服务器。本篇文章将探讨如何利用Nginx实现动静分离、缓存...
在Web开发的浩瀚宇宙中，JavaScript与HTML的结合犹如星辰间的引力，共同塑造着网页的动态面貌。今天，我们将通过经典的“Hello, World!”示例，揭开这两者间神秘的面纱，探索它们如何协同工作，点亮编程旅程的第一盏...
**EasyUI初探** EasyUI 是一款基于 jQuery 的前端用户界面框架，专为开发者提供一套易于使用、功能强大的组件库，使得开发具有专业外观和交互性的 Web 应用变得简单。EasyUI 提供了诸如窗口、表格、下拉菜单、按钮...
Moodle系统下模块开发初探 本文探讨了Moodle系统下模块开发的基础知识，涵盖了Moodle的介绍、模块化设计、模块开发流程、HTML块的创建和安装等方面的内容。通过本文，读者可以了解Moodle系统的基本概念、模块开发的...