这个是最简单的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图形的...
HTML(HyperText Markup Language)是用于创建网页的标准标记语言,其文档扩展名为.html或.htm。HTML文件由一系列的元素组成,这些元素通过开始标签和结束标签来定义,比如`<html>`、`<head>`、`<body>`等。下面我们...
Html5开发PPT资料,参考别人,自己整理的
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 脚本编辑器、引入 ...
如今,随着HTML5技术的成熟与普及,这款经典游戏再次出现在我们的面前,以一种全新的面貌与我们再次相遇。 HTML5的出现,让网页游戏得到了空前的发展,它不仅可以提供更加丰富的用户体验,还能在各种设备上流畅运行...
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 提供了诸如窗口、表格、下拉菜单、按钮...