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实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
第十节--抽象方法和抽象类
2006/11/16 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python实现宿舍管理系统
2019/11/22 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
恒华伟业笔试面试题
2015/02/26 面试题
开业庆典邀请函
2014/01/08 职场文书
英语感恩演讲稿
2014/01/14 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
市场开发计划书
2014/05/07 职场文书
小学课外活动总结
2014/07/09 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
vue3不同环境下实现配置代理
2022/05/25 Vue.js