03-Web前端知识点总结

羃HTML知识点羁一、功能螆用来制作静态网页，网页中的全部内容都是通过Html语言展现出来。莄使用场合：开发静态网页。肃二、思想肈一切功能都由标签实现，标签具有四要素。蒇三、常用标签膃标签关键字膃功能蒈常用属性羅font/font膅设置字体,字号,颜色芃face,color,size衿br/蚇换行羄莃center/center芀居中对齐肅蚃hn/hn蒃设置标题级别蚁H1最大h6最小袇align螆hr/薂插入水平线袈size,width,align蕿p/p蒅划分段落,薂align艿ol/ol羇创建有序编号列表芄type,start蚂li/li蚀定义一个列表项虿肃ul/ul螂定义无序符号列表肁type膆img/肆插入图片袂src,width,height,border,title,alt膇膂肈膆table/table袂插入表格薀border,width,height,bgcolor,bordercolor,cellpadding,cellspacing袇tr/tr芆创建一行芃莂td/td袀创建一列莆colspan,rowspan蚄th/th螀创建一列，元素居中，粗体虿蒅caption/caption肅设置表格的标题蒂蒈薅膂羀form/form芇收集用户输入信息,并提交给服务器蚅action,method薃inputtype=text/蚂创建文本框芀name,value螅readonly,disabled羄inputtype=password/聿创建密码框聿螅inputtype=radio/莅创建单选按钮袁checked螇select/select袅创建下拉列表框螅name艿option/option袀创建列表项羅value,selected羂inputtype=checkbox/羁创建复选框蕿checked肅textarea/textarea莃创建文本区域螃name,rows,cols莈inputtype=hidden/膄创建隐藏控件螄膁inputtype=submit/膇创建提交按钮芄膅inputtype=reset/袃创建重置按钮膀莄节莁罿a/a莄超级链接,网页跳转蚃href,target肃metaname=keywordscontent=淘宝网/蚈指定快速的查询到该网页的关键字螈metaname=descriptioncontent=淘宝网-亚洲最大/肄//提供网页内容的描述信息蒀metahttp-equiv=content-typecontent=text/html;charset=utf-8/螁//指定文档类型和页面字符集袈蒄四、案例节1、诗篇葿2、学生课程表羈3、注册页袅蚀CSS知识点芈一、功能肈1、css格式化页面中的各组成元素羂2、css决定元素在页面的具体位置莂二、思想肇属性是css最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修饰html语言的标签。肇三、样式修饰标签莃1、style属性袀html标签添加style属性，属性值是多个css属性的组合。肀2、标签选择器膇样式名与标签关键字相同，根据名称相同自动关联。螄3、ID选择器薂1样式名以#开始；2标签添加id属性与样式关联。衿4、类选择器芇1样式名以.开始；2标签添加class属性与样式关联。膅5、属性选择器肀标签名[属性名=属性值]，根据标签关键字和属性值自动关联。蚈6、包含选择器莇1子样式名中间加或空格分隔(直接包含)；莂2看最后一个子样式是什么选择器就如何关联标签。螂7、多个样式名同一样式体莇1样式名中间加逗号分隔；蒇2根据样式类型决定如何与标签关联。螃8、多条件同时成立选择器腿1多个子样式名紧挨着蒀2一个标签必须同时具备这多个条件才可以被该样式修饰薇9、各选择器使用场合膃1)如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器；羁2)如果一个样式只想修饰唯一的一个标签时，用id选择器；膈3)如果一个样式想修饰多个任意标签时，用类选择器；蚇4)尽量使用包含选择器。薄四、元素定位荿1、盒子模型羇通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流。蚇相关属性：羅marging-top：外上边距肁margin-right：外右边距羀margin-bottom：外下边距螆margin-left：外左边距肂margin：同时设置上右下左四个外边距(顺时针)螃padding-top：内上边距蝿padding-right：内右边距袆padding-bottom：内下边距蒃padding-left：内左边距芁padding：同时设置上右下左四个内边距薈border-top：设置上边线的粗细,颜色,线型羆border-right：设置右边线的粗细,颜色,线型袄border-bottom：设置下边线的粗细,颜色,线型羃border-left：设置左边线的粗细,颜色,线型芇border：同时设置四个边线的粗细,颜色,线型肆border-width：只设置4个边线的宽度(粗细)芅border-color：//只设置4个边框的边框颜色蒁border-style：只设置4个边框的边框线型莀膆2、绝对定位蒂有2套坐标系统：膂1)如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根据left与top值确定元素的位置。肈2)第一个设置相对定位的父标签左上角为坐标原点，根据left与top值确定元素的位置。膆脱离标准文档流袂相关属性：薀position:absolute;袇//表示绝对地址定位,通过绝对定位,元素可以放置到页面上的任何位置。芆left:100px芃//绝对定位时表示与浏览器左边框距离。莂top:100px袀//绝对定位时表示与浏览器上边框距离。莆z-index:蚄//在绝对定位层改变各元素层叠顺序属性值是整数越大越在上方。螀3、相对定位虿元素原位置(标准文档流的位置)左上角为坐标原点，根据left与top值改变位置。没有脱离标准文档流。蒅相关属性肅position:relative;蒂//表示相对地址定位,通过相对定位；元素可以放置到页面上的任何位置。蒈left:100px薅//相对定位时表示与元素原始位置的左边距离。膂top:100px羀//相对定位时表示与元素原始位置的上边距离。芇4、浮动定位蚅把元素靠在在父容器左边或右边.兄弟元素都设置浮动后成为一行，脱离标准文档流。薃相关属性蚂float:设置浮动定位芀clear:清除浮动定位的影响螅5、各定位方式使用场合羄1)靠左或靠右，兄弟标签一列变一行，文字环绕——浮动定位。聿2)移动位移比较小，用盒子模型。聿3)移动位移比较大，父容器相对定位，子元素绝对定位。螅五、添加独立css文件3步骤莅1、创建子文件夹和css文件袁2、在html页面用link标签导入独立css文件螇3、定义样式并修饰各html标签袅六、静态网页开发思想螅1、对网页元素通用属性进行设置。艿2、分析页面的组成，整个网页布局划分为多个矩形区域，在矩形区域内部又可以划分子矩形区域，每个矩形区域都用div标签实现。袀3、用html标签把实际元素放在div标签中，再用css实现元素定位和格式化(对每个元素和div)，依次类推，搞定每个div区域。羅七、css常用属性羂属性名羁功能蕿属性值肅font-size莃设置字号螃1)像素2)百分比莈color膄设置字体颜色螄1)英文单词2)rgb膁font-family膇设置字体芄宋体|黑体膅font-weight袃设置文字粗体膀normal、lightar、bold莄font-style节设置字体斜体莁normal、italic罿font莄设置字体所有属性蚃必须按顺序设置肃蚈螈肄text-decoration蒀设置文本下划线格式螁none、underline、袈line-through蒄text-align节元素中的内容水平方向对齐方式葿left、rigth、center羈line-height袅设置行高蚀像素芈vertical-align肈元素中的内容垂直方向的对齐羂top、bottom、middle莂text-indent肇段落首行缩进肇1)像素2)em莃text-transform袀控制英文字母大小写肀none、capitalize、膇uppercase、lowercase螄袆膃薁width葿设置元素的宽度芄像素袂heigth蚁设置元素的高度薆像素羆蚁蚁羇background-color蒃设置背景颜色蚄1)英文单词2)rgb螁background-image蒇设置背景图片膅url('图片路径')蒂background-repeat袁设置背景图像重复方式袈repeat、no-repeat蚃repeat-x、repeat-y芁background-size羁设置背景图像的大小艿1)像素2)百分比莅background-position芄设置背景图片的出现位置肁像素莆background肇//设置所有背景属性肃膀螇薅螂display芀设置元素是否可见膈none、block、inline芇overflow薁设置内容超出父区域时如何处理芀hidden、visible蕿list-style-type蚅设置列表符号类型薄disc、circle、none莀list-style-image蚆用图片作为编号莆url(图片路径)莃opacity蒀设置元素的透明度肆从0.0（完全透明）到1.0（完全不透明）袄cursor膁设置鼠标到达元素上的鼠标形状薀pointer、text蒇border-radius薆设置圆角矩形膄像素蚀袈八、案例肄1、房地产首页羃2、注册页螀3、登录页艿4、二级菜单螆JavaScript知识点蚂一、功能衿浏览器执行html代码后实现动态改变网页内容和格式从而实现动态效果蒆二、思想膄1、分析有哪些动态效果，确定事件三要素并关联从而实现一切功能。蒁2、要实现某功能找已经存在的对象和方法。衿三、html导入独立的js文件的步骤袇1、创建文件夹和独立js文件。羆2、用scripttype=text/javascriptsrc=标签在html页面中导入。螈3、在js文件中定义方法，并与html页面的标签关联。芃四、事件关键字蒂1、onclick：鼠标单击时触发。蚈2、onload：页面全部内容被加载后立即触发，该事件源是body。薇3、onmouseover：鼠标进入区域时触发。莃4、onmouseout：鼠标退出区域时触发。袃5、onmousemove：鼠标在某区域移动时触发。莀6、onchange：内容改变时触发。莆7、onsubmit：表单提交数据时触发。蒃8、onblur：控件失去焦点时触发。芄9、onfocus：控件获取焦点时触发。螇五、浏览器对象和方法荿1、特性蒃所有对象都是由浏览器负责提供的，编程时可以直接调用方法，又称BOM对象。蒀2、浏览器对象的方法总结蕿内置对象名膇功能薃常用方法袁1、window芁代表浏览器窗口袆alert(提示内容)蚃节虿setInterval(方法名(),数值)蚅螂蚃clearInterval(对象名)蒁蚈袂setTimeout(方法名(),时间)螀衿蒇open(,_blank,width=800,height=500);羂膁薁parseInt(数值)芆eval()芆薂聿prompt(提示信息,默认信息)艿//弹出对话框,接受文本框内容莆羃螀confirm(对话框上的提示信息)肈//弹出对话框,有确定和取消2个蒆2、document代表整个网页getElementById(标签的id属性)getElementsByTagName(标签关键字)getElementsByName(标签的name属性值)createElement(标签关键字)write(内容)3、event事件对象event.x鼠标此