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实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- js基础3
内置对象 内置对象就是JS提供的一套工具箱,我们通过内置可以很方便的进行一些操作. Math对象: Math.ceil() //向上取整,天花板 Math.floor() //向下取整,地板 Math ...
- JS二维数组排序组合
需求是这样的:http://q.cnblogs.com/q/29093/ 这里简述一下: 现在有一个不确定长度的数组.比如:var temp=[["Fu","Hai&qu ...
- JS转换数字金额为大写
function DX(n){ if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return ""; var unit = "仟佰拾亿仟佰拾 ...
- Xcode8中处理打印日志的配置
Xcode8中处理打印日志的配置
- DIV+CSS自适应布局
自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应 1,高度自适应 ...
- 自定义 TableViewCell 的分割线
刚开始自定义 tableViewCell 的时候,用的是直接在 cell 上加一张 imageView 的方法,如果在点击 cell 的时候有页面的跳转,这样做没什么问题,但是,如果在点击 cell ...
- >xx.hbm.xml的一些简单配置
1.在hibernate-mapping的属性里有一个package,它的意思是以下的类都是在这个包下的,下面写类路径的时候,可以不写包名 2.class标签 name属性指的是类 table属性指的 ...
- 关于IOS浏览器：document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- 解决WARN: Timeout/setRollbackOnly of ACTIVE coordinator !的问题
该问题是CoordinatorImp上面的一个定时器造成的,一个活动的session如果在一定的时间内没有执行完毕就会rollback,就算没有sql执行也会不断的进行. 可以参考该链接:https: ...
- Remote Desktop Connection Manager
通过Remote Desktop Connection Manager(RDCMan),当前最新版本是 v2.7. 通过这款软件,我们便可以轻松的管理和访问数个RDP.左边的列表中我们可以创建总的分区 ...