web-note 学习要点记录

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

chrome css乱码中文问题###

在css文档开始处，加上

@charset "utf-8";

id 和 name 使用上区别

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

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

<input id="radio1" type="radio" name="group1"/>
<input id="radio2" type="radio" name="group1" />
<input id="radio3" type="radio" name="group2" />

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

区别如下：
1、我们知道在网页做Post提交时，是以Form（即表单域）为单位进行提交的，一个Form里有若干个表单对象(如 <input type="text" name="UserName" value="请输入姓名"/> )，同一个页面里可以为多个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适合人阅读些。

最后编辑于：2017.12.06 14:59:30