本帖最后由 小石姐姐 于 2017-11-21 10:08 编辑
* HTML的概述： * HTML：Hyper Text Markup Language. * HTML就是由一组标签所组成的. * HTML的字体标签: * <font>标签: * 属性：color,size,face * HTML的排版标签: * h标签：标题标签. * p标签：段落标签. * b标签：加粗标签. * i标签：斜体标签. * u标签：下划线标签. * br标签：换行. * hr标签：水平线. * HTML的图片标签: * img标签: * 属性: * src属性:图片的路径. * 相对路径: ./ 代表当前目录 ../上一级目录 * width,height,alt. * HTML的超链接标签: * a标签: * 属性： * href:链接的路径. * target:链接打开的方式. _self,_blank,_parent * HTML的列表标签: * 无序列表:<ul> * 有序列表:<ol> * HTML的表格标签： * table标签: * tr标签：表格的行. * td标签：表格的列. * HTML的表单标签：（*****） * form标签： * action属性：表单提交的路径 * method属性：表单的提交的方式. * GET和POST： * GET：地址栏上会显示提交的数据的信息,大小限制. * POST：地址栏不会显示提交的数据的信息,没有大小限制. * <input> * type=”text”:文本框 * type=”password”:密码框. * type=”radio”:单选按钮. * type=”checkbox”:复选框. * type=”file”:文件上传. * type=”hidden”:隐藏字段. * type=”submit”：提交按钮. * type=”reset”:重置按钮. * type=”button”:普通按钮. * type=”image”:图片按钮. * <select>:下拉列表. * <textarea>:文本区 * HTML的框架标签: * <frameset> * <frame> 设置边框: border:”1px solid black”
div+css 快捷键 alt+shift+a 可以同时修改多行代码 1.常用标签: <div> 块级元素 <span> 行内元素 <ul> 里标签 <a> 超链接 <i> 2.块级元素和行内元素 块级元素：独占一行，可以修改高度和宽度 div 块级元素转行内元素添加属性display:inline; 行内元素：不独占一样，不可以修改高度和宽度 span 行内元素转块级元素添加属display:block; 行内块级元素:不独占一行，并且可以修改高度和宽度 img display:inline-block; 3.table和div布局的区别 div更加灵活并且解析加载速度快 4.CSS引入方式 引入外部css文件：多个HTML文件中使用了相同的样式 页面内样式：同一个HTML文件中多个标签共用这个样式 行内样式：只有某个标签自己使用 5.选择器的优先级 ID选择>类选择器>标签选择器 5.1 复合选择器 子孙元素选择器 div a{} 子元素选择器 div > a{} 属性选择器 标签名[属性名='属性值']{} 6.浮动 为什么要使用浮动？为了让某些标签(块级元素，div，li)横着显示 如何使用浮动? float:left 如何清除浮动? 两种 1.在浮动的元素后面添加<div style="clear:both"> 不建议使用 2.给浮动的元素的父元素添加一个样式 clearfix /*清除浮动样式*/ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } <div class="clearfix"> <div class="w-500 h-100 bg-red f-left"></div> <div class="w-500 h-100 bg-gray f-left"></div> <div class="w-500 h-100 bg-hotpink f-left"></div> </div> 7.CSS中的继承问题 在CSS中宽度是可以继承，高度不可以继承 注意：浮动以后的元素是不会继承宽度的 8.div居中 margin:0 auto; 9.百分比和PX的计算 calc(100% - 45px) 注意事项：减号的两边必须有空格 代码演示: <div style="width: 100%;height: 300px;background-color: aqua;"> <div class="f-left" style="width: 30%-2px;border: 1px solid black; background-color: red;height: 100%;"></div> <div class="f-left" style="width: 70%-2px;border: 1px solid black; background-color: hotpink;height: 100%;"></div> </div>
10.盒模型 外边距：盒子与盒子的距离 margin 内边距：padding 宽度计算方式 padding-left + padding-right + border-left + border-right + content;
11.定位 position absolute :绝对定位 relative ：相对定位 只需要记住使用的时候:子绝父相 <body> <!--需求：里面的小盒子定位是absolute，想要根据外面div的盒子设置左右距离--> <div style="width: 500px;height: 500px;background-color:aqua;margin-left: 30px;position:relative"> <!-- 父元素相对定位 --> <div style="width: 100px;height: 100px;background-color: red;position:absolute;top:0;left:0"><!-- 子元素绝对定位 --> </div> </div> </body> fixed : 制作广告的时候使用 <body> <div style="height: 200px;width: 100px; background-color: #000000;position:fixed;right: 0;top:30px;"></div> </body>
12.伪类 :link :visited :hover :active 顺序不能乱，href属性中必须有值，记忆方法是 驴哈
样式总结 背景 背景颜色 background-color:red; 背景图片 background-image:url(xx.png); 背景重复 background-repeat:no-repeat; 背景位置 background-position: center center; 背景缩写 background : red url(x.png) no-repeat center center; 背景大小 background-size: 边框 border : 1px solid black; 文本/字体 大小 font-size : 12px; 颜色 color : red; 去除超链接下划线 text-decoration : none; 文本上下居中 line-height:100px;height:100px;//height==line-height 文本左右居中 text-align:center; 无序列表:去除小圆点 <ul style="list-style:none"></ul> 外边距:margin 内边距:paddding
JavaScript 1.基本语法 定义变量 var 变量名 = 值; 变量名：局部变量(定义在方法内部的变量)我们以_开头。 给变量赋予默认的值 如果是基本类型 var num = undefined; 如果是引用类型 var person = null; 在控制台打印变量 console.log(变量名); 定义对象 var person = { name:"张三", age:14, gender:'女' } 定义方法(函数) function 方法名(){} function 方法名(name,id){} function (){} //匿名方法，当作为方法的实际参数的时候使用 方法的调用 方法名(); null和undefined报错问题 Cannot read property 'name' of undefined 原因是调用了undefined.name Cannot read property 'name' of null 原因是调用了null.name 2.事件 注意函数必须加() onclick = "函数名()" ; ondblclick = "函数名()" onmouseenter = "函数名()" onmouseleave = "函数名()" onload = "函数名()" 在HTML文本加载完毕后请求图片资源，图片请求回来后执行onload事件
3.定时器 var timer = setInterval("JS代码",毫秒值) var timer = setInterval(function(){},毫秒值);//常用 clearInterval(timer); 4.CSS显示和隐藏元素的两种方式 display:block;none; 隐藏后不占位 visibility:visible;hidden; 隐藏后占位
| 
收藏
淘帖
踩
