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提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
简单谈谈favicon
2015/06/10 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
js Date概念详细介绍
2013/11/22 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
理解javascript回调函数
2014/12/28 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
Python实现邮件的批量发送的示例代码
2018/01/23 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Django中template for如何使用方法
2021/01/31 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
聚美优品励志广告词
2014/03/14 职场文书
工商管理本科生求职信
2014/07/13 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers