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 相关文章推荐
css3图片边框border-image的用法
Jun 30 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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 array_search() 函数使用
2010/04/13 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP7 新增功能
2021/03/09 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
Python MD5文件生成码
2009/01/12 Python
Python中操作MySQL入门实例
2015/02/08 Python
python机器人行走步数问题的解决
2018/01/29 Python
django创建简单的页面响应实例教程
2019/09/06 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
销售自我评价
2013/10/22 职场文书
高三地理教学反思
2014/01/11 职场文书
物理教学随笔感言
2014/02/22 职场文书
爱护公共设施标语
2014/06/24 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
面试感谢信范文
2015/01/22 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
python 实现图片特效处理
2022/04/03 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript