找了半天最后只找到MDN做了语义化，只好做MDN了。希望大家既不要妖魔化div，认为只要用了div就是不符合语义化，也不要div一把梭，逮着div一只羊往死里薅羊毛

header部分

对最中间的导航栏部分使用了nav，而其他部分依旧使用div。值得一提的是搜索栏使用了form而不是input。

此外下拉设置栏采用ul。

阶段总结

列表类注意使用ul和ol；header、main和footer该划分的要划分；导航栏使用nav，其余样式包裹的工具元素使用div。

main部分

main下先是作为标题的header，然后是作为通用分节元素的section。section用于页面主体的分段元素，它代表页面一个没有更细致的功能划分的节。

作为反例，导航栏也是一节，但有更细致的nav元素用于导航栏，所以应使用nav；而上面仅作为包裹样式的工具元素div中，由于他们并没有对页面内容的分节，所以应使用div。

继续，section下是一系列的artical文章，artical下有代表插图的figure元素。<figure>元素代表一段独立的内容，可能包含 <figcaption>元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。之后是一个h2，div用于作者信息，p用于文章内容，footer提供导向全文的超链接。

阶段总结

页面有意义的分节应使用section来与div做出差分。figure元素用于配字插图。

footer玉足部分

呀，新面孔grid，找你找得好苦啊

重点只有grid排版和对无序列表ul的使用。

另外，这段是非常好的grid布局实践。简单优雅的将mdn主体与四栏导航分隔，并且不需要调教半天flex。

最后让我们看看百度是怎么做的吧……哦他div一把梭了