web前端.txt

1、对web前端的认识
	web是world wide web的简称，即全球广域网，也称万维网，
	是一种基于超文本和http的、全球性的、交互动态的、跨平台的分布式图形信息系统
	web前端是由网页设计与制作发展而来，随着工作的细化
	需要有人来完成美工图到网页的制作
	从未出现了web前端开发这个词
	web前端开发主要是使用HTML、css、JavaScript技术
	将美工提供的美工图转换为网页
	同时，需要顾及SEO以及后台的数据
	web前端，相当于是一个连接美工、后台以及用户的之间的平台。
	前端页面由结构层HTML、表示层css、行为层JavaScript构成，
	结构层主要实现页面重构，表示层实现页面的表示和风格、
	行为层主要实现客户端的功能和业务

2、HTML
	HTML全称是hyper text markup language，即是一种由万维网维护的超文本标记语言，。
	超文本标记语言是页面内可以包含图片、链接、深甚至音乐、视频等非文字元素
	HTML没有逻辑能力，不需要编译执行
	结构包括头部（head），主体（body）两大部分，
	head描述的是浏览器所需要的信息，主体则包含所要说明的具体内容

3、css
	css即层叠样式表，英文全称是cascading style sheets 。
	是一种用来表现HTML或者XML等文件样式的计算机语言，
	不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化

4、HTML与css的联系
	HTML是定义网页结构，内容是网页制作者放在页面上想要让用户浏览的信息
	主要让页面的内容结构化、块状化
	css是控制HTML标签，定义所需要的样式，改变内容外观，使得结构和样式独立开来
	这样使得样式和结构分离，达到了我们的初衷：内容更加清晰可读
	
5、js的理解
		
	1>	js有逻辑能力，行为能力，需要浏览器解析执行，需要结合其他语言；
	
	2>	js是一种解析性语言，需要浏览器内置的js解析器解析执行
	
	3>	js是一种弱类型语言，即动态语言，本身变量类型不固定
	
	4>	js是从上往下顺序执行的语言
	
	5>	一个完整的JavaScript的实现包括核心ECMAScript，文档对象模型DOM，浏览器对象模型BOM 	 
	。
	6>	js的使用
		a)	嵌入在HTML标签中
			<a href=”javascript:void(0)”></a>//阻止a标签的跳转
			
		b)	嵌入在head标签内部
			<script type="text/javascript"></script
			
		c)	外部文件引入
			<script type="text/javascript" src="xxx.js"></script>

	
