`
icybamboo
  • 浏览: 39201 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

h1~h6的使用原则(转)

阅读更多

在遵循网页标准制作网页的时候,为了使得设计更具有语义化,我们经常会在页面中用到h1~h6的标题属性。我们都知道标题几乎是所有文章都会有的要素,也是我们用以识实与索引文章的重要元素。

h1,在浏览器中显示最大,那么自然用来表示最大的标题,对于一个网站来说哪个标题才是最大的?是LOGO,我们通常会在网站的最前面先标注这个网站的名称。所以h1就用来放LOGO,当然如果你的网站没有LOGO,只有一个网站名称,那也可以,并且需要注意的是网页中h1只能出现一次。园子并不推荐您直接在h1里面放个图片,我们完全可以通过以图换字来实现,具体方法:以图换字方法和思路 。

当h1找到了专用的功能后,在平时的设计中h2~h4一般用在网页中出现的版块标题上。例如一个网页中有个栏目是产品展示,那么这个写法就是<h2>产品展示</h2>,如果产品展示里面还分有几个类型,那么我们可以这样定义:<h3>食品类</h3>,<h3>医药类</h3>等等依次类推。需要注意的是书写顺序要从高到低依次书写。另外就是h2~h4不局限于出现的次数,你可以无限制使用。

h5与h6在浏览器默认显示字体是小于正常文本字体的。那么推荐h5与h6只作为免责声明或是版权通告来使用。这样即表明重要性,又不会太过明显影响阅读。

对于标题标签的使用尽可能的注意一下他们之间的等级关系。当然标题的使用还是需要根据实际使用来决定。这里只是给出个建议。标题标签是块线元素,但是他并不能再包含块级元素了,只能包含内联的元素,比如链接、图像,换行之类的。记得有个朋友前两天在文章中提到过关于标题的内容,但是写法就有错了,他把链接写在了H1标签的外面,把H1包起来了,这样的写法是不推荐的。也不符合标准思维容易给以后的学习产生不好导向。

分享到:
评论

相关推荐

    高效整洁CSS代码原则

    CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset  不同浏览器...

    前端css+html+布局笔记

    六级标题中,h1最重要,h6最不重要,一般页面中只会使用h1~h3 h1的重要性仅次于title,浏览器也会主要检索h1中的内容,以判断页面的主要内容 一般一个页面中只能写一个h1 段落标签 换行标签 ...

    html H标题标签的用法

    W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。 h1,h2,h3,h4,h5,h6,作为标题标签,并且依据重要性递减。我认为遵循这样的原则是很有必要的,它能让页面的层级关系更清楚,让搜索引擎更好...

    html5+css3ppt课件.ppt

    1. 标题hn:HTML提供了六级标题用于创建页面信息的层级关系,使用h1、h2、h3、h4、h5和h6元素对各级标题进行标记,其中h1最高,后面依次递减。 知识点:在HTML中,标题是页面信息的层级关系的基础,使用h1-h6元素...

    旅游界面实验报告.docx

    * HTML 的基本标签包括标题标签(h1-h6)、段落标签(p)、链接标签(a)、图片标签(img)等。 二、Web 前端设计 * Web 前端设计是指为网站或应用程序设计用户界面的过程。 * Web 前端设计包括界面设计、交互设计...

    Tidy-Sass:我喜欢整洁的样式表。 这就是我如何让我的 Sass 井然有序

    整洁的 Sass 我喜欢整洁的样式表。 当我第一次发现我很喜欢它们,并尽可能地坚持这些原则。 随着时间的推移,虽然我已经改进了它以适应我的风格,但这是改进的结果。... 基础(html、body、h1-h6、p、fo

    Web前端开发基础:制作瀑泉游网页.ppt

    标题是通过 &lt;h1&gt; - &lt;h6&gt; 等标记进行定义的。 基本语法 对齐方式"&gt;标题文字&lt;/h#&gt; 在HTML文件中,添加空格的方式与其他文档添加空格的方式不同,网页中通过代码控制来添加空格,而在其他编辑器中通过键盘空格键来输入...

    前端面试题整理—性能优化及安全篇.docx

    HTML 标签的语义化是指通过使用包含语义的标签(如 h1-h6)恰当地表达文档结构。CSS 命名的语义化是指为 HTML 标签添加有意义的 class,id 补充未表达的语义,如 Microformat 通过添加符合规则的 class 描述信息。...

    css入门笔记

    ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小...

    微软活动目录管理管理简明手册

    h1 H+ ?2 z8 p ) ~( _. I6 _% C( D' ?+ z3.轻型目录访问协议 + Y; _% K9 n+ K/ F i6 G/ _: x4 y# X% d 轻型目录访问协议(Lightweight Directory Access Protocol,LDAP)是用于访问活动目录的协议。2 ?: L1 z$ `1 ...

    GRANDMAIRENicolas_6_08032021:如此Pekocko

    记下原则的语法是markdown的pouvez utiliser。 倒入détailsde la spelle,dééditionde ce fichier。 ####意大利文集 意大利之声 危险性问题*mon-mot* #### Mettre un mot en gras Voici联合国MOT EN鹅肝! ...

    jQuery详细教程

    由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: • 把所有 jQuery 代码置于事件处理函数中 • 把所有事件处理函数置于文档就绪事件处理器中 • 把 jQuery ...

Global site tag (gtag.js) - Google Analytics