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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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 图片上传类代码
2009/07/17 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python实现猜单词小游戏
2020/05/22 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
财产保全担保书范文
2014/04/01 职场文书
妇女干部培训方案
2014/05/12 职场文书
政治学求职信
2014/06/03 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
个人总结格式范文
2015/03/09 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
会计实训总结范文
2015/08/03 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
如何Tomcat中使用ipv6地址
2022/05/06 Servers