前端应该知道的基础知识汇总
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优先级最高。