1.html、css
html 超文本标记语言 (xml可拓展标记语言)
1.模板:
!DOCTYPE声明+html根标签(根标签包括head头部标签和body身体标签 (头部标签可以定义meta编码 title标签 还有link图标)(身体标签里面写网页的内容))
<!DOCTYPE html> <!-- 声明html语言版本,浏览器根据不同版本解析-->
<html> <!-- <html>根标签 (<head>头部标签 <body>身体标签)-->
<head> <!-- 头部标签(meta编码 title标题 link图标)-->
<meta charset="utf-8">
<title>百度一下 你就知道</title>
<link href="img/baidu.ico" rel="icon" />
</head>
<body> <!-- 身体标签-->
</body>
</html>
2.认标签
.标题标签:
<h 1> <h 2>...<h 6> 占一行 (占一行的有属性align="center/right" 居中 /居右)
.段落标签:
占一行 也有align属性 段落与段落之间有间隔
.换行标签:
哪里想换行就放哪
.图片标签:
属性height width border(加边框)
.背景图片:
只写style="background: url(img/网页图标1.jpg);" 把()后面多余的删掉就是一张图 不然就是有补充到
.超链接:
视频标签:
<video width="800" height="400"controls="controls" > <source src="./img/科比81分.mp4" type="video/mp4" ></source> </video>
注意controls="controls"前面不加空格
<a href="链接地址"></a>>
可以连接其他项目<a href="其他项目名.html"></a>>
.特殊符号转换:
  空格、<>=< > 大于小于号、©版权、®注册商标
