HTML5 Episode.1

来源：互联网发布：云计算政务编辑：程序博客网时间：2024/05/14 18:09

刚刚测试完了一些OpenGL的代码，正好想休息下，加之不小心在朋友们的面前，小小的吹了个牛，所以既然也用了一段时间的HTML5写网页了，因此，应朋友们的要求，就慢慢来写一点有关HTML5的东西吧，这里的内容呢，基本上都是从自己的参考手册（买来的一本书）上总结下来的，各位有兴趣的看官可以看看。

说到HTML5和HTML4相比，最大的变化我觉得其实还是一些标签上的改动，以及CSS3（我也不是什么职业的网页开发，因此把CSS3也归类到了HTML5中，虽然我认为这是正确的）。

和HTML4相比，HTML5的语法相对而言松散了一些 —— 这点从HTML5中一改往常的

语句便可略窥一二。也因此可以说，在目前的HTML5中，不存在有效性检查。取而代之的，是根据规范来检查代码的一致性，所以，缺少正式的DTD文档也并无大碍。当然，一些基本的HTML规范也是必须遵守的，比如下面的代码，就是错误的（相信没有人会犯这种错误，除了第一次接触HTML的）：

....省略部分代码

<body>  <div class="header">下面缺失了body的结束标签</div>

<!-- </body> -- >

如上，至少，无论HTML5的规范目前仍在完善与否，这种错误，都是非常明显的。

另外，在HTML5中，松散的语法的回归，使得在HTML代码中，允许出现一些不太严谨的代码比如：

<p id=p1>金牌广告位招租</p> <!-- p1没有写在双引号内 --><ul> <li>正常情况下，我们会这么写</li> <LI>但是这么写也没问题</LI> <li>缺失右边也是</ul>

不过当然，我们也不推荐这种写法，何况咱们平时用的编辑器，都会自动帮我们补全这些标签，但至少目前而言，这是符合HTML5的标准的。不过这也并不意味着HTML5支持任何形式的标签，比如下面这样的：

<b><i>这样是错误的</b></i>

交叉的标签是不被允许的 —— 大家都做了这么久的HTML了，这种常识肯定没人会忘记，不过，为了避免我的某个朋友对我咬文嚼字，所以特别列出上面的错误，千万别和我纠结，说你不是说HTML5语法松散吗？为啥子这不行呢？另外，在HTML5中，不要使用自闭合标签，除非它是由某一些标记语言引入的（嗯，我的手册上是这么说的，我对此也没深究）。

之前也说到HTML5最大的改变之一，是删除了一些标签并添加了一些标签，虽然这些标签在未来一段时间内仍然会得到浏览器的支持，不过仍然建议使用CSS来代替它们，下面列出了那些被删除的标签 —— 我很想用HTML把他做成表格，不过第一次在博客写的这么详细，所以还没试过博客对博文内代码的支持 —— 看官们将就下吧：

删除的HTML标签 CSS的对应功能

        <basefont>              body{font-family:字体;font-size:字体大小}

        <big>                   font-size:larger

        <center>                根据具体情况选择text-align或margin:auto

        <font>                  font-family、font-size或font

        <s>、<strike>           text-decoration:strike

        <tt>                    font-family:monospace

        <u>                     text-decoration：underline

不过虽然上述标签已经不再使用，但是有些标签，例如small却仍然得到了保留，不过与

<span style="font-size:smaller">

一样，small标签不在用来表示文本字体变小了，而是用来表示使用了小号文本的内容，例如呈现小号字体或法律信息等。在HTML5中，同样还重新定义了一些标签，这里也会列出：

重新定义的标签新的意义

        <b>                 代表与一般文本不同的内联文本，通常是粗体，但是没有传递表示重要的意思

        <dd>                定义包含的文本，另外也可以与HTML5规范中删除的dialog标签一起使用

        <dt>                汇总细节，同上可以与dialog标签一起使用

        <hr>                表示主题结束，虽然外观仍是一条水平线

        <i>                 代表另外一种内联文本，表示与标准的文本不同，一般是斜体

        <menu>              重新定义以表示用户界面菜单，包括上下文菜单

        <small>             上面已经介绍过了，这里不再赘述

        <strong>            表示重要性，不再表示强调符号

