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>
1538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
