HTML 5 预览
作者:zhaozy 来源:蓝色理想 发布时间:2008-01-24 12:17:00
作者:Lachlan Hunt
概要
网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来到我们身边已经差不多有10年了, 发行者们不断的寻求提供更强大的功能的新技术, 但是常会因为标记语言和浏览器的约束而路途坎坷.
为了给作者们提供更灵活, 更具互操作性, 能有更多交互性并令人振奋的网站和应用程序, HTML 5 引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs), 多媒体, 结构化和语义化.
HTML 5的工作, 开始于2004年, 在 W3C HTML WG 和 WHATWG 的共同努力下现在正在全面贯彻落实. 很多关键角色参与了W3C的努力, 最具代表性的是4大浏览器厂商: Apple, Mozilla, Opera, Microsoft; 还有一系列的有着不同利益和专业技术的其他机构以及个人.
编写详细规范的工作还在进行中, 离完成还有很长的路要走. 同样的, 在这篇文章中讨论的功能不排除在未来有所改动的可能. 这篇文章只是以大纲的形式介绍一些在当前的草案中的主要的特性.
结构
HTML 5 引入了一整套全新的元素来让构建页面变得更加简单. 大多数基于HTML 4的页面的包含多种常用结构, 比如说页首(header), 页脚(footer)和纵列(column). 现阶段我们通常会用div元素标记这些区块, 然后为它们定义一个描述性的id或是class.
图表说明一个典型的用div元素带上id和class属性标记的2栏布局. 其中包括页首(header)和页脚(footer), 在页首下面是一个水平导航条, 主体内容又包含了文章(article)和它右边的侧边栏(sidebar).
大量的使用div元素是因为目前的HTML 4版本缺少更明确的语义描述这些区块所致. HTML 5 为了表现这些不同的区块而引入了新的元素.
那些div元素可以被新的元素代替了: header, nav, section, article, aside以及footer.
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
用这些新元素会有一些优势(相对于HTML 4). 当和标题元素(h1 - h6)一同使用时, 可以标记出嵌套的章节标题层次, 超越之前版本的HTML仅有的六个层次. 规范中包含了一份生成大纲的详细算法. 把结构化这些内容纳入考虑范围, 并仍旧向后兼容先前的版本. 这样可以在编辑工具以及浏览器中生成目录来帮助用户来浏览这个文档.
举例说明, 下面的标记结构使用了嵌套的章节和h1元素构成:
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
这里要注意, 为了更好的兼容现在的浏览器, 它也能在适当的位置利用其它的标题元素(h2 - h6)来代替h1元素.
通过辨别页面中的章节使用特殊章节元素的确切目的, 辅助的技术能帮助用户更容易的浏览这个页面. 举例, 他们能不费力的略过导航区块或者能快速的从一篇文章直接跳到下一篇而不需要作者提供跳转链接. 对于创作者来说, 在文档中去掉多余的div, 而用一些更明显的元素代替它们, 会让源代码更清楚而且更容易书写.
猜你喜欢
- 前言:项目的成就感来源于大家~~必须先感谢一切该感谢的人!(旁白:写了很多次设计实录分享,这次是最百感交集的一次,话多这习惯还大家海涵~嘻嘻
- 1.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(
- creatdoc.asp<!DOCTYPE HTML PUBLIC "-//W3C/DTD&n
- 需求:用SQL语句随机从数据库中随机取N条数据。以前不太清楚SQL语句可以直接随机取数据今天查了一下,发现有两个随机函数: newid()
- ChatGPT 是 OpenAI 开发的 GPT(Generative Pre-trained Transformer)语言模型的变体。它是
- asp如何将RGB颜色转化成到16进制的?在R G B中输入小于255的数字点击观看即可转换成#开通的16进制。代码如下:<%R_RG
- 首先恭喜月影,当然希望好书大卖!原文提供了样章下载1.1M,pdf格式的。如果大家想下载可以访问源地址:http://bbs.51js.co
- 代码如下:'===================================== '获取内容中所有图片 '==
- banner 设计会严重影响广告投放效果,在此建议相关设计人员,在设计FLASH BANNER的时候考虑到以下问题.1.
- 1) 用正式表达式 regexp "[u0391-uFFE5]"2) 用length和char_lengthdrop t
- 和大多数的语言脚本一样,学习ASP最好的方法就是亲身尝试ASP,使用你自己的系统安装PWS或者IIS。你可以边学习边在你自己的服务器上测试A
- 在向大家详细介绍Linux mysql之前,首先让大家了解下Linux mysql,然后全面介绍Linux mysql,希望对大家有用。1.
- 实际上,在web开发中,cookie仅仅是一个文本文件,当用户访问站点时,它就被存储在用户使用的计算机上,其中,保存了一些信息,当用户日后再
- 不知道写得对不对啊!错了再改吧!加密函数Function Encodestr(s,xorstr)Dim enFor&nb
- 一:创建迁移在laravel中使用make:migration命令来创建迁移php artisan make:migration creat
- 今天网页调试的时候在线订单出现错误:Server 对象 错误 'ASP 0178
- 建立资料表:Step1首先开启phpmyadmin,进入wordpress资料库中,并新增一个wp_gbook的资料表与栏位数目8。Step
- 设计,用户说好,才是真的好!14期的友商联线,同事认为风格不美观,需要重新设计。这次,我们引入了用户调研,调研数据可以帮助我们快速决策!ED
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 22 - Fx.Elements通过
- 没有多大变动,主要是返回错误信息,以便调用函数部分可以alert出来。据说可以用正则表达式校验,下次再研究下。//-------------