网站开发建设计入什么科目广告设计与制作模板图片
前言
1.HTML
就是用来写网页的
就是超文本标记语言
1.1快速入门
然后随便选择一个文本编辑器来编辑
这样就成功了
第二个改成红色的
<html><head><title>html快速入门</title></head><body><font color="red">乾坤未定你我皆是黑马~</font></body></html>
然后我们只需要刷新一下就可以了，不必重新打开文件了
说一下，第一html不区分大小写
一般用小写
第二就是，语法比较松散，可以不写结束标签，颜色可以不加引号
<html><head><title>html快速入门</title></head><body><font color=blue>乾坤未定你我皆是黑马~</body></html>
但是写的时候，还是要专业一点
文件以.htm或者html为扩展名
1.2 基础标签
选中右键检查，就可以查看html相关的代码了
可以在idea里面写代码的
直接就是java的模块就可以了，不用maven
建一个文件夹
在新建html文件
<!--<!DOCTYPE html>是html5的一个标识-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta charset="UTF-8">是用来定义页面字符集的 --><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>
</body>
</html>
这里直接点右上角的浏览器就可以了
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>
<hr>
代码是自动保存的，所以是同步的，不用刷新
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>
<hr><font>传智教育</font>
但是过时了
因为文本的样式用CSS来控制，所以过时了
回车
颜色的表示方式，第一英文red，pink
第二就是rgb(值1，值2，值3)三原色的方式，红绿蓝的方式
值的取值范围是0~255
rgb(255,0,0)全红
第三就是#值1值2值3
也是三原色
00~FF的范围
#ff0000
也是全红
这里可以看出没有换行
因为浏览器不会解析换行
10月16日至17日，全国公安厅局长座谈会在天津市召开，就进一步深化改革创新，提升公安机关新质战斗力，高水平推进公安工作现代化等工作作出重要部署。<br>通过聆听大会、分组讨论，参会代表认真学习领会会议精神，统一思想、凝聚共识。先进经验展示、实地考察观摩，大家从中得到新启发、新收获，互学互鉴、共同进步。
所以要手动加上br
<p>10月16日至17日，全国公安厅局长座谈会在天津市召开，就进一步深化改革创新，提升公安机关新质战斗力，高水平推进公安工作现代化等工作作出重要部署。</p>
<p>通过聆听大会、分组讨论，参会代表认真学习领会会议精神，统一思想、凝聚共识。先进经验展示、实地考察观摩，大家从中得到新启发、新收获，互学互鉴、共同进步。</p>
这样的话，就变成了两段
代表认真学习领会会<br>
<b>代表认真学习领会会</b>
代表认真学习领会会<br>
<b>代表认真学习领会会</b><br>
<i>代表认真学习领会会</i><br>
<u>代表认真学习领会会</u><br>
<center><b>代表认真学习领会会</b></center>
center就是居中，而且也过时了
特殊字符的打印要用转义字符
1.3 图片音频视频标签
src就是资源路径
直接把资源复制到html路径下就可以了
视频是mp4，音频是mp3
<img src="a.png">
<img src="a.png" width="200"height="400">
尺寸单位
1.默认的就是像素，px
2.百分比：就相当于占父元素的%20
父元素就是body
body的范围就是整个框体的范围
<img src="a.png" width="20%"height="400">
音频文件到时候就是这样的，写的是video
<videosrc="b.mp4"></video>
<videosrc="b.mp4" controls="controls"></video>
或者这样
<videosrc="b.mp4" controls></video>
<video src="b.mp4" controls width="500" height="300"></video>
下面讲一下资源路径，上面我们写的是相对路径
我们也可以写绝对路径，盘符或者网页
点击复制图片地址就可以了
<img src="https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641" width="50%"height="400">
一般写相对路径，要找html文件和图片的相对位置关系，找到就可以写了
比如一个是xxx/html/02
一个是xxx/html/a.png
相对路径就可以这样
./a.png
./可以省略，默认在当前路径找
<img src="./a.png" width="50%"height="400">
一个是xxx/html/02
一个是xxx/html/img/a.png
这样写
./img/a.png
一个是xxx/html/02
一个是xxx/img/a.png
这样写
…/img/a.png
1.4 超链接标签
href就是资源路径
<a href="https://www.itcast.cn">点我有惊喜</a>
_self是默认值
<a href="https://www.itcast.cn" target="_blank">点我有惊喜</a>
跳转到外部资源用这个
1.5 列表标签
<OL><li>咖啡</li><li>奶茶</li><li>牛奶</li>
</OL><uL><li>咖啡</li><li>奶茶</li><li>牛奶</li>
</uL>
<OL type="A"><li>咖啡</li><li>奶茶</li><li>牛奶</li>
</OL>
type就是给序号设置属性
<uL type="circle"><li>咖啡</li><li>奶茶</li><li>牛奶</li>
</uL>
一般不建议修改
用CSS
1.6 表格标签
<table><tr><th>序号</th><th>品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr></tr><tr></tr><tr></tr>
</table>
<table><tr><th>序号</th><th>品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>010</td><td><img src="../img/a.png" width="60" height="50"></td><td>三只松鼠</td><td>三只松鼠</td></tr><tr><td>009</td><td><img src="../img/b.png" width="60" height="50"></td><td>优衣库</td><td>优衣库</td></tr><tr><td>008</td><td><img src="../img/c.png" width="60" height="50"></td><td>小米</td><td>小米科技有限公司</td></tr></table>
没有线条
<table border="1"><tr><th>序号</th><th>品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>010</td><td><img src="../img/a.png" width="60" height="50"></td><td>三只松鼠</td><td>三只松鼠</td></tr><tr><td>009</td><td><img src="../img/b.png" width="60" height="50"></td><td>优衣库</td><td>优衣库</td></tr><tr><td>008</td><td><img src="../img/c.png" width="60" height="50"></td><td>小米</td><td>小米科技有限公司</td></tr></table>
间距为1像素
两条线合二为一
<table border="1" cellspacing="0"><tr><th>序号</th><th>品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>010</td><td><img src="../img/a.png" width="60" height="50"></td><td>三只松鼠</td><td>三只松鼠</td></tr><tr><td>009</td><td><img src="../img/b.png" width="60" height="50"></td><td>优衣库</td><td>优衣库</td></tr><tr><td>008</td><td><img src="../img/c.png" width="60" height="50"></td><td>小米</td><td>小米科技有限公司</td></tr></table>
cellpadding表示间距为0
<table border="1" cellspacing="0" width="500">
变宽
<table border="1" cellspacing="0" width="500"><tr align="center"><th>序号</th><th>品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr align="center"><td>010</td><td><img src="../img/a.png" width="60" height="50"></td><td>三只松鼠</td><td>三只松鼠</td></tr><tr align="center"><td>009</td><td><img src="../img/b.png" width="60" height="50"></td><td>优衣库</td><td>优衣库</td></tr><tr align="center"><td>008</td><td><img src="../img/c.png" width="60" height="50"></td><td>小米</td><td>小米科技有限公司</td></tr></table>
<br>
<hr>
<br>
<table border="1" cellspacing="0" width="500">
合并单元格分为横向的合并和纵向的合并
比如这样
那怎么算行呢，就是右下角那个合并的，算第三行还是第四行呢，算第三行的，所以第四行只有三个单元格
<tr align="center">
<!-- 第一个占两列--><th colspan="2">品牌logo</th><th>品牌名称</th><th>企业名称</th></tr>
<table border="1" cellspacing="0" width="500"><tr align="center">
<!-- 第一个占两列--><th colspan="2">品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr align="center"><td>010</td><td><img src="../img/a.png" width="60" height="50"></td><td>三只松鼠</td><td>三只松鼠</td></tr><tr align="center"><td rowspan="2">009</td><td><img src="../img/b.png" width="60" height="50"></td><td>优衣库</td><td>优衣库</td></tr><tr align="center"><td>008</td><td><img src="../img/c.png" width="60" height="50"></td><td>小米</td></tr></table>
删除第四行一个单元格，第三行第一个单元格占两行
1.7布局标签
结合CSS来用
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
div换行
一个标签占一行
span不换行，不会占满一行
1.8 表单标签
比如登录的窗口就是表单，采集用户输入的信息，一点按钮就把这些信息发送到服务端
<input type="text">
定义一个文本输入框
<input type="submit">
定义一个按钮
<form><input type="text"><input type="submit"></form>
我们这里点提交没有用的，因为没有指定form的anction属性
anction属性就是指定表单数据提交的URL,往哪个地方提交数据，就指定action为哪个URL
<form action="#">
因为我们没有服务端，所以我们就用#代替，表示把表单数据提交到html页面来，后面我们就可以写服务器的资源路径
表单项数据要想被提交，则必须指定其name属性
<input type="text" name="username">
username随便写的
<body>
<form action="#"><input type="text" name="username"><input type="submit"></form>
点提交
这样上面就增加了一个键值对，username=hehe#
username是name的属性值，键
hehe是文本输入框里面的值，这就是键值对
method是指定表单提交的方式的1.get是默认值2.post
get请求的参数会拼接在URL后边，http://localhost:63342/java2/html-demo/html/就是URL,就是地址，长度限制为4KB，所以请求参数有限制
post的话，请求参数会在http请求协议的请求体中，请求参数无限制
<body>
<form action="#" method="post"><input type="text" name="username"><input type="submit"></form>
重新打开页面
URL后边就没有键值对了
点击开发者工具
点network
在输入一次aaaa
这里多了一次请求
点击就可以查看我们的aaaa
1.9 表单项标签
比如id，用户不用书写，随着表单一起提交，这个就是hidden
<form action="#" method="post">用户名:<input type="text" name="username"><br>密码:<input type="password" name="password"><br><input type="submit" value="免费注册"><br>
<!-- value就是取名字 --></form>
提交就会提交到URL地址里
按着F12也可以打开开发者工具
现在我们希望我们点击用户名这三个字就能直接输入，而不是点击文本框
用lable标签就可以
<label for="username">用户名:</label><input type="text" name="username" id="username"><br>
我们先把用户名:三个字放在lable里面，然后让input和lable有关联，就给input取个id，这个id是唯一标识，for就是去关联这个id
这样我们点击用户名三个字就能选中框框了
<form action="#" method="post"><label for="username">用户名:</label><input type="text" name="username" id="username"><br><label for="password">密码:</label>密码:<input type="password" name="password" id="password"><br><input type="submit" value="免费注册"><br>
<!-- value就是取名字 --></form>
性别:<input type="radio">
性别:<input type="radio" >男<input type="radio" >女
但是这里男女可以同时选中，所以还不行
，如何让两个单选框达到互斥的效果呢
让name的属性值一样就可以了
性别:<input type="radio" name="gender">男<input type="radio" name="gender">女
因为gender只能给一个赋值，所以是互斥的
但是我们这里gender却是on的值，为什么呢，选男是on，选女还是on，不选就没有gender
因为男没有关联到
所以还要加个value
性别:<input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="2">女
这样加个value，提交的就是1,2了，提交的值就是value
在把男和女包括起来，点男这个字就选中男
性别:<input type="radio" name="gender" value="1" id="male"><label for="male">男</label><input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
这样就可以了
下面讲一下复选框
爱好:<input type="checkbox" name="hobby" value="1">旅游<input type="checkbox" name="hobby" value="2">电影<input type="checkbox" name="hobby" value="3">游戏
hobby就相当于是一个数组了
头像:<input type="file">
图片的数据就会被提交到服务端去
<input type="hidden" name="id" value="123">
写了这个没什么反应，但你提交服务端就会有id
<input type="submit" value="免费注册"><input type="reset" value="重置"><input type="button" value="一个按钮">
button没有任何效果，就是一个按钮，要结合javascipt
点重置的话，你写的就清空了
城市:<select><option>北京</option><option>上海</option><option>广州</option></select>
这就是一个下拉列表
要想被提交，就要指定name属性
城市:<select name="city"><option>北京</option><option>上海</option><option>广州</option></select>
<option value="shanghai">上海</option>
如果这样写的话，就只会提交value的值了，没加value的话，就提交option里面的内容
个人描述:<textarea></textarea>
可以写很多行
个人描述:<textarea cols="20" rows="5"></textarea>
这个的意思就是可以写五行，每行20个字
而且还变大了
个人描述:<textarea cols="20" rows="5" name="desc"></textarea>
2.CSS
style标签里面就是CSS的代码
这个的意思选中html里面的就是body里面的所有的div标签里面的文本内容颜色改为红色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color:red;}</style>
</head>
<body>
<div>hello css</div></body>
</html>
style标签是一种css与html结合的方式
css如何书写
div一部分：选择器
里面的键值对一部分：属性
2.1 CSS导入方式
内联样式：在html标签里面定义style属性，通过style属性指定CSS代码
html与css耦合在一起，就不利于维护
内部样式：在html页面里面定义style标签
style标签内部，定css代码
外部样式：现在外部定义css文件，在里面写css代码，在html页面里面使用link标签来引入css的外部文件
<body><div style="">hello css</div></body>
在style属性里面写css代码：就是属性键值对
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="color:red">hello css</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body><div style="color:red">hello css</div><span>hello css</span>
</body>
</html>
span里面写文本内容
style来控制里面的文本内容，里面写css代码
span标签的话，我们要写个选择器，就是span，意思就是选择body里面所有的span标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>span{color:red;}</style>
</head>
<body><div style="color:red">hello css</div><span>hello css</span>
</body>
</html>
为了演示第二种方式，这里我们创建一个文件夹css1，里面放着demo.css
文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>span{color:red;}</style>
</head>
<body><div style="color:red">hello css</div><span>hello css</span><p>heloo css</p>
</body>
</html>
加个p标签
要控制p标签，所以选择器就写p
p{color:red;}
我们在html里面使用link来引入
<link href="">
href来引入css文件
<link href="../css1/demo.css" rel="stylesheet">
stylesheet的意思就是，link以后会引入很多文件的，stylesheet就是说我这个文件就是css属性的，才能特定解析
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>span{color:red;}</style><link href="../css1/demo.css" rel="stylesheet">
</head>
<body><div style="color:red">hello css</div><span>hello css</span><p>heloo css</p>
</body>
</html>
2.2 CSS选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color:red;}</style></head>
<body><div>div1</div>
<div>div2</div>
<div>div3</div><span>span</span>
</body>
</html>
这个就是元素选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color:red;}#name{color:blue;}</style></head>
<body><div id="name">div1</div>
<div>div2</div>
<div>div3</div><span>span</span>
</body>
</html>
这个就是id选择器
这个的选择器是以name为准的，name优先
id选择器唯一，意思是id是唯一的
但是类选择器不是唯一的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color:red;}#name{color:blue;}.cls{color:pink;}</style></head>
<body><div id="name">div1</div>
<div>div2</div>
<div class="cls">div3</div><span class="cls">span</span>
</body>
</html>
2.3 CSS属性
点击HTML/CSS,选择CSS3，再点击参考书就可以找到css属性了
3. JavaScript
3.1 引入方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>alert("hello js")</script>
</head>
<body></body>
</html>
alert(“hello js”)弹出一个警告框
确定就没了
<script>alert("hello js")</script>
可以随便放，数量没限制
<script>alert("hello js1")
</script>
<script>alert("hello js2")
</script>
<script>alert("hello js3")
</script>
这样就要点三个确定
一般放在body里面的偏后面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><script>alert("hello js1")
</script>
<script>alert("hello js2")
</script>
<script>alert("hello js3")
</script>
</body>
</html>
<script src="../js/demo.js"></script>
因为标签里面没有内容，所以可以自闭和
但是不能，因为这样就不能生效了
3.2 基础语法
结尾分号可以不写
window.可以省略
<script>window.alert("hello js");document.write("hello js2");//写入html页面
</script>
window.alert("hello js");document.write("hello js2");//写入html页面console.log("hello js3");//写入浏览器控制台
浏览器控制台在开发者工具
f12
<script>var test=20;alert(test);
</script>
<script>var test=20;test="张三";alert(test);
</script>
var定义的变量是全局的
{var age =30;}alert(age);
变量可以重复定义
{var age =30;var age =20;}alert(age);
let关键字
{let age =30;
<!-- var age =20;-->}alert(age);
报错会在控制台里面提示
点链接就会有对应提示
let的作用域就在大括号，而且不能重复定义
const是用来定义常量的
<script>var age=20;var price=99.8;alert(typeof age);alert(typeof price);
</script>
<script>var age='q';var price='hahah';//单引号与双引号都是一样的alert(typeof age);alert(typeof price);
</script>
var age=true;var price=false;alert(typeof age);alert(typeof price);
<script>var age=null;var price=false;alert(typeof age);alert(typeof price);
</script>
null弹出一个object，所以引用类型和null弹出都是object
<script>var age;var price=false;alert(typeof age);alert(typeof price);
</script>
/// == 与 ===全等于var age1=20;var age2="20";alert(age1==age2);
这些大于等于，等于等于，比较的时候都会进行类型转换，所以相等
先判断类型一不一样，不一样的话，就类型转换
全等于就不会类型转换，类型不一样直接false
<script>/// == 与 ===全等于var age1=20;var age2="20";alert(age1===age2);
</script>
类型转换：，其他类型转换为number，
string：按照字符串的字面值转换为数字
var str=‘20’
字面值就是20
var str=‘abc’
转不了数字
不会报错，但是会转成一个特殊的数字NaN
这就是一个不是数字的数字
var str=+"abc";
这里我们在前面加上一个+，因为+后面要接上数字，所以会自动强转
var str=+"abc";alert(str);
var str=+"20";alert(str+1);
如果是字符串就是201
可以用parseInt，把字符串转换成数字
var str="20";alert(parseInt(str)+1);
第二就是boolean转成数字，true为1，false为0
var flag=+true;alert(flag);
其他类型转换为boolean
number：0和NaN为false，其余为false
var flag=0;if(flag){alert("转为true");}else{alert("转为false");}
条件里面需要boolean，所以会自动转换
字符串：空字符串转false，就是一个引号，有内容为true
var flag="";if(flag){alert("转为true");}else{alert("转为false");}
undefined，null为fasle
var flag=null;if(flag){alert("转为true");}else{alert("转为false");}
var flag=undefined;if(flag){alert("转为true");}else{alert("转为false");}
作用就是原来要这样判断
var str="";if(str!=null&&str.length>0){alert("转为true");}else{alert("转为false");}
现在只需要
var str="";if(str){alert("转为true");}else{alert("转为false");}
var count = 3;if(count==3){alert(count);}
然后switch，case也是一样的
switch(count){case 3:alert("星期三");break;}
for(let i=0;i<=100;i++){}
反正这些控制语句与原来的Java没什么区别
function add(a,b){return a+b;}var result =add(1,2);alert(result);
var add=function(a,b){return a+b;}var result =add(1,2);alert(result);
var add=function(a,b){return a+b;}var result =add(1,2,3);alert(result);
弹出来还是三，因为参数对应传，3没有传
var add=function(a,b){return a+b;}var result =add(1);alert(result);
因为b没有值，所以b就是NaN，所以和也是NaN
3.3 常用对象
var arr=new Array(1,2,3);alert(arr);
var arr=[1,2,3];alert(arr);
//访问arr[1]=111;alert(arr[1])
这里的数组相当于Java里面的集合，可以变长
var arr2=[1,2,3];arr2[10]=100;alert(arr2[10]);
var arr2=[1,2,3];arr2[10]=100;alert(arr2[10]);alert(arr2[9]);
没赋值就是这样，打印出来就是空字符串
arr2[5]="hello";alert(arr2[5]);
而且类型可变
//lenth就是数组元素个数var arr4=[1,2,3];for(let i=0;i<arr4.length;i++){alert(arr4[i]);}
//push就是把元素添加到数组里面去//splice:删除方法var arr5=[1,2,3];arr5.push(10);alert(arr5);
//push就是把元素添加到数组里面去//splice:删除方法var arr5=[1,2,3];arr5.push(10);arr5.splice(0,1);alert(arr5);
splice的意思就是从0开始删，删一个元素
var str1=new String("hello");var str2=("hello");var str3=('hello');alert(str1);alert(str2.length);
//trim():去除字符串前后两端的空白字符var str4=(' hello ');alert(1+str4+1)
//trim():去除字符串前后两端的空白字符var str4=(' hello ');alert(1+str4.trim(str4)+1)
因为输入密码的时候，可能后面多输了几个空格
var person={name : " zhangan",age :23,eat:function(){alert("干饭");}};alert(person.name);alert(person.age);person.eat();
3.4 BOM
confirm就是你点删除的时候，弹出一个框让你是否要删除，防止用户误操作
后面两个方法是定时器
比如广告过一会而儿就换一张图片，这个就是定时器的作用
第一个循环执行，第二个是只执行一次
//window.可以省略confirm("确认删除？");
确认就删除，取消就什么都不干
因为要对应干不同的事，所以这个方法有返回值的
//window.可以省略var flag=confirm("确认删除？");alert(flag);
点确定就返回true，取消返回false
if(flag){//删除}
//定时器//setTimeout(function,毫秒值):在一定的时间间隔后去执行一个function，只执行一次//setInterval(function,毫秒值)：在一定的时间间隔后去执行一个function，循环执行setTimeout(function(){alert("hehe");},3000)
三秒后弹hehe
setInterval(function(){alert("hehe");},1000)
过一秒就弹一次
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" onclick="on()" value="开灯"><img src="../img/off.png" id="myImage" border="0" style="..."><input type="button" onclick="off()" value="关灯"><script>function on(){document.getElementById('myImage').src='../img/on.png';}function off(){document.getElementById('myImage').src='../img/off.png';}//定时器//setInterval(function (){},1000)
</script></body>
</html>
这个的效果就是你点开灯就开灯
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" onclick="on()" value="开灯"><img src="../img/off.png" id="myImage" border="0" style="..."><input type="button" onclick="off()" value="关灯"><script>function on(){document.getElementById('myImage').src='../img/on.png';}function off(){document.getElementById('myImage').src='../img/off.png';}var x=0;//定时器setInterval(function (){if(x%2==0){on();}else{off();}x++;},1000)
</script></body>
</html>
这样就可以一秒闪一次了
如果是三个方法的话的循环调用，就%3
就是这里的前后箭头
获取或者设置URL
<script>alert("aaaa");location.href="https://www.baidu.com";
</script>
执行确定就会直接跳转到百度
document.write("三秒跳转到百度...");setTimeout(function(){location.href="https://www.baidu.com";},3000);
3.5 DOM
比如你点击按钮，里面的内容就随着改变
因为id唯一，标签不唯一
不唯一就返回数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img id="Light" src="../img/a.png" ><br><div class="cls">处置</div><br>
<div class="cls">aaa</div><br><input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br><script></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img id="light" src="../img/a.png" ><br><div class="cls">处置</div><br>
<div class="cls">aaa</div><br><input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br><script>var img =document.getElementById("light");//这个img就是<img id="Light" src="../img/a.png" >了alert(img);
</script></body>
</html>
这里就显示了一个object对象，而且类型都出来了
//根据标签名称获取var divs=document.getElementsByTagName("div");alert(divs.length);
for(let i=0;i<divs.length;i++){alert(divs[i]);}
//根据name获取var hobbys=document.getElementsByName("hobby");alert(hobbys.length);for(let i=0;i<hobbys.length;i++){alert(hobbys[i]);}
//根据class属性获取var clss=document.getElementsByClassName("cls");alert(clss.length);for(let i=0;i<clss.length;i++){alert(clss[i]);}
根据文档查看来使用对象的方法
总共有三种标签，img，input，div
看这个，我们利用src方法更换图片
var img =document.getElementById("light");img.src="../img/on.png";
var divs=document.getElementsByTagName("div");//期望把文字黑色换成红色
然后就是查文档
但这个里面没有方法
但他可以用Element对象的方法
因为继承 嘛
var divs=document.getElementsByTagName("div");//期望把文字黑色换成红色//style设置css样式//innerHTML设置元素内容for(let i=0;i<divs.length;i++){divs[i].style.color='red';}
var divs=document.getElementsByTagName("div");//期望把文字黑色换成红色//style设置css样式//innerHTML 设置元素内容for(let i=0;i<divs.length;i++){
<!-- divs[i].style.color='red';-->divs[i].innerHTML='hehheeheheh';}
这两个属性是通用的属性
每个html页面都有
true就是选中
//根据name获取var hobbys=document.getElementsByName("hobby");alert(hobbys.length);for(let i=0;i<hobbys.length;i++){//alert(hobbys[i]);hobbys[i].checked=true;//就代表选中的状态}
这就默认选中了
3.6 事件监听
button是一个按钮，onclick是一个事件属性，设置一个方法，点击这个按钮，就调用这个方法，推荐使用第二种方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我"><br><script>function on(){alert("我被点亮");}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我" id="btn"><br><script>function on(){alert("我被点亮");}document.getElementById("btn").onclick=function(){alert("我被点了")}
</script>
</body>
</html>
常见事件
移到文本输入框点击就有光标，移到外面就没有光标了，而且里面的内容会变成大写
就是你点一下就会发生一些情况
就是你点击外面会发生一些事情
<input type="text" name="username"/><input type="submit" name="提交"/>
username=输入内容
<form id="register" action="#"><input type="text" name="username"/><input type="submit" name="提交"/>
</form><script>document.getElementById("register").onsubmit=function(){return false;//表单就不会提交}//给表单绑定一个onsubmit事件
</script>
看嘛，点了提交URL还是不变的
return true就会提交
3.10 表单验证
有红就不能提交，无红提交就发往服务端
失去焦点onblur
<div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span><a href="#">登录</a></div>
<!-- //提交方式是get，提交到当前页面#，三个input输入--><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs" ><input name="username" type="text" id="username"><br>
<!-- span包裹的就是错误提示信息--><span id="username_err" class="err_msg" style="display:none">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs" ><input name="password" type="text" id="password"><br><span id="password_err" class="err_msg" style="display:none">密码格式有误</span></td></tr><tr><td>手机号</td><td class="inputs" ><input name="tel" type="text" id="tel"><br><span id="tel_err" class="err_msg" style="display:none">手机号格式有误</span></td></tr></table></form>
</div>
我们这样输入没有提示信息
我们把display:none中的display的none信息去掉就有提示信息了，但是会一直存在的
<span name="username_err" class="err_msg" style="display:">用户名不太受欢迎</span>
判断输入内容是否符合要求，如果不符合要求，修改css样式的display的属性值设置为空就可以了，提示信息就出来了
<script>//1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInput=document.getElementById("username");//1.2绑定onblur事件 失去焦点usernameInput.onblur=function(){//1.3获取用户名var username=usernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则：长度6~12if(username.length>=6&&username.length<=12){//符合规则}else{//不符合规则 获取spandocument.getElementById("username_err").style.display='';}};</script>
但是现在我们填对了，也不会取消那个东西了
所以还要修改
//1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInput=document.getElementById("username");//1.2绑定onblur事件 失去焦点usernameInput.onblur=function(){//1.3获取用户名var username=usernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则：长度6~12if(username.length>=6&&username.length<=12){//符合规则document.getElementById("username_err").style.display='none';}else{//不符合规则 获取spandocument.getElementById("username_err").style.display='';}};
这样就可以了
密码和用户名就没有什么区别了
ctrl+r全部选中，进行替换
再点全部替换
//1.验证密码是否符合规则//1.1获取密码的输入框var passwordInput=document.getElementById("password");//1.2绑定onblur事件 失去焦点passwordInput.onblur=function(){//1.3获取密码var password=passwordInput.value.trim();//排除空格//passwordInput.value;可以获取输入框的填写内容//判断密码是否符合规则：长度6~12if(password.length>=6&&password.length<=12){//符合规则document.getElementById("password_err").style.display='none';}else{//不符合规则 获取spandocument.getElementById("password_err").style.display='';}};
再改一下length
//1.验证手机号是否符合规则//1.1获取手机号的输入框var telInput=document.getElementById("tel");//1.2绑定onblur事件 失去焦点telInput.onblur=function(){//1.3获取手机号var tel=telInput.value.trim();//排除空格//telInput.value;可以获取输入框的填写内容//判断手机号是否符合规则：长度11if(tel.length==11){//符合规则document.getElementById("tel_err").style.display='none';}else{//不符合规则 获取spandocument.getElementById("tel_err").style.display='';}};
下面我们来完成第二个需求，就是不满足就无法提交
//获取表单对象var regForm=document.getElementById("reg-form");//绑定一个onsubmitreForm.onsubmit=function(){//挨个判断每一个表单项是否符合要求，一个不符合都不提交//判断每个表单项的话，利用方法就可以了}
判断每个表单项的话，利用方法就可以了，所以方法得有返回值才行
，而且还要额外取个名
//1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInput=document.getElementById("username");//1.2绑定onblur事件 失去焦点usernameInput.onblur=checkUsername;function checkUsername(){//1.3获取用户名var username=usernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则：长度6~12var flag=username.length>=6&&username.length<=12if(flag){//符合规则document.getElementById("username_err").style.display='none';}else{//不符合规则 获取spandocument.getElementById("username_err").style.display='';}return flag;};
//获取表单对象var regForm=document.getElementById("reg-form");//绑定一个onsubmitregForm.onsubmit=function(){//挨个判断每一个表单项是否符合要求，一个不符合都不提交//判断每个表单项的话，利用方法就可以了var flag=checkUsername() && checkPassword() && checkTel();return flag;}
true才会提交
<div class="buttons"><input value="注 册" type="submit" id="reg_btn" ></div>
这个是我们的提交按钮
这样就无法提交了
3.11 正则表达式
<script>//规则：单词字符，6~12
var reg=/^\w{6,12}$/;
var str="abc";
var flag=reg.test(str);
alert(flag);
</script>
上一个表单验证就可以这样改了
var reg=/^\w{6,12}$/;var flag=reg.test(username);
var reg=/^\w{6,12}$/;var flag=reg.test(password);
//判断手机号是否符合规则：长度11,数字组成，1开头var reg=/^[1]\d{10}$/;var flag=reg.test(tel);
全部代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span><a href="#">登录</a></div>
<!-- //提交方式是get，提交到当前页面#，三个input输入--><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs" ><input name="username" type="text" id="username"><br>
<!-- span包裹的就是错误提示信息--><span id="username_err" class="err_msg" style="display:none">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs" ><input name="password" type="text" id="password"><br><span id="password_err" class="err_msg" style="display:none">密码格式有误</span></td></tr><tr><td>手机号</td><td class="inputs" ><input name="tel" type="text" id="tel"><br><span id="tel_err" class="err_msg" style="display:none">手机号格式有误</span></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn" ></div></form>
</div><script>//1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInput=document.getElementById("username");//1.2绑定onblur事件 失去焦点usernameInput.onblur=checkUsername;function checkUsername(){//1.3获取用户名var username=usernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则：长度6~12,单词字符组成var reg=/^\w{6,12}$/;var flag=reg.test(username);if(flag){//符合规则document.getElementById("username_err").style.display='none';}else{//不符合规则 获取spandocument.getElementById("username_err").style.display='';}return flag;};//1.验证密码是否符合规则//1.1获取密码的输入框var passwordInput=document.getElementById("password");//1.2绑定onblur事件 失去焦点passwordInput.onblur=checkPassword;function checkPassword(){//1.3获取密码var password=passwordInput.value.trim();//排除空格//passwordInput.value;可以获取输入框的填写内容//判断密码是否符合规则：长度6~12var reg=/^\w{6,12}$/;var flag=reg.test(password);if(flag){//符合规则document.getElementById("password_err").style.display='none';}else{//不符合规则 获取spandocument.getElementById("password_err").style.display='';}return flag;};//1.验证手机号是否符合规则//1.1获取手机号的输入框var telInput=document.getElementById("tel");//1.2绑定onblur事件 失去焦点telInput.onblur=checkTel;function checkTel(){//1.3获取手机号var tel=telInput.value.trim();//排除空格//telInput.value;可以获取输入框的填写内容//判断手机号是否符合规则：长度11,数字组成，1开头var reg=/^[1]\d{10}$/;var flag=reg.test(tel);if(flag){//符合规则document.getElementById("tel_err").style.display='none';}else{//不符合规则 获取spandocument.getElementById("tel_err").style.display='';}return flag;};//获取表单对象var regForm=document.getElementById("reg-form");//绑定一个onsubmitregForm.onsubmit=function(){//挨个判断每一个表单项是否符合要求，一个不符合都不提交//判断每个表单项的话，利用方法就可以了var flag=checkUsername() && checkPassword() && checkTel();return flag;}</script>
</body>
</html>
总结
过两天上传加上gitee链接，不然代码太多了