HTML5的结构和语义(1):前言


Posted in HTML / CSS onOctober 17, 2008

超文本标记语言(HTML)5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。

超文本标记语言(HTML)的开发到 1999 年 HTML 4 就停止了。万维网联盟(W3C)把重点转向将 HTML 的底层语法从标准通用标记语言(SGML)改为可扩展标记语言(XML),以及可缩放向量图型(SVG)、XForms 和 MathML 这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要(RSS)阅读器这类浏览器特性上。Web 设计人员开始学习使用异步 JavaScript XML(Ajax),在现有的框架下通过层叠样式表(CSS)和 JavaScript™ 语言建立自己的应用程序。但是在接下来的八年中,HTML 本身没有任何变化。

最近,它又复活了。三家重要的浏览器厂商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group(WhatWG)来开发传统 HTML 的新版本。最近,W3C 也注意到了这些活动,也启动了自己的新一代 HTML 项目,双方的成员有很多是相同的。这两个项目最终很可能合并。虽然很多细节还在争论之中,但下一版本 HTML 的大体轮廓已经清楚了。

Web 开发人员从 1999 年就一直期待 HTML 的新版本(通常称为 HTML 5,但是也称为 Web Applications 1.0),现在它终于发布了。它保持了 HTML 原来的特色:没有名称空间或模式。元素不必结束。浏览器会宽容地对待错误。p 仍然是 p,table 仍然是 table。

如果在 1999 年将一位 Web 开发人员冷冻起来,现在再解冻,那么他会遇到一些新的让人迷惑的元素。是的,他熟悉的元素(比如 div)仍然保留了;但是,HTML 现在还包含 section、header、footer 和 nav 等新元素。em、code 和 strong 仍然存在,但是增加了 meter、time 和 m。img 和 embed 仍然可用,但是还增加了 video 和 audio。但是,他仔细观察一下就会发现,这些元素实际上没什么区别。其中许多元素可能在 1999 年是开发人员需要而没有得到的。通过与他已经掌握的元素进行简单的类比,这些新元素都很容易理解。实际上,与 Ajax 或 CSS 相比,它们非常容易掌握。

最后,当他打开 300MHz 的笔记本(运行的是 Windows 98,也是在 1999 年冷冻起来的)时,他可能对 Netscape 4 和 Windows® Internet Explorer® 5 中显示的新页面效果很吃惊。当然,这些老式浏览器不认识新元素,会完全忽略它们,但是页面仍然会显示,内容仍然是完整的。

这并不是什么虚构的故事。HTML 5 的设计原则就是在不支持它的浏览器中能够平稳地退化。原因很简单:我们都是这样的 “原始人”。浏览器现在有选项卡、CSS 和 XmlHttpRequest,但是它们的 HTML 显示引擎仍然停留在 1999 年的水平。除了用户量大大增加之外,Web 其实在本质上没什么进步。HTML 5 考虑到了这一点。它目前为 Web 开发人员一些真正的好处,随着浏览器的缓慢升级,页面浏览者会逐渐享受到这些好处。

我们来看看 HTML 5 提供了什么。

(待续)

HTML / CSS 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 #HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 #HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 #HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 #HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 #HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 #HTML / CSS
HTML5 语义化结构化规范化
Oct 17 #HTML / CSS
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
PHP strtotime函数详解
2009/12/18 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
实例讲解Python3中abs()函数
2019/02/19 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
电子信息专业学生自荐信
2013/11/09 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2015毕业寄语大全
2015/02/26 职场文书
行政处罚决定书
2015/06/24 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL