HTML4和HTMl5、CSS2和CSS3区别.docx

HTML5追加的新标签新千年以来，超文本标记语言（HTML）5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。HTML5的结构 section：这可以是书中的一章或一节，实际上可以是在 HTML 4 中有自己的标题的任何东西 header：页面上显示的页眉；与 head 元素不一样 footer：页脚；可以显示电子邮件中的签名 nav：指向其他页面的一组链接 article：blog、杂志、文章汇编等中的一篇文章必须分析标题的级别，才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示HTML 5 增加的块级元素：除了结构性元素之外，HTML 5 还增加了一些纯语义性的块级元素： aside figure dialogaside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。figure 元素代表一个块级图像，还可以包含说明。figure 元素不只可以显示图片。还可以使用它给 audio、video、iframe、object 和 embed 元素加说明。dialog 元素表示几个人之间的对话。HTML 5 dt 元素可以表示讲话者，HTML 5 dd 元素可以表示讲话内容。所以，在老式浏览器中也可以以合理的方式显示对话。HTML 5 增加的语义性内联元素HTML 4 用 5 个不同的内联元素表示略有差异的计算机代码：var、code、kbd、tt 和 samp。但是，它无法表示时间、数字等基本数值。HTML 5 提供了几个新的内联元素来满足非技术作者的需求。mm 元素表示文本被 “加上标志”，但是不一定要强调。可以把它想像成书中突出显示的一节。Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本，搜索词就被加上标志。例如，如果搜索 “Egret”，那么缓存的 Google 页面可能像下面这样：HTMl源代码bThe Great Egret (also known as the American Egret) is a large white wading bird found worldwide. The Great Egret flies with slow wing beats. The scientific name of the Great Egret is Casmerodius albus.timetime 元素表示一个时间值，比如 5:35 P.M., EST, April 23, 2007。例如：HTMl源代码I am writing this example at 5:35 P.M. on April 23rd. time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。它不要求对元素内容应用任何特定的格式。但是，每个 time 元素都应该有一个 datetime 属性，其中包含更适合机器识别的时间值，比如：HTMl源代码I am writing this example at 5:35 P.M. on April 23rd. metermeter 元素表示指定范围内的数字值。例如，可以用它表示薪水、投票给 Le Pen 的法国选民的百分比或考试分数。在这里，我使用 meter 标出 Software Development 2007 上一位 Google 程序员提供的数据：HTMl源代码An entry level programmer in Silicon Valley can expect to start around $90,000 per year. meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要求对元素内容应用任何特定的格式。但是，每个 meter 元素可以有最多 6 个属性，它们按照更适合机器识别的形式表示这个数量： value min low high max optimum这些属性都应该包含一个十进制数字。例如，期末考试的分数可以写成下面这样：HTMl源代码Your score was B+. progressprogress 元素表示一个正在进行的过程的状态，就像图形用户界面（GUI）应用程序中的进度条。例如，可以用它表示一个文件已经下载的百分比或者播放电影时的当前位置。下面这个进度控件表示下载已经完成了 33%：HTMl源代码Downloaded: 33% HTML5新增的内嵌的媒体引入一个新的 video 元素，用来嵌入任意视频格式.例如，可以用以下代码嵌入QuickTime 电影 “a Sora in Prospect Park”：HTMl源代码引入 audio 元素。例如，可以使用以下代码给 Web 页面加上背景音乐：HTMl源代码autoplay 属性指示浏览器在装载页面后立即开始播放，而不等待明确的用户请求引入了img元素，用来支持所有图片格式 。HTML5新增加的交互元素HTML 5 也被称为 Web Applications 1.0。为了实现这个目标，增加了几个为 Web 页面提供交互体验的新元素： details datagrid menu command这些元素都可以根据用户的操作和选择改变显示的内容，而不需要从服务器装载新页面。detailsdetails 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的摘要。details 元素的用途之一是提供脚注和尾注。例如：HTMl源代码The bill of a Craveris Murrelet is about 10% thinner than the bill of a Xantuss Murrelet. Sibley, 2000 Sibley, David Allen, The Sibley Guide to Birds, (New York: Chanticleer Press, 2000) p. 247 没有指定具体的显示方式。浏览器可以选用脚注、尾注和工具提示等方式。每个 details 元素可以有一个 open 属性。如果设置了这个属性，那么详细信息在最初就显示出来。如果没有设置这个属性，那么会隐藏它们，直到用户要求显示它们。无论是哪种情况，用户都可以通过单击一个图标或其他控件来显示或隐藏详细信息。datagriddatagrid 元素提供一个网格控件。可以用它显示树、列表和表格，用户和脚本可以更新这些界面元素。与之相反，传统的表格主要用来显示静态数据。datagrid 从它的内容（一个 table、select 或其他 HTML 元素）获得初始数据。这 个元素与常规表格的区别在于，用户可以选择行、列和单元格；把行、列和单元格折叠起来；编辑单元格；删除行、列和单元格；对网格排序；以及在客户机浏览器 中直接进行其他数据操作。可以用 JavaScript 代码监视更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持这个元素（清单 10）。menu和commandmenu 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它，但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中，menu 包含 command 元素，每个 command 元素引发一个操作。例如一个弹出警告框的菜单。HTMl源代码 还可以用 checked=checked 属性将命令转换为复选框。通过指定 radiogroup 属性，可以将复选框转换为单选按钮，这个属性的值是互相排斥的按钮的组名。除了简单的命令列表之外，还可以使用 menu 元素创建工具栏或弹出式上下文菜单，这需要将 type 属性设置为 toolbar 或 popup。label 属性提供菜单的标题。例如，清单 14 显示一个 Edit 菜单。HTML5中增加的标签元素 定义外部的内容，一般是文章类 定义 article 以外的内容,应该与 article 的内容相关。 定义声音，比如音乐或其他音频流。 定义图形，比如图表和其他图像。 命令按钮，比如单选按钮、复选框或按钮。 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。 定义元素的细节，用户可进行查看，或通过点击进行隐藏。 定义嵌入的内容，比如插件。 表示图表的字幕 表示图表的时候使用 定义 section 或 document 的页脚 定义 section 或 document 的页眉。 归结表示项的标题 定义生成密钥 用高光突出文档里相符合的文本 定义菜单列表。当希望列出表单控件时使用该标签。 定义度量（单位）。仅用于已知最大和最小值的度量。 定义导航链接的部分。 定义不同类型的输出，比如脚本的输出。 运行中的进程。可以使用 标签来显示 JavaScript 中耗费时间的函数的进程。 定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。 为媒介元素（比如 和 ）定义媒介资源。 在指定相关内容的文本 定义日期或时间，或者两者。 定义视频，比如电影片段或其他视频流。HTML5中将会禁止使用的标签元素 HTMl5简介 HTML4和HTMl5的区别，HTML5增加的内容 HTML5完整的代码例子原文转自：/html5/002.htmlCSS部分，以下内容从书上参考：超越CSS，p311至p312。CSS3中各个新增的模块！1：选择符模块2：印刷出版的分页媒体模块3：背景和边框模块4：多列布局模块5：高级布局模块6：媒体查询模块对于现在来说，最好也最有用的是1和3。对于1来说：我们经常做的斑马线表格，都是用 style=line-height: normal; word-wrap: break-word在CSS3中，选择符