首先在HTML中值得关注的是一些浏览器的内核

       Chrome的内核是Chromium/Blink

       Firefox的内核是 Gecko

       Oprea的内核是 Blink

       IE的内核是Trident

       Safari的内核是Webkit

       而对于ANDROID手机来说 使用最高的是Webkit

其次便是HTML基本的标签

       h系列标题标签，hr水平线标签，br换行标签  img插入图片标签，a链接标签

       以及div和span用以布局的盒子标签

另外补充的base标签  可以设置所有a标签添加_blank，使其在新窗口打开链接

另还有pre预格式化标签 会根据我们html的排版来显示，而我们有自己规范的结构（且后期可能压缩HTML代码），所以不用。

特殊字符的代码:

      &nbsp； 空格  ,&gt； 大于 ,&lt；小于 ,&amp； 和号, &yen； 人民币, &copy；版 权 ,  &reg； 注册商标  等等。

然后便是表格表单列表的标签：

       表单：

       <table>

              <caption></caption>

              <thead><tr><th></th></tr></thead>

              <tbody><tr><td></td></tr></tbody>

              <tfoot></tfoot>

       </table>

       其中tr表示行，td（table data）表示数据单元格，th表示表头单元格，caption 表示表格标题（只       在table中有意义）

       合并单元格：跨行合并  rowspan=“合并单元格的个数”跨列合并 colspan=“合并单元格的个数”

       注：值得一提的是实际可以不用手动设置thead，tbody，tfoot标签。

      

       列表：

       无序列表 ul

       <ul>

              <li></li>

       </ul>

       有序列表 ol

       <ol>

              <li></li>

       </ol>

       自定义列表 dl

       <dl>   

              <dt></dt>

              <dd></dd>

       </dl>

       表单：

      

       表单主要是input标签,但他它有许多类型（type）：

                     text（文本），password（密码），radio（单选，使用同一个name来联系二者），checkbox（多选框，也要使用同一个name 来联系他们），button（按钮 需要写value值），submit（提交），reset（重置），image（图片形式的提交按钮 必须包含src属性），file（文件域 上传文件使用）。

       checked=checked；可以默认选中

       用以用户体验的label(效果为点击文字对应行的输入框会获得焦点)

       文本域：textarea

       select下拉列表以及其子元素option selected=selected 可以默认选中。

       以及用来包裹所有表单元素的 form表单域

至此便是基本的HTML。

