HTML结构化的重要性

时间:2022-08-17 20:01:37

为什么我们要学习标签?

因为搜索引擎只看得到代码,只能通过标签判断内容的语义。所以我们应该尽可能的让我们的代码语义化,这就凸显了html结构化的重要性。

HTML的作用是用来写结构的,css只是用来修饰结构的。千万不要混淆呦~

举个栗子~
html中的标签就好比是一个有不同作用的积木,有的是地基,有的是房顶,有的是木头,每个标签意义不同,而css只是将积木拼合成各种各样的房屋。积木是永远不会变的,但是形状却在css的控制下千变万化。

错误想法: 通常在制作网页时我们会陷入css样式影响了结构化布局,即根据网页中看到的样式去选择标签,这是大大的错误。如果我们来写几行文字,文字之前没有图标,所以你选择用p标签。然而本质上这是一个列表,所以表明你被样式影响了你的布局;再举例你不能因为有一个加粗字体偏大样式的字体而选h标签,虽然h标签的默认样式为加粗放大,但是h标签的语义化是标题,所以不是标题的文字不能选择h标签。

搜索引擎对h标题标签是非常敏感的,,建议标题标签不要出现断层,例如网页中我们用了h1,h3,h4那么不能缺失 h2

为什么我们要强调结构化的重要性?

下面我们分析一下:
当项目负责人分配给你100个页面去切图,完成时间一周。是不是感觉顿时天怒人怨~晴天霹雳,这工作量打死也写不完啊!这时结构化的重要性就凸显出来啦~

首先我们从头到尾分析完这100个页面,就能得出一个结论:咦?这些页面大同小异,如果我写出来几个页面,别的照猫画老虎不就ok啦!怎么那么聪明呢,哈哈~~的确就是这么简单。这个想法就已经表明你对结构化已经有了初步的思想认识啦~接下来我们需要规划如何去做?
第一步就是一遍一遍不厌其烦的分析这些类型统一的页面,寻找相同点。大的来说这几个页面框架都是头+主体+尾,小的来说这几个页面的导航基本一样,这几个页面都是图文结构虽然有点区别,这几个页面都是表单注册….这就是最重要的一点找到结构大同小异的部分。
第二步我们需要将找到的相似结构写出来,把用到的所有标签罗列,最后合成一个大而全,包含量100%的导航结构。例如导航:将这些相似的导航,颜色不同,个数不同,边框不同都无关紧要,因为我们需要的是透过表现看结构,所有的导航都可以由列表结构完成,那么就写出可以包含所有导航结构的大结构。
第三步就是将我们写出的大结构应用到每个页面上啦!具体到某个页面时,我们可以从最大的页面结构到最小的一个导航结构使用我们第二步中的大结构去套用。根据页面需要,在大结构基础上去掉多余的标签,以此方式写出头疼的100个页面,将会是最快速最有效率的方法之一。
Html结构化虽然学起来简单,但是要想正确的灵活运用就需要我们花费一定的时间去体会去练习。它好比是一座大楼的地基,是建立在css、js之下最重要的部分,地基不稳如何成就高楼?千万不要小看html结构化的作用,如果能将结构化正确熟练运用,将会使我们的工作事半功倍。


在此感谢洋洋老大和庄神在这段时间对我的正确指导,如今回头再次仔细学习结构化,让我深刻的认识到结构化是如此重要~2018年,全新的起点,希望我们越来越好,一起加油