《Web前端知识点总结》由会员分享，可在线阅读，更多相关《Web前端知识点总结（22页珍藏版）》请在金锄头文库上搜索。
1、HTML知识点一、功能用来制作静态网页，网页中的全部内容都是通过H tml语言展现出来。使用场合：开发静态网页。二、思想一切功能都由标签实现，标签具有四要素。三、常用标签标签关键字功能常用属性设置字体，字号，颜色face, color, size换行 居中对齐 设置标题级别H1最大h6最小align插入水平线size, width, align 划分段落，align 创建有序编号列表type, start 定义一个列表项 定义无序符号列表type插入图片src,width,height,border,title,alt插入表格border,width,height,bgcolor,border
2、color,cellpadding,cellspacing创建一行创建一列colspan, rowspan创建一列，元素居中，粗体设置表格的标题 收集用户输入信息，并提交给服务器action, method创建文本框name, value readonly, disabled创建密码框创建单选按钮checked 创建下拉列表框name 创建列表项value, selected创建复选框checked 创建文本区域name,rows, cols创建隐藏控件创建提交按钮创建重置按钮 超级链接，网页跳转href, target指定快速的查询到该网页的关键字/提供网页内容的描述信息/指定文档类型和页面
3、字符集四、案例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、包含
4、选择器1子样式名中间加或空格分隔 （直接包含）；2看最后一个子样式是什么选择器就如何关联标签。7、多个样式名同一样式体1样式名中间加逗号分隔；2根据样式类型决定如何与标签关联。8、多条件同时成立选择器1多个子样式名紧挨着 2一个标签必须同时具备这多个条件才可以被该样式修饰9、各选择器使用场合1）如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器；2）如果一个样式只想修饰唯一的一个标签时，用id选择器；3）如果一个样式想修饰多个任意标签时，用类选择器；4）尽量使用包含选择器。四、元素定位1、盒子模型 通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流。 相关属性：marging
5、-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 :设置左边线的粗细，颜色，线型bor
6、der :同时设置四个边线的粗细，颜色，线型border-width :只设置4个边线的宽度（粗细）border-color : /只设置4个边框的边框颜色border-style :只设置4个边框的边框线型2、绝对定位有2套坐标系统:1）如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根 据left与top值确定元素的位置。2）第一个设置相对定位的父标签左上角为坐标原点，根据left与top值确定元素 的位置。脱离标准文档流相关属性:position: absolute;/表示绝对地址定位，通过绝对定位，元素可以放置到页面上的任何位置。left:100px/绝对定位时表示
7、与浏览器左边框距离。top:100px/绝对定位时表示与浏览器上边框距离。z-index:/在绝对定位层改变各元素层叠顺序 属性值是整数 越大越在上方。3、相对定位元素原位置（标准文档流的位置）左上角为坐标原点，根据left与top值改变位置。没有脱离标准文档流。相关属性position: relative;/表示相对地址定位,通过相对定位；元素可以放置到页面上的任何位置。 left:100px/相对定位时表示与元素原始位置的左边距离。top:100px/相对定位时表示与元素原始位置的上边距离。4、浮动定位把元素靠在在父容器左边或右边. 兄弟元素都设置浮动后成为一行，脱离标准文档 流。相关属性
8、float :设置浮动定位clear:清除浮动定位的影响5、各定位方式使用场合1）靠左或靠右，兄弟标签一列变一行，文字环绕浮动定位。 2）移动位移比较小，用盒子模型。3）移动位移比较大，父容器相对定位，子元素绝对定位。五、添加独立 css 文件 3 步骤1、创建子文件夹和 css 文件2、在html页面用link标签导入独立css文件3、定义样式并修饰各 html 标签六、静态网页开发思想1、对网页元素通用属性进行设置。2、分析页面的组成，整个网页布局划分为多个矩形区域，在矩形区域内部又可以 划分子矩形区域，每个矩形区域都用div标签实现。3、用html标签把实际元素放在div标签中，再用cs
9、s实现元素定位和格式化（对 每个元素和div），依次类推，搞定每个div区域。七、css常用属性属性名功能属性值font-size设置字号1）像素2）百分比color设置字体颜色1）英文单词2）rgbfont -fam 订y设置字体宋体I黑体font-weight设置文字粗体normal、lightar boldfont-style设置字体斜体normal 、 italicfont设置字体所有属性必须按顺序设置text-decoration设置文本下划线格式none、underline、 line-throughtext-align元素中的内容水平方向对齐方式left、rigth、center
10、line-height设置行高像素vertical-align元素中的内容垂直方向的对齐top、bottom、middletext-indent段落首行缩进1)像素2)emtext-transform控制英文字母大小写none、capitalize、uppercase、lowercasewidth设置元素的宽度像素heigth设置元素的高度像素background-color设置背景颜色1）英文单词2）rgbbackground-image设置背景图片url（图片路径）background-repeat设置背景图像重复方式repeat、no-repeat repeat-x、repeat-yba
11、ckground-size设置背景图像的大小1）像素2）百分比background-position设置背景图片的出现位置像素background/设置所有背景属性display设置元素是否可见none、block、inlineoverflow设置内容超出父区域时如何处理hidden、visiblelist-style-type设置列表符号类型disc、circle、nonelist-style-image用图片作为编号url（图片路径）opacity设置元素的透明度从0.0 （完全透明）到1.0 （完全不透明）cursor设置鼠标到达元素上的鼠标形状pointer、textborder-ra
12、dius设置圆角矩形像素a :liQk CD1DE： FFOOOO/* 耒厉可的销接d :visited color: OOFFOO) /+ 已访i可的槌接 d：hL：ver GQ1QL-： #FFOOFF当有鼠标悬停fd ：dctivs color: OOOOFF /* 械选择的链接八、案例1、房地产首页2、注册页3、登录页4、二级菜单JavaScript 知识点一、功能浏览器执行html代码后实现动态改变网页内容和格式从而实现动态效果二、思想1、分析有哪些动态效果，确定事件三要素并关联从而实现一切功 能。2、要实现某功能找已经存在的对象和方法。三、html导入独立的js文件的步骤1、创建文件夹和独立js文件。2、用script type=text/javascript src=标签在 html 页面中导入。3、在js文件中定义方法，并与html页面的标签关联。四、事件关键字1、onclick :鼠
