html5与css3 及 精通css细读

## HTML5中新增27个元素，废弃16个元素-----------------------------------------------------------
1.HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式用CSS来实现。
  HTML5除了提出很多的新效果的标签，但是更重要的是加强了语义化结构标签，其中这个time就是其中之一。
  【结构性元素】、【块级性元素】、【行内语义性元素】、【交互性元素】


  * figure元素：一段独立的流内容 ---------------还有很多其他的新标签
    <figure>
    <figcaption>标题</figcaption>
    <p>内容。。</p>
    </figure>


  * video元素和audio元素：
    <video src="#"></video>   <audio src="#"></audio>


  * mark元素：高亮显示文字


  * embed元素：<embed src="#" type="video/audio">


  * time元素：<time>2017.3.6</time>


  * canvas元素：仅仅提供一块画布，使用js操作绘图API


  * wbr元素：表示软换行


2.【全局属性】：对大多数常用元素都可以使用的属性
  * 【contentEditable属性】：允许用户在线编辑元素中的内容。


  * designMode属性：用来指定这个页面是否可编辑。


  * hidden属性：告诉浏览器不渲染此元素


  * 【spellcheck属性】：针对input和textarea两个文本输入框提供一个文本内容的拼写和语法检查。


  * 【tabindex属性】：tab键获取焦点的顺序。


  其他扩展功能
  * 【Selectors API】：querySelector()和querySelectorAll()，使用和css选择规则一样来获取对象，但是不会随文档动态变化。


  * 【window.JSON对象】：json数据相关对象


  * js 日志和调试


3.canvas画布：开发跨平台动画和游戏的标准解决方案。(交互性元素)
4.html5的多媒体应用：主要是video和audio。(交互性元素)
5.客户端的存储方式：cookie、web Storage(sessionStorage、localStorage)、web Database 三种方式。(在客户端存储方面的扩展)
6.离线应用：利用ApplicationCache接口解决了缓存问题，离线存储应用文件。(在无网络状态下的扩展)
7.Workers对象的多线程处理：运行大型、复杂的js脚本时候容易出现假死现象。(在大型复杂脚本方面的扩展)
8.Geolocation地理位置：新增的地理位置应用程序接口。(在移动端方面的扩展)


## css3中的一些新特性 ------------------------------------------------------
 1.可伸缩盒子模型
  * display:flex; 代表容器是一个可伸缩容器，还可以inline-flex。块布局和行内块布局的升级版。
  * flex-direction(弹性布局的主轴方向)
  * justify-content:主轴方向内容对齐方式。
    align-items:侧轴方向上的整体内容对齐方式。


  * flex-wrap(流动布局的侧轴方向)，即换不换行或列
  * align-content:多个主轴沿侧轴方向的内容堆栈对齐方式。
  * order：内部元素的排序
  * align-self:给各个可伸缩项设置自己的在侧轴上的对齐方式。




## 精通css书细读 --------------------------------------------------------------
1.为元素的id和类命名：避免【多类症】
  * 应该根据它们是什么来命名，而不是根据它们的外观如何命名。
  * css的统一命名约定：完全小写加上连字符分隔。如：andy-budd 
  * 【组件化】的命名类，组件内的部分通过层叠来识别。


2.div和span，div实际代表部分(division)：避免【多div症】
  * 根据条目的意义或功能来使用div进行分组
  * span可以用来进行行内元素进行分组或标识


3.【浏览器的模式】：标准模式(根据规范呈现页面)和混杂模式(向后兼容的模式)


4.层叠和特殊性
  * 为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优于任何规则，甚至优于作者加上!important标志的规则。
  * 然后再根据选择器的【特殊性】决定规则的次序，划分4个等级。比如同一个标签的id可以覆盖类。如果两个规则的特殊性相同，那么后定义的规则优先。例如：a标签的几个伪类的顺序。
  * 【继承】的样式是最没有特殊性的


5.组织和维护样式表
  * 尽量使用单一css文件，也可多个。样式表内导入另一样式表：@import url(/css/color.css)
  * 设计代码的结构：1.一般性样式：主体样式、reset样式、链接、标题、其他元素
            2.辅助样式：表单、通知和错误、一致的条目
            3.页面结构：标题、页脚和导航、布局、其他页面结构元素
            4.页面组件
            5.覆盖
  * 自我提示：大型项目中很容易忘记一些常用参数，临时注释可以起到提示作用
        比如：@colordef、@todo、@buggix、@workaround等等
  * 样式指南：多个团队维护网站样式时还需要制作样式指南。更实用的是将用到的样式组合在一起，实现【模式组合】


6.【盒模型】
  * 【外边距叠加】：只有普通文档流中块框的垂直外边距才会产生外边距叠加。
  * 【块级元素和行级元素】：块级元素产生【块框】、行级元素产生【行框】和【行内框】，改变行内框只能通过改变行高或者水平边框、水平内边距或水平外边距。
  * 三种定位机制：普通流、浮动和绝对定位
          1.相对定位被看做是普通流的一部分，绝对定位与普通流无关。普通流恒定在0层
          2.绝对定位相对于最近的已定位的祖先进行定位。
          3.z-index属性目前只有在position:relative、position:absolute和position:fixed参与的情况下才有作用，表示层级。一般规定使用0.8(默认尽管不允许这个值),1,2,3，这样已经够用了。
          4.浮动：不属于普通文本流，也不占据空间。
          5.但是浮动会让旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。
           【清理】想要包含浮动元素，可以增加一个空元素div使用clear:<left,right,both,none>


## 技巧点
技巧1：背景图像效果：可以产生许多有趣的效果
  * 可以使用多个图片作为背景
  * 【圆角框】：border-redius属性
     图片边框：border-image属性
  * 【投影】：box-shadow属性，文字投影：text-shadow
  * 还有透明度、视差效果


技巧2：链接的应用样式
  * a:link、a:visited 和 a:hover,a:focus,a:active的样式不一样对网站访问最好
  * 最简单的方式：1.下划线的无和有，字体加粗显示为链接  2.虚线和实线，但是字体不加粗  3.底部添加细长图片，造成动画特效
  * 为链接目标添加样式：:target伪类
  * 突显不同类型的链接：1.使用[att^=val]属性选择器来寻找http:开头的所有链接：[attr^='http:'],[attr^='mailto']
                        2.使用上面的属性选择器来寻找.pdf,.doc结尾的所有链接：[attr$='.doc ']
    所有的技术都有助于改进用户在站点上的浏览体验。通过提醒用户注意离站链接或可下载的文档，让他们明确地了解在单击链接时会发生的情况，避免不必要的回溯操作和烦恼。

  * css Sprites：【css精灵】，可以将多个小图片放在一张大图上，用来减少请求次数，优化访问体验。不高于200KB的单张图片的所需载入时间基本是差不多的