.列表标签:
有序列表、无序列表
有序列表
不定义type就默认123...
无序列表:
属性:style="list-style-type: none;"去掉前面的点点
.表格标签:
表格:<table>
表行:<tr>
表头:<th> 差不多就是单元格 区别就是加粗居中
单元格(列):<td>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" bgcolor="aquamarine"cellspacing="0" ><caption>表格</caption>
<tr>
<th colspan="5">身高</th>
</tr>
<tr>
<th>姓名</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th rowspan="4">备注</th>
</tr>
<tr>
<td>林书豪</td>
<td>1.64</td>
<td>1.84</td>
<td>1.94</td>
</tr>
<tr>
<td>团子</td>
<td>1.58</td>
<td>1.59</td>
<td>1.60</td>
</tr>
<tr>
<td>库里</td>
<td>1.88</td>
<td>1.89</td>
<td>1.90</td>
</tr>
</table>
</body>
</html>
无序列表图标
属性 style="list-style-type:circle/none" 把原来前面黑圆圈换成空心圆圈
style="list-style-image:url(图标地址) 把圈圈换成想要的图标
style="list-style-position:inside/outside 圈/图标在列表里面还是外面
简写:list-style:url() none inside;
表格标题:<caption>表格</caption>
去掉外边距:cellspacing="0"
设置背景颜色:bgcolor="颜色"
colspan:合并单元格 合并第几行的多少单元格
rowspan:合并行 合并第几列的多少行
.表单标签:
表单:<from> 拥有许多 输入 选择 组件,收集信息,最终向服务器提交数据
from有两个属性:action="get/post"访问后端服务器的地址,method=" "向服务端提交数据的方式。
value:表示要提交到后端的数据,如果没有指定,选项的值将设置为标签中的内容
单行文本文本框:
用户名:<input type="text" name="自定义" value="输入值" placeholder="提示输入啥" >
旁边圆的搜索框:把border-radius:输入框高度的一半
多行文本框(文本域):
< textarea rows="行数" cols="列数" name="自定义">< / textarea>
密码框:
<input type="password" name="自定义" >
下拉框:
< select name="自定义">
<option>选项1</option>//这里可以加name 关联编号 提交的也是编号(如省下面关联的是区 再下面关联的是市) 显示给用户的是内容
<option>选项2</option>
<option>选项n</option>
< /select>
单选框:
<input type="radio" name="" value="">选项1
<input type="radio" name="" value="">选项2//单选的name要放在一个才可以单选
多选框:
<input type="checkbox" name="为了分组" value="">选项1
<input type="checkbox" name="" value="">选项2
<input type="checkbox" name="" value="">选项n
提交:
<input type="submit">
重置:
<input type="reset">
普通按钮:
<input type="button" value="普通按钮">
.内联框架-iframe标签
iframe简单理解就是在一个网页里面嵌套一个网页 在一个网页中显示其他网页
<iframe src="初始页面的地址" name="框架名称" width="" heigth="" frameborder="框架的边框宽度" </iframe>
.滚动标签
<marquee>滚动文字</marquee>
属性1:direction="滚动方向" //up down left right 默认left
属性2:behavior="滚动方式" // scroll循环滚动,slide只滚动一次就停止,alternate来回交替滚动
属性3:scrollamount="滚动的速度" //像素为单位
属性4:width,height
属性5:hapace="水平范围",vspace="垂直范围"
3.css-级联样式表
css是样式表的语言,涉及字体、颜色、边距、高度、背景图片、高级定位。
将页面的内容HTML和样式CSS分离
1.行内样式表
又称称内联样式、行间样式、内嵌样式
对某个标签设置样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
2.内嵌样式表
码集中写在HTML文档的head头部标签中
<style type="text/css"> 选择器{样式设置} </style>
3.外部样式表
将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通
过link标签将外部样式表文件链接到HTML文档中.
行内、内嵌、外部样式表的区别:
4.类选择器:
1.标签选择器
可以选择页面中的所有指定标签
语法:标签名 {}
2.类选择器 泪点
通过标签的class属性值选中一组标签 前面先定义class="类名 "
类名设置一样的 就可以一起定义样式 设置成一样的
语法:
.class属性值{}
3.id选择器 爱弟精 id不重复
通过标签的id属性值选中唯一的一个标签 前面定义了cid="id名" 唯一唯一 如id="one"就只能有一个的标签设置成id="one"
语法:
#id属性值 {}
4.伪类选择器
主要针对超链接 或者块级第一个字
对<a>的不同状态设置不同效果 如 点过和没点过 或者鼠标悬停...
a:hover伪类表示鼠标移入的状态
a:active表示的是被点击的状态
a:visited访问后的属性
a:focus向拥有键盘输入焦点的标签添加样式
5.透明度:
opacity 属性
0~1 :0是全透明 1是原图 0.5是半透明[]
5.行级、块级、行级块标签
1.display
通过display改表标签的类型
inline---行级
block----块级
inline-block---行级块
none :隐藏标签(标签将在页面中完全消失)
2.行级inline
不占一行 内容多少占多少 不可以设置宽高 如a标签
3.块级block
独占一行 可以设置宽高 如p ul h1~h6
4.行级块inline-block
不占一行 可以设置宽高 即两个优点加起来 如<input/> <img>
注意:div使用display:inline-block把变成行级块 两个之间会生成空隙 空隙大小我大概估计是5px
6.div、span
强烈推荐这两个 为什么?因为她两干干净净 没有任何附加功能 想让它变成什么它就变成什么 div 块级用来网页布局 span 行级用来修饰文字
7.盒子模型
盒子大小=内容大小+border内边框
把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是摆
放盒子
1.height width宽高只是控制内容区 如文字大小
2.padding内边距
padding-top:10px;
padding-right:10px;
padding-down:10px;
padding-left:10px;
等于=padding:10px 10px 10px 10px //上右下左
内边距会影响整个盒子大小
就比如决定当前行文字与上一行的距离
3.border边框
最外部可见框
dotted (点线) dashed (虚线) solid (实线) double (双线) groove (槽线)
border-radius设置四个角为圆角边框
border-radius:边框高的一般就是搜索框的样子 50%就是圆
border-top-left-radius设置左上为圆角边框 同理其他边也可以这样设置
border:1px red solid; 样式分别指定了边框的宽度、颜色和样式
4.margin外边框
不影响盒子大小 决定与其他盒子的距离 就是影响盒子的位置
margin-top/right/bottom/left
margin的值可以为负值 margin的值还可以auto,设置外边距为最大值,当将左右外边距设置为 auto时,浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0,所以水平居中也可以简写为margin:0 auto。
即margin:o auto 盒子水平居中
8.清楚默认样式:
很多的标签都设置了一些默认的margin和padding 正常情况下我们是不需要使用的
所以就需要清楚掉
直接开头
9.文档流
文档流指的是文档中的标签在排列时所占用的位置
每行中按从左至右的顺序排放标签 满了到下一行
默认就是这样 所以在文档流里布局比较麻烦 我们就得想办法脱离文档流
办法就是浮动
10.浮动
浮动我的理解就是 脱离文档流 飘起了 变成块级 就像在原来的xy二维平面 飞到三位平面的z坐标上 问题来了:它飞去了2楼 一楼就空了 下面的就会补上去 就会被挡住 就需要我们使用完浮动float后清楚浮动
float:none 不浮动
float:left 左浮动
float:right 右浮动
清除浮动:<div style="clear:left/right/both"></div>
清除向左侧的浮动/清除向右侧的浮动/清除全部的浮动
11.定位
一般不用 用浮动就够了,但也有特殊情况 比如“返回顶部”“刷新”“客服”...这些不随进度条滑动而改变
有相对定位和绝对定位 一般相对定位就够了
1.相对定位
通过position:relative;// 开启相对定位
left right top bottom四个属性来设置标签的偏移量 不设置偏移量时,标签不会发生任何变化
开启了相对定位 还是在文档流中
相对于它的起点进行移动,移动后原来的位置还被占用
2.绝对定位 父子关系
通过position: absolute; 开启 绝对定位
脱离文档流 浮起来
无父级以浏览器为基准定位
有父级 父级相对定位 子级绝对定位 子级以父级为基准
可能有很多都开启了相对定位 父级是离她最近的那个
3.固定定位:position: fixed;
left right top bottom四个属性来设置标签固定在哪 如返回顶部 联系客服
2.javaScript--->js
1.javaScript历史:
由Netscape公司(美国网景公司)开发的一种脚本语言,命名为LiveScript,与java一样,也是面向对象的语言,而且无需编译,可由浏览器直接解释运行,后来与SUN公司签订协议,更名JavaScript
脚本语言:不需要编译,直接通过引擎(浏览器)解释执行。用来为网页添加各式各样的动态功能
简称js
2.js的作用
1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式
目的:增 强Web客户交互。弥补了HTML的缺陷
3.基本语法:
1.脚本写在哪:写在一组<script>标签中,然后<script>标签可以放在head 或body中,一般放在head中,也可以放在外部的.js文件,在html中导入。
2.变量
用var定义变量 var name;var name="林书豪";
3.数据类型
数值型number、布尔型boolean、字符串型(单引号表示字符串 双引号也表示字符串)、undefined型、object型
typeof(变量)返回该变量的数据类型
4.算术运算符
很多跟java是差不多的,+还是有加法运算 和字符串拼接的作用,-号有点小区别,隐式数据类型转换 10-"5"=5; 但是不能减一个非数字,如10-"林书豪"=返回NaN
还有个==和===的区别,===比==更精确,==比的是值,===比的是值和数据类型
5.条件运算符:
6.控制语句
7.alert()和console.log()的区别
alert 有阻塞 不点确定后续的代码无法继续执行,只能输出string 如果输出的是对象会自动调用toString方法 不支持多参数 alert(a,b,c)只会输出a
console就可以多参数,且打印台输出 支持任何类型
8.函数
function定义函数
调用函数才会执行 怎么调用 事件触发函数 如onclinck="add()"
为什么要定义函数:写在script网页加载会全部加载 不管你需不需要 写在函数中函数调用时才会加载
事件与函数关联 就可以实现网页很多功能 如点击事件οnclick="函数名" 然后函数里可以写具体实现 一点击就可以实现 注意一个函数干一件事 不要想滴太多 想当然
全局函数:已经定义好的 直接使用就可以
1.parseInt() 字符串转整数
parseFloat() 字符串转浮点数
2.typeof()返回变量的数据类型
3.eval()运算函数 会把里面的内容当成脚本运算 可运算某个字符串
var a=10;
var b="3+2+b"
console.log(eval(b));//15
9.内置对象
4个---->String、Date、Math、Array
1.String
声明var s="abcd"
方法:跟Java差不多 有length求字符串长度、charAt把字符串转成字符、indexof返回指定字符第一次出现的位置、lastIndexof返回指定字符最后一次出现的位置、substring(开始截取,结束) 截取、subtr(开始截取,截取长度)截取、split("按什么划分")分割
2.Data 得new对象
3.Math
不用new 直接调
直接用
4.Array
定义数组 var arr=new Array();或者var arr=[1,"2",ture,new Data()] 随便存 要求没那么高
方法:1.length()
2.join() 把数组变成字符串
3.reverse()逆序
4.sort()排序
排序字母随便 数字不大可以 得自定义一个函数 制定规则
10.事件 触发函数
1.onclick点击事件 οnclick="函数名" 鼠标点击即可触发
2.onfocus获得焦点 οnfοcus="函数名" 输入框 触发函数验证
3.onblur失去焦点 οnblur="函数名" 输入框
4.onmouseover鼠标移入 οnmοuseοver="函数名"
5.onmouseout鼠标移出 οnmοuseοut="函数名"
6.onload事件会在网页加载完才触发,如某宝一些小广告 建议放在body之后
7.onchange失去焦点且内容改变时触发 οnchange="函数名"
11.html DOM
文档对象 可用文档对象操作所有标签
解决了js如何用函数操作网页中的标签 实现网页的动态
js认为每个标签时一个对象,对象中包含属性、css、标签内容,js要操作标签 首先要获得对应标签,怎么获得对应标签 js提供一个document对象来获取对应标签
点击后
获取一个标签可以用getElemenById
获取多个还可以用getElemenByName,ByClassName其他的 只要name一样 就可以一起获取 操作多个需要 获取对象就是集合 需要for循环
12.下拉框触发事件--选择头像
13.全选
14.表单验证
15.计时事件
setTimeout(“函数”,”时间”)延迟多久执行代码
clearTimeout()取消 --->setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消 --->setInterval()
时间毫秒为单位 1000ms等于1秒
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计时</title>
<script type="text/javascript">
function showTime(){
var date=new Date();
var time=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
document.getElementById("divid").innerHTML=time;
}
setInterval("showTime()",1000);
</script>
</head>
<body onload="showTime()">
<div id="divid"></div>
</body>
</html>
一秒变一次
注意开启计时器的地方 在哪里开启计时器 在哪里开 别开多次 然后关闭计时器的变量定义在外面 且只定义一次 别动不动就var t=setInterval()
1.计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
<script type="text/javascript">
var n=0;
function printTime(){
var inputobj=document.getElementById("inputid").value=n;
n++;
}
var t;
function startTinme(val){
if(val.value=="开始"){
t=setInterval("printTime()",1000);
var btobj1=document.getElementById("bt1");
btobj1.value="暂停";
}else if(val.value=="暂停"){
var btobj1=document.getElementById("bt1");
btobj1.value="继续";
clearInterval(t);
}else if(val.value=="继续"){
var btobj1=document.getElementById("bt1");
btobj1.value="暂停";
printTime();
t=setInterval("printTime()",1000);
}
}
function clearTime(){
var inputobj=document.getElementById("inputid");
var btobj1=document.getElementById("bt1");
btobj1.value="开始";
inputobj.value=0;
n=0;
clearInterval(t);
}
</script>
<style type="text/css">
#divid{
margin: 0 auto;
background-color: #ADD8E6;
height: 30px;
width: 300px;
text-align: center;
}
#div2{
margin: 0 auto;
height: 30px;
width: 300px;
background-color: #ffff7f;
text-align: center;
}
#div1{
background-color: #ADD8E6;
height: 100px;
width: 300px;
margin: 0 auto;
text-align: center;
}
#inputid{
height: 30px;
border-radius: ;
}
</style>
</head>
<body onload="showtime()" >
<div id="divid"> </div>
<div id="div1">
<input type="text" name="" id="inputid" value="0" />
</div>
<div id="div2">
<input id="bt1" type="button" value="开始" onclick="startTinme(this)"/>
<input id="bt2" type="button" value="重置" onclick="clearTime()" />
</div>
</body>
</html>