本帖最后由 小石姐姐 于 2017-11-20 14:46 编辑
Day-01HTML
概述:超文本标记语言
标记语言:通过一组标签来描述事物的一门语言
超文本:比普通文本更强大.
作用:
用来制作页面(静态页面).展示网页数据
使用:
创建:一个HTML文件,扩展名是.html或者.htm
结构标签
根标签:<html></html>
<head> 头标签
<title></title>
<meta>charset='UTF-8'</meta>
<body> 体标签
字体标签
<font>:
<font>文字</font>
标签属性:<标签 属性名="属性值" 属性名="属性值"></标签>
color属性:颜色
size属性:字体的大小(只能1-7)
face属性:方法体宋体.楷体...
<br/>换行标签
<hr/>横线标签
<pre/>复制保持原样
排版标签
标题标签<h>:1-6
段落标签<p>
粗体标签<b>
斜体标签<i>
下划线标签<u>
居中标签<center>
图片标签*
图片标签:<img>
属性:src :来源
width: 宽度
height:高度
alt :图片找不到显示的内容
图片引用的路径问题:
路径:
相对路径:同级直接写文件名或者./文件名
上级路径:../上两级目录:../../下一级目录:下级名称/图片名
代码调试:右键检查 点击elements 选中元素 右键add
网站列表页面的显示
列表标签:
有序列表:<ol>
<li></li>
</ol>
无序列表:<ul>
<li></li>
</ul>
超连接标签:
<a>标签:
href:要连接的路径
target:打开方式:
_self:(默认)在本窗口
_blank:新打开一个窗口
注意:ul style='list-style:none'去除小圆点
表格标签:
<table>
<tr>:行
<td></td>:列
</tr>
</table>
属性:
width :表格宽度
Height :高度
Border :边框
Align: :表格水平位置
left
center
right
<td>的属性
colspan:跨列合并
rowspan:跨行合并
表单标签(重点):
<form action='' method='get'>
标签里属性:
action属性:提交的路径
method属性:请求的方式,提交方式get和post,默认get
get方式和post方式的区别(面试题):
get:数据会显示到地址栏中,get方式提交的有大小限制
post:数据不会显示到地址栏中,相对安全,提交没有大小限制
</form>
表单元素:
<input type='text'> 文本框
常用属性:
*name:表单元素的名称,必须有name属性,然后后台才可以接收数据
*value:文本框的默认值
size:文本框的长度
maxlength:文本框输入的最大长度
readonly:只读文本框
<input type='password'> 密码框
同文本框属性
<input type='radio'> 单选按钮
常用属性:
*name:表单元素的名称,必须有name属性,然后后台才可以接收数据
*value:单选按钮的默认值
checked:单选按钮默认被选中
<input type='checkbox'> 复选按钮,复选框
同一组选择属性必须有name属性
<input type='button'> 普通按钮.没有任何功能按钮
<input type='submit'> 提交按钮
<input type='reset'> 重置按钮
<input type='file'> 文件上传的表单项
<input type='hidden'> 隐藏字段
<select> 下拉列表
里面是<option></option>
默认被选中时selected
<textarea> 文本域
Day-02 CSS
框架标签:
<frameset></frameset>与body标签冲突,有frameset就没有body
属性:
rows 横切
cols 纵切
使用<frame>标签,frame代表每个切割部分
特殊字符标签:
空格:
< : <
> : >
*常用标签:<div> <span> <ul> <a> <i>:icon图标
HTML里面的块标签:
<div> :默认一个div独占一行
<span> :默认同一行
*块级元素和行内元素
块级元素:<div> 独占一行,可以修改高度和宽度
行内元素:<span><i><u>..不独占一行,不可以修改高度和宽度
*table和div 的比较:
div更加灵活并且解析加载速度快
CSS:层叠样式表,用于美化html
基本语法:选择器,一条或多条声明
选择器{属性:属性值 属性:属性值}
*CSS引入方式:
1.行内样式:直接在html的元素上使用style的属性
<h1 style="color=red ; font.size=40px;"></h1>
只有某个标签自己使用
2.页面内部样式:在html的<head>标签里使用标注css样式
h1{color=red ; font.size=40px;}
同一个html中多个标签共用这个样式
3.外部样式:单独定义一个.css文件,在html中引入该文件
多个html中使用相同的样式
h1{color=red ; font.size=40px;}
CSS的选择器:
元素选择器:比较常用,直接使用标签
h1{color=red ; font.size=40px;}
ID选择器:
#ID号{属性:属性值;}
类选择器:
一次选择多个同一类的
.divclass-任意定义的{}
需要使用css的元素中,class="divclass";
*选择器的优先级:ID选择器>类选择器>标签选择器
*CSS的浮动
使用float属性完成div的浮动
float的属性取值:
left
right
none
清除浮动clear属性
.clear{
clear:both;
}
总结:为什么要使用浮动?
为了让某些标签(块级元素 div Li)横着显示
如何使用浮动? float:left
如何清除浮动?
浮动完成后清除浮动
一种:clear:both
另一种:给浮动元素的父元素添加一个样式 clearfix
css中的继承问题
在css中宽度可以继承,高度不可以继承
浮动后的div和HTML没有关系,不能继承html的高度
浮动后的元素不会继承宽度的
注意:css中高度和宽度没有默认值.需要加上.px.
让div居中 margin:0 auto;
calc(70% - 2px)可以完成百分百和像素相减,减号两边有空格
子孙元素选择器(会找后代所有的)
div span 查找的是所有的div中所有的span元素
子元素选择器(只会找儿子辈)
Div> span找这个div中第一层的span元素
属性选择器
input [type="text"]{
backgrond-color:red ;
}
CSS的样式
背景background
文本
字体 font
边距
CSS内边距(盒子内的泡沫值)
padding
边框
border
外边距{盒子间的距离}
margin
CSS中的灵位
position
relative:相对定位
absolute:绝对定位
使用另外两个属性:left top
总结:盒模型
外边距:盒子与盒子的距离 margin
内边距:padding
宽度计算方式: padding -left +padding-right+border-left+border-right+content
定位
position
relative:相对定位
absolute:绝对定位,相对于body的
使用的时候记住:子绝父相
fixed:制作广告的时候使用
伪类
link
visited
hover
active
顺序不能乱,href属性中必须有值
Day-03 JavaScript
JavaScript:在浏览器端运行的脚本语言
组成:ECMAScript:js的基本语法
BOM:浏览器数据模型
DOM:文档数据模型
用途:使页面更加丰富,使页面动起来
JS的基本语法:
1.区分大小写
2.弱变量类型的语言(与java语言不同)
定义所有变量都是var,根据后面的数据来定型
var i=3;
var s="abc";
3.注释和java相同
4.变量命名和java相同
5数据类型
原始类型:五类
undefinded:未定义
boolean:布尔
number:数字类型
string:字符或字符串
null:空
引用类型:
对象类型:对象类型默认值为null.
6.运算符:与java基本一致
有一个不同=== 全等于.数据类型和值一致才为true
7.语句:基本与java一致
总结:
定义变量: var 变量名=值;
变量名:局部变量(定义在方法内部的变量)我们以_开头
给变量赋予默认的值
如果是基本类型 var num= undefinded
如果是引用类型 var person= null;
在控制台打印变量 console.log(变量名);
定义对象 var person ={
name:'张三',
age:14,
gender:"女"
}
定义方法(函数) function 方法名(){}-无参
function 方法名(name,id){}-有参
function () {} 匿名方法,当作为方法的实际参数时使用
方法的调用 方法名();
在控制台打印变量 console.log(变量名);
在方法内,alert("弹出内容");
JavaScript的通常开发步骤:
JS通常都由一个事件触发.
触发一个函数,定义一个函数
获得操作对象的控制权
修改要操作的对象的属性或值
常用事件:onclick,ondblclick,onmouseover,onmouseout-(onmouseenter onmouseleave),onload,
onload 在html加载完所有标签后,
(placeholder 提示语)
JavaScript的引入方式:
一种:页面内直接编写JS代码,使用script标签
二中:将JS的代码写入一个JS的文件:<script src="地址" />
html的window对象
setInterval("JS代码",毫秒值);每隔多少毫米执行一次表达式
setInterval("chang()",5000);
开发中使用匿名对象:setInterval(function load(){ console.log(1},1000);
setTimeout():隔多少毫米执行一个该表达式
同上
CSS的显示和隐藏
1.display:隐藏后不占位
block 显示
none 隐藏
2.visbility:隐藏后占位
visible:显示
hidden:隐藏
window的方法
alert()
setInterval()
setTimeout()
clearInterval()
clearTimeout()
confirm() --弹出确认窗口
prompt() --可输入的对话框
open() --打开一个新的窗口
Day-04
JS的输出
document.getElementById('').innerHTML="HTML的代码"-覆盖之前的东西
document.write("")-重写整个页面,开发中不建议使用
JS的事件
onfocus :获得焦点
onblur :失去焦点
onsubmit :提交的时候
onchange :下拉列表改变事件
键盘事件
onkeydonwn
onkeyup
onkeypress
鼠标操作事件
onmousemove
onmouseout
onmouseover
onmousedown
onmouseup
表格各行换色
DOM对象
DOM:文档对象模型
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子
DOM的使用
知道document,element,attriibute中的属性和方法
常用的操作:
获得元素
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
创建元素
document.createElement()
document.createTextNode()
添加节点
element.appendChild()
element.insertBefore()
删除节点
element.removeChild()
day-05
JQuery(重点)
第一学CSS
第二个学Jquery: 多表关联 xml读取
JQuery是一个JS的框架(JS的类库)--工具类.
JS常用的框架
JQuery,ExtJS
JS和JQ对象的转换
JS-->JQ d1-->$(d1)
JQ-->JS d2-->$(d2)[0]
JQ的效果操作
show();
使用一;JQ对象.show();
使用二:JQ对象.show("slow");
使用三:JQ对象.show("毫秒值");
使用三:JQ对象.show("毫秒值",function (){});
hide():如show()
slideDown slideUp,滑动 如show()
fadeIn() fadeOut(),淡入淡出如show()
JQ的选择器
基本选择器
ID选择器
用法:$("#id")
类选择器
用法:$(".类名")
元素选择器
用法:$("元素名称")
通配符选择器
用法:$("*")
并列选择器
用法:$("选择器,选择器,选择器...")
层级选择器
后代选择器
用法:$("div span")
子元素选择器
用法:$("div >span")
下一个元素:+ --查找同辈下一个元素
兄弟元素:~ --查找同辈后面所有的元素
总结:JQ对象实际上是DOM数组,我们操作JQ对象,实际上就是操作里面每一个元素
只有被$符包裹起来的才是JQ对象
JQ与DOM对象的转换
jQuery=>DOM : $("div")[0]
DOM=>jQuery: $(DOM对象)
基本过滤选择器
:first 查找第一个
:last 查找最后一个
:odd 查找序号为奇数的元素
:even 查找序号为偶数的元素
:eq() * 等于
:contains() 包含所有内容
属性选择器
[属性名称='属性名']
表单选择器
checked
JQ对属性的操作方法
attr();
使用方法一:$("").attr("src")
使用方法二:$("").attr("src"."test.jpg")
使用方法一:$("").attr("src":"test.jpg","width":"100")
removeAtrr
prop();
使用方法一:$("").prop("src")
使用方法二:$("").prop("src"."test.jpg")
使用方法一:$("").prop("src":"test.jpg","width":"100
总结:
attr:自定义属性
prop:非自定义属性
JQ的操作DOM
append : A.append(B)在原有基础上添加
appendTo:B.appendTo(A)
$().each.(function(index,element)){
});
day-06
JQ常用的事件
事件切换:
toggle(); --单击事件的切换
hover(); --进行事件的切换
JQ的查找
find("选择器") :查找
parent()
children()
|
|
收藏
淘帖
踩
