`
icybamboo
  • 浏览: 39920 次
  • 性别: 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教程:关于H1的使用技巧

    H1标签的使用应该遵循一致性、清晰性和相关性的原则,以确保用户和搜索引擎都能准确地理解页面的主题和意图。通过深入探讨和实践,我们可以不断提升网页制作的专业水平,创建出既美观又实用的网页。

    超详细CSS语义化命名规则及一些总结和扩展

    例如,使用h1~h6来表示标题,使用ul、ol和dl来表示列表,使用strong和em来表示强调的内容,使用thead、tbody、tfoot来表示表格的表头、表体和表脚,使用code和pre来表示代码段。 6. div的使用 div是CSS中最常用的...

    绿色网站.zip

    - HTML结构:HTML标记语言用于构建网页的基本结构,如头部(head)、主体(body)等,以及标题(h1~h6)、段落(p)、链接(a)、图像(img)等元素。 - CSS样式:用于控制网页的外观,包括颜色、字体、布局等。...

    HTML+XHTML+CSS2_基础教程_PDF文件

    6. CSS层叠和继承:理解CSS的优先级规则和层叠原则,以及如何使用继承节省代码和保持一致性。 7. CSS2新特性:学习CSS2引入的浮动元素(float)、定位(positioning)、多列布局(multi-column layout)等,以及...

    高效整洁CSS代码原则

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

    HTML-CSS结合-基础讲解2022优秀文档.ppt

    在构建页面时,应确保文档结构清晰、完整,如使用 H1 至 H6 标签组织内容,用 P 标签表示段落,使用 div 进行内容区域划分。 CSS 部分: CSS(Cascading Style Sheets)允许我们分离内容和表现,提高了网页设计的...

    2018年Web面试题目汇总

    - 常见的块级元素包括:div, ul, ol, li, dt, dd, h1~h6, p等。 3. link和@import的区别: - link是HTML标签,@import是CSS的语法。 - link会在页面加载时一同加载,而@import引入的CSS会在页面加载完之后加载。...

    前端css+html+布局笔记

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

    html H标题标签的用法

    W3C标准定义了这些标签,其中h1作为最大的标题,h6是最小的标题,它们按照重要性递减的顺序使用。h1通常用来表示页面的主标题或最重要的信息,h2表示次级标题,而h3至h6则用于进一步细分内容。 在实际应用中,h1的...

    语义化你的HTML标签和属性

    1. `&lt;h1&gt;`至`&lt;h6&gt;`:这些标签代表了不同级别的标题,从最重要的`&lt;h1&gt;`到次重要的`&lt;h6&gt;`。它们不仅用于视觉上的区分,更重要的是为页面内容提供层次结构。 2. `&lt;p&gt;`:段落标记,用于组织文本内容。避免使用 ` ` ...

    DIV的使用.pdf

    3. **`DIV`的使用原则**:`DIV`更适合用于创建大范围的布局框架,例如页头、页脚、侧栏等。不过,过度使用`DIV`会导致代码冗余和可读性降低。因此,应当根据元素的语义选择合适的HTML标签。例如,用于导航的`&lt;nav&gt;`...

    seo对网页使用的框架优化

    - 使用H1-H6标签:合理使用这些标题标签有助于突出页面层次,帮助搜索引擎理解页面结构。 2. 内容优化: - 关键词选择与分布:选择与网站内容密切相关的关键词,适当在页面中自然分布,避免堆砌,保持用户体验。 ...

    (完整word版)WEB前端开发代码使用要求规范.pdf

    使用语义化的HTML标签,如h1-h6用于标题,p用于段落,ul用于列表等。尽量减少div的嵌套层数,避免使用内嵌样式表,以背景形式呈现的图片写入CSS,重要图片要有alt属性。特殊符号用代码表示,避免使用复杂的HTML结构...

    网页设计简答.pdf

    包含实际可见的内容,如文本、图像、标题&lt;h1&gt;~&lt;h6&gt;等。 5. JavaScript在HTML中的使用:JavaScript可以放在或内,常用嵌入方式是标签,也可直接在HTML元素中添加,或者通过src属性引用外部JS文件。 6. 网页设计注意...

    页面的使用例子

    7. **SEO优化**:为了提高搜索引擎的可见性,页面需要进行适当的SEO优化,如合理使用标题标签(H1-H6)、元标签(meta tags)、关键词策略以及提供结构化数据标记。 综上所述,"页面的使用例子"不仅涉及基本的HTML...

    Technical-doc:培训项目#html #css

    主体部分则包含各种元素,如段落(p标签)、标题(h1~h6标签)、链接(a标签)、图像(img标签)、列表(ul, ol, li标签)等。此外,HTML5引入了许多新的元素,如header、footer、nav、section等,增强了网页的语义...

Global site tag (gtag.js) - Google Analytics