随后便是CSS （层叠样式表）

       首先按照样式表书写的位置可分为：

              行内样式表

              内嵌样式表

              外部样式表

       然后便是CSS的选择器了：

              标签选择器

              类选择器

              ID选择器

              通配符选择器

              复合选择器（交集/并集，后代/子，伪类，）

       接下来就是对于标签内容修饰的属性了：

              font的字体样式：

                     -size

                     -family

                     -weight（100-900）

                     -style　（italic, normal）

              综合设置的有顺序：style weight size family （可以省略style和weight）

              注：unicode字体编码    /5b8b/4f5c/为宋体  

              text的文本样式

                     -align(水平对齐方式) center left right

                     -indent（首行缩进）em

                     -decoration（文本装饰线）underline none overline

              补充：line-through （穿过文本下的一条线）

              

              显示模式：

                     块级元素      display：block；

                     行内元素          display：inline；

                     行内块元素   display：inline-block；

              行高以及行高与高度的三种关系：

                     如果行高等高度文字会        垂直居中

                     如果行高大于高度文字会    偏下

                     如果行高小于高度文字会    偏上

                     要使单行文本垂直居中行高等于高度即可。

       CSS背景：

              background

                     -color颜色

                     -image图片

                     -position位置

                     -attachment附着 （scoll/fixed）

              连写方式background：url（）no-repeatx y；（建议顺序）

              补充：rgba（0,0,0，.3）CSS3背景透明属性；

              

       CSS三大特性:

              层叠性：写在前面的样式会被写在后面的优先级相同的或优先级高的重叠掉。

              继承性：text font line color等属性可以被继承 a标签不继承任何属性

              优先级：优先级由高到低!important>行内>ID>类>标签 （可以叠加但不可以越过高低等级，且继承的权重为0）

       盒子模型来咯！

              border边框：

                     -width

                     -style

                     -color

              常连写：border：1px solid #ccc；

              

              内边距padding：

                     -lfet、right、top、bottom

      

              复合写法：

                     padding：一个值（上下左右内边距）   

                            两个值（上下内边距和 左右内边距）           

                            三个值（上  左右  下）                  

                            四个值（上右 下 左 即顺时针方向）

              值得一提,padding可以撑开盒子

              盒子实际大小=内容宽度 高度+内边距+边框

              

              外边距margin：

                     写法同padding

              注：有垂直外边距合并和嵌套元素的垂直外边距的塌陷问题。

       圆角边框和盒子阴影：

              border-radius：length

                     其中每一个值可以为数值或百分比的形式。

                     让一个正方形变成圆圈 ：border-radius: 50%;

                     矩形用高度的一半就好了。精确单位。

                     border-radius:左上角 右上角 右下角 左下角;

                                    左上角 右上左下  右下角

                                    左上右下  右下左上

                                    左上右上右下左下

              box-shadow:

                     水平阴影垂直阴影

                     模糊距离（虚实）阴影尺寸（影子大小）阴影颜色 内/外阴影】；

              注：前两个属性是必须写的。其余的可以省略。

                     外阴影（outset）是默认的，但是不能写

                     如需内阴影可以写inset

                     可以通过逗号来写多个

      

       CSS浮动：

              float：left、right，none

              主要注意清楚浮动的两个方法：

              1）

              .clearfix::after{

                     content:””;

                     display:block;

                     height:0 ;

                     visiability：hidden；

                     clear：both；

              }

              .clearfix{

                     *zoom:1;

              }

              2）

              .clearfix::before,

              .clearfix::after{

                     content:“”;

                     display:table;

              }

              .clearfix::after{

                     clear:both;

              }

              .clearfix{

                     *zoom:1;

              }

              

       CSS定位：

              position：

                     static     静态定位（即无定位）

                     relative   相对定位（指元素相对于它原来在标准流中的位置来说的）（原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待）

                     absolute  绝对定位（完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）； 上级元素有定位时：则依据最近的已经定位（绝对、固定 或相对定位）的父元素（祖先）进行定位 ）

                     fixed     固定定位（完全脱标——完全不占位置；只认浏览器的可视窗口 ，跟父元素没有任何关系（是单独使用的），且不随滚动条的滚动而消失（即固定在了那个位置））

              注：

                     绝对定位和固定定位也和浮动类似，有默认转换的特性 会转换为行内块。

              同时注意：

                     浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用paddingborder overflow解决的）也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

              z-index:

                     属性值：正整数、负整数或 0，默认值是 auto，数值越大，盒子越靠上；如果属性值相同，则按照书写顺序，后来居上；数字后面不能加单位。

              注意：

                     z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

