文稿11期前端知识总结.pptxVIP

前端知识总结;一、HTML+CSS;了解元素（标签的类型） （一）块级标签（block） 特点：独占一行 能任意改变宽度和高度 （二）行内标签（inline） 特点：多个标签可以显示在同一行 不能修改尺寸，尺寸取决于内容的多少 （三）行内-块级标签 特点：多个标签可以显示在同一行，能任意修改尺寸 不设置尺寸，默认的尺寸取决于内容的多少 ;了解常见的属性 fontSize 字体大小 color 字体颜色 width 设置宽度 height 设置高度 background 设置背景 display 显示类型（none、block、inline、inline-block） padding 内边距（四种方式） margin 外边距（四种方式） border 设置边框（border-size、border-style、border-color） ;脱离标准流 （一）float 取值：left、right （二）绝对定位 position 和 left、right、top、bottom结合使用 如果想定位在右下角？ 注意点： （1）如果想相对父控件进行定位，设置父节点的position为relative （2）子绝父相 ;常见的选择器 (一) 标签选择器 tagName (二) 类选择器 .className (三) id选择器 #id (四) 后代选择器(多个选择器之间用空格隔开) tagName .className ; (五) 群组选择器（多个选择器之间用逗号隔开） tagName , .className (六) 直接后代选择器（多个选择器用之间用号隔开） tagName .className (七) 属性选择器 tagName[attrName=“attrValue”] (八) 选择器组合(多个选择器黏在一起) tagName.className#id (九) 伪类 tagName:hover ;进阶 搞定百度等四个综合小案例;二、JS;节点的基本操作（CRUD） （一）update (U) var img = document.getElementById(‘logo’); img.src = ‘images/logo.jpg’; （二）delete(D) var img = document.getElementById(‘logo’); img.parentNode.removeChild(img); 或 img.remove(); ;事件绑定 （一）推荐做法 var button= document.getElementById(‘login’); button.onclick = function(){ // 实现点击按钮想做的事情 } （二）直接写到标签的内部 button onclick=“var age=20; alter(age);”登录/button ;事件绑定 （三）不常用 function login(){ // 实现点击按钮想做的事情 } var button = document.getElementById(‘login’); button.onclick = login(); ;三、jQuery;（四）事件绑定 a) 点击事件 （常用） $(‘选择器’).click(function(){ // 实现点击按钮想做的事情 }); b) 点击事件 （不常用） function login(){ // 实现点击按钮想做的事情 } $(‘选择器’).click(login);;四、参考手册;五、HTML5框架;相关补充;微信号: