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结构
1
2
3
4
5
<div>
<h2>标题</h2>
<img src="xxx.jpg" alt="xxx.jpg" />
<p>内容内容内容内容</p>
</div>

2、书写一个form表单

1
2
3
4
5
<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中,这样就能够提高开发效率消灭重复的工作;

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

见第五条