最近一段时间都没有写博客，一是因为有新的项目要做，而是最近在学习有关H5移动开发相关方面的内容，以下是看了“【江哥带你从“零”玩转Html5 + 跨平台开发】”总结的学习笔记，目前只是更新到了H5+CSS3，相关视频网站地址：http://bbs.520it.com/forum.php?mod=viewthread&tid=2418
HTML学习笔记
字符集：header标签中添加<meta charset = “GBK”/>解决乱码，指定当前网页字符集。
注意：在html文件中指定的字符集和保存这个文件的字符集一直，否则还会楚翔乱码。
DTD文档声明。
每一个不同版本的规范都有不同的DTD文档声明。
<!DOCTYPE html>
注：DTD文档声明必须写在第一行。不区分大小写。不是一个标签。是一个指令。浏览器编译/解析/渲染网页时不会完全依赖DTD文档声明。
base标签：就是专门用来统一指定当前网页中的超链接需要如何打开。必须写在head标签。
列表：
无序列表
<ul>
<li>内容</li>
</ul>
<ul>和<li>是一个组合，一般整体出现，不会单独出现。
有序列表
<ol>
<li>内容</li>
</ol>
定义列表：1）网站尾部描述信息，例如京东尾部的购物指南，配送方式等。2）做图文混排
<dl>
<dt></dt>definition title，定义标题
<dd></dd>definition description，定义描述
</dl>
<dd>和<dt>中添加其他标签。
webStorm快速编写<ul>格式
ul>li*3然后按tab键
ul>li*2>h2+ul>li*3
格式化：command+option+l
注释：command+/
表格标签：一个table标签就是一个表格
注：表格边框有边框属性，默认属性值为0的。
<table>
<tr>
<td></td>
</tr>
</table>
<caption></caption>为表格的标题。写在<table>标签里。自动相对表格居中。
<th><th/>标题单元格标签，文字默认加粗，居中。
表格的存储数据：(完整结构)
1. 标题 caption
2. 表头 thead
3. 内容 tbody
4. 页尾 tfoot
注：如果指定了thead 和 tfoot，设置table高度不会受影响，有自身的默认高度。
合并单元格：
水平方向合并<td colspan = “2”>把当前单元格当做两个单元格看待，需把多出的单元格删掉。
只能向上或者向下合并。
垂直方向合并：<td rowspan=“2”>，同理删除多余单元格。
表单：收集用户信息
格式：
<form>
<表单元素>
</form>
常见表单元素：
<input>输入框，type属性（功能和外观），有很多类型。
提交表单数据：
添加action，提交的路径URL
提交内容添加name属性。
隐藏域：配合提交按钮将一些数据偷偷的提交到服务器。（Ajax）
datalist :输入框待选项，需要绑定输入框
<input type = “test” list = “listId”>
<datalist id=“listId”>
<option>待选内容</option>
</datalist>
select 标签，下拉列表。不能输入内容，直接选择。可以设置默认值。
可以使用optgroup标签包裹进行分组。
<select>
<optgroup label = “分组名称”>
<option>待选内容</option>
<option selected = “selected”>默认选项</option>
</optgroup>
</select>
多行输入框：<textarea>标签。
css学习笔记
优点
1.不用记忆哪些属性属于哪个标签。
2.需求变更不需要修改大量的代码。
css，只能放在<style>标签中，<style>标签只能放在<head>标签中。
type=“text/css”：代表文本的css样式。
css：
标签名称 {
属性名称：属性值
}
选择器：标签名称
属性
设置字体：可以选择备选方案。中文字体能处理中文和英文，英文字体只能处理英文。
font-family:”Times New Roman”,”微软雅黑”
单独给英文设置字体，英文字体放在前面
文字样式缩写：font：italic bold 10px “楷体”
缩写格式中，style和weight不是必写项并可以交换位置。
有的属性值必须写，并且必能随便乱放位置，size必写family前面，并且size和family必需协助最后。
文本缩进的属性：text-indent:2em缩进2个文字。
标签选择器：
根据指定的标签名称，在当前页面找到所有标签并设置属性。
id选择器和类选择器，id名称唯一，不能重复。
前面必写添加“#”。
名称规范：数字，字母，下划线。不能以数字开头。
类名选择器：可以重复，前面加“.”，给某个特定标签设置属性的。一个标签可以同时绑定多个类名（用空格分开）。
后代选择器：找到指定标签的所有后代标签，设置属性。
标签名称1 标签名称2 {
}
先找到标签1，然后查找标签1下的所有标签名称2。
空格分开，后代既包含该标签中的所有标签2。
可混合使用，可无限延伸，例如：
#id .class {
属性值
}
子元素选择器： 找到指定标签中所有特定的直接子元素，然后设置属性。
先找到标签1，然后找标签1下所有直接子元素的标签2。
格式：
标签1>标签2 {
属性
}
注意：只会查找儿子，不会查找其他嵌套的孙子，”>”相连接，同后代选择器一样，可以混合使用并无限延伸。
找id标签下的类为class的标签下的div。
#id>.class>div {
}
后代选择器和子选择器的区别？
1.一个是空格链接，一个是>号连接。
2.后代：儿子/孙子… 子选择器：儿子
后代选择器和子选择器的共同？
1.混合使用
2.通过连接符号一直无限下去。
交集选择器：给所有选择器选择的标签中，相交的那部分标签设置属性。
格式：
选择器1选择器2{
属性
}
选择器之间没有连接符号。
例如：
p.paral {
属性
}
#id.class{
属性
}
找到id是“id”的所有标签，类名是”class”的所有标签，这些标签相交的部分。
并集选择器：给所有选择器选择的标签中，并集的那部分标签设置属性。
格式：
选择器1，选择器2{
}
使用“,”相连接，
#id，.class{
属性
}
兄弟选择器：同级关系例如<head>和<body>标签。
相邻兄弟选择器（CSS2）：给指定选择器后面紧跟的那个选择器选中的标签设置属性。
格式：选择器1+选择器2 {
属性
}
h1+p{
color:red;
}
例如：给相邻<h1>标签的<p>标签设置属性（段落1和段落4）
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<h1>标题2</h1>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
注意：+号相连接，只能选中紧跟其后的那个标签。
例如：段落1不会变成红色字体。
<h1>标题1</h1>
<a href=“#”>超链接</a>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<h1>标题2</h1>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
通用兄弟选择器(CSS3)：给指定的选择器后面的所有选择器选择的所有标签设置属性。
格式：选择器1~选择器2 {
属性
}
h1~p{
color:red;
}
注意：~连接，选中的是指定选择的后面的某个选择器选中的所有标签，无论有没有被其他标签分割。
例如：给<h1>标签的后面的所有<p>标签设置属性。
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<h1>标题2</h1>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
例如：段落1仍会变成红色字体，不受影响。
<h1>标题1</h1>
<a href=“#”>超链接</a>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<h1>标题2</h1>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
序选择器：（CSS3中新增的最具代表性的选择器）
1.同级别的第几个
1）同级别中第一个：:first-child
格式：p:first-child {
color:red；
}
例如：段落1和段落3变红。
<p>段落1</p>
<p>段落2</p>
<div>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
注意：不区分类型。同级别第一个是<h1>，所以段落1不会变红。
例如：段落1不会变红，段落3变红。
<h1>标题2</h1>
<p>段落1</p>
<p>段落2</p>
<div>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
以上这种情况可以使用:first-of-type，就可以使段落1和段落3变红
2）同级别中最后一个：:last-child，不区分类型。
3）同级别中第n个：:nth-child(n)，不区分类型。
4）同级别中倒数第n个：:nth-last-child(n)，不区分类型。
5) 选择标签中只有一个子元素的子元素标签:only-child
例如：段落3变红，Q:为什么段落一没有变红？因为最外层有两个标签，<p>和<div>。
<p>段落1</p>
<div>
<p>段落3</p>
</div>
2.同级别同类型的第几个
1) 同级别同类型第一个:first-of-type，区分类型。
2) 同级别同类型最后一个:last-of-type，区分类型。
3) 同级别同类型第n个:nth-of-type(n)，区分类型。
4) 同级别同类型倒数第n个:nth-last-of-type(n)，区分类型。
5) 选择标签中同类型的标签只有一个子元素的子元素标签:only-of-type
例如：段落1和段落3都变红变红，区分类型。
<p>段落1</p>
<div>
<p>段落3</p>
<h1>标题</h1>
</div>
补充：
同级别：
1)基数都变成红色（段落1，3，5）：:nth-child(odd)
2)偶数都变成红色（段落2，4，6）：:nth-child(even)
3)符合表达式的标签变成红色：:nth-child(xn+y) x和y是用户自定义的，而n是一个计数器，从0开始递增。p:nth-child(2n+0){ color:red }：（段落2，4，6变成红色）
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
同级别同类型：
1)基数都变成红色（段落1，3，5）：p:nth-of-type(odd)
2)偶数都变成红色（段落2，4）：:nth-of-type(even)
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<h1>标题2</h1>
<p>段落4</p>
<p>段落5</p>
<h1>标题3</h1>
<p>段落6</p>
属性选择器
1.根据指定的属性名称找到对应的标签，然后设置属性。
格式：[attribute]
例如：将有”id”属性的<p>标签设置为红色：
p[id]{
color:red;
}
<p id=“id1”>段落1</p>
<p id=“id2”>段落2</p>
<p>段落3</p>
2.找到指定属性名称，并且属性值等于value的标签，然后设置属性。
格式：[attribute=value]
最常见应用场景，设置<input>的标签。
其他属性选择器：
1.属性取值以什么开头。
[attribute|=value] CSS2：只能找到以“abc”开头，并且“abc”与其他值以”-”分割。如下
<img src= “” alt=“abc-www”>
[attribute^=value] CSS3
格式：<img>标签中alt属性以”abc”开头的标签。
img[alt^=abc] {
color = red;
}
2.属性取值以什么结尾。
[attribute$=value] CSS3
3.属性取值是否包含某个特定值。
[attribute~=value] CSS2：只能找到独立单词，也就是包含”abc”，并且被空格隔开。
[attribute*=value] CSS3：只要包含“abc”就能被找到。
CSS三大特性：
1.继承性：给父元素设置属性，子元素也可以使用。
例如：给div设置颜色为红色，段落会变成红色字体。
div{
color:red;
}
<div>
<p>段落</p>
</div>
注意：
1.不是所有属性都能继承：color/font-/text-/line开头的属性才可以继承。
2.不仅仅是儿子能继承，只要是后代都能继承。
3.继承性的特殊性，只能单独设置其属性。
1）a标签的文字、颜色和下划线是不能继承的。
2）h类 标签的文字大小是不能继承的。
应用场景：
一般用于设置网页上的一些共性的信息，例如：网页文字颜色，字体等。
2.层叠性：CSS处理冲突的一种特性。（按优先级显示属性）
注意：只有在多个选这群选中同一个标签，又设置的相同的属性就会发生层叠性。
CSS Cascading(层叠性) stylesheet
3.优先级：多个选这群选中同一个标签，又设置的相同的属性，如何层由优先级决定。
优先级判断的三种方式：
1）是否是直接选中（间接选中就是继承）
间接选中：谁离目标标签近就设置其属性
2）是否是相同选择器
相同选择器，谁写在后面就选择谁。（同是类选择器等）
3）不同选择器
如果都是直接选择，并且不是相同类型的选择器，就会按照选择器的优先级来层叠。
id>类>标签>通配符>继承>浏览器默认
优先级important
作用：用于提升某个直接选中标签的选择器的某个属性的优先级，可以将被指定的属性优先级提升到最高。
注意：
1）只能用于直接选中，不能用于间接选中。
2）通配符选择器选中的标签也是直接选中的，可以使用important。
3）!important只能提升被指定的属性的优先级，其他属性的优先级不会被提升。
4）!important写在分号前面。
优先级的权重
作用：当多个选择器混合在一起使用时，可以使用权重来判断谁的优先级高。
计算规则：
1）所限先计算选择器中有多少个id，id多的选择器优先级最高。
2）如果id个数一样，再看类名个数，类名个数多的优先级最高。
3） 同理，类名个数一样看标签个数。
4）如果id,类名，标签个数都一样，谁写在后面优先级最高。
注意：只有选择器为直接选中的，权重才有用。
div和span标签
div:一般用于配合css完成网页的基本布局。
span：一般用于配合css修改网页中的一些局部的信息。label绑定表单元素。
区别：
1）div:单独占领一行，span不会单独占一行。
2）div:容器基本标签。span:文本标签、超链接、
3）容器级标签可以嵌套所有标签。文本级可以嵌套文字/图片/超链接。
CSS元素的显示模式
分类：
1.快级元素：独占一行。容器级标签+<p。如果没有设置宽度，默认和父元素一样宽
2.行内元素：不会独占一行。文本级标签—<p>。不可以设置宽度和高度。
3.行内块级元素：不占一行，又可以设置宽度和高度。img标签
行内，块级，行内块级间相互转换:
div{
display:inline/block/inline-block;
}
设置背景图片：如果网页上出现了图片，那么浏览器会再次发送请求获取图片。
设置背景图平铺方式：backgroud-repeat。
控制背景图片位置：backgroud-position:left top
取值：1）居停方位名词 2）具体像素(一定要写单位px)
CSS精灵图：一种图像的合成技术。减少图片请求次数，降低服务器压力。
通过定位找到我们想要的图片。
推荐工具：fireworks
注意：定位的时候移动的是负数的x和y值。
边框框属性的格式：
1）border:边框的宽度 边框的样式 边框的颜色。（连写格式）
2）border-top，border-bottom，border-left，border-right（连写格式）
3) 按照要素，颜色，样式，宽度（border-width、border-style、border-color）（连写格式）
例如：(上 右 下 左)
border-width：1px 5px 2px 10px
border-color: red green blue yellow
注意：
省略左边属性，左边就会和右边一样。
同理省略下边，回和上边一样
只写一个值，其他值和这个值得属性值一样。
4）border-top-width等等样式（非连写格式）
内边距属性：边框和内容之间的距离。
设置内边距，标签的大小也会发生变化。
1.非连写：padding-top等样式
2.连写：padding：(上 右 下 左)同border一样
省略左边属性，左边就会和右边一样。
同理省略下边，回和上边一样
只写一个值，其他值和这个值得属性值一样。
外边距属性：标签与标签之间的距离。
1.非连写：margin-top等
2.连写：margin(上 右 下 左)
注意：外边距没有背景颜色，内边距有背景色
外边距合并现象：垂直方向外边距不会叠加，会出现合并现象，有多个margin，不会相加，取最大值。
盒子模型：html中所有德尔标签都是盒子模型，能够设置宽高，边框，外边距，内边距。
内容的宽高：width.height设置的属性
元素的宽高：边框+内边距+内容的宽高。
元素空间的宽高：外边距+边框+内边距+内容的宽高。
保证增加border/padding元素的宽高不变（box-sizing，css3，内容的宽高减少）
box-sizing:content-box 元素宽高=边框+内边距+内容的宽高。
box-sizing:border-box 盒子元素宽高不变。 元素宽高=内容的宽高
注意点：
1.如果两个盒子是嵌套关系，设置了里面一个盒子的顶部外边距，外面盒子也会同时被顶下拉。
2.如果外面盒子不想被顶下来，可以添加边框属性就可以。
3.控制嵌套盒子距离，首先考虑 padding。设置父子关系标签属性。
4.嵌套关系盒子中，使用margin: 0 auto;水平居中，只对水平方向有效。
清空默认边距：
*{
margin:0;
padding:0;
}
通配符会遍历所有标签，性能不好。
行高和字号：line-height
1）文字在行高中默认为垂直居中。
2）盒子高度和行高设置一样（一行文字）
3）两行文字居中：padding设置。
网页布局方式
1.标准流排版方式（又叫文档流/普通流）浏览器 默认排版方式，（垂直排版（块级），水平排版（行内，行内块级）)
2.浮动流排版方式
浮动流一种办脱离标准留的排版方式（水平排版，只能设置标签左对齐或者右对齐，没有居中
浮动流不能使用margin: 0 auto
浮动流不分行内，块级元素，都会显示在同一行，并且块级元素能设置宽高。
浮动流中的原素和标准流中的行内块级元素很像。
浮动元素脱标：
脱标：脱离标准流
当某一个元素浮动后，那么这个元素看上去就像标准流中删除一样。
浮动元素高度问题
1.标准流中，内容的高度可以撑起父元素的高度。
2.在浮动流中，浮动的原始是不能撑起父元素的高度。
清除浮动方式：
1)给前面一个父元素设置高度（最好不要设置高度，用的比较少）
2）给后面的盒子添加clear属性。（clear:left；）left/right/both/none
注意：当给某个原始添加clear属性，那么这个元素的margin属性会失效。
3）隔墙法
1.外墙法：两个盒子中间添加额外的块级元素（class = “wall”），并设置其clear：both;属性。
注意：外墙法可以让第二个盒子使用margin-top属性，不能让第一个盒子使用margin-bottom 属性。所有最好设置中间的块级元素的高度就可以设置两个box之间的间隙。
2.内墙法:第一个盒子所有子元素最后添加格外的块级元素（class = “wall”），并设置其clear：both;属性。
注意：外墙法可以让第二个盒子使用margin-top属性，也能让第一个盒子使用margin-bottom 属性。同时也可以设置中间的块级元素的高度就可以设置两个box之间的间隙。
外墙、内墙之间的区别？
1.内墙法可以撑起第一个盒子的高度，外墙法不可以 。
注意：企业中一般不常用隔墙法清除浮动。（结构和样式分离，隔墙法需要添加空标签设置边距，所以不推荐）
4）使用伪元素选择器添加块级元素，去浮动。（跟内墙法的原理一样，但是是利用css去添加块级元素）
.box1::after{
content:””;//子元素内容为空
display:block;
height:0px;//高度设置为0
visibility:hidden;//设置子元素不可见
clear:both;
}
兼容问题：伪元素选择器为css，浏览器版本低的需要在格外添加如下代码：
.box1{
*zoom:1;//兼容IE6
}
伪元素选择器（CSS3）：给指定标签的内容前面/后面添加一个子元素。
<div>
<p>我是段落1</p>
我是文字
<p>我是段落2</p>
</div>
伪元素选择器实现以上代码：
<div>
我是文字
</div>
css样式代码：
div::before{
content:”我是段落1”；
width:50px;
height:50px;
display:block;
}
伪元素选择器格式：
标签名称::before{
属性;
}
不显示子元素：
div::before{
content:””；
width:50px;
height:0px;//高度设置为0
display:block;
visibility:hidden;//设置子元素不可见
}
5）使用orderflow属性清除浮动：将盒子1样式中添加orderflow就可以实现。
orderflow属性作用：
1.不想让内容超出标签范围：orderflow:hidden;属性
2. 清除浮动
3.两个盒子嵌套关系，里边盒子想要设置margion-top,外边盒子不会受影响一起顶下来，并且外边盒子不想设置边框，这时可以给外边的盒子设置orderflow:hidden;属性。
致命注意点：兼容问题，IE6同样不识别。同伪元素选择其处理方法一样，添加如下代码：
.box1{
*zoom:1;//兼容IE6
}
3.定位流排版方式
1）相对定位：
1.1 不脱离标准流，相对自己以前在标准流中的位置移动距离。
position：relative，需要配合top:20px，right:20px，等属性一起使用。
1.同一个方向上的定位属性只能使用一个。
1.3 区分块级，行内，行内块级
1.4 设置margin/padding等属性会影响标准流（会影响给定位之前的位置，而不是定位之后的位置）
2）绝对定位（跟浮动流类似）：相对于body进行定位，左，上，右，下。
2.1 脱离标准流
2.2 不区分块级，行内，行内块级
规律：
无论有没有祖先元素，都会以body作为参考点。
如果一个绝对定位的元素有祖先元素，并且祖先元素（嵌套层级可以是多级）也是定位流（相对定位，绝对定位，固定定位），那么就以定位流的那个祖先元素作为参考点。注意静态定位不可以。
多个祖先元素都为定位流，以离该元素最近的那个静态定位作为参考点。
注意点：
绝对定位元素以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网易的宽度和高度作为参考点。
绝对定位的元素会忽略祖先元素的padding属性。
相对定位弊端：相对定位不会脱离标准流，会继续在标准流中占用一份空间，不利于布局。
绝对定位弊端: 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化。
子绝父相（使用绝对定位和相对定位混合使用）：子元素用绝对定位, 父元使用相对定位。
让局对定位元素水平居中：
div{
position:absolute;
left:50%;
margin-left：-150px;(该元素宽度一半 )
}
3）固定定位：位置固定，不随滚动条滚动。多用于设置背景图片。
3.1 固定定位元素脱离标准流。
3.2 不区分块级，行内，行内块级
ie6不支持固定定位。
4）静态定位：默认就是静态定位
z-index属性：默认情况下所有的元素都有一个默认的z-index属性，取值为0.
作用：专门用于控制定位流元素的覆盖关系的。
默认情况下，定位流的元素会盖住标准留的元素。
默认情况加定位流的元素后面变形的会盖住前面编写的元素。
如果定位流的元素设置了z-index属性，谁的z-index属性比较大，谁就显示在上面。
注意点：
1.从父现象
1.1 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面。
1.2 如果两个元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大，谁就显示在上面。
未完待续...
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