上述列表中列出的只是一部分，因为太多，后面有机会再给大家一一罗列，除此之外，HTML5还删除了很多关于表现外观的特性，取而代之的是CSS，由于数目太多，这里仅仅只是列出来，详细的作用，大家可以百度下，或者购买我正在使用的参考手册，没办法，我也不想涉及版权问题（我用的手册是《HTML5 & CSS完全手册》）。

被从标签中删除的特性有：align,alink,background,bgcolor,border,cellpadding,cellspacing,char,charoff,clear,compact,frame,frameborder,height,hspace,link,marginheight,marginwidth,noshade,nowrap,rules,scrolling,size,text,type,valign,vlink,width

不过做了这么久的HTML，想必大家一般也不会在HTML代码中使用这些特性，至少我写代码的时候，我会更情愿把一些和效果有关的特性转移到CSS中，用CSS代替，另外还有一些被删除的旧标签，它们是：acronym,applet,dir,frame,frameset,isindex,noframes

同时加入了一些新的标签：

article：包含文档的子集，形成文档的一个独立部分，比如一篇博客，一篇文章等等

aside：这个貌似是很多HTML5程序员们喜欢的标签，总是看到他们的演示中出现这个标签，之所以这么说，是因为我还是喜欢用div，是不是很妥？不过这也说明了他的作用，其实和div差不多，主要用于包含与其他元素的内容有关的内容。

audio：如标签名字一样，这个标签是用来播放音频文件的，可以说这是HTML5中除了Video和Canvas外我最喜欢的标签之一了，再也不用用Flash播放流媒体了，快哉！

canvas：如上所说，他是也是我喜欢HTML5的原因之一，为何呢？因为他提供了我们在HTML5中自绘图案的功能，撇开了只能在IE中使用的蛋疼VML，妈妈再也不用担心我在网页上绘图了，虽然要用顺手你仍然需要点时间熟悉他，顺便说下，很多流行的绘图用js包都使是用它的，在支持HTML5的浏览器中，当然，只是我不太记得了，node.js？还是啥？

command：位于Menu标签中，定义用户可以调用的命令。

datalist：表示type="list"的input标签中，作为快速选项的数据项。

video：用于在网页中播放视频

嗯，三个我最喜欢的标签既然都介绍完了。。。唉。。。写的好累啊。。。下面的我还不太熟悉的就罗列一下吧，除了上面的新增标签外，还有下面这些：

details,figure,footer,header,hgroup,mark,meter,nav,output,progress,rp,rt,ruby,section,source,time

很多标签，就如其名一般，header和footer可以用作页面的头部与脚步，ruby是用来插入ruby代码的，section表示的是一个节点，好吧，就这么随便说一下吧先。。。另外就是一些在HTML5中新加入的新特性，当然，还是罗列下，把大概说说吧，具体的功能以后再和大家慢慢介绍，嗯，准确的说是日后的某一次HTML5专刊吧，下面吧这些新特性列出来，大家有兴趣可以自己试一下：

accesskey：定义通过键盘来访问标签的快捷键

contenteditable：如名，设置为true时，浏览器将允许用户编辑标签的内容，但不指定变化后的内容如何保存。

context-menu：定义menu标签的Dom id作为定义该标签特性的上下文菜单

tabindex：在使用键盘进行导航时，定义标签的遍历顺序

说了一些常用的新特性后，下面就列出一些至少我不怎么用的：

data-X（这个asp的同学们应该了解的比我多），draggable，hidden，itemid,itemprop,itemref,itemscope,itemtype,spellcheck

好了，本次就到这吧。。唉，脖子都要断了，后面可能还会继续编辑这篇文章完善一下内容，看情况吧