HTML5中h1标签的优化用法

一，用于站点中的logo提高网页排名

<header>
    <img src="log.png" alt="xioami">
    <h1 style="display:none">xiaomi</h1>
</header>

    注意上方的h1是隐藏了，其中图片描述和h1标签描述文本内容相同，那么我想说为什么要添加一个看不见的h1标签呢？
原因有很多，

• 1.其实header元素中应包含某个级别的标题，这样屏幕阅读器能无障碍的阅读
• 2.因为他们会从一个标题跳到另一个标题，为页面建立标题结构。
• 3.如果在页眉中使用h1元素做标题，那么像其他区块如articles，about us就得用h2作标题
  上面的做法就是把图片作为了标题，也是提高了网页的检索

二，为什么一个页面只能有一个一级标题

根据HTML的说法，页面中可以有多个一级标题，但很多开发人员会倾向使用只用一个一级标题，因为这样可以明确告诉搜索引擎网站中的内容。当然你也可以采用只将站点顶部的标题设置为h1元素，其他区块设置为h2标题

三，文档纲要

也就是你网页的结构
要知道自己网页的纲要是什么样子，可以想象把所有内容都剥离，只剩下标号为h1 h2 h3的文本
HTML5中role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，如我们的一个轮播图可以使用role="banner"