资源描述
1 HTML入门
1.1 安装工具
1) 编辑器 —— Sublime Text
安装插件：
按Ctrl+`（Esc下方的按钮）调出console ；复制：import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if notos.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen(' ','%20')).read())到代码底部命令行中 ；按回车键执行；重启Sublime Text；浏览器 —— Chrome、Safari 、Firefox 、360浏览器、遨游等。
2) 图形工具 —— PhotoShop
3) 版本管理工具 —— TortoiseSVN
SVN是什么？意义何在？
SVN是版本管理工具。当大家都在共同开发一个项目的时候，可以有效避免协作开发中的代码冲突问题；历史版本的保存也使得项目变得有据可查，当项目需要回滚到之前版本的时候，可以轻松的找到代码。此外一些开源项目也在使用SVN，这是一个使协同开发和版本维护变得方便的工具。
4) 环境集成工具 —— WAMP
1.2 创建项目文件夹（名字自起）
(1) 创建html文件 （常起名 index.html，一个项目有多个html文件） 创建项目文件夹
(2) 创建css文件夹（用来放css层叠样式文件）
(3) 创建images文件夹（用来放网页中需要的图片）
1.3 HTML介绍
HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言。
HTML语言是一种标记语言,不需要编译,直接由浏览器执行。
HTML文件是一个文本文件,包含了一些HTML元素,标签等。
HTML文件必须使用html或htm为文件名后缀。
HTML是大小写不敏感的,HTML与html是一样的。
HTML是由W3C的维护的。
1.4 前端介绍
前端页面=结构html+样式css+行为js
2 HTML结构
2.1 HTML结构
头部head+身体body
(1) head
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、 编码格式等；绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
<meta charset="UTF-8"> —— 声明文档编码格式 为 UTF-8
<title> 文档标题 </title> ——— 网页名称
<link rel="stylesheet" href=" 外链样式表地址 "> —— 链接样式表
<style type="text/css"> css样式 </style> —— css样式
<script type="text/javascript"> 定义客户端脚本 </script>
<base href="全站默认地址"/>
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
(2) body
<body> 元素定义文档的主体。
<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
网页需展示的内容需嵌套在<body>标签中。
2.2 HTML标签
HTML标签是HTML语言中最基本的单位，也是最重要的一部分。浏览器以某种方式显示相应的标签样式。
(1) HTML标签特点
ü 由尖括号包围的关键词，比如 <html>。
ü 通常是成对出现的，比如 <div> 和 </div>。
ü 标签对中的第一个标签是开始标签，第二个标签是结束标签。
ü 开始和结束标签也被称为开放标签和闭合标签。
ü 也有单独呈现的标签，如：<img src="images/1.jpg" />等。
ü 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />。
(2) 块属性标签
ü <h1> - <h6>： 标题
ü <p>： 段落 <br/> ：换行，空标签
ü <div> : 无实际意义（通常用作装其他标签的盒子）
ü <dl>:定义列表（结合dt和dd使用）
<dt>:定义列表中的项目
<dd>:描述列表中的项目
ü <ol>:有序列表（结合li使用）
<li>：定义列表项。有序列表可以是数字或字母顺序。
ü <ul> : 无序列表 （结合li使用）
<li>：定义列表项
ü <table> : 表格（结合tr、th、td使用）
<tr>：定义表格行
<th>:定义表头
<td>:定义表格单元
(3) 行属性标签
ü <span>:无实际意义
ü <a href="链接地址" title="当前标签中的内容">: 超文本链接
ü <img src="图片链接" alt="图片说明"> : 为被引用的图像创建占位符
ü <b>:粗体文本。
ü <em>:强调文本
ü <i>:斜体的文本
ü <strong>: 重要的文本。
ü <var> :定义变量
ü <cite> :引用。如引用的书籍或杂志的标题。
ü <form>: 用于创建供用户输入的 HTML 表单
form 元素包含一个或多个表单元素，比如：button、input、select、textarea等。
ü <button> : 按钮
ü <textarea> : 多行的文本输入区域
ü <input> : 规定用户可输入数据的输入字段。（俗称类型）根据不同的 type 属性，输入字段有多种形态。button 按钮、checkbox复选框、file文件、hidden(隐藏的input)、password密码输入框、radio单选框、reset重置按钮、submit提交按钮、text单行文本输入框。input标签显示的原始内容在input标签上的 value属性中设置 ，如：
<select> :创建下拉列表（与option连用）。<option> : 定义下拉列表中的一个选项
ü <!-- ... --> : 注释
(4) 标签语义化
ü 标签语义化优点：语义化标签就是尽量使用与结构相对应的含义的Html的标签！
ü 重要性：
a) 去掉或样式丢失的时候能让页面呈现清晰的结构：
b) PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱），所以如果有良好的html结构，就能更好的将页面表现出来；
c) 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
d) 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
e) 便于团队开发和维护
(5) 标签嵌套原则
a) p不可以嵌套div。
b) a不可以嵌套a。
c) 行属性尽量不要嵌套块属性标签。
(6) 块属性标签与行属性标签区别
块属性标签独占一行、支持设置宽高、默认宽度自动充满整行、margin定义四个方向属性值。
行属性标签不独占一行、不支持设置宽高、内容充满整行，margin只能定义左右方向属性值。
3 CSS（层叠样式表）入门
3.1 CSS引入方式
引入方式优先级：标签内联样式>页面内嵌>外部文件样式>浏览器默认样式
(1) 引入外部CSS文件
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
这种方法是最难体现DIV+CSS中结构与显示分离的思想，也最容易改版维护，代码看起来也是最美观的一种。
一个css文件可以控制多个页面，便于维护，从整站上减少代码量，有效利用缓存机制。
(2) head部分加入CSS
<style tyle=”text/CSS”>CSS样式代码</style>
Style表示引入文件类型的标签。Type表示文件类型。
优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的CSS命令。再者不用外链的CSS文件，从而减少了向服务器请求的次数。直接在HTML文件中读取样式。
缺点：改版麻烦，单个页面显得臃肿，CSS样式不能被其他HTML页面引用造成代码量相对较多，维护比较麻烦。
通常在访问量大的网站使用这种方法，首页。
(3) 在标签内直接写CSS
Style这种写法不提倡使用，因为前端开发追求结构与样式分离。一般用于测试用。
3.2 CSS选择器及优先级
CSS选择器分为标签tag选择器，ID选择器，类选择器，后代（派生）选择器，群组选择器，伪类（a标签\nth-child（n））选择器，通配（*）选择器，子选择器（A>B），临近选择器（a+b)，CSS属性选择器（input[type=”button”]）。
ID>class>tag（标签）
混合使用时优先级比较：a，b，c，d（标签，类，ID，style类型选择器）四种等级取值分别为1，10，100,1000。数值越大优先级越高。
注意：
(1) 当指向同一个目标选择器的优先级相同时，后面的优先级大于前面的与优先级。
(2) 当同一个标签定义多个class名称时，各个类选择器之间的优先级与HTML的排列无关，而是与CSS文件中各个类选择器的排列有关。
3.3 CSS属性
3.3.1 字体设置
(1) 字体系font-family:宋体，黑体，隶书，Arial，sans-serif,Tabhoma。
font-family : 字体1，字体2，字体3，…
可以同时为页面设置多个字体，当浏览器(本地字体库)找不到第一个字体时会寻找第二个字体，依次进行，直到找到可用的字体。如果没有找到字体，就使用浏览器默认字体。
中文页面以宋体为首选，其他次之。英文页面以Arial，Tabhoma等字体。中英文结合的最好用英文字体。特殊字体一律用图片。
(2) 字体大小
font-size：N px/em/百分数
值可以为绝对的或者相对的。绝对的是将文本设置为指定大小，不允许用户在所有浏览器中改变字体大小。绝对大小确定了输出的物理尺寸。相对大小相对于周围的元素来设置大小，允许用书在浏览器改变文本大小，使用香水来设置字体大小，通过通过像素设置文本大小，可以对文本大小进行完全控制。
网页中最小字体为12px，默认也是12px。
W3C推荐使用em作为尺寸单位。默认情况下1em=16px。
Em的值会相对于父元素的字体大小改变。Em：px/16=em。如：父元素字体大小为20px时，子元素font-size为px/20=em。如果父级字体大小为16px时，子元素font-size为100%，其实际大小为16px。
（3） font-style字体风格
font-style: normal | italic | oblique
Normal：常规字体。Italic：斜体。简单的字体风格，对每个字母的结构有一些小改动。Oblique：倾斜。正常数值文本的一个倾斜。
（4） font-weight字体粗细设置
font-weight: normal正常 | bold 加粗| bolder 更粗| lighter更细 | number
（5） 文本颜色color
color : 颜色值；
颜色可以是一个名称标示的关键字，如 color : red;也可以是一个RGB数字，如color : #ffffff；如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为#RGB的方式，如：#FF8800 可以缩写为 #F80。
color: rgba(1,1,11,0.9);最后一位是透明度设置（取值0-1），数值越大，透明度越低！
（6） 复合字体属性font
使用font作为属性名称，后接各个属性值即可，各个属性值之间用空格分开。通常不采用简写的模式。可以直接加行高。
font: font-style | font-weight | font-size(/line-height)| font-family ;
行高
（7） 文本修饰属性设置text-decoration
text-decoration: none无文本修饰（浏览器默认初始值） | underline 下划线| overline 上划线| line-though 贯穿线/删除线
（8） 文本行距属性设置line-height
line-height: normal正常行距 | length；
length : 由浮点数字和单位标识符组成的长度值，允许为负值。设置数值越大，文本段落中间的行距越大。
（9） 文本缩进属性设置text-indent
text-indent: length px/em；
em指文字的倍数，允许指定负值。一个em为一个字符。
一个空标签<i>里边的内容</i>text-indent：-999em；页面不显示文本内容。
（10） 文本水平对齐设置text-align
text-align: left左对齐| center中间对齐（左右居中） | right右对齐| justify两端对齐文本；
（11） 文本垂直对齐设置vertical-align
vertical-align: top （顶部）| bottom（底部） | middle(上下居中对齐)；
此属性除了table支持的比较完善其他标签支持的并不是太好，不建议使用此属性，只做了解。
（12） 字词间隔属性设置word - spacing：改变字（单词）之间的标准间隔。
word-spacing: normal（默认） | length；
length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字词之间的间隔就会增加。设置一个负值，会把它拉近。
（13） 字符间隔属性设置letter - spacing：改变字符之间的标准间隔
letter-spacing: normal | length；
length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字符之间的间隔就会增加。设置一个负值，会把它拉近。
（14） 背景颜色属性设置background - color
background-color: red | #ffffff；
（15） 背景图片属性设置background-image
background-image: none | url ( url )；
None:是无背景图。Url(图片路径)。背景图默认平铺。
（16） 背景图重复设置background - repeat
background-repeat: repeat （默认重复）| no-repeat（不重复） | repeat-x（横向重复） | repeat-y（纵向重复）；
（17） 背景图定位设置background - position
background-position: x轴坐标值 y轴坐标值；
像素值。background-position：10px 30px。
具体的方位。left | right | center | top | bottom 。
百分比。background-position：30% 50%。
（18） 背景图滚动设置background - attachment
background-attachment : scroll（ 随着页面的滚动轴背景图片将移动，默认值，只针对IE6/7)| fixed（随着页面的滚动轴背景图片不会移动）；
（19） 背景图简写设置
background : color url( ) position repeat；
改样式为背景设置的简写，其属性值有多个值组成，值与值之间用空格隔开。
3.1.2 伪类
CSS伪类可以用于向某些选择器添加特殊的效果，伪类必须知道某些选择器才能使用，而伪类中最经典的就是a标签的伪类。
<a href=”#” ></a>
关于伪类，大家最熟悉的还是a标签的4个伪类：
:link 有链接属性时。
:visited 链接地址已被访问过。
:hover 鼠标悬停时的样式表属性
:active 被用户激活(在鼠标点击未释放时发生的事件)
排列顺序LVHA。
4 盒模型
盒模型=内间距padding+外间距margin+边框border+内容content。
盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看作一个盒子，拥有盒子一样的外形和平面空间。
4.1 margin
margin-top|right|bottom|left: length;
每个块元素有上、右、下、左四个方位的外边距，可以分别用四种属性
来声明。
4.1.1 margin的几种不同写法：
1) .main{margin:10px 20px 10px 20px;}这四个值分别设置类名为main的模块上、右、下、左四个方位外边距的值。
2) .main{margin:10px 20px;}这两个值分别设定类名为main的模块的上下、左右的外边距
3) .main{margin:10px 20px 10px;}第一个值设定上外边距，第二个值设定左右外边距，第三个值设定下外边距
4) .main{margin:10px;}如果就一个值的话，就设定了四个方向的外边距都10px
5) .main{ margin:20px auto;}这样设值的意思是上下两个方位的外边距为20px，左右两个方位的外边距自动适应居中
4.2.2 margin属性的bug
（1） 竖向margin的叠加
margin横向上是加法，但在竖向上却会产生叠加现象,并会取上下间距的其大者生效。
（2） IE6下的横向双倍margin bug
IE6会在特定的条件下，将设置的横向margin值变成双倍。条件：
a) 元素必须浮动（float）;
b) 元素必须具有横向margin，margin-left、margin-right
c) 元素必须块元素
d) 浏览器必须是ie6
4.2 padding
相对于外边距而言，元素也应该具有内边距。
padding-top|left|bottom|right:length;
padding属性定义元素边框与元素内容之间的空白区域。
4.3 border
元素的边框是围绕元素内容和内边距的一条线或多条线
border-top|right|bottom|left:border-width|border-style|border-color;
border简写属性，用于把边框的所有属性设置到一个声明中，顺序没有要求。
Solid，dashed，hidden，double……
Border：none；表示当前元素没有边框。
Border：0；表示当前元素边框为0.
4.4 Display
规定元素应该声称的框的类型
display:block|none|inline|table
block:该元素以块属性显示
none:该元素隐藏，不会被显示。并且在网页中不占位置。
inline:以行内属性显示
table:以表格的表现显示,经常对应table-cell使用
4.5 怪异模式
4.5.1 怪异模式和标准模式
Width=content+padding+border
总宽度=width+margin
怪异模式是指在IE6及更早的IE版本下盒模型的计算方法：所占空间总宽度等于内容＋外边距。
解决办法就是使用hasLayout ，使用Doctype声明。
4.5.2 标准和怪异模式的异同点
相同点：都是由margin ,border,padding,content组成
不同点：计算宽/高度方法的不同，
标准模式下盒子的总宽度是由margin,padding,border,content的相加得来；
怪异模式下：总宽度是由content减去padding、border得来的。
4.5 .3标准模式
占的空间的宽度=内容的宽度content＋左右内边距的宽度padding＋左右边框的宽度border＋左右外边距的宽度margin
5 CSS布局
Css布局分为float（浮动布局）、position（定位布局）、弹性布局(CSS3)。
5.1 浮动原理：float 先浮后动（水槽原理）
（1） 所有的元素都可以浮动
（2） 具有float属性的元素在父标签中是不占空间的
（3） float能解决标签之间有间隙的问题
5.1.1 浮动的特性
float 对行内属性标签的影响：float之后能设置width和height属性，并支持margin和padding属性。
float 对块属性标签的影响：在没有设置宽高的情况下浮动后，内容撑开宽度高度。 可以使块属性元素并排排列。
5.1.2 clear清除浮动
clear：none | left | right | both
none：允许浮动元素出现在两侧；left：左侧不允许有浮动元素；right： 右侧不允许有浮动元素；both： 不允许有浮动。
<div class=“clear”> </div>
.clear{clear:both;}
由于元素的float，为了不影响下面元素的显示。通常在这个浮动元素的后面加上<div class=“clear”> </div>来消除对后面元素显示的影响。
5.1.3 ie6下清除浮动
下面这种清除浮动的方法在ie6下，div空标签会有默认高度。
<div class=“clear”> </div>
.clear{clear:both;}
解决方法：.clear{clear:both;overflow:hidden;height:0;}
5.1.4 overflow超出
overflow：visible | hidden | auto | scroll
visible：显示超出内容，不剪切内容也不添加滚动条。
hidden：超出内容隐藏。
auto：默认属性，在需要是剪切内容并添加滚动条。代表当前元素超出当前元素宽和高时，会自动出现滚动条。
scroll：代表当前元素是否超出当前元素宽和高时，总是显示滚动条。
还可针对x轴和y轴设置overflow-x：overflow-y：
overflow：hidden；也可以清除浮动。即，如果一个父标签内有float的子元素，给父元素设置overflow：hidden属性，则可以清除子元素的浮动。
5.1.5 visitility 可视
visitility：visible可视 | hidden 不可视| inherit继承父元素的可视性；
Visitility：hidden；隐藏该元素，不被显示，设置当前元素占位。
Display：none；隐藏，在网页中也不占位置。
5.1.6 总结：
（1） 三个div在一行排列，如何让中间的div的宽度自适应？？？
三个div统一左浮动，给div1设置定宽，高度auto；给div2设置宽auto，高度auto；给div3设置定宽，高度auto；
（2） 清除浮动方法
① 空标签清楚浮动法
② 伪类清楚浮动法-兼容IE6/7
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{
zoom:1
}
③ 父级定义height法
④ 父级定义overflow：hidden
⑤ 父级定义overflow：auto
⑥ 父级也浮动，已浮动制浮动
⑦ 父级定义display：table
⑧ 结尾结尾处加 br标签 clear:both
5.2 定位position
position: absolute 绝对定位 | relative 相对自身定位 | static默认值 | fixed 可定位相对于浏览器窗口的指定坐标 | inherit继承父级定位。
注意： absolute 和relative配合使用， 父标签为相对属性relative 的话，name absolute 则以父标签左上角作为起始位置进行定位。如果父标签没有定义relative，则子标签会以body左上角作为起始位置进行定位。
Fixed定位于相对于浏览器窗口的指定坐标，此元素可以通过四个方向属性来规定，不管窗口是否滚动，元素都会留在那个位置。
Position：absolute
（1） 只设置了绝对定位而没有设置定位属性的四个方向值，那么该绝对定位的元素依然遵循其在文本刘中的正常位置，仍然受父级元素位置影响，按照正常的文档流进行布局。只不过现在是从文档流中抽出，其后面的同级元素会忽视其存在，而自动补上去。因为绝对定位的元素是不占文档流的布局空间。
（2） 绝对定位会自动把一个元素转换为具有部分块属性的元素。
（3） 绝对定位元素会依据其定位基点进行绝对定位时会忽视其定位基点的padding的空间距离。
（4） 当一个元素设置为绝对定位后该元素内的浮动会自动清除。
5.2.1与定位相关的属性
（1）z-index:number | auto
z-index设置元素的堆叠顺序，值可以为负。
（2） left right top bottom：length | auto;
5.2.2 CSS半透明
（1）opacity属性定义元素的不透明度。
opacity:number(0-1之间的数值)；
opacity的值为1的元素是完全不透明的反之，值为0的是完全透明的，看不见的。
（2） filter-IE的半透明滤镜
filter:alpha(opacity=number);
number的取值为100-0之间的数值。
因为ie不支持opacity，只支持自己的滤镜fiter:alpha(opacity=50);
5.3背景图合并
（1） 背景图合并优势
使用背景图合并技术，可以达到减少图片数量，从而减少HTTP请求的目的，对网站加速有着举足轻重的作用。背景图合并的优势：
a) 可扩展，便于后期维护，当遇到排版变化时，比较容易维护。
b) 宽度自适应本身就减少了页面的工作量，背景图合并可以和宽度自适应结合在一块，大大减少了页面数量和图片大小，提升页面的loading速度。
（2） 背景图合并原理
把本站用的多张背景图都合并到一张背景图上，利用css中的background-position属性去进行图片的定位。已减少网站http请求次数，好加快浏览器的显示速度。
6 CSS进阶
6.1列表list
CSS列表属性允许设置改变列表项标志，或者通过图像作为列表项标志。
（1） 属性设置列表项标记的类型：List-style-type：value;
属性值包括none：无标记；disc：默认，标记为实心圆；square标记是实心方块；decimal是数字；decimal-leading-zero 0开通的数字标记（01,02……）；low-latin：小写拉丁字母（如：a、b）。
（2） list-style-image：url();使用一幅图像来替换列表项标记。
（3） list-style-position:value;
Inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
Outside默认。保持标记位于文本的左侧。列表项目标记放置在文本以外，切环绕不根据标记对齐。
（4） list-style：list-style-type | list-style-image | list-style-position；
6.2 table
（1） table：
tr：表格的行
th：表头单元格
td：单元格
2 cellpadding：设置单元格边框与单元格里的内容之间的距离
cellspacing：设置单元格间的距离
<table cellpadding=”0” cellspacing=”0”></table>
3 table合并单元格：对td添加属性。
colspan：跨列
rowspan：跨行
4 table-css属性
① 折叠边框 ：设置表格的边框是否被合并为一个单一的边框
border-collapse ： separate （默认）| collapse（合并间距）
② 单元格间距 ：设置分隔单元格边框的距离
border-spacing ： length（x轴） length（y轴）
③ 文本上下居中
vertical-align：top | middle | bottom
Border-collapse：可以消除边框间隙，同时合并内外边框。
Border-spacing：可以消除边框间隙，不能合并内外边框。
5 注意
只能给table和th、td设置border，tr设置border不支持。
默认表格样式中格单元与格单元有空白间距，应利用：border-collapse与border-spacing 属性进行样式重置，去掉默认间距。
Table{
Border-collapse：collapse；border-spacing：0；
}
Th，td{padding:0;}
6.3 form表单
6.3.1基本代码如下：
<form action=”” method=”get/post” id=””>
单行文本框：<input type=”text” name=”” id=””>
密码框：<input type=”password” name=”” id=””>
上传文件：<input type=”file” name=”” id=””>
单选按钮name值相同时选择是互斥的只能选择一个：
<input type=”radio” value=”男” name=”name值相同”>男：
<input type=”radio” value=”女” name=”name值相同”>女：
多选框name值相同时可以多选：<input type=”checkbox” name=”aaa” id=”apple”>苹果
<input type=”text” name=”aaa” id=”banana”>香蕉
<input type=”text” name=”aaa” id=”watermelon”>西瓜
按钮：<input type=“button” name=”btn” id=”watermelon” value=“按钮”>
提交按钮：<input type=”submit” id=”” value=“提交”>
重置按钮：<input type=”reset” id=”” value=“重置”>
隐藏域：<input type=“hidden” id=”” value=“按钮”>
文本域：<textarea></textarea>
下拉菜单：<select id=””>
<option value=”1”>1</option>
<option value=”2”>2</option>
<option value=”3”>3</option>
</select>
按钮：<button></button>
</form>
6.3.2 <input>CSS样式
文本输入框：在css中加入body，input{margin:0;padding:0;},各个浏览器的显示效果兼容统一。
多选框：input一个属性checked 即是默认选中的属性。在浏览器兼容的角度上，我们不能设置checkbox的大小和边框，在不考虑欧朋浏览器情况下，通过设置height高度来条件checkbox上下方向的位置。默认情况下，我们更多使用margin，padding。
单选按钮：在name相同的radio中，只能选中一个。
Button使用a标签通过css控制样式来做更漂亮的按钮。
所有类型的input都支持disabled属性，即不可修改。
7 浏览器介绍
7.1 主流浏览器
（1） IE
IE版本众多，现常用的是IE6\IE7\IE8\IE9\IE10.
内核 ： Trident(IE内核)
前缀 : -ms-
兼容性 ： IE9+ 开始支持css3 和 h5
（2） 火狐（firefox）
内核：Gecko
前缀 ： -moz-
对css3 和 h5 支持很好
（3） opera
内核：Presto （前），webkit （现）
（4） 前缀 ： -o- (前)
- webkit- (现)
（5） 谷歌（chrome）
内核：webkit （前），Blink （未来）
前缀 ： -webkit-
（6） 遨游
（7） safari（苹果）
内核：webkit
前缀 ： -webkit-
7.2 浏览器兼容性问题
不同浏览器对同一段代码的解析效果不同，称为兼容问题。
（1） 不同浏览器的标签默认的margin和padding不同？
解决方案：通过群组选择器去掉默认的内外间距。
body,div{margin:0;padding:0;}
（2） 块属性标签float后，又有横行的margin情况下，在IE6.0显示margin比设置的大（加倍）？
IE6.0bug产生情况是IE6.0下，块属性，float，有横向margin。
问题症状:常见症状是IE6中后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性，使产生bug的四个条件不能同时具备。
（3） 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度？
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
（4） 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状: IE6里的间距比超过设置的间距
解决方案：在display:block;后面加display:inline;display:table;
（5） 图片默认有间距？
解决方案：使用float属性为img布局
（6） a嵌套img时，在不同浏览器会出现不同颜色的
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