6、写出绝对定位，相对定位的以及固定定位的特点，除此之外，尽可能多的列举页面布局的方式
	1》绝对定位：pisotion=absolute
		1>	相对于最近的已定位的父元素进行定位
		若父级定位了，则相对于父级发生偏移；
		没有定位父级，则相对于static定位以外的第一个父元素进行定位
		2>	当前文档完全脱离文档流，不占据原本空间
		3>	绝对定位一般结合相对定位使用
		4>	设置绝对定位会是inline行内元素被块化，不论是行内元素还是块级元素，
			都会生成一个块级框（包裹性：即让元素inline-block）；
		5>	绝对定位还悬浮在页面上方，遮挡住页面下方页面内容，用index-z来定位页面显示的顺序
		6>	设置绝对定位会使元素原有的浮动失效
		7>	使内嵌支持宽高
		8>	提升层次级
		
	2》相对定位：pisotion=relative
		1>	相对于的当前元素所在的位置发生偏移
		2>	不脱离文档流，占据原本空间
		3>	相对定位经常被作为绝对定位元素的容器快，实现相对于absolute定位元素进行偏移；
		4>	若left，right，top，bottom没有设置偏移值，对元素本身没有影响
		5>	提升层级

	3》固定定位：pisotion=fixed
		1>	脱离文档流
		2>	不会随浏览器的滚动而滚动
		3>	与absolute定位一样，
			唯一区别是absolute元素时根据最近的已定位的元素确定位置，而fixed永远根据浏览器窗口确定位置


	4》页面布局
		1>	响应式布局
			2015年5月份提出放入一个概念，简而言之，就是一个网站能兼容多个终端，
			而不是为了每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。
			1）	面对不同分辨率设备灵活性强
			2）	能够快捷解决多设备显示适应问题
			3）	兼容各种设备工作量大，效率低下
			4）	代码累赘，会出现隐藏无用的元素，加载时间长
			5）	其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳的效果
			
		2>display布局
		3>position定位布局
		4>浮动布局
		5>弹性布局
			a)	即伸缩布局模型，减少了依赖于浮动布局实现元素位置的定义以及重置元素大小的，
			轻松的的实现屏幕和浏览窗口大小变化时保持元素的相对位置和大小不变。
			b)	屏幕和浏览器窗口大小发生改变也可以灵活调整布局
			c)	可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调整伸缩项目的大小
			d)	可指定伸缩项目沿着主轴或侧轴将伸缩器额外空间，分配到伸缩项目之前、之后、之间；
			e)	可指定如何垂直于元素布局轴的额外空间分布到该元素的周围
			f)	可控制元素在页面上的布局方向
			g)	可按照不同于文档对象模型DOM所指定排序方式对屏幕上的元素重新排序，
			也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
		
		6>双飞翼布局
			经典三列布局，也叫圣杯布局，下在国内最早由淘宝UED的工程师传播开来
			要求：
			a)	三列布局，中间宽度适应，两边定宽；
			b)	中间栏要在浏览器中优先展示渲染；
			c)	允许任意列的高度最高
			d)	要求只用一个额外的div标签
			e)	要求用最简单的css，最少的hack语句
			
		7>多栏布局
			a)	栏栅格系统：利用浮动实现的多栏布局，在bootstrap中用的非常多；
			b)	多列布局：栅格系统并没有真正实现分栏效果，css为了满足这个要求增加了多列布局模块
			
		8>流式布局
			固定布局和流式布局在网页设计中是最常见的两种布局方式
			固定布局能呈现网页的原始设计效果
			流式布局则不受窗口宽度的影响，流式布局使用百分比宽度来限定布局宽度，
			这样可以根据客户顿分辨的大小来进行合理的显示

		9>瀑布流布局
			h)	流式布局的一种
			i)	视觉表现为参差不齐的多栏布局，随页面的滚动条向下滚动，
				这种布局会加载数据块并附加至当前尾部
			j)	降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页面导航链接或按钮了
			k)	对触屏设备来说，交互方式更符合直觉：
				在移动应用的交互环境当中，通过向上滑动进行滚屏精准程度远远低于点击链接或按钮
			l)	更高的参与度：以上两点所带来的交互便捷可以使用户将注意力更多的集中在内容而不是操作上，
				从而让他们更乐于沉浸在探索与浏览当中
			
			缺点：
			a)	有限的用例:无限的滚动的方式只适合某些特定类型产品当中一部分特定类型的内容
				例如，在电商网站中，用户时常需要在商品列表与详情页面之间切换，
				这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中
			
			b)	额外的复杂度
				那些用来打造无限滚动的js库虽然都自称很容易使用，
				但你总会需要在自己的产品当中进行不同程度的定制化处理，以满足你们自己的需求；
				另外这些js库字浏览器和设备兼容性等方面也参差不齐，你必须做好充分的测试与调整工作
				
			c)	和也叫说再见
				若果使用了比较典型的无限滚动加载模式，这就意味这你可以和页脚说再见了；
				最好考虑一下也叫==页脚对于你的网站，特别是用户的重要性；
				如果其中确实有比较重要的内容和链接，那么最好换另一种更传统和稳妥的方式；
				千万不要耍弄你的客户，当他们一次次的浏览到页面底部，看到页脚，
				却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时他们会变的越发愤怒
			d)	集中在一页当中动态加载数据，与一页一页的输出对比，
				究竟那种方式更利于SEO，这就是你必须考虑的问题。对于某些以类型网站来说，
				在这方面进行冒险是很不划算的
			e)	关于页面数量的印象：
				其实站在用户的角度来看，这点并非负面，不过，如果对于你的网站来说，
				通过更多的内容页面展示更多的相关信息（包括广告）是很重要的策略，name单页无限滚动的方式对你并不适用

	7、简单阐述一下事件监听与事件代理？
	
		1》事件代理：将本该绑定给子元素事件绑定给父级元素来执行
			1>	提高JavaScript性能，显著提高事件的处理速度，减少内存的占用
			2>	动态的添加DOM元素。不需要因为元素的改动二修改事件的绑定
			
		2》事件监听：三个阶段，依次是捕获阶段（由外而内），目标阶段（事件处理），冒泡阶段（由内而外）；
			1>	事件监听可以绑定多个事件，后绑定的事件覆盖前面声明的事件，只执行后绑定的事件，前面绑定的事件不执行
			2>	常规的时间绑定只执行最后绑定的事件，btn.addEventLIstener()
			3>	可以解除相应的绑定

	8、node的作用？
		1》 Node.js是一个事件驱动I/O服务端JavaScript环境，
			基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
			简单的说 Node.js 就是运行在服务端的 JavaScript。
			Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
			
		2》Node作为基础开发环境存在，可以运行各种js脚本
		3》引入模块化机制（commonJS），改变了传统的js开发模式
		4》用于构建服务器端程序，作为服务端开发语言存在