HTML5标签的语义认知和理解(1)
随着服务器的处理能力越来越大,互联网级开发终于开始全面火热(前几年我和很多人说,不要光关注所谓企业级开发,未来马上将进入互联网级开发),HTML5的预热为前端技术带来了更多机会和热点。
我用的是VS2008开发工具,作为懒人(对于开发工具有强烈的依赖性,懒得记API单词,懒得多打字,懒得查手册)的代表,Intellisense 对我一直是非常重要的事情,我喜欢微软的开发平台,也就是应为VS开发工具有良好的高速的Intellisense 我才喜欢再微软的平台上开发,对于习惯用记事本的牛人,我一直内心仰慕但坚决不从。VS2008对HTML5没有良好的支持的时候,我一直是光看不练,直到我看到了“ HTML 5 intellisense and validation schema for Visual Studio 2008 and Visual Web Developer”之后,我的VS2008开始部分的支持HTML5了,至少element和CSS开发有了为懒人服务的Intellisense 了,亲,太高兴了,可惜,对DOM 的javasScript API还没有支持(哦,关于这个话应该怎么表达,和很多朋友有争论,你明白我的意思就可以,这个插件还不支持HTML5比如类似canvas.getContext这样的函数)。
下载了这个插件之后,我们可以在工具--选项中看到新的HTML5的验证架构,在页面开发环境中也可以算作目标验证架构师HTML5。同时开始支持对html标签和css的部分Intellisense 支持。
最早,也是最令人印象深刻,特别是对我这样的懒人而言,记得最深的就是初始化的html元素被简单到非常极致的情况了
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>我第一次听说不要写DOCTYPE中的内容后,是非常的激动啊,终于不要那些乱七八糟的东西了,不过转念一想,我好像也从来没有写过,都IDE帮我搞定的嘛,惭愧啊惭愧。
然后我们说HTML5的新元素,在了解新元素前,我想先说明下个人观点,对于标签的运用无论如何都是见仁见智的东西,标准是一个指导和参考意见,不同的人有不同的理解的哈利波特(莎士比亚我不是说你),我的理解从最初的HTML4的语义标签开始:
- 标签的分类方式很多,HTML4中我简单的将标签分为默认block和默认inline这种分法,和有语义以及无语义(样式标签不谈了)的分法。
- 除了div之外i,其他标签都是有语义的(声明下,类似font等样式标签我早就不算HTML4的使用中了),div的含义只是在逻辑上将一些标签视同为一组,可以共同处理
<body> <header> <img alt="logo" /> <h1> *****公司</h1> <nav> <ol> <li>导航1</li> <li>导航2</li> <li>导航3</li> <li>导航4</li> <li>导航5</li> </ol> </nav> </header> </body>
<header> <h1> 像蚂蚁一样工作,像蝴蝶一样生活 </h1> <h2> 记录成长的点滴 </h2> <p> 类似后面文章的前言部分啦</p> </header>文档本身可以用 article元素来标记, article可以描述整篇文章和其包含的所有信息。往往 article中也包含了 header(我说的是往往)或者 hgroup(这个倒真的不一定需要用)。
<article> <h1> 标题 </h1> </article>如果,有主副标题,但没有说明性描述,那直接 hgroup也可以
<article> <hgroup> <h1> 主标题 </h1> <h2> 副标题 </h2> </hgroup> </article>现在应该对 header更有感觉了,是为了向浏览器描述出,哪些是文档的页眉区。