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进度条效果
Feb 22 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP连接access数据库
2015/03/27 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
浅析python参数的知识点
2018/12/10 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
自我鉴定书范文
2013/10/02 职场文书
应届生煤化工求职信
2013/10/21 职场文书
就业自荐书
2013/12/05 职场文书
12岁生日演讲稿
2014/05/14 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
增员口号大全
2014/06/18 职场文书
同学聚会通知书
2015/04/20 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书