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实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- web存储
1. cookie: 如果想将cookie取到,可以通过document.cookie;取到的是所有的cookie数据 他是一直保存在网页中的:他有一个时间的限制,如果时间过期,则删除 写入:docu ...
- 【转】安全传输协议SSL和TLS及WTLS的原理
一.首先要澄清一下名字的混淆 1.SSL(Secure Socket Layer)是Netscape公司设计的主要用于WEB的安全传输协议.这种协议在WEB上获得了广泛的应用. 2.IETF将SSL作 ...
- 将 java 项目打包成可运行的 jar 包（main 函数带参数），并上传到 linux 服务器上运行
一.概述 java项目有两种架构,一种是 B/S 架构的,一种是 C/S 架构的. 对于 B/S 架构来说,我们常见的 java ee 即是 B/S 架构,通常,开发人员会在本地进行开发,然后将项目打 ...
- Centos7 编译安装 Nginx PHP Mariadb Memcached 扩展 ZendOpcache扩展 (实测 笔记 Centos 7.3 + Mariadb 10.1.20 + Nginx 1.10.2 + PHP 7.1.0 + Laravel 5.3 )
环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7-x86_64-Minimal-1611.iso 安装步骤: 1.准备 1.0 查看硬 ...
- java-JDBC配置驱动程序
我们以常用的3种数据库为例. MySQL数据库 驱动程序包名:mysql-connector-java-3.1.11-bin.jar 驱动类的名字:com.mysql.jdbc.Driver JDBC ...
- Python的字节编译
1.什么是Python的.pyc文件 在python中 .pyc文件是指以.pyc为后缀名的这一类文件,在我们的python的安装目录里,找到模块所在的目录Lib会看到很多以.py结尾的模块文件,与之 ...
- System.Web.HttpContext.Current.Session为NULL解决方法
http://www.cnblogs.com/tianguook/archive/2010/09/27/1836988.html 自定义 HTTP 处理程序,从IHttpHandler继承,在写Sys ...
- STL之priority_queue
下面以 long long 型队列介绍: Q.empty() // 判断队列是否为空 返回ture表示空 返回false表示空 bool Q.top() // 返回顶端元素的值 元素还在队列里 lon ...
- php面向对象中的几个基本定义
面向对象: 面向对象是现代编程中的一种重要设计方法,其基本思想是使用对象,类,封装,继承等来进行程序设计. 对象: 一只猪,一只羊,一辆汽车. 类: 类的主要作用就是创建对象. 封装: 类的特点是将对 ...
- 温故而知新 css + html 超级牛逼的居中策略
该方法甚至可以解决img内容居中的问题 套路:最外层div宽度为居中内容所占的宽度(通常是1170px),并且使其居中(margin:auto) 里层的div宽度为全屏(通常是1920px;)再mar ...