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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
HTML中link标签属性的具体用法
May 07 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制作新闻系统的思路
2006/10/09 PHP
PHP查询快递信息的方法
2015/03/07 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
《颐和园》教学反思
2014/02/26 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
学生评语集锦
2015/01/04 职场文书
公司租车协议书
2015/01/29 职场文书
行政助理岗位职责
2015/02/10 职场文书
客户付款通知书
2015/04/23 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书