个人网站如何备案,湖北微网站建设费用,十大仓库管理软件,wordpress上传漏洞拿shell前言
1.HTML
就是用来写网页的 就是超文本标记语言
1.1快速入门 标签是根标签#xff0c;就是开始的地方 head就是头#xff0c;加载一些资源信息#xff0c;和展示title标题的地方#xff0c;比如html快速入门那几个字就是title标题标签 body是身体#xff0c;就是正…前言
1.HTML
就是用来写网页的 就是超文本标记语言
1.1快速入门 标签是根标签就是开始的地方 head就是头加载一些资源信息和展示title标题的地方比如html快速入门那几个字就是title标题标签 body是身体就是正文内容就是乾坤未定那段内容  桌面新建文件 然后随便选择一个文本编辑器来编辑 这样就成功了 第二个改成红色的
htmlheadtitlehtml快速入门/title/headbodyfont colorred乾坤未定你我皆是黑马~/font/body/html然后我们只需要刷新一下就可以了不必重新打开文件了 说一下第一html不区分大小写 一般用小写 第二就是语法比较松散可以不写结束标签颜色可以不加引号
htmlheadtitlehtml快速入门/title/headbodyfont colorblue乾坤未定你我皆是黑马~/body/html但是写的时候还是要专业一点
文件以.htm或者html为扩展名
1.2 基础标签 选中右键检查就可以查看html相关的代码了 可以在idea里面写代码的 直接就是java的模块就可以了不用maven 建一个文件夹 在新建html文件
!--!DOCTYPE html是html5的一个标识--
!DOCTYPE html
html langen
head
!-- meta charsetUTF-8是用来定义页面字符集的 --meta charsetUTF-8titleTitle/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
hrfont传智教育/font但是过时了 因为文本的样式用CSS来控制所以过时了 回车 颜色的表示方式第一英文redpink 第二就是rgb(值1值2值3)三原色的方式红绿蓝的方式 值的取值范围是0~255 rgb(255,0,0)全红 第三就是#值1值2值3 也是三原色 00~FF的范围 #ff0000 也是全红 这里可以看出没有换行
因为浏览器不会解析换行 10月16日至17日全国公安厅局长座谈会在天津市召开就进一步深化改革创新提升公安机关新质战斗力高水平推进公安工作现代化等工作作出重要部署。br通过聆听大会、分组讨论参会代表认真学习领会会议精神统一思想、凝聚共识。先进经验展示、实地考察观摩大家从中得到新启发、新收获互学互鉴、共同进步。所以要手动加上br
p10月16日至17日全国公安厅局长座谈会在天津市召开就进一步深化改革创新提升公安机关新质战斗力高水平推进公安工作现代化等工作作出重要部署。/p
p通过聆听大会、分组讨论参会代表认真学习领会会议精神统一思想、凝聚共识。先进经验展示、实地考察观摩大家从中得到新启发、新收获互学互鉴、共同进步。/p这样的话就变成了两段 代表认真学习领会会br
b代表认真学习领会会/b代表认真学习领会会br
b代表认真学习领会会/bbr
i代表认真学习领会会/ibr
u代表认真学习领会会/ubrcenterb代表认真学习领会会/b/centercenter就是居中而且也过时了 特殊字符的打印要用转义字符
1.3 图片音频视频标签 src就是资源路径 直接把资源复制到html路径下就可以了 视频是mp4音频是mp3
img srca.pngimg srca.png width200height400尺寸单位 1.默认的就是像素px 2.百分比就相当于占父元素的%20 父元素就是body body的范围就是整个框体的范围
img srca.png width20%height400音频文件到时候就是这样的写的是video
videosrcb.mp4/videovideosrcb.mp4 controlscontrols/video或者这样
videosrcb.mp4 controls/videovideo srcb.mp4 controls width500 height300/video下面讲一下资源路径上面我们写的是相对路径 我们也可以写绝对路径盘符或者网页 点击复制图片地址就可以了
img srchttps://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641 width50%height400一般写相对路径要找html文件和图片的相对位置关系找到就可以写了
比如一个是xxx/html/02 一个是xxx/html/a.png 相对路径就可以这样 ./a.png
./可以省略默认在当前路径找
img src./a.png width50%height400一个是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 hrefhttps://www.itcast.cn点我有惊喜/a_self是默认值
a hrefhttps://www.itcast.cn target_blank点我有惊喜/a跳转到外部资源用这个
1.5 列表标签 OLli咖啡/lili奶茶/lili牛奶/li
/OLuLli咖啡/lili奶茶/lili牛奶/li
/uLOL typeAli咖啡/lili奶茶/lili牛奶/li
/OLtype就是给序号设置属性
uL typecircleli咖啡/lili奶茶/lili牛奶/li
/uL一般不建议修改 用CSS
1.6 表格标签 tabletrth序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtr/trtr/trtr/tr
/tabletabletrth序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtrtd010/tdtdimg src../img/a.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtrtd009/tdtdimg src../img/b.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtrtd008/tdtdimg src../img/c.png width60 height50/tdtd小米/tdtd小米科技有限公司/td/tr/table没有线条
table border1trth序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtrtd010/tdtdimg src../img/a.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtrtd009/tdtdimg src../img/b.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtrtd008/tdtdimg src../img/c.png width60 height50/tdtd小米/tdtd小米科技有限公司/td/tr/table间距为1像素
两条线合二为一
table border1 cellspacing0trth序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtrtd010/tdtdimg src../img/a.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtrtd009/tdtdimg src../img/b.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtrtd008/tdtdimg src../img/c.png width60 height50/tdtd小米/tdtd小米科技有限公司/td/tr/tablecellpadding表示间距为0
table border1 cellspacing0 width500变宽 table border1 cellspacing0 width500tr aligncenterth序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtr aligncentertd010/tdtdimg src../img/a.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtr aligncentertd009/tdtdimg src../img/b.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtr aligncentertd008/tdtdimg src../img/c.png width60 height50/tdtd小米/tdtd小米科技有限公司/td/tr/table就是居中
br
hr
br
table border1 cellspacing0 width500合并单元格分为横向的合并和纵向的合并 比如这样 那怎么算行呢就是右下角那个合并的算第三行还是第四行呢算第三行的所以第四行只有三个单元格 tr aligncenter
!-- 第一个占两列--th colspan2品牌logo/thth品牌名称/thth企业名称/th/trtable border1 cellspacing0 width500tr aligncenter
!-- 第一个占两列--th colspan2品牌logo/thth品牌名称/thth企业名称/th/trtr aligncentertd010/tdtdimg src../img/a.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtr aligncentertd rowspan2009/tdtdimg src../img/b.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtr aligncentertd008/tdtdimg src../img/c.png width60 height50/tdtd小米/td/tr/table删除第四行一个单元格第三行第一个单元格占两行
1.7布局标签 结合CSS来用
div我是div/div
div我是div/div
span我是span/span
span我是span/spandiv换行 一个标签占一行 span不换行不会占满一行
1.8 表单标签
比如登录的窗口就是表单采集用户输入的信息一点按钮就把这些信息发送到服务端
input typetext定义一个文本输入框 input typesubmit定义一个按钮
forminput typetextinput typesubmit/form我们这里点提交没有用的因为没有指定form的anction属性
anction属性就是指定表单数据提交的URL,往哪个地方提交数据就指定action为哪个URL
form action#因为我们没有服务端所以我们就用#代替表示把表单数据提交到html页面来后面我们就可以写服务器的资源路径
表单项数据要想被提交则必须指定其name属性
input typetext nameusernameusername随便写的
body
form action#input typetext nameusernameinput typesubmit/form点提交 这样上面就增加了一个键值对usernamehehe# username是name的属性值键 hehe是文本输入框里面的值这就是键值对
method是指定表单提交的方式的1.get是默认值2.post get请求的参数会拼接在URL后边http://localhost:63342/java2/html-demo/html/就是URL,就是地址长度限制为4KB所以请求参数有限制 post的话请求参数会在http请求协议的请求体中请求参数无限制
body
form action# methodpostinput typetext nameusernameinput typesubmit/form重新打开页面 URL后边就没有键值对了 点击开发者工具 点network 在输入一次aaaa 这里多了一次请求 点击就可以查看我们的aaaa
1.9 表单项标签 比如id用户不用书写随着表单一起提交这个就是hidden
form action# methodpost用户名:input typetext nameusernamebr密码:input typepassword namepasswordbrinput typesubmit value免费注册br
!-- value就是取名字 --/form提交就会提交到URL地址里 按着F12也可以打开开发者工具 现在我们希望我们点击用户名这三个字就能直接输入而不是点击文本框 用lable标签就可以 label forusername用户名:/labelinput typetext nameusername idusernamebr我们先把用户名:三个字放在lable里面然后让input和lable有关联就给input取个id这个id是唯一标识for就是去关联这个id 这样我们点击用户名三个字就能选中框框了
form action# methodpostlabel forusername用户名:/labelinput typetext nameusername idusernamebrlabel forpassword密码:/label密码:input typepassword namepassword idpasswordbrinput typesubmit value免费注册br
!-- value就是取名字 --/form性别:input typeradio性别:input typeradio 男input typeradio 女但是这里男女可以同时选中所以还不行
如何让两个单选框达到互斥的效果呢
让name的属性值一样就可以了 性别:input typeradio namegender男input typeradio namegender女因为gender只能给一个赋值所以是互斥的 但是我们这里gender却是on的值为什么呢选男是on选女还是on不选就没有gender 因为男没有关联到
所以还要加个value 性别:input typeradio namegender value1男input typeradio namegender value2女这样加个value提交的就是1,2了提交的值就是value 在把男和女包括起来点男这个字就选中男 性别:input typeradio namegender value1 idmalelabel formale男/labelinput typeradio namegender value2 idfemalelabel forfemale女/label这样就可以了
下面讲一下复选框 爱好:input typecheckbox namehobby value1旅游input typecheckbox namehobby value2电影input typecheckbox namehobby value3游戏hobby就相当于是一个数组了 头像:input typefile图片的数据就会被提交到服务端去 input typehidden nameid value123写了这个没什么反应但你提交服务端就会有id input typesubmit value免费注册input typereset value重置input typebutton value一个按钮button没有任何效果就是一个按钮要结合javascipt 点重置的话你写的就清空了 城市:selectoption北京/optionoption上海/optionoption广州/option/select这就是一个下拉列表
要想被提交就要指定name属性 城市:select namecityoption北京/optionoption上海/optionoption广州/option/selectoption valueshanghai上海/option如果这样写的话就只会提交value的值了没加value的话就提交option里面的内容 个人描述:textarea/textarea可以写很多行 个人描述:textarea cols20 rows5/textarea这个的意思就是可以写五行每行20个字 而且还变大了 个人描述:textarea cols20 rows5 namedesc/textarea2.CSS style标签里面就是CSS的代码 这个的意思选中html里面的就是body里面的所有的div标签里面的文本内容颜色改为红色
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{color:red;}/style
/head
body
divhello css/div/body
/htmlstyle标签是一种css与html结合的方式 css如何书写 div一部分选择器 里面的键值对一部分属性
2.1 CSS导入方式
内联样式在html标签里面定义style属性通过style属性指定CSS代码
html与css耦合在一起就不利于维护 内部样式在html页面里面定义style标签 style标签内部定css代码 外部样式现在外部定义css文件在里面写css代码在html页面里面使用link标签来引入css的外部文件
bodydiv stylehello css/div/body在style属性里面写css代码就是属性键值对
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv stylecolor:redhello css/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/style
/head
bodydiv stylecolor:redhello css/divspanhello css/span
/body
/htmlspan里面写文本内容 style来控制里面的文本内容里面写css代码
span标签的话我们要写个选择器就是span意思就是选择body里面所有的span标签
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylespan{color:red;}/style
/head
bodydiv stylecolor:redhello css/divspanhello css/span
/body
/html为了演示第二种方式这里我们创建一个文件夹css1里面放着demo.css 文件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylespan{color:red;}/style
/head
bodydiv stylecolor:redhello css/divspanhello css/spanpheloo css/p
/body
/html加个p标签 要控制p标签所以选择器就写p
p{color:red;}我们在html里面使用link来引入 link hrefhref来引入css文件 link href../css1/demo.css relstylesheetstylesheet的意思就是link以后会引入很多文件的stylesheet就是说我这个文件就是css属性的才能特定解析
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylespan{color:red;}/stylelink href../css1/demo.css relstylesheet
/head
bodydiv stylecolor:redhello css/divspanhello css/spanpheloo css/p
/body
/html2.2 CSS选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{color:red;}/style/head
bodydivdiv1/div
divdiv2/div
divdiv3/divspanspan/span
/body
/html这个就是元素选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{color:red;}#name{color:blue;}/style/head
bodydiv idnamediv1/div
divdiv2/div
divdiv3/divspanspan/span
/body
/html这个就是id选择器
这个的选择器是以name为准的name优先
id选择器唯一意思是id是唯一的 但是类选择器不是唯一的
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{color:red;}#name{color:blue;}.cls{color:pink;}/style/head
bodydiv idnamediv1/div
divdiv2/div
div classclsdiv3/divspan classclsspan/span
/body
/html2.3 CSS属性 点击HTML/CSS,选择CSS3再点击参考书就可以找到css属性了 3. JavaScript 3.1 引入方式 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescriptalert(hello js)/script
/head
body/body
/htmlalert(“hello js”)弹出一个警告框 确定就没了 scriptalert(hello js)/script可以随便放数量没限制
scriptalert(hello js1)
/script
scriptalert(hello js2)
/script
scriptalert(hello js3)
/script这样就要点三个确定
一般放在body里面的偏后面
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title/head
bodyscriptalert(hello js1)
/script
scriptalert(hello js2)
/script
scriptalert(hello js3)
/script
/body
/htmlscript src../js/demo.js/script因为标签里面没有内容所以可以自闭和 但是不能因为这样就不能生效了
3.2 基础语法 结尾分号可以不写 window.可以省略
scriptwindow.alert(hello js);document.write(hello js2);//写入html页面
/scriptwindow.alert(hello js);document.write(hello js2);//写入html页面console.log(hello js3);//写入浏览器控制台浏览器控制台在开发者工具 f12
scriptvar test20;alert(test);
/scriptscriptvar test20;test张三;alert(test);
/scriptvar定义的变量是全局的 {var age 30;}alert(age);变量可以重复定义 {var age 30;var age 20;}alert(age);let关键字 {let age 30;
!-- var age 20;--}alert(age);报错会在控制台里面提示 点链接就会有对应提示 let的作用域就在大括号而且不能重复定义
const是用来定义常量的 scriptvar age20;var price99.8;alert(typeof age);alert(typeof price);
/scriptscriptvar ageq;var pricehahah;//单引号与双引号都是一样的alert(typeof age);alert(typeof price);
/scriptvar agetrue;var pricefalse;alert(typeof age);alert(typeof price);scriptvar agenull;var pricefalse;alert(typeof age);alert(typeof price);
/scriptnull弹出一个object所以引用类型和null弹出都是object
scriptvar age;var pricefalse;alert(typeof age);alert(typeof price);
/script/// 与 全等于var age120;var age220;alert(age1age2);这些大于等于等于等于比较的时候都会进行类型转换所以相等 先判断类型一不一样不一样的话就类型转换
全等于就不会类型转换类型不一样直接false
script/// 与 全等于var age120;var age220;alert(age1age2);
/script类型转换其他类型转换为number string按照字符串的字面值转换为数字 var str‘20’ 字面值就是20 var str‘abc’ 转不了数字 不会报错但是会转成一个特殊的数字NaN 这就是一个不是数字的数字 var strabc;这里我们在前面加上一个因为后面要接上数字所以会自动强转 var strabc;alert(str);var str20;alert(str1);如果是字符串就是201 可以用parseInt把字符串转换成数字 var str20;alert(parseInt(str)1);第二就是boolean转成数字true为1false为0 var flagtrue;alert(flag);其他类型转换为boolean number0和NaN为false其余为false var flag0;if(flag){alert(转为true);}else{alert(转为false);}条件里面需要boolean所以会自动转换 字符串空字符串转false就是一个引号有内容为true var flag;if(flag){alert(转为true);}else{alert(转为false);}undefinednull为fasle var flagnull;if(flag){alert(转为true);}else{alert(转为false);}var flagundefined;if(flag){alert(转为true);}else{alert(转为false);}作用就是原来要这样判断 var str;if(str!nullstr.length0){alert(转为true);}else{alert(转为false);}现在只需要 var str;if(str){alert(转为true);}else{alert(转为false);}var count 3;if(count3){alert(count);}然后switchcase也是一样的 switch(count){case 3:alert(星期三);break;}for(let i0;i100;i){}反正这些控制语句与原来的Java没什么区别 function add(a,b){return ab;}var result add(1,2);alert(result);var addfunction(a,b){return ab;}var result add(1,2);alert(result);var addfunction(a,b){return ab;}var result add(1,2,3);alert(result);弹出来还是三因为参数对应传3没有传 var addfunction(a,b){return ab;}var result add(1);alert(result);因为b没有值所以b就是NaN所以和也是NaN
3.3 常用对象 var arrnew 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 i0;iarr4.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 str1new String(hello);var str2(hello);var str3(hello);alert(str1);alert(str2.length);//trim():去除字符串前后两端的空白字符var str4( hello );alert(1str41)//trim():去除字符串前后两端的空白字符var str4( hello );alert(1str4.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 flagconfirm(确认删除);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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodyinput typebutton onclickon() value开灯img src../img/off.png idmyImage border0 style...input typebutton onclickoff() value关灯scriptfunction 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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodyinput typebutton onclickon() value开灯img src../img/off.png idmyImage border0 style...input typebutton onclickoff() value关灯scriptfunction on(){document.getElementById(myImage).src../img/on.png;}function off(){document.getElementById(myImage).src../img/off.png;}var x0;//定时器setInterval(function (){if(x%20){on();}else{off();}x;},1000)
/script/body
/html这样就可以一秒闪一次了 如果是三个方法的话的循环调用就%3 就是这里的前后箭头 获取或者设置URL
scriptalert(aaaa);location.hrefhttps://www.baidu.com;
/script执行确定就会直接跳转到百度 document.write(三秒跳转到百度...);setTimeout(function(){location.hrefhttps://www.baidu.com;},3000);3.5 DOM 比如你点击按钮里面的内容就随着改变 因为id唯一标签不唯一 不唯一就返回数组
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
img idLight src../img/a.png brdiv classcls处置/divbr
div classclsaaa/divbrinput typecheckbox namehobby电影
input typecheckbox namehobby旅游
input typecheckbox namehobby游戏
brscript/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
img idlight src../img/a.png brdiv classcls处置/divbr
div classclsaaa/divbrinput typecheckbox namehobby电影
input typecheckbox namehobby旅游
input typecheckbox namehobby游戏
brscriptvar img document.getElementById(light);//这个img就是img idLight src../img/a.png 了alert(img);
/script/body
/html这里就显示了一个object对象而且类型都出来了 //根据标签名称获取var divsdocument.getElementsByTagName(div);alert(divs.length); for(let i0;idivs.length;i){alert(divs[i]);}//根据name获取var hobbysdocument.getElementsByName(hobby);alert(hobbys.length);for(let i0;ihobbys.length;i){alert(hobbys[i]);}//根据class属性获取var clssdocument.getElementsByClassName(cls);alert(clss.length);for(let i0;iclss.length;i){alert(clss[i]);}根据文档查看来使用对象的方法
总共有三种标签imginputdiv 看这个我们利用src方法更换图片 var img document.getElementById(light);img.src../img/on.png;var divsdocument.getElementsByTagName(div);//期望把文字黑色换成红色然后就是查文档 但这个里面没有方法 但他可以用Element对象的方法 因为继承 嘛 var divsdocument.getElementsByTagName(div);//期望把文字黑色换成红色//style设置css样式//innerHTML设置元素内容for(let i0;idivs.length;i){divs[i].style.colorred;}var divsdocument.getElementsByTagName(div);//期望把文字黑色换成红色//style设置css样式//innerHTML 设置元素内容for(let i0;idivs.length;i){
!-- divs[i].style.colorred;--divs[i].innerHTMLhehheeheheh;}这两个属性是通用的属性 每个html页面都有 true就是选中 //根据name获取var hobbysdocument.getElementsByName(hobby);alert(hobbys.length);for(let i0;ihobbys.length;i){//alert(hobbys[i]);hobbys[i].checkedtrue;//就代表选中的状态}这就默认选中了
3.6 事件监听 button是一个按钮onclick是一个事件属性设置一个方法点击这个按钮就调用这个方法推荐使用第二种方式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyinput typebutton value点我 onclickon()br
input typebutton value再点我brscriptfunction on(){alert(我被点亮);}
/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyinput typebutton value点我 onclickon()br
input typebutton value再点我 idbtnbrscriptfunction on(){alert(我被点亮);}document.getElementById(btn).onclickfunction(){alert(我被点了)}
/script
/body
/html常见事件 移到文本输入框点击就有光标移到外面就没有光标了而且里面的内容会变成大写 就是你点一下就会发生一些情况 就是你点击外面会发生一些事情 input typetext nameusername/input typesubmit name提交/username输入内容
form idregister action#input typetext nameusername/input typesubmit name提交/
/formscriptdocument.getElementById(register).onsubmitfunction(){return false;//表单就不会提交}//给表单绑定一个onsubmit事件
/script看嘛点了提交URL还是不变的 return true就会提交
3.10 表单验证 有红就不能提交无红提交就发往服务端
失去焦点onblur div classform-divdiv classreg-contenth1欢迎注册/h1span已有帐号/spana href#登录/a/div
!-- //提交方式是get提交到当前页面#三个input输入--form idreg-form action# methodgettabletrtd用户名/tdtd classinputs input nameusername typetext idusernamebr
!-- span包裹的就是错误提示信息--span idusername_err classerr_msg styledisplay:none用户名不太受欢迎/span/td/trtrtd密码/tdtd classinputs input namepassword typetext idpasswordbrspan idpassword_err classerr_msg styledisplay:none密码格式有误/span/td/trtrtd手机号/tdtd classinputs input nametel typetext idtelbrspan idtel_err classerr_msg styledisplay:none手机号格式有误/span/td/tr/table/form
/div 我们这样输入没有提示信息 我们把display:none中的display的none信息去掉就有提示信息了但是会一直存在的 span nameusername_err classerr_msg styledisplay:用户名不太受欢迎/span判断输入内容是否符合要求如果不符合要求修改css样式的display的属性值设置为空就可以了提示信息就出来了
script//1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInputdocument.getElementById(username);//1.2绑定onblur事件 失去焦点usernameInput.onblurfunction(){//1.3获取用户名var usernameusernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则长度6~12if(username.length6username.length12){//符合规则}else{//不符合规则 获取spandocument.getElementById(username_err).style.display;}};/script但是现在我们填对了也不会取消那个东西了 所以还要修改 //1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInputdocument.getElementById(username);//1.2绑定onblur事件 失去焦点usernameInput.onblurfunction(){//1.3获取用户名var usernameusernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则长度6~12if(username.length6username.length12){//符合规则document.getElementById(username_err).style.displaynone;}else{//不符合规则 获取spandocument.getElementById(username_err).style.display;}};这样就可以了
密码和用户名就没有什么区别了 ctrlr全部选中进行替换 再点全部替换 //1.验证密码是否符合规则//1.1获取密码的输入框var passwordInputdocument.getElementById(password);//1.2绑定onblur事件 失去焦点passwordInput.onblurfunction(){//1.3获取密码var passwordpasswordInput.value.trim();//排除空格//passwordInput.value;可以获取输入框的填写内容//判断密码是否符合规则长度6~12if(password.length6password.length12){//符合规则document.getElementById(password_err).style.displaynone;}else{//不符合规则 获取spandocument.getElementById(password_err).style.display;}};再改一下length //1.验证手机号是否符合规则//1.1获取手机号的输入框var telInputdocument.getElementById(tel);//1.2绑定onblur事件 失去焦点telInput.onblurfunction(){//1.3获取手机号var teltelInput.value.trim();//排除空格//telInput.value;可以获取输入框的填写内容//判断手机号是否符合规则长度11if(tel.length11){//符合规则document.getElementById(tel_err).style.displaynone;}else{//不符合规则 获取spandocument.getElementById(tel_err).style.display;}};下面我们来完成第二个需求就是不满足就无法提交 //获取表单对象var regFormdocument.getElementById(reg-form);//绑定一个onsubmitreForm.onsubmitfunction(){//挨个判断每一个表单项是否符合要求一个不符合都不提交//判断每个表单项的话利用方法就可以了}判断每个表单项的话利用方法就可以了所以方法得有返回值才行 而且还要额外取个名 //1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInputdocument.getElementById(username);//1.2绑定onblur事件 失去焦点usernameInput.onblurcheckUsername;function checkUsername(){//1.3获取用户名var usernameusernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则长度6~12var flagusername.length6username.length12if(flag){//符合规则document.getElementById(username_err).style.displaynone;}else{//不符合规则 获取spandocument.getElementById(username_err).style.display;}return flag;};//获取表单对象var regFormdocument.getElementById(reg-form);//绑定一个onsubmitregForm.onsubmitfunction(){//挨个判断每一个表单项是否符合要求一个不符合都不提交//判断每个表单项的话利用方法就可以了var flagcheckUsername() checkPassword() checkTel();return flag;}true才会提交 div classbuttonsinput value注 册 typesubmit idreg_btn /div这个是我们的提交按钮 这样就无法提交了
3.11 正则表达式 script//规则单词字符6~12
var reg/^\w{6,12}$/;
var strabc;
var flagreg.test(str);
alert(flag);
/script上一个表单验证就可以这样改了 var reg/^\w{6,12}$/;var flagreg.test(username);var reg/^\w{6,12}$/;var flagreg.test(password);//判断手机号是否符合规则长度11,数字组成1开头var reg/^[1]\d{10}$/;var flagreg.test(tel);全部代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title/head
bodydiv classform-divdiv classreg-contenth1欢迎注册/h1span已有帐号/spana href#登录/a/div
!-- //提交方式是get提交到当前页面#三个input输入--form idreg-form action# methodgettabletrtd用户名/tdtd classinputs input nameusername typetext idusernamebr
!-- span包裹的就是错误提示信息--span idusername_err classerr_msg styledisplay:none用户名不太受欢迎/span/td/trtrtd密码/tdtd classinputs input namepassword typetext idpasswordbrspan idpassword_err classerr_msg styledisplay:none密码格式有误/span/td/trtrtd手机号/tdtd classinputs input nametel typetext idtelbrspan idtel_err classerr_msg styledisplay:none手机号格式有误/span/td/tr/tablediv classbuttonsinput value注 册 typesubmit idreg_btn /div/form
/divscript//1.验证用户名是否符合规则//1.1获取用户名的输入框var usernameInputdocument.getElementById(username);//1.2绑定onblur事件 失去焦点usernameInput.onblurcheckUsername;function checkUsername(){//1.3获取用户名var usernameusernameInput.value.trim();//排除空格//usernameInput.value;可以获取输入框的填写内容//判断用户名是否符合规则长度6~12,单词字符组成var reg/^\w{6,12}$/;var flagreg.test(username);if(flag){//符合规则document.getElementById(username_err).style.displaynone;}else{//不符合规则 获取spandocument.getElementById(username_err).style.display;}return flag;};//1.验证密码是否符合规则//1.1获取密码的输入框var passwordInputdocument.getElementById(password);//1.2绑定onblur事件 失去焦点passwordInput.onblurcheckPassword;function checkPassword(){//1.3获取密码var passwordpasswordInput.value.trim();//排除空格//passwordInput.value;可以获取输入框的填写内容//判断密码是否符合规则长度6~12var reg/^\w{6,12}$/;var flagreg.test(password);if(flag){//符合规则document.getElementById(password_err).style.displaynone;}else{//不符合规则 获取spandocument.getElementById(password_err).style.display;}return flag;};//1.验证手机号是否符合规则//1.1获取手机号的输入框var telInputdocument.getElementById(tel);//1.2绑定onblur事件 失去焦点telInput.onblurcheckTel;function checkTel(){//1.3获取手机号var teltelInput.value.trim();//排除空格//telInput.value;可以获取输入框的填写内容//判断手机号是否符合规则长度11,数字组成1开头var reg/^[1]\d{10}$/;var flagreg.test(tel);if(flag){//符合规则document.getElementById(tel_err).style.displaynone;}else{//不符合规则 获取spandocument.getElementById(tel_err).style.display;}return flag;};//获取表单对象var regFormdocument.getElementById(reg-form);//绑定一个onsubmitregForm.onsubmitfunction(){//挨个判断每一个表单项是否符合要求一个不符合都不提交//判断每个表单项的话利用方法就可以了var flagcheckUsername() checkPassword() checkTel();return flag;}/script
/body
/html总结
过两天上传加上gitee链接不然代码太多了
