Html相关1 html语义化意义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的
代码的同时让浏览器的爬虫和机器很好地解析。注意：
1.尽可能少的使用无语义的标签div和span；
2.在语义不明显时，既可以使用div或者p时，尽量用p,因为p在默认情况下有上下间距，对兼容特殊终端有利；
3.不要使用纯样式标签，如：b、font、u等，改用css设置。
4.需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
7.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
新标签：

CSS相关1.盒模型
1.ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小css设置方法如下
/* 标准模型 */box-sizing:content-box; /*IE模型*/box-sizing:border-box;复制代码2.margin、border、padding、content由外到里3.几种获得宽高的方式

• dom.style.width/height  这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
• dom.currentStyle.width/height  这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。
• window.getComputedStyle(dom).width/height  这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
• dom.getBoundingClientRect().width/height  这种方式是根据元素在视窗中的绝对位置来获取宽高的
• dom.offsetWidth/offsetHeight  这个就没什么好说的了，最常用的，也是兼容最好的。
  

4.拓展 各种获得宽高的方式

• 获取屏幕的高度和宽度（屏幕分辨率）：window.screen.height/width
• 获取屏幕工作区域的高度和宽度（去掉状态栏）：window.screen.availHeight/availWidth
• 网页全文的高度和宽度：document.body.scrollHeight/Width
• 滚动条卷上去的高度和向右卷的宽度：document.body.scrollTop/scrollLeft
• 网页可见区域的高度和宽度（不加边线）：document.body.clientHeight/clientWidth
• 网页可见区域的高度和宽度（加边线）：document.body.offsetHeight/offsetWidth
  

5.边距重叠解决方案(BFC)BFC原理

• 内部的box会在垂直方向，一个接一个的放置每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
• box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
• bfc的区域不会与浮动区域的box重叠
• bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
• 计算bfc高度的时候，浮动元素也会参与计算创建bfc
• float属性不为none（脱离文档流）
• position为absolute或fixed
• display为inline-block,table-cell,table-caption,flex,inine-flex
• overflow不为visible
• 根元素demo
  

css reset 和 normalize.css 有什么区别

• 两者都是通过重置样式，保持浏览器样式的一致性
• 前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致
• 后者修复了常见的桌面端和移动端浏览器的bug：包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
• 前者中含有大段的继承链
• 后者模块化，文档较前者来说丰富
  

点击查看更多精彩前端资源

点击有惊喜

Html相关1 html语义化意义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的
代码的同时让浏览器的爬虫和机器很好地解析。注意：
1.尽可能少的使用无语义的标签div和span；
2.在语义不明显时，既可以使用div或者p时，尽量用p,因为p在默认情况下有上下间距，对兼容特殊终端有利；
3.不要使用纯样式标签，如：b、font、u等，改用css设置。
4.需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
7.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
新标签：

CSS相关1.盒模型
1.ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小css设置方法如下
/* 标准模型 */box-sizing:content-box; /*IE模型*/box-sizing:border-box;复制代码2.margin、border、padding、content由外到里3.几种获得宽高的方式

• dom.style.width/height  这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
• dom.currentStyle.width/height  这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。
• window.getComputedStyle(dom).width/height  这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
• dom.getBoundingClientRect().width/height  这种方式是根据元素在视窗中的绝对位置来获取宽高的
• dom.offsetWidth/offsetHeight  这个就没什么好说的了，最常用的，也是兼容最好的。
  

4.拓展 各种获得宽高的方式

• 获取屏幕的高度和宽度（屏幕分辨率）：window.screen.height/width
• 获取屏幕工作区域的高度和宽度（去掉状态栏）：window.screen.availHeight/availWidth
• 网页全文的高度和宽度：document.body.scrollHeight/Width
• 滚动条卷上去的高度和向右卷的宽度：document.body.scrollTop/scrollLeft
• 网页可见区域的高度和宽度（不加边线）：document.body.clientHeight/clientWidth
• 网页可见区域的高度和宽度（加边线）：document.body.offsetHeight/offsetWidth
  

5.边距重叠解决方案(BFC)BFC原理

• 内部的box会在垂直方向，一个接一个的放置每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
• box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
• bfc的区域不会与浮动区域的box重叠
• bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
• 计算bfc高度的时候，浮动元素也会参与计算创建bfc
• float属性不为none（脱离文档流）
• position为absolute或fixed
• display为inline-block,table-cell,table-caption,flex,inine-flex
• overflow不为visible
• 根元素demo
  

css reset 和 normalize.css 有什么区别

• 两者都是通过重置样式，保持浏览器样式的一致性
• 前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致
• 后者修复了常见的桌面端和移动端浏览器的bug：包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
• 前者中含有大段的继承链
• 后者模块化，文档较前者来说丰富
  

点击查看更多精彩前端资源

点击有惊喜