综合的HTML和CSS高级技巧：

       元素的显示与隐藏：

              display:none;    隐藏对象（隐藏之后不保留位置）

              display:block;   显示对象

              visibility：hidden； 隐藏对象（隐藏之后保留位置，即占位隐藏）

              visibility：visible； 显示对象

              overflow： visible； 溢出显示

              overflow： hidden； 溢出隐藏（超出盒子部分的内容隐藏起来）

              overflow： auto；自动判断是否需要滚动条，即内容超出就会显示滚动条，不超出则不显示滚动条。（同下）

              overflow： scroll； 显示滚动条（总是会显示）-不会超出盒子大小内容能显示全，但是滚动条不美观所以不常用

       CSS用户界面样式：

              鼠标样式：

                     cursor：default （默认样式）

                     cursor：pointer （小手）

                     cursor：move    （移动）

                     cursor：text       （文本）

                     cursor：not-allowed  （禁止）

              轮廓线：

                     outline：none/0 ；（一般不设置，直接去掉）

       防止拖拽文本域：

                     resize：none；

       vertical-align垂直对齐：

              图片、表单和文字对齐：

                     通过vertical-align控制图片和文字的垂直关系：

                     vertical-align：baseline；（默认 基线对齐）

                     vertical-align：middle； （垂直居中对齐）

                     vertical-align：top；      （顶部对齐）

                     vertical-align：bottom； （底部对齐）

              去除图片底侧空白缝隙:

              原因：

                     图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。( 就是图片底侧会有一个空白缝隙。)

              解决的方法：

                     给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐给img 添加 display：block;转换为块级元素就不会存在问题了。

       溢出的文字省略号显示:

              white-space  设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

              white-space:normal；    默认处理方式

              white-space:nowrap；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

              text-overflow文字溢出

              设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

              text-overflow: clip ；不显示省略标记（...），而是简单的裁切

              text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

              注意：一定要首先强制一行内显示，再次和overflow属性 搭配使用

              用法 :  

                     white-space:nowrap;

                     overflow:hidden;

                     text-overflow:ellipsis;

              英文自动换行 word-wrap：break-word；

              文字距离：letter-spacing：1px；

       精灵图技术：

              使用背景图片的定位   负值

       推拉门技术：

              一般结构为：

                     <li>

                           <ahref="#">

                                  <span>导航栏内容</span>

                           </a>

                     </li>

              其中a 设置 背景左侧，padding撑开合适宽度。

              span设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。

              之所以a包含span就是因为 整个导航都是可以点击的。

       Margin负值后如何高亮显示：使用相对定位 使其高层级显示。

       CSS三角：

              使用粗像素的边框且不设宽度

              想要哪个方向的三角，其他方向的边框颜色设置为transparent即可。

              为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

首先在HTML中值得关注的是一些浏览器的内核

       Chrome的内核是Chromium/Blink

       Firefox的内核是 Gecko

       Oprea的内核是 Blink

       IE的内核是Trident

       Safari的内核是Webkit

       而对于ANDROID手机来说 使用最高的是Webkit

其次便是HTML基本的标签

       h系列标题标签，hr水平线标签，br换行标签  img插入图片标签，a链接标签

       以及div和span用以布局的盒子标签

另外补充的base标签  可以设置所有a标签添加_blank，使其在新窗口打开链接

另还有pre预格式化标签 会根据我们html的排版来显示，而我们有自己规范的结构（且后期可能压缩HTML代码），所以不用。

特殊字符的代码:

      &nbsp； 空格  ,&gt； 大于 ,&lt；小于 ,&amp； 和号, &yen； 人民币, &copy；版 权 ,  &reg； 注册商标  等等。

然后便是表格表单列表的标签：

       表单：

       <table>

              <caption></caption>

              <thead><tr><th></th></tr></thead>

              <tbody><tr><td></td></tr></tbody>

              <tfoot></tfoot>

       </table>

       其中tr表示行，td（table data）表示数据单元格，th表示表头单元格，caption 表示表格标题（只       在table中有意义）

       合并单元格：跨行合并  rowspan=“合并单元格的个数”跨列合并 colspan=“合并单元格的个数”

       注：值得一提的是实际可以不用手动设置thead，tbody，tfoot标签。

      

       列表：

       无序列表 ul

       <ul>

              <li></li>

       </ul>

       有序列表 ol

       <ol>

              <li></li>

       </ol>

       自定义列表 dl

       <dl>   

              <dt></dt>

              <dd></dd>

       </dl>

       表单：

      

       表单主要是input标签,但他它有许多类型（type）：

                     text（文本），password（密码），radio（单选，使用同一个name来联系二者），checkbox（多选框，也要使用同一个name 来联系他们），button（按钮 需要写value值），submit（提交），reset（重置），image（图片形式的提交按钮 必须包含src属性），file（文件域 上传文件使用）。

       checked=checked；可以默认选中

       用以用户体验的label(效果为点击文字对应行的输入框会获得焦点)

       文本域：textarea

       select下拉列表以及其子元素option selected=selected 可以默认选中。

       以及用来包裹所有表单元素的 form表单域

