青训营任务: HTML语义化的案例分析：分析一些实际网站的HTML结构，对比非语义化标签的差异；
作为前端初学者, 我觉得还是有必要 get hands dirty
那么我们直接分析一下掘金的首页的 HTML 结构
第一步打开 "开发者工具"...
哦不, 这分析的其实是 DOM 树 (二者的区别? 学习👉 What is DOM? HTML versus DOM )
不过都差不多嘛, 内在的意义是不变的🤗🤗
多余的声明: 此 HTML 结构并不完整省略掉了很大部分, 分析的角度可能并不正确, 仅供自己学习
粗糙的手绘掘金首页 HTML 结构 Overview
导航栏
分析
图中的黑色框框是 div 元素, 而带有其他颜色的框框则有相应的标签标记
可以看到, 最外面的元素是 class name 为 view-container,
而对于导航栏而言, 它整个都放在 class name 为 main-header-box 里面
注意这个 main-header-box 宽度比导航栏小而位置是居中的, 那么可以知道我们可以使用一个容器来固定位置, 使得网站更有一致性, 例如掘金的首页显得简约大气, 布局连贯
在 main-header-box 里面, 则使用了 header 标签元素, 这就是导航栏的主体
其中从左到右分别是logo, 和 nav 标签块
logo 是用 a 标签标记的先不管
nav 才是重头戏, nav 中分有四个部分
第一部分是图片中用黄色标记的, 由多个文字选项的无序列表
第二部分也是一个无序列表 class name 是 right-side-nav
其中包含搜索栏与创作者中心, 略显复杂, 其中搜索框里面包含 form 元素, 大多数元素标签还是使用的是 div, 如下图
还有就是会员栏, 登录与注册, 这里也不细说了
小结
我们需要怎样设计才能让用户在众多选项里一眼就选中自己想要的选择?
导航栏带给我的收获是, 我们可以将选项分类, 将其包装成主要的几大板块, 再在相应板块里进行结构的细化
另外我还学到, 很多元素使用 div 块来包装的, 即使是我感觉独立出现的元素, 一般都会有个看似多余的 container, 这样的容器有什么用呢? 我目前没有明确的答案, 不过可以问 GPT
为了避免凑字数的嫌疑, 放 GPT 回答的图片参考一下
正文
分析
在
main-container中, 用 main 标签元素包含所有正文内容, 包括左侧的索引和右侧菜单
左边的索引 class name 叫 index-nav
正文则是用叫 timeline-container 的 div 元素包裹
右侧菜单则是使用 aside 标签元素, 意味着这是侧边栏
详情见下图 具体的布局就不分析了, 毕竟这不是我的目的
小结
正文部分同样是将 HTML 分为三大板块: 索引, 正文, 菜单
并分板块再去细分 HTML 的结构
另外, 也有很多地方使用了无序列表, 在使用无序列表时, 一般也会搭配 div 标签, 乍一看, 这种非语义化的标签, 会导致代码丧失可读性, 但是使用 ul 或 div 后一般都会有class name来区分, 也就是类名语义化
这样正好弥补了标签的语义性不足的缺陷
总结
这样的简单而又麻烦的工作, 其实我是不会去做的,
因为我明明大致就可以猜出来, 这里有一个 div, 那里可以放一个 container,
而DOM树里有很多我还不知道的代码, 所以我以前很不愿去做,
但是在我真正打开 DevTools 时, 无论是用选中元素的方法, 还是在 DOM 树里自己摸索,
慢慢发现 HTML 结构其实没有那么那么复杂, 也是有一定套路的,
但是反过来想, 倘若没有 DevTools 这样方便的工具, 没有语义化的标签, 没有语义化的类名,
我可能连 header 都找不到在哪里, 更别提理清其中的结构了,
当然现在我也没有理清 DOM 为什么长这样, 那个还有那个标签为什么这样放
不过我相信到以后这是水到渠成的事情🤗🤗