前端知识梳理总结
HTML
1. WEB标准以及W3C标准是什么：
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。
2. xhtml和html区别：
一个是功能上的区别：主要是XHTML可兼容各大浏览器、手机以及PAD，并且浏览器也能快速准确地编译网页。
另外是书写习惯的差别：XTHML元素必须被正确的嵌套，闭合，区分大小写，文档必须拥有根元素。
3. Doctype作用？严格模式与混杂模式如何区分？他们有何意义？
<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
严格模式的排版和JS运作模式是 以该浏览器支持的最高标准运行；
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
4. 行内元素有哪些？块级元素有哪些？空元素有哪些？行内元素和块级元素有什么区别。如何转换？
css规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为‘block’，成为‘块级元素’；span默认display属性值为‘inline’,是‘行内元素’。
行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4... p
知名的空元素：<br> <hr> <img> <input> <line> <meta>
鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
| 行内元素 | 块级元素 |
| 1 和其他元素都在同一行； | 总是在新行上开始； |
| 2设置width，height无效（可设置line-light），margin，padding上下无效 | 高度、行高以及外边距和内边距都可控制； |
| 3 宽度就是它的文字和图片的宽度，不可改变；（默认宽度只与内容有关） | 宽度默认是它本身父容器的100%（和父元素宽度一致），除非设定一个宽度； |
| 4 只能容纳文本或者其他行内元素。 | 它可以容纳行内元素和其他块状元素。 |
块级元素与行内元素（内联元素）之间的转换主要是：
行内=>块级：
display:inline-block；元素为行内块状元素。有宽高属性,margin，padding上下有效（block），但不能独占一行（inline）。
display:block；元素有宽高属性，并且独占一行。
块级=>行内：display:block；
备注：inline-block的元素（如input、img）既具有block元素可以设置宽高的特性，同时又具有inline元素默认不换行的特性。当然不仅仅是这些特性，比如inline-block元素也可设置vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。
5.link和@import的区别是？
link属于XHTML标签，而@import是CSS提供的；
页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
link方式的样式的权重高于@import。
6. 浏览器的内核分别是什么？
Safari的Webkit
Chrome的Blink（Webkit的分支）
Opera内核原为Presto,现为Blink
IE浏览器的内核Trident
Mozilla FireFox(火狐浏览器)的Gecko
7. 常见浏览器兼容性问题？
- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin：0；padding：0；}来统一，但是全局效率很低，一般是如下这样解决：
body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{ margin:0; padding:0; }
- Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性
-webkit-text-size-adjust:none;解决。（只对chrome27.0 版本以下有效，27.0以上版本无效；只对英文才有效，对中文无效）在新版中，已经禁止了该属性，建议使用CSS3中的方法(不仅是文字变小，整个文字所在的容器也同时会变小)：
transform:scale(0.875);
8. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
- HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务，画布等。
- 绘画canvas
用于媒介回放的video和audio元素
本地离线存储：
localStrong 长期存储数据，浏览器关闭后数据不丢失；
sessionStrong的数据在浏览器关闭后自动删除
语义化更好的内容元素，如article header nav section footer
表单控件：calendar date time email url search
新技术webworker websockt Geolocation
- 移除的元素
纯表现的元素：basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响的元素：frame frameset noframes;
- 支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签的默认样式。
当然最好的方式是直接使用成熟的框架，使用最多的是HTML5shim框架
9. 语义化的理解？
- 用正确的标签做正确的事情！
- html语义化就是让页面的内容结构化，便于被浏览器、搜索引擎解析；
- 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
- 搜索引擎的爬虫依赖于标记来确定上下文和各关键字的权重，利用SEO;
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
CSS
1. css的盒子模型
有两种：IE盒子模型、标准W3C盒子模型；IE的content包含了border和padding；
盒模型：内容（content）， 内补白（padding） ，外补白（margin） ，边框（border）
2. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？
- id选择器（#myid）
- 类选择器（.myclassname）
- 标签选择器（div,h1,p）
- 相邻选择器（h1+p）
- 子选择器（ul>li）
- 后代选择器（li a）
- 通配符选择器（*）
- 属性选择器（a[rel="external"]）
- 伪类选择器（a:hover,li:nth-child）
a. 可继承的样式： font-size font-family color ul li dl dd dt;
b.不可继承的样式：border padding margin width height ;
优先级为：
!important > id > class > tag
important 比 内联优先级高
优先级就近原则，同权重情况下样式定义最近者为准；
载入样式以最后载入的定位为准。
CSS3新增伪类举例
- p:first-of-type 选择属于其父元素的首个
<p> 元素的每个 <p>元素。 - p:last-of-type 选择属于其父元素的最后
<p> 元素的每个 <p>元素。 - p:only-of-type 选择属于其父元素唯一的
<p> 元素的每个 <p>元素。 - p:only-child 选择属于其父元素的唯一子元素的
每个 <p>元素。 - p:nth-child(2) 选择属于其父元素的第二个子元素的
每个 <p>元素。 - :enabled :disabled 控制表单控件的禁用状态。
-
:checked 单选框或复选框被选中。
JS
待更新...
