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实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- 从问题看本质:socket到底是什么?
一.问题的引入——socket的引入是为了解决不同计算机间进程间通信的问题 1.socket与进程的关系 1).socket与进程间的关系:socket 用来让一个进程和其他的进程互通信息(IPC ...
- JSONP跨域处理实例
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...
- html中的图像动态加载问题
首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...
- java并发编程(十七)Executor框架和线程池
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17465497 Executor框架简介 在Java 5之后,并发编程引入了一堆新的启动 ...
- C\C++ 1A2B小游戏源码
学了一段时间,心血来潮写了一个1A2B小游戏,很多人应该玩过,是一个挺有意思的益智小游戏,之前用易语言写过,现在又用C++重写了一下. 编译运行无错,整体程序设计思路为:进入循环,初始化游戏,读入一个 ...
- Oracle中的CHR()函数与ASCII()函数
工作中经常会处理一些因特殊字符而导致的错误,如上周我就遇到了因为换行符和回车符导致的数据上报的错误,这种错误比较难以发现,通常是由于用户的输入习惯导致的,有可能数据极少,就那么几行错误从而导致整个数据 ...
- 10000 Reasons(Matt Redman)
这是一首很感动的主内歌曲,听了无首次,还是很感动,这里把歌词贴出来,一方面是为了记忆歌词,另一方面是为以后怀念记忆.(20:44:38) Bless the lord,oh my soul oh m ...
- dom中一些节点获取和增改
1获取标签里的文本对象: 对象.innerText 获取标签里的文本内容 早期的火狐浏览器中是不支持的 赋值会输出转义后的内容 对象.innerHTML 获取标签里的所有内容 赋值会输出原样 ...
- Navsion二次开发_学习笔记
CodeUnit Note This feature is documented in the Navision Application Server Technical White Paper. ...
- ABP理论学习之数据过滤器
返回总目录 本篇目录 介绍 预定义过滤器 关闭过滤器 开启过滤器 设置过滤器参数 定义自定义过滤器 其他ORM 介绍 软删除模式通常用于不会真正从数据库删除一个实体而是仅仅将它标记为"已删除 ...