HTML5标签的语义认知和理解(1)

标签: html5 标签 语义 | 发表时间:2012-02-19 03:55 | 作者:shyleoking
出处:http://blog.csdn.net

随着服务器的处理能力越来越大,互联网级开发终于开始全面火热(前几年我和很多人说,不要光关注所谓企业级开发,未来马上将进入互联网级开发),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的语义标签开始:

  1. 标签的分类方式很多,HTML4中我简单的将标签分为默认block和默认inline这种分法,和有语义以及无语义(样式标签不谈了)的分法。
  2.  除了div之外i,其他标签都是有语义的(声明下,类似font等样式标签我早就不算HTML4的使用中了),div的含义只是在逻辑上将一些标签视同为一组,可以共同处理
如果你同意我这样说,那么你也会同意我说,html5中很多新的基于结构的元素就是来替代div的,或者说可以替代一部分div的作用。这些元素用来说明元素区域和分组的用途。
原因是,未来的网页不仅仅是给PC上的浏览器看的,而且更多的要提供给移动设备,专有设备,小型设备上的浏览器来方便,而这些浏览器需要在不同的环境中重新处理页面内容,给予用户更好的阅读体验,所有页面的内容必须对浏览器提供有参考价值的指导,便于浏览器提供剪裁、突出和特定操作的处理。

所有的文档都应该有一个 header元素,特别是页面本身就是一个document对象,所以如果不是有特别的理由,你的页面的最上面的部分应该有一个header元素,其他的文章部分也可能会有header,要小心的是,避免 header被滥用, header表示的是一组介绍性或者导航性质的辅助文字,记住导航和介绍性这两个关键词。
所以,页面的最上面一个header应该包含一个导航的标签: nav。虽然好像没有必须的规定,但是我认为再 nav中只应该包含ol或 li元素,毕竟 nav的作用是导航,而导航应该是一组路径的集合。 header中还可以包含其他用于介绍的信息,比如首页的公司图标,公司名称,或产品主题页的产品名称神马的。
<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>
当然也可以这么下
<body>
    <header>
        <h1>
            <img alt="logo" />
        </h1>
        <nav>
            <ol>
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
            </ol>
        </nav>
    </header>
</body>

随便说一下,HTML5中继续保留了 olul,我个人的建议是吧那些解释差异很复杂的同类元素去掉,比如保留 abbr放弃acronym,可惜 olul都保留下来了,不过我建议用 ol
对于文档型页面来说,比如blog的主页,有主标题和副主标题,那可以在 header中用 hgroup元素来处理
    <header>
        <h1>
            像蚂蚁一样工作,像蝴蝶一样生活
        </h1>
        <h2>
            记录成长的点滴
        </h2>
        <p>
            类似后面文章的前言部分啦</p>
    </header>
文档本身可以用 article元素来标记, article可以描述整篇文章和其包含的所有信息。往往 article中也包含了 header(我说的是往往)或者 hgroup(这个倒真的不一定需要用)。
对于 article是不是需要 header,有这么几个方式可以判断,是不是有 H和一些描述共同组合页眉信息?如果只有 H,没有其他描述,那就不必用 header
    <article>
        <h1>
            标题
        </h1>
    </article>
如果,有主副标题,但没有说明性描述,那直接 hgroup也可以
    <article>
        <hgroup>
            <h1>
                主标题
            </h1>
            <h2>
                副标题
            </h2>
        </hgroup>
    </article>
现在应该对 header更有感觉了,是为了向浏览器描述出,哪些是文档的页眉区。
今天就道这里,累死了,明天继续扯HTML元素的理解和认知,对呀HTML5的理解我遵守的原则是:自圆其说,不勉强。一个元素我们要弄明白在哪里用是最合适的,要用的有道理了,哎睡觉了。


















作者:shyleoking 发表于2012-2-19 11:55:39 原文链接
阅读:15 评论:0 查看评论

相关 [html5 标签 语义] 推荐:

HTML5废弃的特性及部分标签语义

- mingelz - W3C标准WEB前端DHTML精英俱乐部
如果页面中存在以下情况,在做规范检测时将遇到警告信息. border属性不应该继续出现在img元素中;. border如果出现在img元素中,其值必须为0;. language属性不应该继续出现在script元素中;. language如果出现在script元素中,其值必须为"JavaScript";.

HTML5标签的语义认知和理解(2)

- - CSDN博客推荐文章
昨天说到了 nav元素,nav元素的确是描述导航,但这个导航应该是对本网站而言的,不应该将 nav用到对于外部的友情链接啊,收藏夹或什么的,总之,对元素来说,要实施他正确的语义才是我们要讨论和研究的事情. 我们可以用 article来描述页面想表达的实际内容,也就是说,这个内容页的核心信息. 你可以这样考虑,这个页面中绝对不能去掉的内容有哪些(比如屏幕大小不够,带宽不够,存储空间不够,在各种恶劣的环境下),这些绝对不能去掉的,代表本业务核心价值的信息,就可以用 article来描述.

HTML5标签的语义认知和理解(1)

- - CSDN博客推荐文章
随着服务器的处理能力越来越大,互联网级开发终于开始全面火热(前几年我和很多人说,不要光关注所谓企业级开发,未来马上将进入互联网级开发),HTML5的预热为前端技术带来了更多机会和热点. 我用的是VS2008开发工具,作为懒人(对于开发工具有强烈的依赖性,懒得记API单词,懒得多打字,懒得查手册)的代表,Intellisense 对我一直是非常重要的事情,我喜欢微软的开发平台,也就是应为VS开发工具有良好的高速的Intellisense 我才喜欢再微软的平台上开发,对于习惯用记事本的牛人,我一直内心仰慕但坚决不从.

HTML5文本元素的语义解释

- - 脚本爱好者
HTML 5: 文本语义元素. 文本语义元素 - a, em, strong, small, s, cite, q, abbr, time, code, var, dfn, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr.

说说HTML5中label标签的可访问性问题

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1809. 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框. 点击区域就鼻屎那么大的地方,经常会点不到位置. 因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的.

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

- - HTML5研究小组
<audio> 标签属性:. autoplay:自动播放. controls:浏览器自带的控制条. <video> 标签属性:. poster:视频封面,没有播放时显示的图片. autoplay:自动播放. controls:浏览器自带的控制条. 获取HTMLVideoElement和HTMLAudioElement对象.

【转载】HTML5的视频标签的一些须知

- - HTML5研究小组
HTML5在互联网的革新高潮的不断冲刷着新的记录. 其中,HTML5最重要的平衡就是在视频方面的支持达到了最佳,也就是说用户不需要安装额外的插件(在PC上或者其它的设备上)来实现视频的播放. 随着HTML5标注制定的不断完善,许多的哦开发人员和设计人员开始关注与实战新的编码标准,原因可能是新的标准缺乏实战和相应的实例示范.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.