最近在看一本《高效前端》的书籍，从中受益良多，也将获得的东西记录下来，方便以后查看和使用，书中写道：‘’切图‘’三境界，第一，长得好看；第二，灵活；第三，友好的交互。下边的记录的东西大部分都是针对于第二境界来说的。
能用html/css解决的东西就不用js
相对于就js实现部分效果来说，如果html、css能够完全实现的尽量使用html、css实现。使用js实现部分效果的，将可能在js代码中控制样式，操作dom，但是我们知道操作dom是昂贵的，并且修改之后，时间长了，代码量多了，我们很难定位哪里最原来的样式做了修改，这样对代码的维护不友好，这也与我们一直提倡的结构与表现分离的思想想背离。
当我们使用css/html能够实现的时候，我们维护的css以及html代码，这样维护起来相对简单，实现这些效果很好理解，当然，这是在你熟悉这些css/html特性的条件下。
1. 导航条上的栏目的hover高亮显示
现在有两种方案：
1. 使用css元素的hover伪类
//原来的样式ele{ opacity:0.5}//当hover时候ele:hover{ opacity:1}复制代码 2. js实现
如果使用js去控制的话，当页面加载完成，但是js代码还没执行到给该元素添加hover事件之前，对该元素的hover事件是没有效果的。不仅如此我们在写该效果的时候，需要给该元素添加两种事件，分别是mouseover和mouseleave，使用mouseover添加opacity:1,当mouseleave后元素的样式恢复到初始状态的opacity:0.5。
从上边可以看出，使用js实现相对要复杂一些。在这种情况下使用css、html实现更加的高效！
2. 自定义radio/checkbox样式
//html代码 //style样式代码 input[type=checkbox]{ display: none } .checkbox{ //自定义样式 } input[type=checkbox]:checked + .checkbox{ //自定义样式 }复制代码 上边的代码实现了一个自定义样式的checkbox的选项，样式可以自己定义，其中的input[type=checkbox]:checked指的是当该checkbox被选中的时候的样式调整。当然我们也可以是使用div/span去模拟这些东西，但是这样的代价很高，并且我们使用的是具有语义化的checkbox，这样更加符合我们的标准。
3. 使用表单，ajax数据提交
我们知道数据提交的方式有两种，一种是使用ajax，另外一种使用的是form表单提交，我们平时做开发的时候的很多ajax库我们使用的都是ajax数据提交方式，忽略了form提交
//js代码//form 表单复制代码
form表单提交会监听enter按键，form表单会被浏览器自动做很多的优化，并且符合语义化
4.合理的使用css伪类
css的伪类提供了很好的状态切换特性，checked，focus，invalid，checked前边已经写过了，focus和checked差不多，下边着重写一下invalid
color//样式代码复制代码 这样会自动判断输入的是否符合email的规则，如果不符合则改变后边的span 的字体颜色
5. hover的提示信息
利用hover伪类实现一个title提示信息，下边只是一个实现，更多的样式可以自己去自定义
//下边是css代码实现一个自定义titlespan[data-title]{ display:relative;}span[data-title]:hover::before{ posation:absolute; content:attr(data-title); top:-150%; left:50%; transform:translateX(50%); white-space：no-wrap} 复制代码 6.css3的原生变量
复制代码
上边的代码使用了css的自定义变量的方式定义了一个theme-color，然后在后边的元素中使用var(变量，替代颜色)来使用该颜色。如果浏览器不支持这种形式的css变量，建议建议使用postcss的nextcss插件处理
html标签的优化
我们可能遇到过这样的代码，全部是使用div+span来布局，没有其他的元素，诚然div和span有很多的好处，他们不会有默认的样式，兼容性很好，处理起来相对简单，并且这样对用户来说并没有啥区别。
但是对于开发人员来说，看起来很头痛，作为一名有追求的开发人员来说我们就需要我们要赋予标签语义化。使用html5提供的性的语义化标签更加合理，不仅有利于网站的seo，同事对开发和维护都有好处。当然我们也不是说div不用了，只是在有更好的选择的时候尽量选用合适的标签
1.文字
如果是一段文字就是用p，如果是一个标题就使用h1~h6，这样在编写css时候也更加有层次性
我是一段文字的标题啊
你好啊！
复制代码
2.表单
如果是一个表单，那就使用form表单吧，使用form的有点很多优点：
- 1.使用form的action可以直接实现页面的搜索跳转，不用自己去手动获取每个input的值
- 2.可以使用一些函数库直接获取所有的数据如jQuery的serializeArrray
3.HTML5的input
在html5中，对表单的元素input做了很多扩充。对于不同的type，浏览器会作物不同的优化，例如在iphone上使用不同的input,弹出的键盘是不同的，即使在一些不支持html5的浏览器上也会被转换为type="text"，在Chrome type="number" 不能输入逗号
注意：在ie8,9会将不认识的type强制的转化为text,例如我们设置了type="eamil",他会被转化为type="text"！
4.使用html5语义化标签
下边是用于页面布局的几个常用的标签：
- div:作为一个普通的容器使用
- section:作为一个普通的章节
- article:适用于独立性强的内容，如网页的文章就可以使用它
- nav:适用于网页导航
- aside:用于页面主题相关的内容，侧边栏，评论等辅助的功能
- header,footer,main:页面的布局使用的，头部，底部，主体
下边是一个例子
//传统的页面
上边的两种页面构建的方式除了下边的使用了语义化的标签，其余没有啥区别，这样有利于网站的seo，很直观的反映了网站的大纲
尽可能的使用伪元素
伪元素是一个元素的子元素，是一个行内的元素，但是他有一个‘’伪‘’的特性，所以不能使用js获取该元素，并对他操作，所以就出现了一个只是在视觉上的一种表现，但是对dom没有任何负担的一种体现，他对js是完全透明的。
伪元素的使用可以使网页变得简洁优雅，去除很多的不必要的网页标签，伪元素一般用于画图，特别是那些无关紧要的分割线，点，提示性一类的东西。
使用伪元素划线
hr复制代码 假如使用划线的元素去做就会多出2*n个元素，我们这样写就减少了很多的页面上的元素
清除浮动
清除浮动我们同样可以使用伪元素去做。何为浮动，如果一个父元素内的元素都是浮动的（float:left/right）,这样的结果是父元素将不会有高度，就像下边这样：给子元素添加了一个float:left后父元素就没有高度了。
浮动并没有脱离文档流，还是占有正常的文档流空间，其他的元素将会围绕浮动的元素排列。浮动的元素其实还是在父元素中，如果不在父元素中了，那就不会出现环绕的效果了，
高度坍塌的问题的解决目标就是把父元素撑起来:
方法一：
方法二：
div::after { clear: both; content: ""; display: block;}复制代码 方案三:
在浮动的元素后边再添加一个div,加上一个clear：both的样式，这种是兼容性最好的解决方法，但是给页面添加了不必要的元素，像百度这样的网站需要兼容性很高的网站上就是使用的这种方式去清除浮动的