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

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标签出现。

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

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细节总结的更多相关文章

  1. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  2. 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...

  3. 新手理解HTML、CSS、javascript之间的关系

    http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...

  4. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  5. 解耦HTML、CSS和JavaScript

    当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...

  6. 【转】HTML, CSS和Javascript调试入门

    转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...

  7. 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 ...

  8. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. 解决python编码格式错误问题

    一:前言 遇到问题:print输入汉字时提示错误信息 UnicodeDecodeError: 'ascii' codec can't decode byte 0x?? in position 1: o ...

  2. C#_取随机字符

    1.多位数字字母组成,每位取值0-9A-Z /// <summary> /// 获取下一个顺序码根据上一个(数字字母组合) /// </summary> /// <par ...

  3. Linux下uniq命令的详解

           -c 在输出行前面加上每行在输入文件中出现的次数.  -d 仅显示重复行.       -u 仅显示不重复的行. 示例 1.去重,有多行一样的只显示一行cat 4.txt |sort - ...

  4. 关于textarea中换行、回车、空格的识别与处理

    需求:在textarea中输入文字,提交给后台后,后台输出在另一个页面,文字按原格式显示.   问题:如何还原输入框中的换行和空格? 兼容性:IE9以上.FF.chrome在换行处匹配/\n/     ...

  5. C#窗体中读取修改xml文件

    由于之前没有操作过xml文件,尤其是在窗体中操作xml,脑子一直转不动,而且很抵制去做这个功能,终于还是突破了自己通过查询资料完成了这个功能,在此记录一下自己的成果. 功能说明:程序中存在的xml文件 ...

  6. [WPF] 我的WPF自学日记2,自定义入口

    在winform中入口文件就是Program.cs,而在WPF中看不到,因为它是自动生成的,可以说隐藏了,我们可以自定义一个入口文件,然后修改项目属性中的启动对象为我们自定义的入口文件. 首先新建入口 ...

  7. 临时更换hadoop-ugi

    在用spark读写hdfs数据时,有时候当前用户对要读写的hdfs路径没有权限,需要临时改变用户去读写hdfs,操作完后回到原来的用户.我们的hdfs是没有权限认证的,一开始通过下面代码的方式来实现. ...

  8. gkENGINE重开!

    2013年中,曾信誓旦旦的要开源gkENGINE,结果一直到了现在. 拖了一年多,问题在于 - 工作太忙... 其实在2014春节假期我还是赶了赶进度,对gles2的渲染器进行了完善,但没做完.然后留 ...

  9. Ibatis 使用心得

    (1)建表语句 sqlMap: <statement id="createTable" parameterClass="String" > $sql ...

  10. java包(package)的命名规范

     Java的包名都有小写单词组成,类名首字母大写:包的路径符合所开发的 系统模块的 定义,比如生产对生产,物资对物资,基础类对基础类.以便看了包名就明白是哪个模块,从而直接到对应包里找相应的实现. 由 ...