1.前端页面有哪三层构成，分别是什么？
构成：结构层、表示层、行为层
结构层（structural layer）
结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
表示层（presentation layer）
表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥
行为层（behaviorlayer）
行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域
2.行内元素和块级元素分别有哪些？有何区别？怎样转换？
常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6
常见的行级元素：span、a、img、button、input、select
块级元素：
总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
宽度缺少时是它的容器的100%，除非设置一个宽度
高度、行高以及外边距和内边距都是可以设置的
块级元素可以容纳其它行级元素和块级元素
行内元素：
和其它元素都会在一行显示
高、行高以及外边距和内边距可以设置
宽度就是文字或者图片的宽度，不能改变
行级元素只能容纳文本或者其它行内元素
使用行内元素需要注意的是：
行内元素设置宽度width无效
行内元素设置height无效，但是可以通过line-height来设置
设置margin只有左右有效，上下无效
设置padding只有左右有效，上下无效
可以通过display属性对行内元素和块级元素进行切换：
3.谈谈fixed ，related ， absolute
静态定位（position:static）：是HTML中默认的定位，符合常规文档流
相对定位(position:relative)：相对定位是相对本身位置而言的，进行上下左右的偏移，但是他不脱离文档流
绝对定位(position:absolute)：绝对定位是相对于父元素来定位的，如果没有父元素或者说父元素没有定位的情况下，会向上一直找寻参照物，直至最终的浏览器窗口，区别于相对定位，绝对定位会脱离文档流
固定定位（position：fixed），可理解为绝对定位中的一种特殊情况，即absolute包含fixed。它参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动
4.清除浮动的方法
1、父级定义伪类：after和zoom
<style>
div:after{
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
}
div{
zoom:1;
}
</style>
原理：利用css提高的clear:both清除浮动，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持，不容易出现问题
缺点：代码多
2、在结尾处添加空div或者其他标签clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持，不容易出现问题
缺点：如果页面浮动布局多，就要增加很多空div
3、父级div定义height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
4、父级div定义overflow:hidden/overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏/会出现滚动条
5.HTML5 新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放 (Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频 API (audio,video)
画布 (Canvas) API
地理 (Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术 webworker, websocket, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
6.说说对 html 语义化的理解
HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。
语义化的优点如下：
在没有CSS样式情况下也能够让页面呈现出清晰的结构
有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化
7.src 和 href 的区别
src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：
src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。
8. div+css 布局较 table 布局有什么有点？
更改表现形式的时候方便，只需更改 css 文件。
table布局，页面加载时，需要整个加载完才渲染，而div+css布局是边加载边渲染的，相当于速度方面更块。div+css布局代码清晰一点，table布局 就需要嵌套很多表格，代码不清晰。
还有就是，div+css布局的 SEO 更好，排名更靠前
9.Px，rem，em的区别
Px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的
em 相对长度单位，相对于当前对象内文本的字体尺寸
em的值并不是固定的
em会继承父级元素的字体大小（参考物是父元素的font-size）
em中所有的字体都是相对于父元素的大小决定的
rem 相对于html根元素的font-size
1em=1rem=16px 在body中加入font-size：62.5% 这样直接就是原来的px数值除以10加上em就可以
10.页面渲染HTML的过程
浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。
DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性
一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
注意： 以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM
4782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
