本帖最后由 小石姐姐 于 2018-5-4 09:46 编辑
web阶段学习笔记
HTML A:HTML的概述： HTML：Hyper Text Markup Language. HTML就是由一组标签所组成的. B:HTML的字体标签: <font>标签: 属性：color,size,face C:HTML的排版标签: h标签：标题标签. p标签：段落标签. b标签：加粗标签. i标签：斜体标签. u标签：下划线标签. br标签：换行. hr标签：水平线. D: HTML的图片标签: img标签: 属性: src属性:图片的路径. 相对路径: ./ 代表当前目录 ../上一级目录 width,height,alt. E:HTML的超链接标签: a标签: 属性： href:链接的路径. target:链接打开的方式. _self,_blank,_parent F:HTML的列表标签: 无序列表:<ul>(只是没有前标并不是乱排序) 有序列表:<ol> G: HTML的表格标签： table标签: tr标签：表格的行. td标签：表格的列. H: HTML的表单标签：(重点掌握) form标签： action属性：表单提交的路径 method属性：表单的提交的方式. GET和POST： GET：地址栏上会显示提交的数据的信息,大小限制. POST：地址栏不会显示提交的数据的信息,没有大小限制. I: <input> type=”text”:文本框 type=”password”:密码框. type=”radio”:单选按钮. type=”checkbox”:复选框. type=”file”:文件上传. type=”hidden”:隐藏字段. type=”submit”：提交按钮. type=”reset”:重置按钮. type=”button”:普通按钮. type=”image”:图片按钮. J: <select>:下拉列表. K: <textarea>:文本区 L: HTML的框架标签: <frameset> <frame> CSS A 概述 Css就是层叠样式表,使用来美化页面的 B 基本语法 选择器{属性:属性值,属性:属性值}; 属性:属性值(叫做声明) C 引入的样式 行内引入:直接在HTML的元素上使用style属性设置CSS 页面引入:<head>标签使用style属性设置CSS 外部引用:单独定一个.css的文件.在HTML中引入该CSS文件 <link href="../../css/demo1.css" rel="stylesheet" type="text/css" /> D选择器 元素选择器 类选择器 Id选择器 E浮动 使用float属性就可以完成浮动 可以使用clear就可以清除浮动 F:CSS的样式 背景:background 文本:text..... 字体:font 列表:list G盒子模型 内边距：padding 边框：border 外边距：margin 定位:position属性设置定位： relative:相对定位 absolute:绝对定位 使用另外两个属性:left,top JScriptA概述 是运行在浏览器端的脚本语言 B:JS的组成 ECMAScript，BOM，DOM C语法ECMAScript (1)Js是弱变量型语言.变量的种类是根据等号另一边的数据类型来确定的.var=xx (2)数据类型 原始类型： undefined：未定义类型 boolean:布尔类型 number:数字类型 string:字符或字符串. (3)运算符: ===全等 只有数据类型和数据值完全相同才为true (4)语法:和java差不多 (5)开发的步骤: 定义一个事件,当时间触发时会触发一个函数,然后由函数来改变原 来的值 Function(){ 函数体}; (6)js的引入方法: 页面内直接编写<script></script> 在外部编写然后倒入HTML文件 D:BOM 页面的对象 (1)window: alert(); --弹出对话框 setInterval(); setTimeout(); clearInterval(); clearTimeout(); confirm(); --弹出一个确认窗口 prompt(); --弹出一个可输入的对话框 open(); --打开一个新窗口 (2)Navigator ：包含的是浏览器的信息. (3)Screen:用来获得屏幕信息: (4)History:浏览器的历史对象:back()返回上一页面 (5)Location:包含URL信息的对象 E:DOM 文档对象模型,将一个HTML文档加载到内存形成一个树形结构,从而操作树形结构就 可以改变HTML文档 (1)常用的操作 获得元素： document.getElementById(); -- 通过ID获得元素. document.getElementsByName(); -- 通过name属性获得元素. document.getElementsByTagName(); -- 通过标签名获得元素. 创建元素： document.createElement(); -- 创建元素 document.createTextNode(); -- 创建文本 添加节点： element.appendChild(); -- 在最后添加一个节点. element.insertBefore(); -- 在某个元素之前插入. 删除节点： element.removeChild(); -- 删除元素 F:JS的常用事件 * onload :页面加载 * onclick :单击 * onsubmit :提交表单 * onfocus :获得焦点 * onblur :失去焦点 * onchange :下拉列表改变事件. * ondblclick:双击某个元素的事件.
键盘操作事件: * onkeydown :按下键盘 * onkeyup :按键向上 * onkeypress:
鼠标操作事件： * onmousemove：鼠标移动 * onmouseout：鼠标离开 * onmouseover：鼠标悬停 * onmousedown * onmouseup
JQuery A 概述 是js的框架 对传统js进行封装,大大简化了前端的开发,提高了效率 B 使用 (1)首先要引入jq的js文件 <script src="../../js/jquery-1.11.3.min.js"></script> (2)写入口函数 $(function (){}) C注意事项 JQ可以进行多次的操作,效率比较高 JQ是等页面的DOM树绘制完成后执行 $就相当于JQuery D JS对象和JQ对象的互相转换 $(JS对象) //JS转化为JQ对象 $对象名[0] $.get(0) E JQ的效果操作 Show(); 使用一:JQ对象.show() 使用二:JQ对象.show(“slow”);缓慢的 还可以填fast ;normal 使用三:JQ对象.show(毫秒值); 使用四:JQ对象.show(毫秒值,function(){}); hide(); slideDown(); 向下滑动 slideUp(); 向上滑动 fadeIn(); 淡入 fadeOut(); 淡出 animate(); 自定义动画 toggle(); 单击切换函数 F 选择器 id选择器 * 用法:$(“#id”) 类选择器 * 用法:$(“.类名”) 元素选择器 * 用法:$(“元素名称”) 通配符选择器 * 用法:$(“*”) 并列选择器 * 用法:$(“选择器,选择器,选择器”) G 层级选择器 后代选择器：使用空格 所有后代包含孙子及以下的元素 子元素选择器：使用> 第一层的元素（儿子） 下一个元素:使用+ 下一个同辈元素 兄弟元素:使用~ 后面所有的同辈元素 H 基本过滤选择器 First 第一次出现 Last 最后一次出现 Odd 奇数 Even 偶数 I内容选择器 Contains(text) 匹配包含指定文本的元素 Empty 匹配所有不包含子元素或者文本的空元素 Has(selector) 匹配含有选择器所匹配的元素的元素 Parent 匹配患有子元素或者文本的元素 J属性选择器 K表单选择器 Input Text Password Radio Checkbox Submit Image Reset Button File Hidden L JQ对属性的操作方法 prop();新版本的方法. 使用方法一：$(“”).prop(“src”); 使用方法二：$(“”).prop(“src”,”test.jpg”); 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”}); removeProp(); addClass() removeClass(); M JQ的DOM操作 常用的方法: append(); ---在某个元素后添加内容. appendTO(); ---将某个元素添加到另一个元素后. remove(); ---将某个元素移除. N JQ的遍历 遍历的方式一： * $.each(objects,function(i,n){ }); 遍历的方式二: * $(“”).each(function(i,n){
});
BootStrapA概述 是来自Twitter的前端框架,是基于html,js,css的.利用它可以设计出响应式页面.就是在不同的设备上页面也可以完好的加载 B使用 先要引入文件,添加一个meta标签 C栅格系统 BootStrap提供了一套响应式,移动设备优先的流式栅格系统,随着系统屏幕大小的增加,他会自动变化成最多有12列存在 格式:定义列 Col-lg-n最大宽度 Col-md-n中等屏幕 Col-sm-n小屏幕 Col-xs-n超小屏幕
| 
收藏
淘帖
踩
