小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说，人们在书写包括HTML在内的文档时，习惯上按照类似于“章——节——小节”这样的层次结构来进行。
在HTML4中的描述方式：
<html>
<head> </head>
<body>
<h1>第一章 小强的HTML5移动开发之路</h1>
<h2>1.1 HTML5概述</h2>
<h3>1.1.1 HTML5是什么？</h3>
<h3>1.1.2 HTML5和HTML4的区别</h3>
<h2>1.2 HTML5快速入门</h2>
<h3>1.2.1 HTML与XHTML</h3>
</body>
</html>
上面代码，勉强可以看出文档的主体结构。但是在比较复杂的页面中，这种结构很难看出来，所以就出现了如下写法：
<html>
<head> </head>
<body>
<div>
<h1>第一章 小强的HTML5移动开发之路</h1>
<div>
<h2>1.1 HTML5概述</h2>
<div>
<h3>1.1.1 HTML5是什么？</h3>
</div>
<div>
<h3>1.1.2 HTML5和HTML4的区别</h3>
</div>
</div>
<div>
<h2>1.2 HTML5快速入门</h2>
<div>
<h3>1.2.1 HTML与XHTML</h3>
</div>
</div>
<div>
</body>
</html>
在HTML5中，为了使文档结构更加清晰，更容易理解，增加了很多具有语义性的专门用来划分文档结构的元素。
section元素：section元素是对页面文档结构进行划分的最基本也是最主要的结构元素，主要用来对网站 或应用程序的页面上的内容进行层次结构上的划分。一个section元素通常由内容及其标题构成。
<html>
<head> </head>
<body>
<section>
<h1>第一章 小强的HTML5移动开发之路</h1>
<section>
<h2>1.1 HTML5概述</h2>
<section>
<h3>1.1.1 HTML5是什么？</h3>
</section>
<section>
<h3>1.1.2 HTML5和HTML4的区别</h3>
</section>
</section>
<section>
<h2>1.2 HTML5快速入门</h2>
<section>
<h3>1.2.1 HTML与XHTML</h3>
</section>
</section>
<section>
</body>
</html>
使用section元素的时候要注意：
1、不要将section元素与div元素混淆使用。当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div.
2、通常不建议为哪些没有标题的内容使用section,可以使用HTML5轮廓检测工具来检测（http://gsnedders.html5.org/outliner/）
article元素：article元素代表文档、页面或应用程序中的所有“正文”部分，它描述的内容应该是独立的、完整的、可以独自被外部引用的，可以使一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评价、一个独立的插件，或任何独立于上下文中其他部分的内容。
在一个section元素或者article元素中，应该只有一个标题，如果有两个标题，则第二个标题会被隐式放入一个新的section元素之内，如下面的代码所示，h2元素之后的内容会被隐式放入一个新的section元素内。
<article>
<h1>标题</h1>
<!--隐式创建出一个新的section元素-->
<h2>副标题</h2>
</article>
nav元素：nav元素是一个可以作为页面导航的链接组。一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。在nav元素中，一般以ul列表的形式来具体放置改组链接元素。
aside元素：aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他别于主要内容的部分。
下面来实现一个博客主页例子：
界面布局如下：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>阳光小强的博客</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<link href="main.css" type="text/css" rel="stylesheet"/>
<div id="blog">
<header id="bloghead">
<div id="blogTitle">
<h1 id="blogname">阳光小强的博客</h1>
<div id="bloglink">
http://blog.csdn.net/dawanganban
</div>
</div>
<nav id="blognav">
<ul id="blognavInfo">
<li>
<a href="http://blog.csdn.net/dawanganban" id="on">主页</a>
</li>
<li>
<a href="#">博文目录</a>
</li>
</ul>
</nav>
</header>
<div id="blogbody">
<div id="column_1">
<aside>
<section>
<header>
<h1>个人资料</h1>
</header>
<div id="connBody1">
<div>
<figure>
<img src="image\head.jpg">
<figcaption>阳光小强的博客</figcaption>
</figure>
</div>
<div id="divSpecial">
<p>本人目前从事移动互联网开发，希望结识更多朋友</p>
<p>推荐专栏：</p>
<p>
<a target="_blank"
href="http://blog.csdn.net/column/details/dawanganban-html5.html">
小强的HTML5移动开发之路
</a>
</p>
<p>联系方式：739299362</p>
</div>
</div>
<div id="connFoot1"></div>
</section>
<section id="conn2">
<header id="connHead2">
<h1>分类</h1>
<span id="edit1">
<a href="javascript:;"
onclick="window.CateDialog.show();return false;">
[<cite>管理</cite>]
</a>
</span>
</header>
<div id="connBody2">
<nav id="classList">
<ul>
<li id="dot1">
<a target="_blank" href="#">全部博文</a>
<em>(62)</em>
</li>
<li id="dot2">
<a href="#" target="_blank">HTML5</a>
<em>(40)</em>
</li>
<li id="dot3">
<a href="#" target="_blank">HTML5</a>
<em>(40)</em>
</li>
<li id="dot4">
<a href="#" target="_blank">HTML5</a>
<em>(40)</em>
</li>
<li id="dot5">
<a href="#" target="_blank">HTML5</a>
<em>(40)</em>
</li>
</ul>
</nav>
</div>
<div id="connFoot2"></div>
</section>
<section id="conn3">
<header id="connHead3">
<h1>评论</h1>
</header>
<div id="connBody3">
<nav id="zComments">
<ul id="zCommentsUl">
<li id="commentsCell_linedot1">
<div id="commentsH1">
<span id="commentsName_txtc_dot1">
<a href="#" target="_blank" title="随风">
随风
</a>
</span>
<time datetime="2014-03-31T16:59">03-31 16:59</time>
</div>
<div id="commentsContants1">
<div id="commentsContantsTxt1">
<a href="#" target="_blank">
博主，您好。为什么我在url中输...
</a>
</div>
</div>
</li>
<li id="commentsCell_linedot2">
<div id="commentsH1">
<span id="commentsName_txtc_dot1">
<a href="#" target="_blank" title="随风">
随风
</a>
</span>
<time datetime="2014-03-31T16:59">03-31 16:59</time>
</div>
<div id="commentsContants1">
<div id="commentsContantsTxt1">
<a href="#" target="_blank">
博主，您好。为什么我在url中输...
</a>
</div>
</div>
</li>
<li id="commentsCell_linedot3">
<div id="commentsH1">
<span id="commentsName_txtc_dot1">
<a href="#" target="_blank" title="随风">
随风
</a>
</span>
<time datetime="2014-03-31T16:59">03-31 16:59</time>
</div>
<div id="commentsContants1">
<div id="commentsContantsTxt1">
<a href="#" target="_blank">
博主，您好。为什么我在url中输...
</a>
</div>
</div>
</li>
<li id="commentsCell_linedot4">
<div id="commentsH1">
<span id="commentsName_txtc_dot1">
<a href="#" target="_blank" title="随风">
随风
</a>
</span>
<time datetime="2014-03-31T16:59">03-31 16:59</time>
</div>
<div id="commentsContants1">
<div id="commentsContantsTxt1">
<a href="#" target="_blank">
博主，您好。为什么我在url中输...
</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div id="connFoot3"></div>
</section>
</aside>
</div>
<div id="column_2">
<section id="conn4">
<header id="connHead4">
<h1>分类</h1>
<span id="edit2">
<a href="javascript:;"
onclick="window.CateDialog.show();return false;">
[<cite>管理</cite>]
</a>
</span>
</header>
<div id="connBody4">
<div id="bloglist">
<section>
<header>
<div id="blog_title_h1">
<h1 id="blog_title1">
<a href="#" target="_blank">
HTML5中新增number元素的ValueAsNumber属性
</a>
</h1>
<img title="此博文包含图片" src="image/head.jpg" id="icon1">
<time datetime="2014-03-31T18:30" pubdate>(2014-03-31 18:30)</time>
</div>
<div id="articleTag1">
<span id="txtb1">分类：</span>
<a target="_blank" href="#">HTML5</a>
</div>
</header>
<div id="content1">
<p> 在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
<p> 在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
<p> 在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
<p> 在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
<p> 在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
</div>
<footer id="tagMore1">
<div id="tag_txtc1">
<a href="#" target="_blank">阅读</a> |
<a target="_blank" href="#">评论</a> 还没有被转载|
<a href="javascript:;" onclick="return false;">收藏</a>
</div>
<div id="more1">
<span id="smore1">
<a href="#" target="_blank">查看全文</a>>>
</span>
</div>
</footer>
</section>
</div>
</div>
</section>
</div>
样式文件main.css
div#blog{
background-position:50% 0%;
background-image:url(image/blogb.png);
width:100%;
/*background-repeat:no-repeat;*/
}
ul{
list-style:none;
}
div#blogbody{
margin:0px;
}
[id^=column_]{
display:inline;
float:left;
overflow:hidden;
}
div#column_1{
margin-left:20px;
width:210px;
}
源代码下载：http://download.csdn.net/detail/lxq_xsyu/7125741
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构
分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- HTML5与HTML4的区别-----文档结构
HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句 HTML5仅规定了一种: <!DOCTYPE html> 2. ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- 小强的HTML5移动开发之路（49）——HTML5开发神器HBuilder
今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.dcloud.net.cn/ 一.新建文件 可以看到支持web app开发和普通网站前端开发,我们首先建立 ...
- 小强的HTML5移动开发之路（15）——HTML5中的音频
浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准. ...
- 小强的HTML5移动开发之路（20）——HTML5 Web SQL Database
来自:http://blog.csdn.net/dawanganban/article/details/18220761 一.Web Database介绍 WebSQL数据库API实际上不是HTML5 ...
- 小强的HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）
来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...
- 小强的HTML5移动开发之路（17）——HTML5内联SVG
来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
随机推荐
- Docker 内程序时间设置，很重要
原文:Docker 内程序时间设置,很重要 重要!!!!! 创建容器时候需要修改一个参数,设置tomcat的时区 -e TZ="Asia/Shanghai" -v /etc/loc ...
- Servlet 规范笔记—基于http协议的servlet
在上一章节,我们大概的描述了servlet的规范以及servlet和servlet容器的概念和用途,我们清楚的知道servlet容器提供了接收来自client端的请求,然后根据请求进行处理(如:执行对 ...
- ubuntu-工作环境配置（van）
我们平时用到的工具主要vim,retag_app,提交代码,以及一些常用命令,他们主要对应一下几个文件 1.vim ->.vimrc 2.代码提交->gitconfig 3.常用命令-&g ...
- 13.constexpr
#include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...
- ES5比较Jquery中的each与map 方法？
1.each es5: var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) ...
- 解决Win8/8.1无法正确识别USB3.0的问题
找一个USB3.0的移动硬盘到了手里竟然变成2.0的了!二了! 不能忍啊. 听说是快速启动的问题,但是开机速度快很诱人. 百度了其他解决方法,终于解决了. 下面摘录自: http://blog.csd ...
- Impala基础认知与安装
一.Impala简介 Cloudera Impala对你存储在Apache Hadoop在HDFS,HBase的数据提供直接查询互动的SQL.除了像Hive使用相同的统一存储平台,Impala也使用相 ...
- 基于mpvue的小程序项目搭建的步骤
mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...
- TPS54232-------电源管理芯片
TPS54232 DC DC开关稳压器 电源管理芯片 放大器俗称功放 注意看芯片的次序1~8是如何排布的,这个规律一般是固定的 也许我们整理多了就能发现引脚的宽度和长度都是规格好的. 下面是封装: 所 ...
- MySQL 概述和基础
# MySQL 概述 什么是数据库 存储数据的仓库 都有哪些公司在用数据库 金融机构.游戏网站.购物网站.论坛网站-- 提供数据库服务的软件 MySQL.Oracle.SQL Server.DB2.M ...