至此便是基本的HTML。

随后便是CSS （层叠样式表）

       首先按照样式表书写的位置可分为：

              行内样式表

              内嵌样式表

              外部样式表

       然后便是CSS的选择器了：

              标签选择器

              类选择器

              ID选择器

              通配符选择器

              复合选择器（交集/并集，后代/子，伪类，）

       接下来就是对于标签内容修饰的属性了：

              font的字体样式：

                     -size

                     -family

                     -weight（100-900）

                     -style　（italic, normal）

              综合设置的有顺序：style weight size family （可以省略style和weight）

              注：unicode字体编码    /5b8b/4f5c/为宋体  

              text的文本样式

                     -align(水平对齐方式) center left right

                     -indent（首行缩进）em

                     -decoration（文本装饰线）underline none overline

              补充：line-through （穿过文本下的一条线）

              

              显示模式：

                     块级元素      display：block；

                     行内元素          display：inline；

                     行内块元素   display：inline-block；

              行高以及行高与高度的三种关系：

                     如果行高等高度文字会        垂直居中

                     如果行高大于高度文字会    偏下

                     如果行高小于高度文字会    偏上

                     要使单行文本垂直居中行高等于高度即可。

       CSS背景：

              background

                     -color颜色

                     -image图片

                     -position位置

                     -attachment附着 （scoll/fixed）

              连写方式background：url（）no-repeatx y；（建议顺序）

              补充：rgba（0,0,0，.3）CSS3背景透明属性；

              

       CSS三大特性:

              层叠性：写在前面的样式会被写在后面的优先级相同的或优先级高的重叠掉。

              继承性：text font line color等属性可以被继承 a标签不继承任何属性

              优先级：优先级由高到低!important>行内>ID>类>标签 （可以叠加但不可以越过高低等级，且继承的权重为0）

       盒子模型来咯！

              border边框：

                     -width

                     -style

                     -color

              常连写：border：1px solid #ccc；

              

              内边距padding：

                     -lfet、right、top、bottom

      

              复合写法：

                     padding：一个值（上下左右内边距）   

                            两个值（上下内边距和 左右内边距）           

                            三个值（上  左右  下）                  

                            四个值（上右 下 左 即顺时针方向）

              值得一提,padding可以撑开盒子

              盒子实际大小=内容宽度 高度+内边距+边框

              

              外边距margin：

                     写法同padding

              注：有垂直外边距合并和嵌套元素的垂直外边距的塌陷问题。

       圆角边框和盒子阴影：

              border-radius：length

                     其中每一个值可以为数值或百分比的形式。

                     让一个正方形变成圆圈 ：border-radius: 50%;

                     矩形用高度的一半就好了。精确单位。

                     border-radius:左上角 右上角 右下角 左下角;

                                    左上角 右上左下  右下角

                                    左上右下  右下左上

                                    左上右上右下左下

              box-shadow:

                     水平阴影垂直阴影

                     模糊距离（虚实）阴影尺寸（影子大小）阴影颜色 内/外阴影】；

              注：前两个属性是必须写的。其余的可以省略。

                     外阴影（outset）是默认的，但是不能写

                     如需内阴影可以写inset

                     可以通过逗号来写多个

      

       CSS浮动：

              float：left、right，none

              主要注意清楚浮动的两个方法：

              1）

              .clearfix::after{

                     content:””;

                     display:block;

                     height:0 ;

                     visiability：hidden；

                     clear：both；

              }

              .clearfix{

                     *zoom:1;

              }

              2）

              .clearfix::before,

              .clearfix::after{

                     content:“”;

                     display:table;

              }

              .clearfix::after{

                     clear:both;

              }

              .clearfix{

                     *zoom:1;

              }

              

       CSS定位：

              position：

                     static     静态定位（即无定位）

                     relative   相对定位（指元素相对于它原来在标准流中的位置来说的）（原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待）

                     absolute  绝对定位（完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）； 上级元素有定位时：则依据最近的已经定位（绝对、固定 或相对定位）的父元素（祖先）进行定位 ）

                     fixed     固定定位（完全脱标——完全不占位置；只认浏览器的可视窗口 ，跟父元素没有任何关系（是单独使用的），且不随滚动条的滚动而消失（即固定在了那个位置））

              注：

                     绝对定位和固定定位也和浮动类似，有默认转换的特性 会转换为行内块。

              同时注意：

                     浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用paddingborder overflow解决的）也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

              z-index:

                     属性值：正整数、负整数或 0，默认值是 auto，数值越大，盒子越靠上；如果属性值相同，则按照书写顺序，后来居上；数字后面不能加单位。

              注意：

                     z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

