Html,Css,Dom,javascript细节总结_html/css_WEB-ITnose

程序员文章站 2022-04-25 19:03:36

...

最近愈发觉得基础的重要性，细节决定成败，所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来，更好的方便自己记忆回顾。

1.在构建网页Html框架时，尽量只给外层标记（即是父标记）定义类别class或id，内层标记（即是子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的类别或者专用id。选择器的嵌套和选择器的集体声明可以大大减少对类别class、id的声明，简化Css代码。

2.在Html页面中，颜色统一采用RGB即是“红绿蓝”三原色模式。每种颜色都由这3种颜色的不同比重组成，分为0~255档，例如 rgb（100%、100%、100%）、rgb（255,255,255）、#FFFFFF都指代白色，其中#FFFFFF为十六进制的表示方法，前两位为红色分量，中间为绿色分量，最后两位是蓝色分量。

关于颜色的基础，推荐阅读:http://jingyan.baidu.com/article/ab0b5630c585e8c15bfa7d75.html

3.在不同的浏览器中，width和height的值的兼容性很差，如果不进行特殊的声明，在IE7中指的是content（内容）+padding（间隙）+border (边框) 的宽或者高，而在Firefox或者google里面指的是content的宽和高。为了使其在不同浏览器中兼容，可在Html第一行进行如下声明：

这样，则指代的都是content的宽和高。声明必须是 HTML 文档的第一行，位于

标签之前。

具体声明用法可参见：http://www.w3school.com.cn/tags/tag_doctype.asp

4.top、right、bottom、left这4个Css属性，它们都必须要配合position属性来使用的，表示的是块的各个边界离页面的边框（position属性设置为absolute时）或者原来的位置（position属性设置为relative时）的距离。

5.如果在使用getElementById（）获取给定的id的节点时，有同名元素的name属性，在IE浏览器中还会返回这个元素。这是一个非常严重的Bug，所以我们在搭建框架的时候应该尽量避免id与其他元素的name属性重复。

6.meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：

＜head＞
＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

＜/head＞
也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。另外，为了让浏览器识别正确的编码，meta charset标签应该先于title标签出现。

具体详解：http://wenku.baidu.com/link?url=Tk4vageSbJlE0iBKQS0FQTH0-YCR00YR6bejflnrkNVRA2zJaOWRHvVKJ44_Kmn2V79C7gou3KEt1e9-CRlePn_iCDfz0wdeG2F-EX6yoie

与标签的区别：

是一个块级（block-level）元素，内元素会自动换行，而仅仅是一个行内元素，在它的前后不会换行。

8.XHTML 1.0要求所有的标签必须关闭，所有没有成对的空标签必须以 />结尾。例如