本篇杂记主要是近期编写前端代码的一次小小的总结，对于语义化感悟最深莫过于本人，但恰恰以前没接触过这块，所以近期越来越深刻。
语义化的好处：
1/ 便于更好的SEO - 搜索引擎爬取和收录
2/ 好的逻辑便于管理 － 对于页面代码的掌控
3/ 更好的阅读和维护 － 代码不仅仅是自己看更便于后来者阅读和管理、维护、扩展。
从广义上来说，不仅要使机器（搜索引擎等）易于理解，也要使人易于理解。在团队协作开发中，对人的易于理解显得尤为重要了，一个莫名其妙的 class 会让后续的开发或者维护者一头雾水，增加了协作成本。
先说下标签，举个栗子：
<article>
<h1>xxxx百科</h1>
<h1>xxx来源</h1>
</article>
当时真想给那写如此代码的人踹上两脚，同时另外一个人还告诉我，为什么不可以写2个h1呢？语义化本来就是用来裸读的！ 我当时听到这句话就炸了！听我一句话，以后你的上级或者公司最好不要有懂seo的，不然你这一辈子都得背锅。
- 一个页面只能有一个h1
- 许多大公司如百度，网易等甚至在很多页面不用h1标签，甚至很谨慎的使用
- 过多的h1可能还会导致k站，别问我为什么，自己百度一下后果多严重。
w3c在发布html5之后更加的注重语义化，从增加的多个标签就完全可以看出来。
<article> 定义文章
<aside> 定义页面内容之外的内容
<audio> 声音内容
<canvas> 图形
<command> 定义命令
<header> 页眉
<footer> 页脚
等等，几乎都是英文一一对应的
接下来说说class 类名，规范化书写
<div class="skill-list">
<div class="skill-item">
<h3 class="item-tt">PS</h3>
<p class="item-detail">基本切图</p>
</div>
<span class="skill-summary">了解</span>
</div>
大脑渲染：
技能列表> 技能物品>｛物品名称，物品详情｝ ， 技能概况
<div class="experience-item">
<p class="item-time">2014.08 — 至今</p>
<h3 class="item-name">腾讯科技(深圳)有限公司／产品策划</h3>
<div class="item-desc">负责腾讯课堂教研功能的策划； 能熟练对接用户及运营侧，规划版本，推进需求落地，并根据数据及用户反馈优化功能； 所负责功能覆盖PC客户端、PCWeb、APP、H5。</div>
</div>
大脑渲染：
项目经验 － 项目时间，项目名称，项目详情
ok，我们最后再来一个
<div class="article-wrap">
<a href="#" class="article article--one">
<h1 class="article-tt">腾讯要做"零配件"？马化腾这样说</h1>
<div class="article-date">4月20日</div>
<div class="article-img-wrap">
</div>
<div class="article-desc">转行？不！做我们该做的，提供一个底层基础能力。</div>
<div class="article-more">阅读全文</div>
</a>
</div>
外层 > {文章>标题,时间,［图片外层>图片］, 更多｝整个结构和逻辑都非常清晰，便于在编写大量的代码，自己不会突然忘记之前写的大体框架，而一起协作的人也能清晰的知道，你写的是什么，这些是做什么的。
最后说说备注
为什么备注要拿来最后说，因为即便语义化用的好，结构到位，犹豫大型的开发项目种，代码量是非常大的，对于阅读的负担也很重，所以需要备注作为书签，让人知道这一大块究竟是做什么的。
<meta charset="UTF-8">
<!-- viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- title 设置 -->
<title>bilibili - 魔王大乱斗</title>
<!-- css 引入，common + style -->
<link rel="stylesheet" href="http://xxx.com/common.css">
<link rel="stylesheet" href="style.css">
上述代码非常清晰的介绍html文档头部的分类和设置，而且不是硬邦邦的一堆代码，下面的一段代码同样如此。
/* logo 样式 */
.logo {
/* width: 200px; */
}
语义化写的好，所有的人都愿意看，这可是技术圈子里可以拿来装逼的！！
不规范的写法，看你进坑没？
1）滥用id选择器
#layout #header #title .logo a { display: block; }
2）调用过多的class
比如我们要写个样式，之前设置了一个字体大小font, 又设置了颜色，还设置了某些样式
fonts:{font-size:16px};
color-red: {color:#f00};
vertical-style: {vertical-algin: middle};
lines:{line-heihgt: 20px};
<span class="fonts color-red vertical-style lines">香菇，蓝兽， 你为甚么要酱紫</span>
天！你要不要把所有的标签都拿来搞一份！！！！！我再送你一只穿天猴可好？
仔细想想你是不是特别想来一只时光鸡，让时间倒退，把以前那些乱糟糟的代码重新修复下？
可惜世界没有后悔药，你的鸡已经变成了如下此物。。。
babalababa~那些年的代码，已经成为别人的饭后话题了。。。
