HTML入门笔记1.1 p.s.一些补充说明之前小白的第一篇blog笔记，还是有不清晰的部分，对于Html文档结构的认

说明

之前小白的第一篇blog笔记，还是有不清晰的部分，对于Html文档结构的认识还需要补充提高，这篇短文就是对于上文总结的表明章节的标签的一些补充说明。以及对标签相关语义的更深层解读，对文档结构搭建的进一步理解。

查阅了一些资料，对于小白来说英文资料MDN是比较权威，不过中文资料更容易上手理解。但中文资料要主要挑选来源，因为各大网站论坛互相ctrl c + v非常严重，指不出引用源头在哪里，而且无法保证准确性和时效性（很多过时信息，其实已经是错的）。相对来说，阮一峰大神是国内做前端很早的大牛之一了，他目前的个人博客还在保持健康的更新中，能看到他对前端新技术、新功能的追踪，早已成为一种生活习惯，实属吾辈程序猿楷模。扯远了，阮一峰作为大牛，他写的前端技术相关中文开源文档还是比较有参考价值的。

以下我的部分总结引用自他的网道文档，文档链接看这里。

HTML标签的语义

HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。

正如大佬所说，使用良好语义结构的标签来搭建，是前端新手容易忽视的重要规范。之前自学阶段的我，只会无脑用div标签，span标签，这是一种不好的习惯，需要注意改正。

下面举一个常见的具有语义结构标签的html文档的例子：

<body>
  <header>标头
  <nav></nav>
  </header>
  <main>
    <article>
      <h1>文章标题</h1>
      <section>
        <h2>第一章</h2>
        <p>内容</p>
      </section>
      <section>
        <h2>第二章</h2>
        <p>...</p>
      </section>
    </article>
  </main>
  <footer>页尾</footer>
</body>

可以看到，主要内容main是顶层标签，不能写在其他章节标签里面。需要注意，一个页面只能有一个main标签。main里，下级标签是article文章，表示一段独立存在的内容，比如一篇文章或一个帖子。而section标签是article之下一级，表示一个独立的章节。跟main的使用注意事项相反，它总是多个同时存在，一个页面不能只使用一个section。当然section里也可以套article，根据结构布局需求来使用。

aside标签跟main同级，它放一些补充信息，也就是旁支内容。侧边栏也可以放进来。

关于div和span

它们其实是用来处理文本的标签。div是最常用的，单纯一个区块，不具有任何语义含义。HTML 5规则更推荐使用具有语义化的标签结构，方便维护。实际看国内一线互联网公司的官网，还大量都在用基本的div套div结构，这点见仁见智了，看未来的工作实际要求。

全局属性的一些补充

标签的全局属性中，有个tabindex，表示tab键切换focus区域点位的顺序。这个顺序编码补充一下规则，是可以跳序编码的，比如1, 3, 5, 6这样。编号0的意思是tab最后才选中它，而编号-1标注这个区块位置不会被tab选中到。

属性的优先级也有一些规则，写在标签内的行内属性优先级 > css文档，如果javascript代码再操作DOM改变属性，那就是强制改掉属性，优先级最高。

1.1补充内容暂时就到这里。