前端应该知道的基础知识汇总
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端应该知道的基础知识汇总相关的知识，希望对你有一定的参考价值。
HTML相关
<!DOCTYPE>的定义和用法
<!DOCTYPE>声明必须位于html文档的第一行，位于<html>标签之前，它是声明不是标签，是指示web浏览器关于页面使用哪个HTML版本编写的指令。
块级元素和行内元素有哪些？（常见）
块级元素：div (主要块级元素)，h1,h2,h3,h4,h5,h6(各级标题)，hr(水平分割线)，form(交互表单)，table（表格），p（段落），ol(排序表单)，ul(非排序列表)，dl(定义列表)
行内元素（内联元素）：input(输入框),img(图片),span(文本区),textarea(多行文本输入框),a(瞄点),br(换行)，sub(上标),sup(下标),i(斜体),em(强调),label(表格标签),u(下划线),strike(中划线),strong(粗体强调),select(项目选择)
html和xhtml的区别
功能上的差别：xhtml能兼容各大浏览器，手机以及PDA,并且浏览器也能快速正确地编译网页。
书写习惯上的差异：XHTML必须严格嵌套，XHTML标签必须闭合，XHTML标签必须小写，XHTML必须拥有根元素（必须被嵌套于<html>标签中）
css相关
css hack 技巧
css属性级hack:
color:red; 所有的浏览器可识别
color:red !important; IE6不能识别!important
_color:red; 仅IE6能识别
*color:red; IE6,IE7能识别
+color:red; IE6,IE7能识别
[color:red; IE6,IE7能识别
#color:red; IE6,IE7能识别
color:red ！ie; IE6,IE7能识别
color:red\9; IE6,IE7,IE8,IE9能识别
color:red\0; IE8,IE9能识别
css选择符级hack:
*html#demo{color:red;} 仅IE6能识别
*+html#demo{color:red;} 仅IE7能识别
body:nth-of-type(1)#demo{color:red;} IE9+,FF3.5+,Chorom,Safari,Opera可识别
head:first-child+body#demo{color:red;} IE7+,FF,Chorom,Safari,Opera可识别
：root#demo{color:red/9;} 仅IE9能识别
IE条件注释hack:
<!--[if IE]>此处内容只有ie可见<![endif]-->
<!--[if IE 6]>此处内容只有ie6可见<![endif]-->
<!--[if !IE 7]>此处内容只有IE7不能识别，其他版本（ie5以上）都能识别<![endif]-->
<!--[if gt IE 6]>此处内容ie6以上版本可识别，ie6不能识别<![endif]-->
<!--[if gte IE 7]>此处内容ie7及以上版本可识别<![endif]-->
<!--[if it IE 7]>此处内容低于ie7的版本才能识别，ie7无法识别<![endif]-->
<!--[if ite IE 7]>此处内容ie7及以下的版本可识别<![endif]-->
<!--[if ！IE]>此处内容只有非IE可见<![endif]-->
css层叠样式的理解
css层叠样式可以理解为样式的优先级，
从css来源来说，内联样式（<a style="...">）>内部样式(<style>...</style>)>外部样式（css文件）>浏览器默认样式。
从选择器来说，id>class>元素选择器，有!important的时候!important优先级最高。
以上是关于前端应该知道的基础知识汇总的主要内容，如果未能解决你的问题，请参考以下文章