前端应该知道的基础知识汇总

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:red9;  IE6,IE7,IE8,IE9能识别

color:red;  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优先级最高。

原文地址:https://www.cnblogs.com/lexie/p/5944756.html