web-note 学习要点记录

遇到的问题和解决方案##

chrome css乱码中文问题###

在css文档开始处，加上

@charset "utf-8";

id 和 name 使用上区别

name 可重复 一般是用来取指
id不可 一般是标识
document.getElementById
document.getElementByName

name可以理解成一个group，就是分组。
如果你有三个RadioButton，

那么，radio1和radio2是互斥的，因为他们同属group1
但是radio3和另外两个radio没有关系

区别如下：
1、我们知道在网页做Post提交时，是以Form（即表单域）为单位进行提交的，一个Form里有若干个表单对象(如 )，同一个页面里可以为多个Form（Asp.net不同，它只允许有一个，且名字必须为Form1），在表单表提交到服务器端后，可以直接通过Name属性取到表单域的值，却无法通过ID直接取到该表表单对象的值。
2、同一个Form里不能有多个name属性相同的HTML标记，但如果一个网页中有多个Form，则不同的Form里可以有同个Name属性的标记。而ID是全局的，在一个HTML文档里不能有多个节点使用相同的ID，无论它处在哪个Form里。
3、在建立CSS样式的时候，可以建立ID样式表（以＃为前缀），使具有该ID的样式直接应用该样式，而无法建立Name样式表。
4、在进行网页编辑时建议使用ID来标识一个节点，而不是使用Name（除非是为了Post提交的需要），同样使用Javascript进行Dom节点定位时建议使用getElementById方法，因为只有ID能唯一标识一个节点，而同一个网页里可能会有多个Name属性相同的节点，它们分别处在不同的Form里。

tips

html

• html 用于指定网页的结构
• html 编写时要注重意义，不在乎形式。比如引用他言，用q blockquote ，而不是专门给加上双引号。
• html中，对字体的link 最好放在css前。
• li 是block，所以要让li 排列在一行要 display inline
• js的链接放在末尾比较好，这样子不会被覆盖。也可以在body中间建多个script tag，展示的效果在对应处显示。
• 响应式设计： 都用 百分符，不用 px。
• 先用div画出所占空间，再填充。一定！！！！！！

css

• div 居中
• block 没设定宽度是不能 margin auto 来居中的

• 控制img 在框里面, 最好给img设置 img全局 max-width: 100%;

img { max-width: 100%}

• css的排版过程中借助 border 显示确定 位置
• css的选择器是从右往左解析的，不建议使用 通配符 *，直接用body。
• ul 自动会在 第一项li 前留白一部分，可以通过padding 0，margin 0 除去。

js

• 确定js文件是否有效 用alert（）或者 tool console窗口查看
• js错误 在 devtool 的console 窗口会显示
• onmousedown 事件 鼠标点击事件 ，当页面比较短的时候，鼠标不能点击页面未到达的地方
• 在js里面向html一个 标签 追加 一个新标签时，html的是新标签的父标签（计算向 p 加入一个 p 也行，虽然逻辑上不通）

bootstrap

• 需要使用 col-md-* div顺序一般：container- row- col-md-*
• 每次的col-md-4 最好放在div 里面。col xs md 两种

• input group 里面添加下拉按钮，按钮和旁边输入框不匹配，要在输入框 class form-control
• container-fluid的width是100％，而container的width是用媒体查询获得的动态尺寸。两者样式肯定是不一样的。并且由于padding的原因两者不可用嵌套，他们就是提供两种视觉风格。640px之前效果一样。 container-fluid更适合小屏
• 居中 block-center ；pull-left pull-right
• nav nav-tabs 样式效果只对链接起效
• 下拉按钮：外面一个div class为 btn-group / dropdown；两部分
• • button/other:class dropdown-toggle , data-toggle dropdown
• • ul / others: class dropdown-menu, button 里的class未设置 btn 在 button group里面排列时显示会后移

others

• jquery.js和jquery.min.js的区别

jquery.min.js是jquery.js经过压缩后的版本，没有多余字符（如变量的名称基本都换成一个字母，没有换行符和缩进，没有注释），所有代码都在一行，减小整个js文件的大小，加快浏览器的加载速度，提升用户体验。
jquery.min.js由于经过压缩处理，不方便人阅读，适合电脑，jquery.js适合人阅读些。