要说HTML，其实挺简单，不就是那几个标签在那儿来回折腾吗。但写得多了，就发现选择了一个标签 就像 上战场前选择了一种武器一样，每种武器都有它能打出来的力道和花样（即与之匹配的CSS）。选择什么样的HTML意味着选择了什么样的结构，所以在一定程度上这也算是一个根本性问题。

感受

1.之前觉得，同一效果可以用多种方式来实现。但后来发现，其实是每种实现方式都有自己的使用场景和利弊的。
2.成型后自查：等写完页面后，F12看下HTML的结构。有时，还真能发现冗余或不合理。
3.良好的html结构，可以省去不少css样式

经验

1.元素的选取
（1）table布局：高度对齐、宽度自适应
（2）ul|ol：无序|有序列表
（3）dl：用户自定义。挺有语义的，title-content的结构时
2.table布局
（1）果真用td tr来表格式布局还挺方便，但是想细致控制其样式就不灵活了（难怪见了不少-给td里还加个div或span的）
3.ul-li
（1）当内容仅一行时，用height + line-height能方便搞定
（2）当内容有换行时，用line-height + padding实现
4.盒模型
（1）pc端写着box-sizing:border-box，挺好的。可规避低版本ie浏览器，保证表现一致
（2）但总觉得border-box是个hack，有时候还挺排斥它的。尤其是移动端开发时，宁愿踩坑，也不愿意写它去提前规避未知的问题。
5.从语义角度：将“标识”“操作”等非文字信息，用一个span或div包起来。
目的：和数据分开

教训

1.可点击区域，不能过大：滥用a(把a设置成block)。不能为了省标签，而把一整行都搞成可点击的。
2.多行文字换行时：br 或者 p
3.对“向右”的样式，不要动不动就浮动：其实完全可以用默认的（默认的div就是自左向右；默认的对齐方式是自左向右）

体验细节

1.先隐藏再显示
2.鼠标的I 手型 箭头
3.详细>>的换行：设置inline-block就可以了（设置white-space副作用：前面的内容也在不应该的地方换行了）