随着服务器的处理能力越来越大,互联网级开发终于开始全面火热(前几年我和很多人说,不要光关注所谓企业级开发,未来马上将进入互联网级开发),HTML5的预热为前端技术带来了更多机会和热点。

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。“<strong/>,<em/>用来区别于其他文字,起到了强调的作用
语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
语义 Web
技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。
1、什么是HTML语义化?
<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong
em)等等>
  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化?
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

我用的是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这样的函数)。

3、写HTML代码时应注意什么?
尽可能少的使用无语义的标签div和span;
在语义不明显时,既可以使用div或者p时,尽量用p,
因为p在默认情况下有上下间距,对兼容特殊终端有利;
不要使用纯样式标签,如:b、font、u等,改用css设置。
需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

 
下载了这个插件之后,我们可以在工具–选项中看到新的HTML5的验证架构,在页面开发环境中也可以算作目标验证架构师HTML5。同时开始支持对html标签和css的部分Intellisense
支持。
 
最早,也是最令人印象深刻,特别是对我这样的懒人而言,记得最深的就是初始化的html元素被简单到非常极致的情况了
 

** 4、HTML5新增了哪些语义标签,详述之。**
HTML 5的革新之一:语义化标签一节元素标签。
在HTML 5出来之前,我们用div
来表示页面章节,但是这些div
都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。
看下图没有用div标签来布局

1       <金沙城中心赌场 ,!DOCTYPE html>
2       <html>
3       <head>
4       <title></title>
5       </head>
6       <body>
7       </body>
8       </html>

金沙城中心赌场 1

我第一次听说不要写DOCTYPE中的内容后,是非常的激动啊,终于不要那些乱七八糟的东西了,不过转念一想,我好像也从来没有写过,都IDE帮我搞定的嘛,惭愧啊惭愧。

HTML 5的革新——语义化标签(一)

然后我们说HTML5的新元素,在了解新元素前,我想先说明下个人观点,对于标签的运用无论如何都是见仁见智的东西,标准是一个指导和参考意见,不同的人有不同的理解的哈利波特(莎士比亚我不是说你),我的理解从最初的HTML4的语义标签开始:

html5的布局

  1. 标签的分类方式很多,HTML4中我简单的将标签分为默认block和默认inline这种分法,和有语义以及无语义(样式标签不谈了)的分法。
  2. 除了div之外i,其他标签都是有语义的(声明下,类似font等样式标签我早就不算HTML4的使用中了),div的含义只是在逻辑上将一些标签视同为一组,可以共同处理

嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标)。
但是也不要因为html5新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用div的,就是因为div没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。
W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。
结论:不能因为有了HTML 5标签就弃用了div,每个事物都有它的独有作用的。
节点元素标签因使用的地方不同,我将他们分为:节元素标签文本元素标签分组元素标签分开来讲解HTML5中新增加的语义化标签和使用总结。
header元素
header 元素代表“网页”或“section”的页眉。通常包含h1-h6
元素或hgroup
,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav
,或者任何相关logo。
整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素

如果你同意我这样说,那么你也会同意我说,html5中很多新的基于结构的元素就是来替代div的,或者说可以替代一部分div的作用。这些元素用来说明元素区域和分组的用途。

<header> <hgroup> <h1>网站标题</h1>
<h1>网站副标题</h1> </hgroup></header>
header的示例代码


因是,未来的网页不仅仅是给PC上的浏览器看的,而且更多的要提供给移动设备,专有设备,小型设备上的浏览器来方便,而这些浏览器需要在不同的环境中重新
处理页面内容,给予用户更好的阅读体验,所有页面的内容必须对浏览器提供有参考价值的指导,便于浏览器提供剪裁、突出和特定操作的处理。

header使用注意:
可以是“网页”或任意“section”的头部部分;
没有个数限制。
如果hgroup或h1-h6自己就能工作的很好,那就不要用header。

 

footer元素
footer
元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer
元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

所有的文档都应该有一个header元素,特别是页面本身就是一个document对象,所以如果不是有特别的理由,你的页面的最上面的部分应该有一个header元素,其他的文章部分也可能会有header,要小心的是,避免header被滥用,header表示的是一组介绍性或者导航性质的辅助文字,记住导航和介绍性这两个关键词。

<footer> COPYRIGHT@小北</footer>
footer
的示例代码

所以,页面的最上面一个header应该包含一个导航的标签:nav。虽然好像没有必须的规定,但是我认为再nav中只应该包含ol或li元素,毕竟nav的作用是导航,而导航应该是一组路径的集合。header中还可以包含其他用于介绍的信息,比如首页的公司图标,公司名称,或产品主题页的产品名称神马的。

footer使用注意:
可以是“网页”或任意“section”的底部部分;
没有个数限制,除了包裹的内容不一样,其他跟header类似。

 
01     <body>
02     <header>
03     <img alt=”logo” />
04     <h1>
05     *****公司</h1>
06     <nav>
07     <ol>
08     <li>导航1</li>
09     <li>导航2</li>
10     <li>导航3</li>
11     <li>导航4</li>
12     <li>导航5</li>
13     </ol>
14     </nav>
15     </header>
16     </body>
当然也可以这么写
 
 
01     <body>
02     <header>
03     <h1>
04     <img alt=”logo” />
05     </h1>
06     <nav>
07     <ol>
08     <li>导航1</li>
09     <li>导航2</li>
10     <li>导航3</li>
11     <li>导航4</li>
12     <li>导航5</li>
13     </ol>
14     </nav>
15     </header>
16     </body>
随便说一下,HTML5中继续保留了ol和ul,我个人的建议是吧那些解释差异很复杂的同类元素去掉,比如保留abbr放弃acronym,可惜ol和ul都保留下来了,不过我建议用ol。对于文档型页面来说,比如blog的主页,有主标题和副主标题,那可以在header中用hgroup元素来处理
 
 
01     <header>
02     <h1>
03     像蚂蚁一样工作,像蝴蝶一样生活
04     </h1>
05     <h2>
06     记录成长的点滴
07     </h2>
08     <p>
09     类似后面文章的前言部分啦</p>
10     </header>
文档本身可以用article元素来标记,article可以描述整篇文章和其包含的所有信息。往往article中也包含了header(我说的是往往)或者hgroup(这个倒真的不一定需要用)。
 
对于article是不是需要header,有这么几个方式可以判断,是不是有H和一些描述共同组合页眉信息?如果只有H,没有其他描述,那就不必用header了
 
 
1       <article>
2       <h1>
3       标题
4       </h1>
5       </article>

hgroup元素
hgroup
元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1
到h6
元素放在其内,譬如文章的主标题和副标题的组合

如果,有主副标题,但没有说明性描述,那直接hgroup也可以

<hgroup> <h1>这是一篇介绍HTML
5语义化标签和更简洁的结构</h1> <h2>HTML
5</h2></hgroup>
hgroup
示例代码

 

hgroup使用注意:
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签

 
01     <article>
02     <hgroup>
03     <h1>
04     主标题
05     </h1>
06     <h2>
07     副标题
08     </h2>
09     </hgroup>
10     </article>

nav元素
nav
元素代表页面的导航链接区域。用于定义页面的主要导航部分

 

<nav> <ul> <li>HTML 5</li>
<li>CSS3</li> <li>JavaScript</li>
</ul></nav>
nav
实例

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图