综合的HTML和CSS高级技巧：

       元素的显示与隐藏：

              display:none;    隐藏对象（隐藏之后不保留位置）

              display:block;   显示对象

              visibility：hidden； 隐藏对象（隐藏之后保留位置，即占位隐藏）

              visibility：visible； 显示对象

              overflow： visible； 溢出显示

              overflow： hidden； 溢出隐藏（超出盒子部分的内容隐藏起来）

              overflow： auto；自动判断是否需要滚动条，即内容超出就会显示滚动条，不超出则不显示滚动条。（同下）

              overflow： scroll； 显示滚动条（总是会显示）-不会超出盒子大小内容能显示全，但是滚动条不美观所以不常用

       CSS用户界面样式：

              鼠标样式：

                     cursor：default （默认样式）

                     cursor：pointer （小手）

                     cursor：move    （移动）

                     cursor：text       （文本）

                     cursor：not-allowed  （禁止）

              轮廓线：

                     outline：none/0 ；（一般不设置，直接去掉）

       防止拖拽文本域：

                     resize：none；

       vertical-align垂直对齐：

              图片、表单和文字对齐：

                     通过vertical-align控制图片和文字的垂直关系：

                     vertical-align：baseline；（默认 基线对齐）

                     vertical-align：middle； （垂直居中对齐）

                     vertical-align：top；      （顶部对齐）

                     vertical-align：bottom； （底部对齐）

              去除图片底侧空白缝隙:

              原因：

                     图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。( 就是图片底侧会有一个空白缝隙。)

              解决的方法：

                     给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐给img 添加 display：block;转换为块级元素就不会存在问题了。

       溢出的文字省略号显示:

              white-space  设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

              white-space:normal；    默认处理方式

              white-space:nowrap；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

              text-overflow文字溢出

              设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

              text-overflow: clip ；不显示省略标记（...），而是简单的裁切

              text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

              注意：一定要首先强制一行内显示，再次和overflow属性 搭配使用

              用法 :  

                     white-space:nowrap;

                     overflow:hidden;

                     text-overflow:ellipsis;

              英文自动换行 word-wrap：break-word；

              文字距离：letter-spacing：1px；

       精灵图技术：

              使用背景图片的定位   负值

       推拉门技术：

              一般结构为：

                     <li>

                           <ahref="#">

                                  <span>导航栏内容</span>

                           </a>

                     </li>

              其中a 设置 背景左侧，padding撑开合适宽度。

              span设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。

              之所以a包含span就是因为 整个导航都是可以点击的。

       Margin负值后如何高亮显示：使用相对定位 使其高层级显示。

       CSS三角：

              使用粗像素的边框且不设宽度

              想要哪个方向的三角，其他方向的边框颜色设置为transparent即可。

              为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;