三驾马车之三分之二总结

学习了两个多月前端客户端，对HTML和CSS的一点总结，接下来学习Javascript，每章内容将会实时更新

HTML：结构

CSS：渲染

JS：交互

 

一：HTML5新增标签：

• 结构标签：header nav article section aside footer  figure
• 表单标签：email（邮件）  color（颜色） date（日期） number（数字） range(体重)
• 媒体标签：audio（音频） video（视频）

二：CSS3新增属性：

• border-color：为边框设置多种颜色
• border-radius：圆角边框
• box-shadow：阴影效果      取值：X轴  Y轴  模糊度  阴影扩展  颜色
• background-size：指定背景图片尺寸
• background-origin：指定背景图片的起始位置     取值：
                                             border-box；默认值是边框盒的左上角
                                             padding-box;填充盒的左上角
                                             content-box;内容盒的左上角
• background-clip：指定背景图片从什么位置开始裁剪

1.  默认值border-box
2. padding-box
3. content-box

• text-shadow：文本阴影

1. 第一个值X轴的偏移量
2. 第二个值Y轴的偏移量
3. 第三个值是阴影范围
4. 第四个值是模糊度
5. 第五个值是颜色

• word-wrap：自动换行
• transform变换效果    取值：

1. scale 缩放       取值范围：0-1，1以上是放大

2. skew 倾斜   给倾斜的角度：角度deg        正值：逆时针旋转         负值：顺时针旋转

3. rotate 旋转   rotate(角度)         正值：顺时针旋转            负值：逆时针旋转

4. rotateX(45deg)  X轴旋转       rotateY(45deg)  Y轴旋转          rotateZ(45deg)  Z轴旋转(默认值)          Z轴注：正值是顺时针，负值是逆时针

• transform-origin:旋转原点的设置          默认值：当前元素的中心点（center center）            第1个值是（top/center/bottom）          第2个值是（left/center/right

• animation动画

• transition过渡         第1个值：属性            第2个值：过度函数           第3个值：时间

三：可替换和非可替换

           可替换：eg:图片，音频，视频，，，设置宽高无效，要想宽高有效，需设置display值

            非可替换：eg:文本类，，，设置宽高有效

四：解决兼容性： 1：引用重置文件

<link rel="stylesheet" href="./CSS/normalize.css">

                              2：用工程化scss文件

                              3：添加前缀

                                     常见的浏览器内核：
                                     浏览器类型         前缀        内核             JS引擎
                                     IE        微软    -ms-       Trident           JScript
                                     Firedfex  火狐    -moz-      Gecko             TraceMonkey
                                     Chrome    谷歌    -webkit-   WebKit.Blink      V8
                                     Safari    苹果    -webkit-   WebKit            SquirrelFish Extreme
                                     Opera     欧朋    -o-        Presto            Carakan 

五：为什么要把结构，表现相分离：为了方便维护和复用

六：布局方式
         1、两栏布局
                 方案一：左侧定宽，右侧自适应
                 注：要设置右侧和父元素最小宽度

          2、三栏布局

          3、流式布局
                  给定尺寸（宽、高）是百分比

           4、响应式布局
                   判断当前视口的宽度
                   判断当前访问页面的宽度

                      视口                               设备
                 1200px                              大屏幕、投影仪、电视
                 992px and 1200px            中等屏幕、小型笔记本
                 768px and  992px             小屏幕、平板
                 768px                                超小屏幕、手机

七：开发理念：

         1、用户群体（年龄、学历、地域、行业）
         2、功能（高版本浏览器、低版本浏览器）

         渐进增加：
                         先以低版本浏览器能识别的内容进行内容展示（先实现展示基础信息）再根据用户需求，进行功能的增加

         优雅降级：
                        先满足所有功能需求，再根据客户和低版本浏览器进行功能的删减

八：布尔属性：属性名=属性值  只用写一个   

        checked（默认值的设定）  multiple（下拉列表多选） required（必填项）

九：空白折叠

         在html中，一个或多个空格，一个或多个回车，在页面合并成一个空格进行显示，空白折叠仅适用于行盒内部或行盒之间
          解决方式：font-size:0   或者   verticle-align:bottom

十：当常规流遇到浮动:

       1、常规流盒子和浮动盒子混合摆放
                a:浮动盒子在摆放时，要避开常规流盒子
                条件：浮动在常规流之后添加

                b:常规盒子在摆放时，无视浮动盒子
               条件：常规流在浮动之后添加
       2、清除浮动