仓酷云

标题: 带来一篇标签参考:后人出名网站H标签的用法 [打印本页]

作者: 柔情似水 时间: 2015-1-15 23:14
标题: 带来一篇标签参考:后人出名网站H标签的用法
使用HTML5也是断断续续的有些历史了，但是没有系统的总结过，最近发现公司的图书馆有不少藏书，破洛洛文章简介：标签参考:后人出名网站H标签的用法.

在html里的每个标签都有其本身的意义，而H标签作为题目标签，它的意义更是相当主要。关于H标签的用法出格是h1的用法一向是个争议的成绩，也是值得我们研讨的成绩。我在总结了后人履历的基本上分离本人对H标签的了解，写下了这篇文章，但愿对人人有所匡助。
甚么是H标签？
W3C指出h1-h6标签可界说题目。h1界说最年夜的题目。h6界说最小的题目。
h1，h2，h3，h4，h5，h6，作为题目标签，而且根据主要性递加。我以为遵守如许的准绳是很有需要的，它能让页面的层级干系更分明，让搜刮引擎更好地抓取和剖析出页面的主题内容等等。为了更好的了解，请看上面的代码：

<body><h1>一级题目</h1><p>段落</p><div><h2>二级题目</h2><p>...</p><div><h3>三级题目</h3><p>...</p><div><h4>四级题目</h4><p>...</p></div></div></div></body>

复制代码

扫瞄器的默许款式也是根据主要性递加，字号从h1到h6由年夜变小。而分歧的扫瞄器中的款式又有一些不同，介于这类不同，我们一般在结构顶用CSS将其一致。
人人怎样用的？
如今良多网站（包含淘宝、新浪、搜狐等出名网站），都喜好把h1用在LOGO上，如图：

人人都如许用，不无事理，实在长处蛮多的：它归纳综合了全部页面的内容，并且LOGO离body很近，如许就便利了搜刮引擎最快的抓取主题，再者从语义来讲也加倍精准。
固然也不是全体网站都将h1用在LOGO上,网易的用法就是对照出格的例子：

网易将h1设置了display:none款式，使其埋没起来，如许既办理了h1不晓得放那里的冲突又起到了SEO优化的感化，可谓一举两得。
而腾讯首页的h1则是头条旧事，如图：

从下面的例子能够看到各年夜网站关于h1的用法都有所分歧，关于h1放那里？一向是一个争议的成绩，但我以为究竟放那里没有相对的谜底。我以为应当依据网页的定位、范例、用户搜刮习气等要素综合思索。好比旧事类的网站，能够把h1放在头条旧事上；综合流派类的网站，那就把h1放在LOGO上吧；假如公司网站也能够把h1放在LOGO上，由于用户搜刮公司一样平常喜好搜公司的称号；假如有网站宣扬语，还能够把h1放在宣扬语上，这也是不错的选择。总之，选择一种最合适的才是最好的。
关于h2我一样平常喜好把它用在首页的年夜栏目上，如图：

内容页，我更习气把h2让给文章题目，栏方针题则用h3暗示，如图：

h3多用于栏方针题，如图：

农信通产物首页用到的H标签，不但有明晰的层级干系，并且凸起了产物内容的主要性，对搜刮引擎来讲也十分有益。
上面这个例子也很成心思，如图：

栏方针题用了h2,旧事题目则用了h1,假如按照层级干系来讲，它们的按次倒置了，但它并没有错，在实践使用H标签的时分，我们也能够依据内容的主要性来界说。以是只要在把握好基本实际的基本上天真的使用，才干把它的感化最年夜化。
从下面的几个例子中不丢脸出H标签的用法是很天真的，并非范围在这几种用法之内，我们在使用中只需遵守根据主要性递加的准绳，触类旁通，h4-h6亦是云云。
总结了一些些
依据参考材料、前端制造牛人、出名网站等对H标签的了解和使用，我总结了以下标准，但愿能带给人人一些参考代价。
h1一级题目
代表重中之重，它的位置在页面中跟关头字的位置一样主要。一样平常使用于网站题目大概头条旧事上，一些年夜型网站也使用在LOGO上，固然h1代码能够写多个，但实践语义上有独一性，h1题目在一个页面内里最好只呈现1次大概没有。
h2二级题目
次要呈现在页面的主体内容的文章题目和栏方针题上，三列布局一样平常在两头，二列布局一样平常在主要的一边。可与h3搭配利用。
h3三级题目
一样平常主打页面的边侧栏。h4是它的帮助，呈现频次不高。
页面层级干系不克不及太深，以是h4,h5,h6一样平常呈现较少。
</p>
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。

作者: 兰色精灵 时间: 2015-1-17 20:53
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 金色的骷髅 时间: 2015-1-22 08:04
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 灵魂腐蚀 时间: 2015-1-31 05:11
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 再见西城 时间: 2015-2-6 17:43
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 再现理想 时间: 2015-2-17 23:39
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 飘飘悠悠 时间: 2015-3-6 00:21
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 第二个灵魂 时间: 2015-3-12 17:03
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 蒙在股里 时间: 2015-3-20 01:13
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

欢迎光临仓酷云 (http://ckuyun.com/)