这篇文章上次修改于 597 天前，可能其部分内容已经发生变化，如有疑问可询问作者。
前端开发工具：
IDE(集成开发工具)：常用
DreamWeaver
WebStorm
Hbuilder
html基础知识
1.网页的基本结构：
<html>
<head>
<title>该内容显示在网页的标题部分</title>
<style type="text/css">
</style>
</head>
<body>
<div><h1>此部分为显示在网页中的内容</h1></div>
</body>
</html>
2.网页的注释：
<!-- 该结构为html中的注释，其中的内容为需要注释的内容 -->
3.网页的标签及标签属性：
常用标签及属性：
- font标签（该标签在开发中不建议使用）该标签用来设置字体的属性
color="red"：该属性用来设置字体标签内容的颜色
size="1"：该属性用来设置字体的大小，大小用1-7的数字来表示不同大小的数字
face=""：该属性用来表示字体的类型 - h1标题标签：该标签用来定义一个段落，后边的数字可以是1-6之间的数值，最大是1
h1标签非常重要，他会影响到页面在搜索引擎中的排名，一般页面只能写一个h1
一般页面中标题标签只使用h1-h3，以后的几个基本不使用 - p标签来表示段落
meta标签：用来设置网页的一些元数据，比如网页的字符集，关键字和简介等,是一个自结束标签
格式：
1.charset="utf-8"属性设置网页字符显示为utf-8格式
2.使用meta标签来设置网页的关键字：
3.可以用来指定网页的描述：在搜索引擎搜索界面时，会同时检索页面中的关键词和描述：< meta name="description" content="相关信息">- br标签来表示换行：
< br />，是一个自结束标签
- hr标签表示水平线：
< hr />，是一个自结束标签 img标签用来表示图片，是图片标签：< img src=" ">，是一个自结束标签
src=""：该属性用来设置一个外部图片的路径，目前使用的都是相对路径，可以用../来返回上一级
alt=""：该属性可以用来描述设置图片的属性，可以用来设置图片不能正常显示时对图片的描述，只能在图片不能正常显示时会有搜索引擎可以通过alt属性来识别不同类型的图片，若不写，则不会检索收录
width=""：该属性用来修改图片的宽度，单位一般为px(像素)
height=""：该属性用来修改图片的高度，单位一般为px(像素)宽度和高度如果只设置一个属性，另一个也会等比例调整大小，一般开发中除了自适应页面，不建议修改这两个属性网页图片的格式：
JPEG：支持的颜色比较多，图片可以压缩，但不支持透明，一般用此格式来保存照片等颜色丰富的图片 GIF：支持的颜色较少，只支持简单的透明，支持动态图，一般用作图片颜色单一或者动态图 PNG：支持的颜色多，并且支持复杂的透明，可以用来显示颜色复杂的图片图片使用原则：效果不一致，使用效果好的；效果一致，使用小的
iframe内联框架：
使用内联框架可以引入一个外部页面，使用iframe创建一个内联框架
属性：src：执行一个外部页面的路径，可以使用相对路径 < iframe src="001.html" >< /iframe> name:框架名字 width:宽度 height:高度a标签表示超链接：
属性：href：指向链接跳转的目标地址，可以是一个相对路径，也可以是一个完整的地址 href="链接地址"，当链接地址位置是"#"，表示跳转到页面顶部 target：用来指定打开链接的位置： target="_self":表示在当前窗口打开（默认值） target="_blank":表示在新的窗口打开链接 target="tom":可以设置为一个内联框架的名字，将在内敛框架中打开，引号内的内容为内联框架属性中name的值id属性：该属性每个元素都可以设置，可以作为标签的唯一表示；id属性在同一个页面只能有一个，不能重复
配合超链接使用方法：在标签中定义好id属性，超链接写法：href="#id属性值"，即可跳转到该id对应的标签处mailto属性：配合超链接标签使用，当href的值写此内容时，会打开默认的邮件客户端并给设置的收件人发信
使用方法：href="mailto:abc@abc.com"- link标签，主要用来引用css文件，是一个自结束标签。
书写格式为：< link rel="stylesheet" type="text/css" href="style.css"/>，其中，href后边的内容为css文件的路径及名称，路径写相对路径即可 - center标签中的内容会默认在页面中居中显示，可以将要居中显示的东西全放在标签中
- div标签：主要用来对页面进行布局
- span标签：是一个内联元素，指的是只占自身大小的元素，不会占用一行
- input标签：输入框标签，使用input标签可以创建一个文本输入框
type属性： - title属性，这个属性可以给任何标签指定，作用是当鼠标移到元素上时，元素中title属性的值将会作为提示文字显示。
table标签：在HTML中，使用table标签来创建一个表格；table是一个块元素
写法：< table border="1" width="40%" align="center">
用法：在table标签中使用tr来表示表格中的一行，有几行就有几个tr 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td rowspan用来设置纵向的合并单元格 colspan横向的合并单元格 可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果 table和td边框之间默认有一个距离，通过给table设置border-spacing属性可以设置这个距离 写法：border-spacing:0px; border-collapse可以用来设置表格的边框合并，如果设置了边框合并，则border-spacing的距离自动失效 设置隔行变色,利用元素选择器nth-child() 写法： tr:nth-child(even){ background-color: #bfa; }注意：
1.在HTML中为我们提供了三个标签： thead 表头，thead中的内容，永远会显示在表格的头部 tbody 表格主体，tbody中的内容，永远都会显示表格的中间 tfoot 表格底部，tfoot中的内容，永远都会显示表格的底部 2.这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中 3.如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素 4.在选择元素的时候，通过table > tr 无法选中行 需要通过tbody > tr 5.以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了 6.表格的列数由td最多的那行决定 7.表格是可以嵌套，可以在td中在放置一个表格
文本标签：
- h5中规定，对于不需要着重的内容而是单纯的加粗或斜体，可以使用i和b标签
< em>:表示一段内容中的着重点，主要表示语气上的强调，一般表现是斜体字
< strong>：表示强调的内容，比em更强烈，模式使用粗体显示
< i>:标签中的内容会以斜体显示
< b>:标签中的内容会以粗体显示
< small>:标签中的内容会比其父元素中的文字要小一点，常用来表示一些细则一类的内容，如合同中的小字，网站的版权声明等
< big>:标签中的内容会比其父元素中的文字要大一点，没有语义
< cite>:网页中所有加书名号的内容都可以使用cite标签，表示参考的内容
< q>:表示一个短的引用(行内引用)，引用的内容浏览器会默认加上引号
< blockquote>：表示一个长引用(块级引用)
< sub>:此标签用来设置下标
< sup>:此标签用来设置上标
< ins>:表示一个插入的内容，会自动添加下划线
< del>:表示内容是一个删除的内容，会自动添加删除线
< code>:语义标签，专门用来表示代码，但是不会保留格式，一般结合pre标签使用
< pre>:是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
列表标签：
列表之间可以互相嵌套，可以在无序列表中放有序列表，也可以在有序列表中放无序列表无序列表
< ul>:使用ul标签来创建一个无序列表
< li>:使用li标签来创建列表项，一个li就是一个列表项属性：type，指定项目符号的类型 disc：默认值，表示实心圆点 square：实心方块 circle：空心圆注意：默认的项目符号我们一般都不用,如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
li和ul标签都是块元素有序列表：和无序列表类似
< ol>:有序列表，使用有序的序号作为项目符号属性：type，可以指定序号的类型 可选值：1(表示使用阿拉伯数字)；a/A(采用英文字母)；i/I(采用大小写的罗马数字作为序号)定义列表：
解释：定义列表用来对一些词汇或内容进行定义方法：
使用dl来创建一个定义列表，有两个子标签：dt：被定义的内容；dd：对定义内容的描述用法：
< dl> < dt>内容</dt> < dd>描述</dd> < /dl>
4.html中的实体符号（转义字符）：
解释：在html中，一些特殊字符是不能直接使用的，需要一些特殊符号来表示这些特殊字符，我们称之为实体，浏览器解析到实体时，会自动将实体转换为特殊符号
语法：&实体的名字;
< 表示小于号"<"
> 表示大于号">"
表示空格符号
© 表示版权符号“©”
5.文档声明：
在网页的最上边写：<!doctype html>,表示声明该网页是用html5标准来写的
不写文档声明，会导致有些浏览器进入一个怪异模式
6.字符编码问题：
常见字符集：ASCII/ISO-8859-1/GBK/GB2312/UTF-8
7.xhtml的语法规范：
1)不区分大小写，但是一般使用小写
2)注释不能嵌套
3)html标签必须结构完整，要么成对出现，要么自结束标签
4)html标签可以嵌套，但是不能交叉嵌套
5)html标签中的属性必须有值，且值必须加引号8.元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素css基础知识
1.定义：层叠样式表(Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰2.用法：
内部样式表：
1)可以将css样式编写到元素的style属性当中，属性之间用分号分隔。此种方法称为内联样式，只对当前元素中的内容起作用 例：\<p style="color:red;font-size:20px;">文字\</p> 2)也可以将css样式编写到head下的style标签中：<style type="text/css">p{样式属性}</style> 其中，p的位置为标签选择器，表示所有p标签都用p后边大括号中的属性外部样式表：
3)还可以将样式编写到外部的css文件中，然后通过link标签将外部的css文件引入到当前页面中，这样可以将外部文件中的css样式表应用到当前页面中。 好处：将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存加快用户访问的速度，提高用户体验。用法：
样式的继承：
在css中，祖先元素上的样式，也会被他的后代元素所继承 利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式 并不是所有的样式都会被子元素所继承，比如背景相关的样式就不会被继承
3.css语法：
1)css的注释：
/* */ css注释的作用和html注释类似，只不过他必须编写在style标签中，或者是css文件中
2)选择器：
- 定义：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
常用选择器：
1.元素选择器：通过元素选择器可以选择页面中的所有指定元素语法：标签名{}2.id选择器：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}3.类(class属性)选择器：可以为元素设置class属性，通过class属性选中一组元素
class属性和id属性类型，但是class属性可以重复，拥有相同class属性值的元素称之为一组元素，可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
语法：.class属性{}4.通配选择器：可以用来选中页面中的所有元素
语法：*{}5.选择器分组(并集选择器)：通过选择器分组可以同时选中多个选择器对应元素
语法：选择器1，选择器2，选择器3{}6.复合选择器(交集选择器)：可以选中同时满足多个选择器的元素
语法：选择器1选择器2{}7.后代元素选择器：选中指定元素的后代元素
语法：祖先元素 后代元素{} 注意：祖先元素和后代元素的类型是可以在元素/类/元素名几种选择器中混用的8.子元素选择器：选中指定父元素的指定子元素
语法：父元素 > 子元素{} 注意：IE6及以下的浏览器不支持子元素选择器9.伪类选择器：
伪类：专门表示元素的一种特殊的状态，如访问过的超链接/普通超链接/焦点框等 内容： :link：表示普通的连接(没有访问过的连接)，写法：a:link :visited：表示访问过的链接，写法：a:visited 注意：浏览器是通过浏览历史记录来判断一个链接是否访问过，由于涉及到用户的隐私问题，使用visited伪类只能设置字体的颜色 :hover：表示鼠标移入的状态，写法：a:hover :active：表示超链接被点击的状态，点击中的显示状态，写法：a:active 注意：hover和active两个伪类也可以给其他的元素设置，但是IE6中，不支持对超链接以外的元素设置 :focus：获取焦点,写法： ::selection：表示选中状态,写法： 注意：在火狐浏览器中设置需要写成 ::-moz-selection :after：通过after伪类，选中块元素后边，可以通过after伪类像元素的最后添加一个空白的块元素，然后对其浮动 这样做和添加一个div原理一样并且不会在页面中添加多余的div 否定伪类：可以从已选中的元素中剔除处某些元素 语法：:not(选择器) 表示从该类中剔除指定的该选择器选择的内容 伪类的顺序：10.伪元素选择器：使用伪元素来表示元素中的一些特殊位置
:first-letter：选择首字符 :first-line：选择首行 :before：表示元素最前边的部分，一般该选择器都需要结合contet属性一起使用 :after：表示元素最后边的部分 通过content属性可以在元素的最前或者最后添加文本内容11.其他元素选择器：
:first-child：选中的必须是第一个子元素 语法：元素名或选择器名:first-child{} :last-child：选中的是最后一个子元素 :nth-child(n)：可以选中第n个位置的子元素,该选择器后边可以指定一个参数，指定要选择第几个子元素 如果n位置处写even，表示选中第偶数位个子元素 如果n位置处写odd，表示选中第奇数位个子元素 :first-of-type：当前类型元素中的第一个元素 :last-of-type：当前类型元素中的最后一个元素 :nth-of-type：当前类型元素中的第n个元素12.兄弟元素选择器：可以选中一个元素后紧挨着的指定元素
语法：前一个 + 后一个 ：表示选中的是后一个元素 语法：前一个 ~ 后边所有：表示选中的是后边所有的兄弟元素13.属性选择器：
作用：可以根据元素中的属性或属性值来选取指定元素 语法：元素[属性名] 选取含有指定属性的元素 元素[属性名="属性值"] 选取含有指定属性值的元素 元素[属性名^="属性值"] 选取含有以指定属性值开头的元素 元素[属性名$="属性值"] 选取含有以指定属性值结尾的元素 元素[属性名*="属性值"] 选取包含指定属性值的元素14.选择器的优先级:
说明：当使用不同的选择器选中同一个元素，并且设置相同的样式时，会在样式之间产生冲突，则最终显示的样式有选择器的优先级决定 规则： 内联样式，优先级：1000 id选择器，优先级：100 类和伪类，优先级：10 元素选择器，优先级：1 通配* ，优先级：0 继承的样式，没有优先级 注意： 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较 选择器优先级计算不会超过他的最大数量级 如果选择器的优先级一样，则使用靠后设定的选择器 并集选择器的优先级是单独计算的 特殊情况： 可以在样式最后加一个!important时，则此时该样式会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用important
3)声明块：
声明块紧跟在选择器后边，使用一堆{}括起来，声明块中实际上就是一组一组的名值对结构，这一组一组的名值对成为声明
在一个声明块中可以写多个声明，多个声明之间用"；"隔开，声明的样式名和样式值之间用"："来连接
4)块元素和内联元素
块元素：所谓的块元素就是可以独占一行的元素，无论内容多少；主要用来对页面进行布局
div标签/p标签/h标签
内联元素（行内元素）：指的是只占自身大小的元素，不会独占一行；主要用来选中文本设置样式
span标签/a标签/img标签/iframe标签
一般情况下只使用块元素去包含内联元素，不会用内联元素包含块元素
a标签可以包含任意元素，除了他本身
p标签不可以包含任何块元素
5)css中的单位：
长度单位：
像素：px
像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们屏幕实际上就由这些小像素点构成的
不用的显示器一个像素的大小不同，显示效果越清晰，像素越小
百分比：%
将单位设置为一个百分比的形式，则浏览器会根据其父元素的样式来计算该值
使用百分比的好处是当父元素的属性值发生改变时，子元素也会按照比例发生改变
在创建自适应页面时，经常使用百分比作为单位
em：和百分比类型，相对于当前元素的字体大小来计算，1 em = 1 font-size
当使用em时，当字体大小发生改变时，em也会随之改变，设置字体相关样式时，经常用em
颜色单位：
在css中可以直接使用颜色的单词来表示不同的颜色
红色：red
蓝色：blue
绿色：green
也可以使用RGB值来表示不同的颜色
RGB值值得时通过red/green/blue三原色的不同浓度，来表示不同的颜色
用法：rgb(红色浓度，绿色浓度，蓝色浓度)；
颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
浓度也可以用一个百分数来设置，需要一个0%-100%之间的数字，最终也会转换为0-255之间的数，0%表示0，100%表示255
也可以使用十六进制的rgb值来表示颜色，原理和rgb原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
用法：#红色绿色蓝色，使用十六进制数来表示
00表示没有，相当于rgb中的0；ff表示最大，先当于rgb中的255
红色：#ff0000
像这种两位重复的颜色可以简写，如：#ff0000 ---> #f006)字体：
**1.字体属性**
color：字体的颜色
color:red;
font-size：字体的大小，浏览器默认的是16px,在页面上，每个文字都处在一个看不见的单元格中
他其实设置的并不是文字本身的大小，实际上是设置的文字所在单元格的大小
font-size:20px;
font-family:设置字体的种类，浏览器使用的字体是系统的默认字体
开发中，尽量不使用奇怪的生僻字体
font-family:微软雅黑；
**2.字体分类：在网页中，将字体分成了五大类**
可以将字体设置为这些大的分类，当设置为大的分类之后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类指定为最后一个字体，当作兜底的字体
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
**3.字体的样式**
font-style:可以用来设置文字的斜体
可选项：
normal：默认值，文字正常显示
italic：文字会以斜体显示
oblique：文字会以倾斜的效果显示
大部分浏览器都不会对文字的倾斜和斜体做区分，也就是两个倾斜效果往往是一样的
一般设置斜体是：italic
font-weight：设置文本的加粗效果
可选项：
normal：默认值，文字正常显示
bold：文本加粗显示
该样式也可以指定100-900之间的9个值，但是由于用户的计算机中往往没有那么多级别的字体，所以可能达不到想要的那种效果
font-variant:可以用来设置小型大写字母
可选项：
normal：默认值，文字正常显示
small-caps：文本以小型大写字母显示
小型大写字母：将所有的字母都以大写形式显示，但是小写字母的大写要比大写字母的大小小一些
font：简写样式，使用该样式可以直接设置字体相关的所有样式，将样式统一写在该样式中，每个属性之间用空格隔开
格式：font：属性1 属性2 属性3；
注意：
使用font设置字体样式时，斜体、加粗、大小字母这几个属性没有顺序要求，设置可写可不写，如果不写则使用默认值，但是要求文字的大小和字体必须写
而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际使用简写属性也会有一个比较好的性能7)文本样式：
1.行间距：css中并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
line-height：用来设置行高，间接的设置行高
行高类似于我们上学单线本，一行一行的，线与线之间的距离就是行高
网页的文字实际上也是在一个看不见的线中，文字默认会在行高中居中显示
行间距的计算： 行间距 = 行高 - 字体大小
可以接收的值：
1.直接接收一个表示大小的数值
2.可以指定一个百分数，则会相对于字体去重新计算行高
3.可以直接传一个正整数，则行高会设置字体大小相应的倍数
注意：
1.对于单行文本，可以将行高设置为父元素的高度一致，这样可以使单行文本在父元素中垂直居中
2.在font中也可以指定行高，在字体大小后添加“/行高”来指定，该值是可选的，如果不指定则会使用默认值
3.如果与font属性一同设置时，需要写在font属性后边才可以正常显示，否则会被font属性给覆盖
text-transform：可以用来设置文本的大小写
可选值：
none：默认值，不做处理
capitalize：单词首字母大写，通过空格来识别单词
uppercase：所有字母都大写
lowercase：所有字母都小写
text-decoration：添加文本的修饰
可选值：
none：默认值，不添加任何修饰
underline：为文本添加下划线
overline：为文本添加上划线
line-through：为文本添加删除线
注意：
超链接会默认添加下划线，如果需要去除超链接的下划线，则需要将该样式设置为none
letter-spacing：可以指定字符间距
使用方法：letter-spacing:10px;word-spacing：可以设置单词之间的距离
text-align：用于设置文本的对齐方式
可选项：
left：默认值，默认左对齐
right：文本靠右对齐
center：文本居中对齐
justify：两端对齐
通过调整文本之间的空格大小，来达到两端对齐的一个目的text-indent：用来设置首行缩进，一般使用em作为单位
注意：当给他指定一个正值时，会自动向右侧缩进指定像素；当指定负值时，则会向左移动指定的像素；通过这个方式可以将一些不想显示的文字隐藏起来
格式：text-indent:2em 设置两个字大小
8)盒子模型：方便布局
1.组成部分：外边距(margin)/边框(border)/内边距(padding)/内容区(element)
用法： 1.使用width来设置盒子的宽度 2.使用height来设置盒子的高度 3.为元素设置边框，必须要指定三个样式 border-width:10px 边框宽度 border-color:red 边框颜色 border-style:solid 边框样式（solid表示实线） 可选值：none(默认值，没有边框)/solid(实线)/dotted(点状边框)/dashed(虚线)/double(双线) 4.width和height只是设置的盒子内容区的大小，而不是盒子的整个大小；盒子的可见框大小，由内容区大小和边框区大小共同设置 5.使用border-width可以分别指定四个边框的宽度，只需要在后边填的值那里填写四个值即可，从上开始顺时针设置 如果指定三个值，则会分别指定给 上 左右 下 如果指定两个值，则分别设置给 上下 左右 6.同宽度的设置，边框颜色的设置也可以分别设置四个边框的颜色，边框的样式也是如此2.设置边框
大部分浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none 边框的简写样式，通过border可以同时设置四个边框的样式，宽度，颜色，而且没有任何顺序要求 border一指定就是同时指定四个边，不能分别指定 可以单独设置四个边的格式，分别是border后边加bottom/top/left/right，同border一样3.内边距：指的是盒子的内容区与盒子边框之间的距离，一共四个方向
格式： padding-top(上内边距)： padding-right(右内边距): padding-bottom(下内边距): padding-left(左内边距): padding(整体设置)：四个值，分别设置四个边距 注意： 内边距会影响到盒子的可见框的大小，元素的背景会延伸到内边距 盒子的大小由内容区、内边距和边框共同决定4.外边距：指的是当前盒子与其他盒子之间的距离，不会影响到盒子可见框的大小，而是会影响到盒子的位置
格式： margin-top(): margin-right(): margin-bottom(): margin-left(): margin: 注意： 由于页面中的元素都是靠左上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变 如果设置右和下外边距，则会改变其他盒子的位置 外边距也可以指定为一个负值，则元素会向相反的方向移动 margin还可以设置为auto，一般只设置给水平方向，如果只指定左外边距或右外边距为auto，则会将外边距设置为最大值 垂直方向外边距如果设置为auto，则外边距默认为0 如果左右同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使子元素自动在父元素中居中 **垂直外边距的重叠** 在网页中，垂直的相邻外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和 同理，垂直方向上的相邻的父子元素之间，子元素的垂直外边距也会设置给父元素- 5.内联元素的盒模型：
内联样式u不能设置width和height
内联元素可以设置水平方向的内边距
垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
内联元素可以设置边框，但是垂直方向上的设置不会影响到页面的布局
水平方向上的外边距不会重叠，而是求和
内联元素不支持垂直外边距
9)样式属性
1.display样式：通过display属性可以将内联元素变为块元素
可选值： inline：可以将一个元素作为内联元素显示 block：可以将一个元素作为块元素显示 inline-block:将一个元素转换为行内块元素，可以是一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行 none：隐藏元素，不显示元素并且元素不会在页面中继续占有位置2.visibility样式：可以用来设置元素的隐藏和显示状态
可选值： visible：默认值，元素会默认在页面显示 hidden：元素会隐藏不显示，但是它的位置会依然保持3.overflow样式：通过overflow可以设置如何处理溢出父元素的内容
可选值： visible：默认值，不对溢出内容处理，元素会在父元素以外的位置显示 hidden：溢出的内容会被修剪，不显示 scroll：会为父元素添加滚动条，通过拖动滚动条来来查看完整内容，该属性不论内容是否溢出，都会添加水平和垂直方向上的滚动条 auto：根据需求自动添加滚动条
10)文档流：
文档流处在网页的最底层，表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点：
块元素：
块元素在文档流中会独占一行，会自上向下排列
块元素在文档流中的默认宽度是父元素的100%
块元素在文档流中的高度默认被内容撑开
块元素脱离文档流后，宽度和高度都会被内容撑开
内联元素：
内联元素在文档流中只占自身的大小，会默认从左向右排列；如果一行不足以容乃所有的内联元素，则会换到下一行继续自左向右
在文档流中，内联元素的宽度和高度都默认被内容撑开
当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是自动修改宽度和高度，以适应内边距
11)浮动
**块元素在文档流中垂直排列，所以三个div自上至下一次排列**
如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动
float属性：
none：默认值，元素在文档流中排列
left：元素会立即脱离文档流，向页面地左侧浮动
right：元素会立即脱离文档流，向页面右侧浮动
当问一个元素设置浮动后，元素立即脱离文档流，下边地元素会向上移动，元素浮动后，会尽量向页面地左上或右上漂浮，直到遇到父元素地边框或者其他浮动元素
如果元素上方是一个不会浮动地块元素，则该浮动元素地位置不会超过块元素
浮动地元素不会超过他的兄弟元素
浮动的元素不会盖住文本，文字会自动环绕在元素的周围，可以利用此特征设置文字环绕图片
**内联元素脱离文档流后会变成块元素**
**让三个块元素水平排列：**
display：inline-block
12)解决父元素的塌陷问题
如何开启元素的BFC(block formatting context)：
设置元素浮动
设置元素绝对定位
设置元素为inline-block
将元素的overflow设置为一个非visible的值
将overflow设置为hidden是副作用最小的开启BFC的方式
解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠的问题：
.[classname]:before{
context:"";
display:table;
}
13)css中的定位
- 定义：指的是将自定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素
用法：通过position属性来设置元素的定位
static：默认值，元素没有开启定位
relative：开启元素的相对定位写法：position:relative; 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化 2.相对定位是相对于元素在文档流中原来的位置进行定位 3.相对定位的元素不会脱离文档流 4.相对定位会使元素提升一个层级 5.相对定位不会改变元素的性质，块还是块，内联还是内联absolute：开启元素的绝对定位
写法：position:absolute； 1.开启绝对定位，会使元素脱离文档流 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化 3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位） 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位 4.绝对定位会使元素提升一个层级 5.绝对定位会改变元素的性质， 内联元素变成块元素， 块元素的宽度和高度默认都被内容撑开fixed：开启元素的固定定位(也是绝对定位的一种)
写法：position:fixed； 注意：固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样，不同的是： 1.固定定位永远都会相对于浏览器窗口进行定位 2.固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动 3.IE6不支持固定定位当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量left: 200px;right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量- 通常偏移量只需要使用两个就可以对一个元素进行定位，
- 一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
- 元素的层级：通过z-index属性可以用来设置元素的层级
写法：z-index: 25;
如果定位元素的层级是一样，则下边的元素会盖住上边的
对于没有开启定位的元素不能使用z-index
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
14)元素的背景设置：
1.元素背景设置：background
写法：background: #bfa url(img/3.png) center center no-repeat fixed;
注意：
通过该属性可以同时设置所有背景相关的样式
没有顺序的要求，谁在前睡在后都行
也没有数量的要求，不写的样式就使用默认值
2.设置背景颜色：
background-color:rgb(1,1,1,[透明度])
3.设置背景的透明
opacity可以用来设置元素背景的透明，它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
写法：opacity:0.5;
注意：
1.opacity属性在IE8及以下的浏览器中不支持
2.IE8及以下的浏览器需要使用如下属性代替
alpha(opacity=透明度)，透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试
写法：filter: alpha(opacity=50);
3.用这个属性会使该元素中的所有元素都会透明，如果有文字，文字也会透明
**如果元素中有文字，要想使元素透明但是文字不变，则可以使用如下设置：**
background-color:rgb(1,1,1,[透明度])，其中透明度的值为0-1之间，0为完全透明，1为完全不透明
4.设置背景图片：
1)使用background-image来设置背景图片
写法：background-image:url(相对路径);
注意：
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景图片时都会同时指定一个背景颜色
2)background-repeat用于设置背景图片的重复方式
写法：background-repeat: no-repeat
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat ，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
3)背景图片的位置：背景图片默认是贴着元素的左上角显示，通过background-position可以调整背景图片在元素中的位置
写法：background-position:-80px -40px;
可选值：
该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
top left 左上；bottom right 右下
如果只给出一个值，则第二个值默认是center
**也可以直接指定两个偏移量，**
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
4)background-attachment用来设置背景图片是否随页面一起滚动
写法：background-attachment:fixed;
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
注意：
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器的窗口
5.背景图片点击切换的练习：
注意：
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png；当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
解决方法：
为了解决该问题，可以将三个图片整合为一张图片，加载时只加载这个三个图片整合后的图片，就不会出现闪烁的问题了
然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
用法：btn是元素a对应的类名
.btn:link{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
background-image: url(img/btn/btn2.png);
/*设置背景图片不重复*/
background-repeat: no-repeat;
}
.btn:hover{
/* 当是hover状态时，希望图片可以向左移动 */
background-position: -93px 0px;
}
.btn:active{
/*当是active状态时，希望图片再向左移动 */
background-position: -186px 0px;4.表单：使用form标签创建一个表单
作用：
表单的作用就是用来将用户信息提交给服务器的。比如：百度的搜索框 注册 登录这些操作都需要填写表单
用法：
<form action=" " > </form>
form标签：
使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项
action属性：
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址
fieldset标签：
写法：
<fieldset>
<legend>用户信息</legend>
</fieldset>
用法：
在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中
可以配合legend来使用
legend子标签：
在fieldset可以使用legend子标签，来指定组名
input标签：使用input来创建一个文本框，它的type属性是text
写法：<input id="um" type="text" name="username" />
name属性：
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性，name表示提交内容的名字，即提交时参数的属性名
默认值：
在input标签文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
提交操作：
作用：
提交按钮可以将表单中的信息提交给服务器，用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器，网址格式：url地址?查询字符串
查询字符串格式：
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
**用法：**
使用input标签创建一个提交按钮,它的type属性值是submit，在提交按钮中可以通过value属性来指定按钮上的文字
写法：<input type="submit" value="注册" />
密码框：
使用input创建一个密码框，它的type属性值是password，这样输入的话密码会显示为密文
单选按钮：使用input来创建一个单选按钮，它的type属性使用radio
写法：<input type="radio" name="gender" value="male" id="male" />
分组：单选按钮通过name属性进行分组，name属性相同是一组按钮；像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
**如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked="checked"属性**
重置按钮：使用input来创建一个单选按钮，它的type属性使用reset，点击重置按钮以后表单中内容将会恢复为默认值
写法：<input type="reset" value="重置"/>
点击按钮：使用input可以用来创建一个单纯的按钮，属性type=button
写法：<input type="button" value="按钮" />
作用：这个按钮没有任何功能，只能被点击，常结合js来使用
注意：除了使用input，也可以使用button标签来创建按钮，这种方式和使用input类似，只不过由于它是成对出现的标签，使用起来更加的灵活
多选框：使用input创建一个多选框，它的type属性使用checkbox
写法：<input type="checkbox" name="hobby" value="zq" />
**如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked="checked"属性**
select标签：使用select来创建一个下拉列表
写法：<select name="star">
<option value="zs">张三</option>
<option value="lisi" selected="selected">李四</option>
</select>
注意：
下拉列表的name属性需要指定给select，而value属性需要指定给option
**可以通过在option中添加selected="selected"来将选项设置为默认选中**
当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
标签：
option：在下拉列表中使用option标签来创建一个一个列表项
<option value="zs">张三</option>
optgroup：在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字,分组名无法被选中
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
</optgroup>
textarea标签：使用textarea创建一个文本域，使用name属性来对标签内容进行定义
写法：<textarea name="info"></textarea>
label标签：在html中专门用来选中表单中的提示文字
用法：该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
写法：
<label for="um">用户名</label>
<input id="um" type="text" name="username" />5.框架集：框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，
用法：
框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，frameset不能和body出现在同一个页面中，所以要使用框架集，页面中就不可以使用body标签
frameset中也可以再嵌套frameset
在frameset中使用frame子标签来指定要引入的页面，引入几个页面就写几个frame
写法：
<frameset rows="30%,50%,*">
<frame src="04.表格的布局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表单.html" />
</frameset>
属性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
注意：
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe5.兼容性问题：
图片兼容性问题：
在IE6中对图片格式png24支持度不高，
如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
1.可以使用png8来代替png24，即可解决问题，
但是使用png8代替png24以后，图片的清晰图会有所下降
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件
然后在写一下简单的JS代码，来处理该问题
没有评论