|
|
|
|
| 网页设计中HTML5结构性标签介绍 |
| 作者:洛羽叶 点击率:1140 发布时间:2012-06-04 |
|
随着服务器的处理能力越来越大，互联网级开发终于开始全面火热（前几年我和很多人说，不要光关注所谓企业级开发，未来马上将进入互联网级开发），HTML5的预热为前端技术带来了更多机会和热点。
我用的是VS2008开发工具，作为懒人（对于开发工具有强烈的依赖性，懒得记API单词，懒得多打字，懒得查手册）的代表，Intellisense 对我一直是非常重要的事情，我喜欢微软的开发平台，也就是应为VS开发工具有良好的高速的Intellisense 我才喜欢再微软的平台上开发，对于习惯用记事本的牛人，我一直内心仰慕但坚决不从。VS2008对HTML5没有良好的支持的时候，我一直是光看不练，我的VS2008开始部分的支持HTML5了，至少element和CSS开发有了为懒人服务的Intellisense 了，亲，太高兴了，可惜，对DOM 的javasScript API还没有支持（哦，关于这个话应该怎么表达，和很多朋友有争论，你明白我的意思就可以，这个插件还不支持HTML5比如类似canvas.getContext这样的函数）。
下载了这个插件之后，我们可以在工具--选项中看到新的HTML5的验证架构，在页面开发环境中也可以算作目标验证架构师HTML5。同时开始支持对html标签和css的部分Intellisense 支持。
最早，也是最令人印象深刻，特别是对我这样的懒人而言，记得最深的就是初始化的html元素被简单到非常极致的情况了
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
我第一次听说不要写DOCTYPE中的内容后，是非常的激动啊，终于不要那些乱七八糟的东西了，不过转念一想，我好像也从来没有写过，都IDE帮我搞定的嘛，惭愧啊惭愧。
然后我们说HTML5的新元素，在了解新元素前，我想先说明下个人观点，对于标签的运用无论如何都是见仁见智的东西，标准是一个指导和参考意见，不同的人有不同的理解的哈利波特（莎士比亚我不是说你），我的理解从最初的HTML4的语义标签开始：
标签的分类方式很多，HTML4中我简单的将标签分为默认block和默认inline这种分法，和有语义以及无语义（样式标签不谈了）的分法。
除了div之外i，其他标签都是有语义的（声明下，类似font等样式标签我早就不算HTML4的使用中了），div的含义只是在逻辑上将一些标签视同为一组，可以共同处理
如果你同意我这样说，那么你也会同意我说，html5中很多新的基于结构的元素就是来替代div的，或者说可以替代一部分div的作用。这些元素用来说明元素区域和分组的用途。
原因是，未来的网页不仅仅是给PC上的浏览器看的，而且更多的要提供给移动设备，专有设备，小型设备上的浏览器来方便，而这些浏览器需要在不同的环境中重新处理页面内容，给予用户更好的阅读体验，所有页面的内容必须对浏览器提供有参考价值的指导，便于浏览器提供剪裁、突出和特定操作的处理。
所有的文档都应该有一个header元素，特别是页面本身就是一个document对象，所以如果不是有特别的理由，你的页面的最上面的部分应该有一个header元素，其他的文章部分也可能会有header，要小心的是，避免header被滥用，header表示的是一组介绍性或者导航性质的辅助文字，记住导航和介绍性这两个关键词。
所以，页面的最上面一个header应该包含一个导航的标签：nav。虽然好像没有必须的规定，但是我认为再nav中只应该包含ol或li元素，毕竟nav的作用是导航，而导航应该是一组路径的集合。header中还可以包含其他用于介绍的信息，比如首页的公司图标，公司名称，或产品主题页的产品名称神马的。
HTML
<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>
当然也可以这么下
HTML
<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中继续保留了ol和ul，我个人的建议是吧那些解释差异很复杂的同类元素去掉，比如保留abbr放弃acronym，可惜ol和ul都保留下来了，不过我建议用ol。
对于文档型页面来说，比如blog的主页，有主标题和副主标题，那可以在header中用hgroup元素来处理
HTML
<header>
<h1>
像蚂蚁一样工作，像蝴蝶一样生活
</h1>
<h2>
记录成长的点滴
</h2>
<p>
类似后面文章的前言部分啦</p>
</header>
文档本身可以用article元素来标记，article可以描述整篇文章和其包含的所有信息。往往article中也包含了header（我说的是往往）或者hgroup（这个倒真的不一定需要用）。
对于article是不是需要header，有这么几个方式可以判断，是不是有H和一些描述共同组合页眉信息？如果只有H，没有其他描述，那就不必用header了
HTML
<article>
<h1>
标题
</h1>
</article>
如果，有主副标题，但没有说明性描述，那直接hgroup也可以
HTML
<article>
<hgroup>
<h1>
主标题
</h1>
<h2>
副标题
</h2>
</hgroup>
</article>
现在应该对header更有感觉了，是为了向浏览器描述出，哪些是文档的页眉区
对于HTML5的理解我遵守的原则是：自圆其说，不勉强。一个元素我们要弄明白在哪里用是最合适的，要用的有道理。
前面说到了nav元素，nav元素的确是描述导航，但这个导航应该是对本网站而言的，不应该将nav用到对于外部的友情链接啊，收藏夹或什么的，总之，对元素来说，要实施他正确的语义才是我们要讨论和研究的事情。
我们可以用article来描述页面想表达的实际内容，也就是说，这个内容页的核心信息。你可以这样考虑，这个页面中绝对不能去掉的内容有哪些（比如屏幕大小不够，带宽不够，存储空间不够，在各种恶劣的环境下），这些绝对不能去掉的，代表本业务核心价值的信息，就可以用article来描述。一般来讲，内容总应该有一个标题，所以article往往会包含一个h标记，如果有多个h标记，或页眉描述，请参考前面的文章。
如果article的内容比较多，需要有章节之分（给用于小屏幕的移动浏览器，或阅读器提示可以分页什么的）我们可以用section来描述。section和p不同，p描述的是一个段落，以我的理解就是一个自然段，前面空两格，一个自然回车，组成了一个p，多个p组成了一个section，而且有可能多个p还可以外带一个h什么的。当然是文档，就会有可能有header和footer的存在了。比如：
HTML
<article>
<hgroup>
<h1>
主标题
</h1>
<h2>
副标题
</h2>
</hgroup>
<section>
<h1>
第一章</h1>
<p>
自然段</p>
<p>
自然段</p>
<p>
自然段</p>
<p>
自然段</p>
</section>
<section>
<h1>
第二章</h1>
<p>
自然段</p>
<p>
自然段</p>
<p>
自然段</p>
<p>
自然段</p>
</section>
<footer>
<time>发表日期</time>
</footer>
</article>
上面这些元素中，用的比较灵活的是section，section描述的是一段独立的文本，其也可以包含article元素，马上我们就可以看到；section也可以描述一些简单的独立文本信息，这个时候它类似span元素。
在页面中那些附属的信息，比如广告，看了这篇文章的人也看了以下文章，相关产品啥的，这些有关联又不是正文的内容，我们用aside来描述。aside中的内容可以用ol和ul列出，也可以用article或section较为详细的描述。
HTML
<aside>
<article>
<header>
<h1>
向你推荐</h1>
<h2>
喜欢这篇文章的人还喜欢……</h2>
</header>
<ol>
<li>
<section>
<article>
<h1>
文章标题</h1>
<section>
<p>
摘要</p>
</section>
</article>
</section>
</li>
<li>
<section>
<article>
<h1>
文章标题</h1>
<section>
<p>
摘要</p>
</section>
</article>
</section>
</li>
</ol>
<footer>
<article>
<h1>
其他更多推荐</h1>
<ol>
<li>推荐1</li>
<li>推荐2</li>
<li>推荐3</li>
</ol>
</article>
</footer>
</article>
</aside>
上面的代码描述了推荐两个有摘要的文章，和三个简单列表，当然列表中可以有链接。
现在所有的页面都会有图片，没有图片纯文字的页面设计非常少见了。在html4中我的理解是，如果图片代表了具体含义（该图片的存在与否会对页面的数据造成信息缺失）比如：广告图片（没有的话，广告商会很生气），公司logo，产品照片或用于对信息描述的照片，这些元素需要用img来描述，如果你认可这点，就应该明白为什么img强制需要alt属性了，在意外情况下，用户也应该从alt信息中获取你本来需要表达的数据信息。如果图片是提示性含义，比如箭头，hot，装饰性的，那用div的背景来处理，如果浏览器在特定设备上忽略这些元素，对页面本身的信息表达也没有影响。
原先的img虽然有alt属性，不过alt的属性不是显性的表现出来的，但一般出版网的规范是图片下面有一个关于图片的说明，html5现在是彻底的要要page真正的变成document，所以给出了一个新的描述标签figure。这是一个很好的标签，可以对文档内的图片给出独立的数据区域和和说明。
HTML
<figure>
<img alt="" />
<img alt="" />
<img alt="" />
<img alt="" />
<figcaption>这四个产品是我们最新的……</figcaption>
</figure>
要注意的是，figure希望内容是可以被描述或应该被描述的，而且描述的信息应该是和文档主题内容有关的，所以公司的logo显然不适合使用figure描述。如果你的文章中的配图和正文的主要内容也没有很多关联，比如弄了一个风景或人物照片仅仅是意境方面的，而不是描述文章中人物或地点的，那也不需要用figure元素，直接考虑img或div好了。
另外一个问题就是，在VS2008的HTML5验证中figcaption元素不支持。
还有就是figure不仅仅是描述图片，主要是描述信息流，所以figure应该可以包含描述图片，报表什么的。
这些HTML5提供的新的结构性的语义标签，基本上不是用来定义新的语义，都是用来定义新的语义区域，对阅读者来说没有什么大的意义，应该还是W3C的最初愿望，element定义是为了设备准备的，应该能让浏览器可以正确的了解你的信息，以便在特定的场合进行优化处理。
|
|
|
|
|
|
|
上一篇
下一篇
All Rights Reserved