HTML结构化

目的：为开发页面时有一套明确的页面结构化实施方案，提高开发效率；

HTML结构化指的其实就是使用HTML语义化标签根据web标准书写具有明确结构逻辑的HTML代码的一种思路；

说白了重点就是：页面实际要展现的内容，贴切页面内容的HTML标签，符合web标准，结构逻辑明确；

前置条件

1、了解HTML语义化；

2、了解web标准；

工作中如何使用结构化？

从单纯的页面级别来说，页面是由很多个小的结构组成的，这些小的结构都由HTML标签包裹着文字、图片组成的。

一、结构化整体布局

一个常规的页面一般分为以下几部分：

1、头部head

2、侧栏side

3、主体内容main

4、尾部foot

上面四个部分就是一个大的结构化布局；

二、结构化细则布局

针对UI设计师天马行空的设计理念，作为前端人员必须有一套自己的应对方案；比如在UI还没天马行空完，我们就可以根据原型书写一套良好的HTML代码；

什么才是良好的HTML代码呢？

1、HTML语义化要有强有力的展现，比如是一段文字的话就用p标签，这没什么可解释的；

2、块级元素和内联元素的嵌套一定要符合web标准，比如内联元素就是不能嵌套块级元素；

3、在写结构的时候不要去考虑样式怎么展现，结构就是结构，跟样式没毛线关系；

4、结构一定要体现出所表达的含义，达到只看结构就能知道该结构是要干嘛的；

举几个例子：

1、书写一个有标题、图片、文字的HTML结构

<div>
    <h2>标题</h2>
    <img src="xxx.jpg" alt="xxx.jpg" />
    <p>内容内容内容内容</p>
</div>

2、书写一个form表单

<form>
    <label>账号</label>
    <input type="text" value="" />
    <button type="submite">提交按钮</button>
</form>

三、结构化的步骤

1、无论是根据原型还是UI设计稿，都要先抽出头尾、侧栏等公用的布局结构进行单独HTML代码的编写；

2、仔细查看原型或者UI设计稿，找出结构一样或者结构相似的，思考结构相似的该如何展现；是求同存异？还是修改成相同的？比如图片在上文字在下和图片在下文字在上；

3、着手编写HTML代码时，将代码以单独结构的形式进行注释；

四、结构化标准

1、HTML代码必须根据页面的具体内容进行语义化编写；

2、禁止内联元素包含块级元素；

3、禁止超出三层的标签嵌套；

4、相似度70%（拍脑袋拍出来的）的结构必须抽取相同结构或者强制写成完全相同的结构；

5、每一块结构必须加注释，在进行拷贝结构页面拼装时，注释也必须要带上；

6、整站相同的结构必须写在一个页面中；

7、禁止一边写结构一边写样式；

五、辨别结构化的合理性

从以下几个方面入手：

1、HTML标签是否和所要展现的内容贴切；

2、内联标签是否只包含文字、图片等需要在页面上展现出来的内容；

3、标签嵌套是否在三层以内；

4、结构与结构之间的相似度是否低于70%；

六、结构化中重复的工作

一切重复性的工作是应该被消灭的；

其实大部分网站都会存在很多共性的地方；比如某个结构会出现在很多网站当中，毕竟设计师有时也是按套路出牌的；

针对在很多页面乃至很多网站中出现较频繁的结构，我们肯定不能够每次都去梳理结构书写结构，最好的办法就是将这些高频的结构代码封装成代码片段，保存在常用的IDE中，这样就能够提高开发效率消灭重复的工作；

七、判断页面是不是结构化

见第五条