网站HTML结构分析
B站
打开后，不翻动页面，页面可以分为导航区、内容区，和侧边栏。
导航区又分为顶部导航和中间导航，顶部导航主要包括热门资源，搜索栏，和用户的一些信息，方便用户快速找到自己喜爱的资源，并且可以随时看到一些用户自己的个人信息。
中间导航包括用户喜欢的UP主最近的动态，热门，频道，还有一些资源的分类选项。
内容区则是一个轮播图和根据用户喜好为用户推荐的视频，点击侧边栏的“换一换”按钮可以为用户重新推荐一组视频。
当我们把页面向下滑动到底的时候，会为我们再推荐一页的视频，并且，中间导航以一种“缩略”的样式“吸附”到顶部，内容区仍然是为我们推荐的视频，侧边栏里则变成了“刷新内容”、“新版反馈“、”客服“、”顶部”几个按钮。
HTML结构：
<body>
<div>
<nav>顶部导航</nav>
<nav>中间导航</nav>
</div>
<main>
内容区
</main>
<aside>
侧边栏
</aside>
</body>
某宝
淘宝的网站大概分为，导航栏、搜索框、内容区、关键词和页脚部分，导航区部分包括用户的用户名，注册/注销按钮，首页，我的淘宝，购物车，收藏夹等几个重要的功能，然后是一个网站LOGO和搜索框的部分，用于可以点击LOGO回到主页，有搜索框中搜索自己喜欢的商品，接着是内容区，内容区是许许多多的商品，且显示格式统一，类似一个列表，在内容区中包括价格区间的选择，和底部的“上一页”、“下一页“这样的额导航，然后是一个关键词列表，猜用户想要搜索的信息，最后时页面的页脚部分。
HTML结构：
<body>
<!-- 导航区 -->
<nav>导航区</nav>
<!-- 搜索功能区 -->
<div>
<img src="#" alt="页面LOGO" />
<input type="text" value="页面搜索框" />
</div>
<!-- 内容区 -->
<div>
<div>价格选择</div>
<ul>
商品列表
</ul>
<div>商品列表页导航</div>
</div>
<!-- 关键词列表 -->
<ul></ul>
<!-- 页脚 -->
<footer></footer>
</body>
非语义化标签
非语义化标签例如：<div>、<span>等，它们的特点是没有特定的含义，本来这两个标签只是作为默认标签的补充，但现实是它们的使用频率却远超其它语义化标签。
语义化标签就非常的多了，只要是你看到后知道它表示的是什么内容的标签都是语义化标签，这是语义化标签与非语义化标签的最大不同之处，我们常常鼓励在页面中要多使用语义化标签，因为它可以提高页面的可读性，有利于SEO，更有利于有视觉障碍用其他设备阅读网页。
假如我把B站页面的HTML结构写成如下结构：
<body>
<div>
<div>顶部导航</div>
<div>中间导航</div>
</div>
<div>内容区</div>
<div>侧边栏</div>
</body>
从功能上来看，这段代码和上面的代码是一样的，都能实现同样的功能，不同的是，当你看到这段代码的时候，你只知道有几个div标签，而上面的代码不同，你大概能够想象出页面的大概样子，这就是大量使用非语义化标签的坏处，但是这也不是绝对的，我们也可以为这些div加上class类名来区分，这是能够通过写CSS样式的时候顺手解决的问题，至于说对于视觉障碍用户的考虑，这个需求的优先级不是很高，一些中小型公司是不会考虑，但是就目前的形式而言，一些互联网大厂已经在带头做此项工作，并且HTML5又新增了几个语义化标签以满足用户的需求，所以，以后HTML编写的语义化必然是大趋势。
总结
概括来说，代码的语义化带来的好处只是提到可读性，我们要养成语义化编程的习惯，我们可以从一个标签，甚至一个属性开始，逐步实现语义化，养成习惯后就要从结构上考虑页面的语义化了，非语义化最主要的问题就是div和span标签的滥用，完全不使用 div 和 span 并不现实，毕竟这两个标签被发明出来也是有使用价值的，所以可以首先找出一些容易被滥用的区域，这样就能大大增加页面语义化的程度，首先要考虑的就是减少不必要的 div 和 span 标签，然后才是考虑用合适的语义化标签来取代，比如日常开发中和文本相关的内容比较多，那么考虑使用 h1~h6 , p , q , b ... 这些标签来取代 div 和span，即使是布局方面也可以使用一些结构性标签，如： main , section , footer ,aside , header 来取代 div。
语义化就像是前端成长道路上的一颗石子，失去每一颗石子似乎都不会造成影响，但只有聚集更多的石子才能铺成更长的路，熟练编写语义化的页面并不能直接帮你成为高级前端工程师，但语义化却能体现前端工程师的工作习惯和技术素养。
