第一部分 HTML
第一章 职业规划和前景
职业方向规划定位：web前端开发工程师web网站架构师自己创业转岗管理或其他web前端开发的前景展望：未来IT行业企业需求最多的人才结合最新的html5抢占移动端的市场自己创业做老板随着互联网的普及web开发成为企业的宠儿和核心web职业发展目标：第一、梳理知识架构负责内容的HTML负责外观的css（层叠样式表）负责行为的jsps切图第二、分解目标（起步阶段、提升阶段、成型阶段）起步阶段：基本知识的掌握常用工具的掌握沟通技巧的掌握（围绕客户的需求）良好的开发习惯（加注释、对齐方式）提升阶段：熟悉掌握HTML基本标签和属性熟练掌握css的基本语法和使用浏览器相容和w3c标准的掌握结合html+css+js开始系统专案的开发成型阶段：精通DIV+CCS布局精通css样式表控制html标签熟悉运用js制作动态网站的效果能独立开发完成网站第二章 html基本结构
认识HTML：html不是一种程式语言，是一种标志语言标记语言是由一套标识标签组成的html使用标签来描述网页html结构：
不成对出现的标签
HTML 基本标签的讲解： 标签
----仅仅用于标题文字，不要为了产生粗体文字使用它们
标签 段落标签标签都会让文字产生加粗效果用于强调文字，强度更深，表示重要文字--->用于SEO优化只是视觉加粗效果--->单纯为了产生加粗 标签em用于强调文字i只是视觉斜体效果比强调更强特殊符号： ---->空格> --->大于号<；--->小于号"；--->引号©-->版权号第三章 html基本标签
HTMl基本标签：span标签对被用来组合文件中的行内元素注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化标签文字的格式按源代码的排版来显示，我们称之为预处理格式标签--->他有一个必不可少的属性 hreftarget属性：_self(在原来页面开启)_blank（新视窗开启）_top（开启时忽略所有的框架）_parent（在父视窗中开启）建立锚点和锚链接锚点也是一种超链接，是页面内进行跳转的超链接第一步：建立锚点 第二步：使用建立好的锚点名称 内容marquee标签可以建立一个内容滚动效果
direction 表示滚动方向，取值有（left,right,up,down,预设left）loop表示滚动循环的次数，预设为无限循环onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滚动速度)
表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动第四章 img图片标签与路径
图片标签与路径：常见图片格式 jpg png gifGif （只支援全透明）Jpeg /jpgPng 半/全透明都支援图片标签写法 ：
图片四要素：src="" 图片路径alt="" 图片含义width="" 图片宽度 和图片大小保持一致height="" 图片高度 和图片大小保持一致title=""路径知识：相对路径、绝对路径：相对路径：(Relative Path) 相对于该档案的路径；绝对路径：(Absolute Path) 从磁盘出发的路径； align属性--设定图片与后面文字的位置关系 值--top、bottom、middle、absmiddle、left、right在静态页面中：/开头表示根目录；./表示当前目录；（斜画线前面一个点）../上级目录；（斜画线前面两个点）直接用档名不带/也表示同一目录这些都是相对于当前档案的位置来说的，如果用绝对路径的话就是写全了。第五章 三种列表的讲解
三种列表的知识讲解：无序列表无序列表是一个没有顺序专案的列表，此列表项预设粗体圆点进行标识
有序列表有序列表也是一列专案，只是列表专案使用的是数字进行标记。 有序列表始于 标签。每个列表项始于 标签。
内容一
内容二
内容三
列表符号无序列表-列表符号:type="circle" 空心圆 type=“disc” 实心圆 预设值 type="square" 方块符有序列表-列表符号type="A" A B C Dtype="a" a b c dtype="1" 1 2 3 4 预设值type="I" I II III type="i" i ii iii列表巢状无序列表-巢状
柚子
沙田柚
蜜柚
荔枝
苹果
有序列表-巢状
茶
红茶
绿茶
果汁
牛奶
定义列表定义列表不仅仅是一列专案，而是专案及其注释的组合。定义列表以 标签开始。每个定义列表项以 开始。每个自定义列表项的定义以 开始。
pc网页制作
学习DIV+CSS JS JQ 专案实战
手机网页制作
手机网页制作实战
dd是对dt的解释用来建立一个普通的列表,用来建立列表中的上层专案，用来建立列表中最下层专案，和都必须放在标志对之间。
中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约
dl是definition list的缩写dt是definition title的缩写dd是definition description的缩写list-style属性具有三个属性分量：list-style-position ：设定列表项图示的位置，位于文字内或者文字外list-style-type： 设定列表项图示的型别list-style-image：使用影象设定列表项图示第六章 表单元素(上)
表单标签:表单标签表单是一个包含表单元素的区域，包括起来的都是表单的内容
HTML标签 - Action和确认按钮：当用户单击确认按钮时，表单的内容会被传送到另一个档案。表单的动作属性定义了目的档案的档名。由动作属性定义的这个档案通常会对接收到的输入资料进行相关的处理。
username:
HTML标签 - 隐藏域隐藏标签：隐藏域在页面中对于使用者是不可见的，在表单中插入隐藏域的目的在于收集或传送资讯，以利于被处理表单的程式所使用。浏览者单击发送按钮传送表单的时候，隐藏域的资讯也被一起传送到服务器
标签的掌握常用type型别：type="text" 单行文字输入框type="password" 密码（maxlength=""）type="radio" 单项选择（checked="checked"）type="checkbox" 多项选择type="button" 按钮type="submit" 提交 type="image"图片提交type="file" 上传档案type="reset"重置type="hidden" 隐藏关于表单中的设定预设值：
textarea没有预设值标签的使用label 元素不会向用户呈现任何特殊效果。不过，它为鼠标使用者改进了可用性。如果您在 label 元素内点选文字，就会触发此控制元件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控制元件上。 标签的for 属性应当与相关元素的 id属性相同。例子：（重要---登录档单--使用者体验--必做）单向选择
男：
女：
第七章 表单和表格(下)
表单和表格标签：文字域标签标签：是文字域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols注意：rows表示这个文字域有多少行cols表示这个文字域有多少列除了这两个属性它还有readonly（只读，文字域的内容无法改变，相当于协议）和title（鼠标放上提示）标签的掌握注：当提交表单时，浏览器会提交选定的专案，或者收集用逗号分隔的多个选项，将其合成一个单独的引数列表，并且在将 表单资料提交给服务器时包括 name属性
1月
2月
常用到的属性：disabled=“disabled” name="sel" size="2"表格标签表格标签：是表格标签，可以用它定义一个表格。
姓名
性别
注意：的border属性不能少标签的使用行标签：可以定义表格中的一行，一个表示一行。
姓名
性别
姓名
性别
单元格标签:可以定义表格中的一个单元格，表示一个单元格。
姓名
性别
爱好
border-collapse 属性设定是否将表格边框折叠为单一边框：border-collapse:collapse;colspan左右合并rowspan上下合并第一部分总结：
非视觉化标签：head meta style scrpit...视觉化标签：img div span a ul li...只有视觉化标签，才能用css改变它单标签：meta link base img input br hr双标签：html head body div a p span ..ul li ol dl ....常用视觉化标签** div**一般用它来布局a 超链接标签href*属性：设定跳转的网页地址target属性：设定跳转的目标结论：凡事页面可以点选跳转或者表单提交的文字，都用a标签imgsrc*属性用来设定图片的url资料alt提供给搜索引擎搜寻的widthheight结论 ：显示图片ul li列表结论：只要将来设计页面中有固定样式的列表，就用ul和litable caption tr td (th)慢慢已经被淘汰了 被ul li代替如果是合并竖排的就是合并行（rowspan）如果是合并横排的就是合并列（colspan）HTML部分导图总结
HTML5标签集合
第二部分 CSS
第八章 css基础知识
css基础知识：css样式表的定义css：（Cascading Style Sheets）层叠样式表；分类及位置：内部样式-head区域style标签里面外部样式-link呼叫内联样式-标签元素里面css内的注释：/*注释内容*/css样式表的语法CSS规则由两个主要的部分构成：要新增样式的盒子名或者标签名、和要新增的样式。盒子名或者标签名{属性:值;}CSS中几种颜色的表示方法用颜色名表示有17个预先确定的颜色，它们是aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow用十六进位制的颜色值表示(红、绿、蓝)#FF0000或者#F00用rgb(r,g,b)函式表示如：rgb(255,255,0)用hsl(Hue,Saturation,Lightness)函式表示（色调、饱和度、亮度)如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表 蓝色**用rgba(r,g,b,a)函式表示 **其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明用hsla(Hue,Saturation,Lightness,alpha)函式表示色调、饱和度、亮度、透明度例子
background-color:gray
background-color:#F00
background-color:#ffff00
background-color:rgb(255,0,255)
background-color:hsl(120,80%,50%)
background-color:rgba(255,0,255,0.5)
background-color:hsla(120,80%,50%,0.5)
内部样式表当单个页面需要设定样式时，就应该使用内部样式表。使用 标签在文件里面定义内部样式表
p{color:red;}
从外部引入到样式分为两种：（注意写在head标签里面）当样式需要应用于很多页面时，就需要用到外部样式表，首先需要建立一个css档案，然后引用到我们的页面中。Link样式表式： Html式： @import url("css.css");>内联样式表（优先级高）写在标签里面的样式如：
表示给p标签里面的文字颜色设定为红色区别：外链样式与汇入样式link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以载入CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连线属性等，@import就只能载入CSS了。载入的顺序的区别，link载入的css时，是一种并行(没有尝试是否是这样)载入CSS方式，而@impor则在整个页面载入完成后才载入。相容性的区别，因@import``CSS2.1才特有的，所以对于不相容CSS2.1的浏览器来说，无效。在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。样式的优先级补充相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设定元素越近优先级别越高）：内联样式表（标签内部） > 嵌入样式表（当前档案中）> 外部样式表（外部档案中）权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式层叠优先级是:浏览器预设其中样式表又有:类选择器 派生选择器以前叫上下文选择器，所以完整的层叠优先级是:浏览器预设 另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！第九章 css选择器(上)
css选择器：class类选择器可以重复利用id选择器唯一标签选择器什么是选择器：css选择器就是要改变样式的物件选择器{属性:值;属性:值;}标签选择器：页面中所有的标签都是一个选择器 p{color:red;}ID选择器选择id命名的元素 以 # 开头 #p1{color:#0f0;}类选择器class选择器，选择clas命名的元素 以.开头 .first{color:#00f;}css程式码写完后上线前要经过压缩处理本地和服务器分两个css版本（备份）压缩后注释都清除，空间体积减少群组选择器选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}包含选择器选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开pspan{color:red;}属性选择器选择包含某一属性的元素a[title]{color:red;} 选择包含title的a标签a[title][href]{color:red;} 选择包含title和href的a标签> + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）p > span{color:red;}相邻兄弟选择器：只选择后面的相邻兄弟元素p + span{color:red;}第十章 css选择器(下)
伪类选择器a:link {color:#FF0000;} /* 未访问的连结 */ （只用于a标签）a:visited {color:#00FF00;} /* 已访问的连结 */ （只用于a标签）a:hover {color:#FF00FF;}/* 鼠标移动到连结上*/（可和其他标签结合一起用）a:active {color:#0000FF;} /* 选定的连结 */注意伪类选择器的排序很重要，a:link a:visited a:hover a:active，记作lvha输入伪类选择器（针对表单）input:focus{color:red;} /* 键盘输入焦点 */其他伪类选择器p:first-child{color:red;} /* 第一个p */:before 在元素之前新增内容。:after 在元素之后新增内容。css优先规则内联样式表-> ID 选择器—> Class 类选择器->标签选择器第十一章 背景属性
背景属性：背景的新增 ：背景颜色的新增:background:red;backgronnd-color:red;背景图片的新增：background:url(“images/1.jpg”);backgronnd-image:url(“images/1.jpg”);背景的平铺什么是平铺？平铺就是图片是否重复出现不平铺：background-repeat:no-repeat;水平方向平铺：background-repeat:repeat-x;垂直方向平铺：background-repeat:repeat-y;完全平铺：预设为完全平铺背景图片的定位背景图片的定位就是可以设定显示背景图片的位置，通过属性background-position来实现background-position的取值可为英文单词或者数值和百分值。background-positon的英文单词取值top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerottom rightbackground-positon的数值取值background-position:x y;positon的百分值取值background-position:x% y%;背景图片的大小背景图片的大小可以通过属性background-size来设定background-size的取值可为数值和百分值。background-size的数值取值background-size:x y;background-size的数值取值background-size:x% y%;背景图片的滚动背景图片是否随着内容的滚动而滚动由background-attachment设定background-attachment:fixed; 固定，不随内容的滚动而滚动background-attachment:scroll; 滚动，随内容的滚动而滚动第十二章 文字文字属性
css文字文字属性：文字属性color:red; 文字颜色font-size:12px; 文字大小font-weight:“bold” 文字粗细(bold/normal)font-family:“宋体” 文字字型font-variant:small-caps小写字母以大写字母显示文字属性text-align:center; 文字对齐(right/left/center)line-height:10px; 行间距(可通过它实现文字的垂直居中)text-indent:20px; 首行缩排text-decoration:none;文字线(none/underline/overline/line-through)letter-spacing: 字间距第十三章 盒子模型
盒子模型盒子模型就是一个有高度和宽度的矩形区域所有html标签都是盒子模型div标签自定义盒子模型所有的标签都是盒子模型class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。盒子模型的组成盒子模型组成部分：自身内容：width、height 宽高内边距： padding盒子边框： border 边框线与其他盒子距离： margin外边距内容+内边距+边框+外边距=面积border 边框常见写法 border:1px solid #f00;单独属性：border-width:border-style:dotted 点状虚线dashed（虚线）solid（实线）double（双实线）border-color (颜色)padding 内边距值：画素/釐米等长度单位、百分比padding:10px; 上下左右padding:10px 10px; 上下 左右padding:10px 10px 10px; 上 左右 下padding:10px 10px 10px 10px; 上 右 下 左（设定4个点-->顺时针方向）单独属性：padding-top:padding-right:padding-bottom:padding-left:当设定内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小margin 外边距值：与padding相同单独属性：与padding相同外边距合并：两个盒子同时设定了外边距，会进行一个外边距合并补充盒子模型内容
标准盒子模型盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型
从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content部分不包含其他部分** IE盒子模型**
从上图可以看到 ie盒子模型的范围也包括 margin、border、padding、content和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 paddingIE盒子模型width = padding+border+内容标准盒子模型 = 内容的宽度（不包含border+padding）例：一个盒子的 margin为 20px，border 为 1px，padding为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c盒子模型”呢？很简单，就是在网页的顶部加上 doctype 宣告。假如不加doctype 宣告，那么各个浏览器会根据自己的行为去理解网页，即 ie浏览器会采用 ie 盒子模型去解释你的盒子，而 ff会采用标准w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 宣告，那么所有浏览器都会采用标准 w3c盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。用 jquery 做的例子来证实一下
你用的盒子模型是？
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支援："+sbox+"盒子模型");
上面的程式码没有加上 doctype 宣告，在 ie 浏览器中显示 ie盒子模型，在 ff 浏览器中显示“标准w3c 盒子模型”。
你用的盒子模型是标准w3c盒子模型
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支援："+sbox+"盒子模型");
程式码2 与程式码1 唯一的不同的就是顶部加了 doctype宣告。在所有浏览器中都显示“标准 w3c盒子模型”所以为了让网页能相容各个浏览器，让我们用标准 w3c 盒子模型扩充套件学会使用box-sizing布局第十四章 块元素、行元素与溢位
基本概念块级元素：预设情况下独占一行的元素，可控制宽高、上下边距；行内元素：预设情况下一行可以摆放多个的元素，不可控制宽高和上下边距行块转换display:none; 不显示display:block; 变成块级元素display:inline; 变成行级元素display:inline-block; 以块级元素样式展示，以行级元素样式排列溢位overflow:hidden; 溢位隐藏overflow:scroll; 内容会被修剪，浏览器会显示滚动条overflow:auto; 如果内容被修剪，则产生滚动条文字不换行：white-space:nowrap;长单词换行：word-wrap:break-word;行内元素和快级元素小结一、块级元素：block element每个块级元素预设占一行高度，一行内新增一个块级元素后无法一般无法新增其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可巢状块级元素或行内元素；块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。二、行内元素：inline element也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文字或其他内联元素，常见内联元素 “a”。比如 SPAN元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。三、block（块）元素的特点:①、总是在新行上开始；②、高度，行高以及外边距和内边距都可控制；③、宽度预设是它的容器的100%，除非设定一个宽度。④、它可以容纳内联元素和其他块元素四、inline元素的特点①、和其他元素都在一行上；②、高，行高及外边距和内边距不可改变；③、宽度就是它的文字或图片的宽度，不可改变④、内联元素只能容纳文字或者其他内联元素对行内元素，需要注意如下:设定宽度width 无效。 设定高度height无效，可以通过line-height来设定。 设定margin只有左右margin有效，上下无效。设定padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。五、常见的块状元素address – 地址blockquote – 块引用center – 举中对齐块dir – 目录列表div – 常用块级容易，也是CSS layout的主要标签dl – 定义列表fieldset – form控制组form – 互动表单h1 – 大标题h2 – 副标题h3 – 3级标题h4 – 4级标题h5 – 5级标题h6 – 6级标题hr – 水平分隔线isindex – input promptmenu – 选单列表noframes – frames可选内容，（对于不支援frame的浏览器显示此区块内容noscript – 可选指令码内容（对于不支援script的浏览器显示此内容）ol – 有序表单p – 段落pre – 格式化文字table – 表格ul – 无序列表六、常见的内联元素a – 锚点abbr – 缩写acronym – 首字b – 粗体(不推荐)bdo – bidi overridebig – 大字型br – 换行cite – 引用code – 计算机程式码(在引用源代码的时候需要)dfn – 定义字段em – 强调font – 字型设定(不推荐)i – 斜体img – 图片input – 输入框kbd – 定义键盘文字label – 表格标签q – 短引用s – 中划线(不推荐)samp – 定义范例计算机程式码select – 专案选择small – 小字型文字span – 常用内联容器，定义文字内区块strike – 中划线strong – 粗体强调sub – 下标sup – 上标textarea – 多行文字输入框tt – 电传文字u – 下划线七，可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。applet - java appletbutton - 按钮del- 删除文字iframe - inline frameins - 插入的文字map - 图片区块(map)object - object物件script - 客户端指令码八、行内元素与块级元素有什么不同区别一：块级：块级元素会独占一行，预设情况下宽度自动填满其父元素宽度行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。区别二：块级：块级元素可以设定宽高行内：行内元素不可以设定宽高区别三：块级：块级元素可以设定margin，padding行内：行内元素水平方向的margin-left; margin-right;padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。区别四：块级：display:block;行内：display:inline;替换元素有如下：（和img一样的设定方法）、、、都是替换元素，这些元素都没有实际的内容可以通过修改display属性来切换块级元素和行内元素第十五章 定位
static静态定位（不对它的位置进行改变，在哪里就在那里）预设值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 宣告）。fixed固定定位（参照物--浏览器视窗）---做 弹窗广告用到生成固定定位的元素，相对于浏览器视窗进行定位。 元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。relative（相对定位 ）（参照物以他本身）生成相对定位的元素，相对于其正常位置进行定位。absolute（绝对定位）(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定z-indexz-index 属性设定元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器视窗本身的位置。一切皆为框块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;行内元素: span,strong,a等元素 即：内容显示在行中称 "行内框";使用display属性改变成框的型别 即：display:block; 让行内元素设定为块级元素，display:none; 没有框相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。通过设定垂直或水平位置，让这个元素“相对于”它的起点进行移动.adv_relative { position: relative; left: 30px; top: 20px; }绝对定位：元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。 .adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
frameset框架： ---- 用来定义一个框架；双标签 不能和 一起使用rows、cols属性rows 定义行表示框架有多少行（取值 px/%/ * ）cols 定义列表示框架有多少列（取值px/ %/ * ）frame子框架 ---- 表示框架中的某一个部分；单标签，要跟结束标志src 显示的网页的路径name 框架名frameborder 边框线（取值 0 / 1）属性 提供不支援框架的浏览器显示body的内容；双标签
内容
iframe元素会建立包含另外一个文件的内联框架（即行内框架）允许和 body 一起使用width 宽（取值 px / %）height 高（取值 px / %）name 框架名frameborder 边框线（取值 0 / 1）src 显示的网页的路径第十七章 css高阶属性
opacity透明属性opacity对于IE6/7/，使用filter:alpha(opacity:值;) 值为0-100对于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1对于早期火狐，使用-moz-opacity:值; 值为0-1所以写透明属性时，一般写法是 {
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐相容问题的解决
}
border-radius圆角边框属性向 div 元素新增圆角边框border-radius:10px;box-shadow阴影属性box-shadow属性向框新增阴影效果,后面跟4个引数。box-shadow:0px 0px 10px #000;属性是HTML5中新增的标签,媒体嵌入外挂标签，可以通过插入音讯或视讯格式.mid .wav .mp3等CSS部分导图总结
原档案下载地址
css选择符(复制图片地址到浏览器开启放大即可清晰检视)
css选择符
css常见简写
css简写速查
HTML+CSS+JavaScript学习导图笔记(复制图片地址到浏览器开启放大即可清晰检视)
HTML+CSS+JavaScript学习导图笔记前端详细学习路线(复制图片地址到浏览器开启放大即可清晰检视)
前端学习路线第三部分 附录
附录一 DIV命名规范
企业DIV使用频率高的命名方法网页内容类标题: title摘要: summary箭头： arrow商标： label网站标志： logo转角/圆角：corner横幅广告： banner子选单： subMenu搜寻： search搜寻框： searchBox登入： login登入条：loginbar工具条： toolbar下拉： drop标签页： tab当前的： current列表： list滚动： scroll服务： service提示资讯： msg热点：hot新闻： news小技巧： tips下载： download栏目标题： title热点： hot加入：joinus注册： regsiter指南： guide友情连结： friendlink状态： status版权： copyright按钮： btn合作伙伴： partner投票： vote左右中：left right center
注释的写法: /* Footer */ 内容区/* End Footer */id的命名:页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar选单：menu子选单：submenu标题: title摘要: summary功能标志：logo广告：banner登陆：login登入条：loginbar注册：regsiter搜寻：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示资讯：msg当前的:current小技巧：tips图示: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情连结：link版权：copyrightclass的命名:颜色:使用颜色的名称或者16进位制程式码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }字号,直接使用"font+字号"作为名称,如.font12px { font-size: 12px; }.font9px {font-size: 9pt; }对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }注意事项::一律小写;尽量用英文;不加中杠和下划线;尽量不缩写，除非一看就明白的单词.
推荐的 CSS 书写顺序：显示属性displaylist-stylepositionfloatclear自身属性widthheightmarginpaddingborderbackground文字属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent附录二 CSS精灵
CSS精灵原理以及应用CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非标签。一个简单的例子：一张图片作出一个按钮的三个状态一个连结用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active 连结加入右侧的图片为：200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点选的状态。则可以使用CSS进行定义。 a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0;
/*定义连结的普通状态，此时影象显示的是顶上的部分*/
}
a:hover {
background-position:0 -66px;
/*定义连结的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
background-position:0 -132px;
/*定 义连结的普通状态，此时显示的是底部的部分，向下取负值*/
}
更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位优点：减少载入网页图片时对服务器的请求次数可以合并多数背景图片和小图示，方便在任何位置使用，这样不同位置的请求只需要呼叫一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的载入速度，节约服务器的流量。提高页面的载入速度sprite技术的其中一个好处是图片的载入时间(在有许多 sprite 时，单张图片的载入时间)。由所需图片拼成的一张 GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。减少鼠标滑过的一些bugIE6不会主动预载入鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。不足：CSS雪碧的最大问题是内存使用影响浏览器的缩放功能拼图维护比较麻烦使CSS的编写变得困难CSS 雪碧呼叫的图片不能被打印错误得使用 Sprites 影响可访问性附录三 一些tips解决方案
页面优化实践
从下面的几个方面可以进行页面的优化：减少请求数图片合并CSS档案合并减少内联样式避免在 CSS中使用 import减少档案大小选择适合的图片格式图片压缩CSS 值缩写（Shorthand Property)档案压缩页面效能调整档案载入顺序减少标签数量调整选择器长度尽量使用CSS 制作显示表现增强程式码可读性与可维护性规范化语义化模组化写DIV+CSS 的一些常识
不要使用过小的图片做背景平铺这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200200=40, 000 次，占用资源无边框推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源慎用 万用字元所谓万用字元，就是将CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。CSS的十六进位制颜色程式码缩写习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加档案体积。孰优孰劣，有待仔细考证。样式放头上，指令码放脚下。不内嵌，只外链坚决不用 CSS表示式使用 引用样式表，而不是通过@import 汇入。一般来说，PNG比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。千万不要在 HTML中缩放图片，一者不好看，二者占资源。正文字型最好用偶数12px、14px、16px，效果非常好。特例，15px。block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。段落之间，至少要有一倍行距强行指定某些元素的 line-height，正文 1.6倍于文字大小，标题1.3倍。中文标点用全形英文夹杂在中文中，左右空格，半形。中文字型的粗体和斜体，远离较好[建议] HTML 标签的使用应该遵循标签的语义下面是常见标签语义p - 段落h1,h2,h3,h4,h5,h6 - 层级标题strong,em - 强调ins - 插入del - 删除abbr- 缩写code - 程式码标识
