Web前端常用问题--1

1. BootStrap框架–Less语言

这篇文章是对less的详细解读，仔细阅读会发现CSS应用的新天地。
http://www.bootcss.com/p/lesscss/#synopsis

less语法实现了对CSS语言的扩充，使其可以像面向对象的语言一样，定义变量、函数等功能，实现属性值、数值、颜色的计算，对于需要大量复用的CSS语句，可以通过嵌套、混合等方式实现。

2. html5 & CSS3新属性

html5带来了一些语义化标签，曾经冷冰冰的 div 等不再是一个符号，现在有了意义。
http://www.html5jscss.com/html5-semantics-section.html

新语义标签带来的浏览器兼容问题：

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure {
display: block; } 在考虑浏览器兼容性的问题上，肯定少不了让我们又爱又恨的老朋友–IE，很不幸，IE8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, ” shiv”来解决该问题:

<!--[if lt IE 9]> <script
src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

Canvas绘图应用
http://www.runoob.com/html/html5-canvas.html

SVG使用手册
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

CSS3中 SVG 与 Canvas两者间的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

!important 的应用

!important既可以保持最高优先级，也可以解决IE对某些CSS规范有偏差的情况。当在css文件中出现同名属性时，IE浏览器是不能识别!important属性的。详细介绍请看下面链接：
http://blog.csdn.net/u013864585/article/details/37563863
http://www.cnblogs.com/yudy/archive/2013/05/27/3102825.html

3. 块级元素和内联元素的区别与联系：

http://blog.csdn.net/whisper_a/article/details/18891941
举例：（块对象也称为块级元素，内联元素也称为行内元素）
①　块级元素（div,h1-h6,p,ul,dl,dd,form,table）
②　行内元素[也叫内联元素]（strong，em,span,b,i,a,img,input,iabel）
区别：
①　块级元素独占一行，而内联元素会和其它的内联元素占一行。
②　块级元素可规定宽度和高度；内联元素会随自身的内容自动变化。
③　块级可设置margin值和padding值，而内联元素左右正常，上下不正常。
相互转换：
①　块级转为行内：display:inline
②　行内转为块级：display:block
③　默认：display:none(不占位置)

4.制作静态页面&页面优化辅助工具

页面优化辅助工具推荐：“Google网站管理员工具”和“百度站长平台”
http://lusongsong.com/reed/176.html

如何进行页面优化，提高用户体验？

页面优化可从HTTP请求，HTML\CSS\JS等各方面进行，以及静态文件等。
https://segmentfault.com/a/1190000005165588
http://blog.csdn.net/li2274221/article/details/25193381

如何在网页中解决设计师留给你的字体问题？

1.切图方法

2.在线字体库 选择工具库里的字体，会自动生成一段CSS代码，把代码嵌入网页中即可。 http://www.chinaz.com/free/2012/0815/269267.shtml

3.font-spider 一个自动生成中文字体的工具。 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
http://www.cnblogs.com/Kummy/p/4442142.html
http://font-spider.org/index.html
http://www.sohu.com/a/122145460_582851

如何用图片制作静态网页——切图

如何用PS进行切图
https://jingyan.baidu.com/article/546ae1850560a31149f28c94.html
切图规范介绍
http://www.uisdc.com/ui-design-slice-guideline#
切图样例介绍
http://www.uimaker.com/plus/view.php?aid=3379