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, 而用一些更明显的元素代替它们, 会让源代码更清楚而且更容易书写.
猜你喜欢
- 前言:python数据类型: python数据结构之数据类型.今天我们主要来介绍一些内置函数,比如输入输出,控制,和异常的用法,尤其是输出和
- 在我们处理文件的时候,会遇到这样的一种场景,我们需要对某个文件进行操作,然后生成与原文件名相同的文件(只是文件格式改变)。那么这个时候就可以
- 1. 获取时间1.1 当前时间获取package mainimport ( "
- api文档 https://sms-activate.org/cn/api2要使用SMSActivateAPI库从sms-activate.
- 该代码主要是基于python实现判断指定文件夹下是否存在指定后缀的文件。代码如下:import osYour_Dir='你的文件夹/
- 邹建 2004.4 代码如下:/*--调用示例 exec p_lockinfo1 --*/ alter proc p_lockinfo1
- 本文实例讲述了JavaScript DOM节点操作方法。分享给大家供大家参考,具体如下:使用DOM可以新建HTML元素,也可以删除已有的HT
- 老板由于事务繁忙无法经常亲临教研室,于是让我搞个监控系统,让他在办公室就能看到教研室来了多少人。o(>﹏<)o|||最初我的想法
- 常用的代码UPDATE `表名` SET `字段名`=ceiling(rand()*500000+500000) WHERE (条件);up
- 一、代码示例 window.open(url,'新窗口','width='+(window.screen.a
- 使用步骤:1、安装:npm i jquery-contextmenu --save-dev2、在main.js文件中引包 im
- 前言在github中经常可以看到下面的日历图,可以用来表示每一天在github上的活跃程度。类似的方法也可以用到空气质量的可视化方式中来,只
- PyQt5不规则窗口实现动画效果实例import sysfrom PyQt5.QtCore import *from PyQt5.QtGui
- 本文将介绍使用Dreamweaver来制作滑动菜单的方法,言归正传,废话少说。准备工作如下: 1. 在dw中新建一个空白文档(或者打开你要添
- py文件不是html文件,当然不能在浏览器里打开。py文件可以用任何编辑器打开,py文件是和txt一样都是普通的文本文件,只是python解
- app01/models.py:from django.db import modelsclass UserInfo(models.Mode
- 本文是OpenCV图像视觉入门之路的第11篇文章,本文详细的在图像形态学进行了图像处理,例如:腐蚀操作、膨胀操作、开闭运算、梯度运算、Top
- 前段时间做视频时需要演示电脑端的操作,因此要用到屏幕录制,下载了个迅捷屏幕录制,但是没有vip录制的视频有水印且只能录制二分钟,于是鄙人想了
- 如何在ADSI中查询用户属性?看看下面这个返回用户可用属性的代码实例,基本上返回了大部分可用的用户属性:<%Dim x&nb
- 本文详细介绍了asp中如何使用sql语句删除数据库中的记录,初学asp者来看看!1,首先要明确删除哪条记录无非还就是SQL语句了,比如对应到