Html,Css,Dom,javascript细节总结
最近愈发觉得基础的重要性，细节决定成败，所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来，更好的方便自己记忆回顾。
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第一行进行如下声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这样，则指代的都是content的宽和高。 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
具体<!DOCTYPE>声明用法可参见：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标签出现。
7.<div>与<span>标签的区别：<div>是一个块级（block-level）元素，内元素会自动换行，而<span>仅仅是一个行内元素，在它的前后不会换行。
8.XHTML 1.0要求所有的标签必须关闭，所有没有成对的空标签必须以 />结尾。例如<hr>是错误的写法，须写成<hr/>,<input type="text" name="name">是错误的写法，须写成 <input type="text" name="name" />。
Html,Css,Dom,javascript细节总结的更多相关文章
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- 你所不了解的javascript操作DOM的细节知识点(一)
你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...
- 新手理解HTML、CSS、javascript之间的关系
http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 解耦HTML、CSS和JavaScript
当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...
- 【转】HTML, CSS和Javascript调试入门
转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...
- HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript
HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript Though it's not ...
- CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- Linux下uniq命令的详解
-c 在输出行前面加上每行在输入文件中出现的次数. -d 仅显示重复行. -u 仅显示不重复的行. 示例 1.去重,有多行一样的只显示一行cat 4.txt |sort - ...
- 获得Map的选择集
ISelection selection = m_hookHelper.FocusMap.FeatureSelection; IEnumFeatureSetup iEnumFea ...
- java学习中的一些疑惑解答
一.java中的枚举类型: 在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.例如星期一到星期日七个数据元素 ...
- input框focus时的美化效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery 中的框架
DWZ 国产Ajax RIA开源框架 Ninja UI 框架 提供页面插件 angela ui框架 表单布局等 Chico UI 快速页面布局 PrimeUI w2ui 布局 ...
- AJAX回调函数，返回JSON格式，应该返回自定义状态STATUS，但是却返回200
返回200应该是方法已经执行通的意思,但是没返回自定义的status,仔细一看json格式拼错了...
- Surface Shader简单向导
Surface Shader 表面着色器 描述 当你的Material要处理光照,则一般使用Surface Shader.Surface Shader隐藏了光照的计算,你只需要在surf函数里设置好反 ...
- 剑指Offer面试题：15.反转链表
一.题目:反转链表 题目:定义一个函数,输入一个链表的头结点,反转该链表并输出反转后链表的头结点. 链表结点定义如下,这里使用的是C#描述: public class Node { public in ...
- MySQL mysqldump数据导出详解
介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用非常频繁的一个工具:它自带的功能参数非常多,文章中会列举出一些常用的操作,在文章末尾会将所有的参数详细说明 ...
- ajax的post方式和get方式比较，以及需要注意的地方
说明:测试所用的js框架为kissy,后端语言为php 写在前面 目前我们可以将ajax请求的情形按照不同的类型进行分类,比如页面编码:utf-8 or gbk; ajax 传参方式 post or ...