廊坊网站搜索优化,太原网站建设质量推荐,动画设计师培训,精品网站要建设需要多少钱目录
一.标签
二.指定css
三.css选择器
四.超链接
五.视频与排版
六.布局测试
七.布局居中
八.表格
九.表单
十.表单项
十一.JS引入与输出
十二.JS变量#xff0c;循环#xff0c;函数
十三.Array与字符串方法
十四.自定义对象与JSON
十五.BOM对象
十六.获取…目录
一.标签
二.指定css
三.css选择器
四.超链接
五.视频与排版
六.布局测试
七.布局居中
八.表格
九.表单
十.表单项
十一.JS引入与输出
十二.JS变量循环函数
十三.Array与字符串方法
十四.自定义对象与JSON
十五.BOM对象
十六.获取DOM对象
十七.使用DOM对象
十八.监听事件绑定方法
十九.常见监听事件
二十. 表单处理案例 实验项目目录 必要文件new.css:
h1 {color:black;
}
span{color: #968D92;;
}
a {color: #000;text-decoration: none;
}
p {text-indent: 50px;line-height: 40px;
}
#pLast {text-align: right;
} 一.标签 该文件中的标签/元素 标题h1~6 图片img 分割线hr 换行br 空格nbsp; 有序列表olli 无序列表ulli 1.如何设置图片的相对路径 ./ 代表当前目录平级可省略 ../ 代表上一级目录。。 2.width与height常用单位有哪些分别表示什么意思 px像素 %相对于父元素的百分比 3.图片的width与height如果只设置一个会发生什么 图片将会根据其中一个将会等比例缩放 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title标题内容/title
/head
bodyimg srcimg/news_logo.png width150pxnbsp;nbsp;新浪政务 正文h1焦点访谈中国底气 新思想夯实大国粮仓/h1hr2023年03月02日 21:50 央视网brol type1li妙蛙种子/lili小火龙/lili杰尼龟/li/olulli妙蛙种子/lili小火龙/lili杰尼龟/li/ul
/body
/html 二.指定css 1.没有任何语义的标签span 2.指定css的有哪三种方式 1.写在.css文件当中,使用link标签导入 2.写在head标签的style标签中,格式与.css文件中的一样 3.在标签中用style属性指定 3.指定颜色的三种方式 1.#968D92 2.rgb(99, 255, 255) 3.black !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefcss/new.css
/head
bodyh1焦点访谈中国底气 新思想夯实大国粮仓/h1hrspan stylecolor:#968D92;2023年03月02日 21:50 央视网/span
/body
/html 三.css选择器 1.css属性设置 字体颜色color: black; 字体大小font-size 14px; 2.css的三个选择器是哪些优先级如何 元素选择器指定某标签使用某样式 class选择器 使用.xxx作为标识在标签中使用class属性引用多个标签可以有相同的class id选择器 使用#id作为标识id属性不要重复 css生效优先级idclass标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {color: rgb(80, 80, 80);}.cls{color: #968D92;font-size: 14px;}#id{color: black;}/style
/head
bodyimg srcimg/news_logo.png width150pxnbsp;nbsp;新浪政务 正文h1焦点访谈中国底气 新思想夯实大国粮仓/h1hrspan classcls2023年03月02日 21:50/spanspan idid 央视网 /span
/body
/html 四.超链接 1.超链接标签a 2.css属性-去掉超链接的下划线text-decoration: none 3.超链接标签属性 指定链接网址hrefhttps://www.baidu.com/ 设置新建页面打开:target_blank !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea{color: #000;text-decoration: none;}/stylelink relstylesheet hrefcss/new.css
/headbodyimg srcimg/news_logo.png width150pxnbsp;nbsp;a hrefhttps://www.baidu.com/ 新浪政务 /a h1焦点访谈中国底气 新思想夯实大国粮仓/h1hrspan2023年03月02日 21:50/spana hrefhttps://www.baidu.com/ target_blank 百度一下 /a
/body
/html 五.视频与排版 1.html标签 定义段落p 文本加粗b 视频标签:video 音频:audio 2.css属性 首行缩进text-indent: 50px; 设置行高line-height: 40px; 设置对齐方式靠右text-align: right; 3.video标签属性 点击可播放控件controls如果标签属性名和属性值一样可以只写一个 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHoneyWorks/titlestylea {color: #000;text-decoration: none;}p{text-indent: 50px;line-height: 40px;}#right{text-align: right;}/stylelink typestylesheet relcss/new.css
/head
bodyh1新歌发布:いつだって戦ってる/h1pbHoneyWorks/b(日語:ハニーワークス),簡稱Haniwa(ハニワ)或HW,是日本音樂組織及動畫、漫畫和小說社團。/ph2可憐なアイボリー/h2p徵選活動的10位合格者,分別為土屋玲実、寺本理绘、高泽百合爱、小坂ねね、永尾梨央、福田阳菜、柴笑あかり、名切翠杏、波左间美晴、ななさ,所屬於TWINPLANET旗下,組成「突破偶像常識」般的偶像團體。由HoneyWorks擔任音樂製作。/pvideo srcvideo/haniwa.mp4 controls width500px/videobrp idright信息来源于萌娘百科/p
/body
/html 六.布局测试 1.css属性 背景颜色:background-color: rgb(151, 109, 235); 内边距padding: 20px; 边框border: 10px solid skyblue; 外边距margin: 30px; 2.布局标签对比 div独占一行宽度为父内容元素可以设置宽高 span宽高完全由内容撑开 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHoneyWorks/titlestyle.cls{width: 120px;height: 120px;background-color: rgb(151, 109, 235);padding: 20px;border: 20px solid skyblue;margin: 20px;}/style
/head
bodydiv classclsAAAAAAAAAAAAAAAA/divdiv classclsAAAAAAAAAAAAAAAA/divspan classclsAAAAAAAAAAAAAAAA/spanspan classclsAAAAAAAAAAAAAAAA/span
/body
/html 七.布局居中 css属性margin: 0 auto; 相当于设置值为0 15% 0 15%;(上右下左) 设置两个即为同时设置上下和左右一个则代表四周 auto代表自动计算居中 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHoneyWorks/titlestyle#center {width: 70%;margin: 0 auto;}/stylelink relstylesheet hrefcss/new.css
/head
bodydiv idcenterh1新歌发布:いつだって戦ってる/h1hrspan2023年10月29日 21:50/spana hrefhttps://www.baidu.com/ Gom /abrbrvideo srcvideo/haniwa.mp4 controls width50%/videobrpbHoneyWorks/b(日語:ハニーワークス),簡稱Haniwa(ハニワ)或HW,是日本音樂組織及動畫、漫畫和小說社團。/ph2可憐なアイボリー/h2p徵選活動的10位合格者,分別為土屋玲実、寺本理绘、高泽百合爱、小坂ねね、永尾梨央、福田阳菜、柴笑あかり、名切翠杏、波左间美晴、ななさ,所屬於TWINPLANET旗下,組成「突破偶像常識」般的偶像團體。由HoneyWorks擔任音樂製作。/pp idpLast信息来源于萌娘百科/p/div
/body
/html 八.表格 1.html标签 表格标签table 表格行标签tr 表格第一行单元标签th表头单元格字体加粗与居中 表格普通行单元标签td 2.table属性 表格宽度与表格边框宽度widthborder 表格单元间隔cellspacing0(默认有间隔设置为0表示表格之间无间隙) 3.th/td属性 规定占有的行数与列数colspan2,rowspan2 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleimg {width: 100px;}td {text-align: center;}/style
/head
bodytable border1 cellspacing0 width500trth序号/ththLOGO/thth品牌名称/th/trtrtd010/tdtdimg src三只松鼠.png width60 height50/tdtd三只/td/trtrtd009/tdtdimg src优衣库.png width60 height50/tdtd优衣库/td/trtrtd008/tdtdimg src小米.png width60 height50/tdtd小米/td/tr/tablebrtable border1 cellspacing0 width500trth colspan2LOGO/thth品牌名称/th/trtrtd010/tdtdimg src三只松鼠.png width60 height50/tdtd三只/td/trtrtd rowspan2009/tdtdimg src优衣库.png width60 height50/tdtd优衣库/td/trtr aligncentertdimg src小米.png width60 height50/tdtd小米/td/tr/table
/body
/html 九.表单 1.表单标签form负责输入数据 表单属性 提交数据方向action默认提交到当前页面 发送表单数据的方式methodpost get默认值在url后面新接表单数据 post(浏览器检查networkHeaders里面显示传输方式payload显示传输数据) 2.表单项目标签input 决定输入类型typesubmit是输入框/选择框/提交按钮/重置按钮 指定提交数据的键nameusername 在该input标签的按钮标签上显示数据value提交 !DOCTYPE html
html langen
headtitleDocument/title
/head
bodyform action methodpost用户名input typetext nameusername年龄input typetext nameageinput typesubmit value提交/form
/body
/html 十.表单项 1.表单项input的type属性的值 普通输入框text 密码输入框password 单选框radioinput标签中的name需要保持一致 数字|邮箱numberemail 文件夹 file 日期|时间|日期时间date|time|datetime-local 隐藏hidden 提交|重置|按钮submit|reset|button 2.表单中的下拉列表select标签option标签 下拉列表项select标签中使用option标签 设置下拉列表的键 select标签的属性namedegree 设置下拉列表的列表项的值 option标签的属性value1没有设置value就提交标签中的文字数据数据 3.表单中的文本域textarea 表单项text area标签的属性 设置宽高cols30 rows3 4.绑定文字与输入选项的标签labellabel包含input标签 !DOCTYPE html
html langenheadtitleDocument/title
/head
bodyform action methodpost姓名input typetext nameusernamebrbr密码input typepassword namepasswordbrbr性别labelinput typeradio namegender value1 男 /labellabelinput typeradio namegender value2 女 /labelbrbr爱好 labelinput typecheckbox namehobby valuejava java /labellabelinput typecheckbox namehobby valuec c /labellabelinput typecheckbox namehobby valuepython python /labelbrbr手机号input typenumber namephoneNumber邮箱 input typeemail nameemailbrbr文件上传input typefile nameimagebrbr日期 input typedate namedate时间 input typetime nametime日期时间 input typedatetime-local namedatetime-localbrbr隐藏input typehidden nameid value1brbr学历select namedegreeoption value请选择/optionoption value1高中/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/selectbrbr自我介绍textarea nametextarea cols30 rows3/textareabrbrinput typesubmit value提交input typereset value重置input typebutton value按钮/form
/body
/html 十一.JS引入与输出 JS直接由浏览器解释可控制网页动态行为。 1.引用js的位置 可以用script标签放在任意html页面的位置、 一般放在body下面改善显示速度。 2.js写在哪里 可以写在标签中 也能写在外部.js文件。 3.js的分号与字符串 js可不写分号 字符串也可使用单引号 4.js输出的三种方式 a.js
alert(js文件的输出)
!DOCTYPE html
html langen
headtitle/title
/head
body
/bodyscript srcjs/a.js/scriptscriptconsole.log(输出到浏览器控制台)window.alert(警告框(window可省略))document.write(输出到html文档)/script
/html 十二.JS变量循环函数 定义变量的三种方式 1.获取变量类型的方法通过typeof 2.与对比前者类型转换后者不做类型转换 3.类型转换成数字使用parseInt不能转就变成NAN 4.if语句中也能使用其他类型数字类型0和NAN为false空字符串为false,对象undefined为false 5.定义函数 !DOCTYPE html
html langen
headtitle/title
/head
body
/body
scriptvar a 全局变量let b 局部变量const c 常量console.log(1.获取变量类型的方法)console.log(typeof(true))console.log(2.与对比)console.log((true1) (true1))console.log(3.类型转换成数字)console.log(parseInt(1) parseInt(A))if(0)console.log(4.if语句输出)var myFunction function(a,b){console.log(5.定义函数并传参a b c)}myFunction(a,b)
/script
/html 十三.Array与字符串方法 1.Array对象 定义使用[] 长度length可变 内部元素类型任意 2.遍历arrayforeach 3.添加数据到arraypush 4.根据下标删除某范围内的元素splice 5.获取字符串下标indexOf 6.截取字符串substring 7.去除字符串前后空格trim !DOCTYPE html
html langen
headtitle/title
/head
body
/body
scriptconsole.log()array [false,1,2]array[4] 4console.log(array)console.log(长度为array.length)console.log(2.遍历非空元素可lambda)array.forEach(econsole.log(e))console.log(3.添加多个元素)array.push(5,6);console.log(array)console.log(4.根据下标删除多个元素)array.splice(2,6);console.log(array)str 石头人 console.log(5.获取字符串下标:str.indexOf(石头人))console.log(6.截取字符串:str.substring(1,4))console.log(7.去除字符串前后空格:str.trim())
/script
/html 十四.自定义对象与JSON 1.自定义对象的特点 1.最外围包裹大括号 2.属性与值之间用冒号隔开 3.属性之间用逗号隔开 4.方法可以简写 2.JSONJS Object Notation对象标记法) json与自定义对象的不同 所有的key必须用双引号包裹 3.json字符串与js对象的相互转换 !DOCTYPE html
html langen
headtitle/title
/head
body
/body
scriptperson {id:1 ,name:Jack,eat(){console.log(吃)}}console.log(3.把字符串转换成对象利用JSON.parse)user JSON.parse({id:1,name:Jack,addr:[Beijing,Shanghai]})console.log(user)console.log(4.把对象转换成字符串:利用JSON.stringify)console.log(JSON.stringify(user))
/script
/html 十五.BOM对象 BOMBrowser Object Model 浏览器对象模型允许JS操作浏览器 window浏览器窗口对象window.可以省略 Location地址栏对象只需掌握href属性 1.弹出确认框confirm(内容) 2.周期性执行函数setInterval(函数时间) 3.一次性执行函数setTimeout函数时间 4.跳转地址location.href https://www.baidu.com !DOCTYPE html
html langen
headtitle/title
/head
body
/body
scriptalert(confirm(1.弹出确认框 确认返回true 取消返回false))i 1setInterval(function () {console.log(2.周期性执行 i)i;}, 2000)setTimeout(function () {console.log(3.延迟时间执行)}, 4000)document.write(4.设置跳转地址十秒后跳转到百度)setTimeout(function () {location.href https://www.baidu.com}, 10000)
/script/html 十六.获取DOM对象 DOM:Document Object Model:文档对象模型将标记语言的各个组成部分封装成对应的对象 获取文档对象的方法 1.通过id返回单个对象 2.class,属性名标签名获取返回对象集合 !DOCTYPE html
html langen
headtitle/title
/head
bodyh1 idh1Hello BOM/h1input classradio typeradio namesex男input classradio typeradio namesex女
/body
scripth1 document.getElementById(h1)sex document.getElementsByName(sex)radio document.getElementsByClassName(radio)input document.getElementsByTagName(input)
/script
/html 十七.使用DOM对象 1.改变标签属性文档对象.属性 2.增加加标签内的内容文档对象.innerHTML 3.改变对象样式文档对象.style属性 !DOCTYPE html
html langen
headtitle/title
/head
bodyimg idimg srcimg/off.gif/bodybrbrdiv classcls伊莉莎贝斯/divbrdiv classcls吉太/divbr
/body
scriptdocument.getElementById(img).src img/on.gifmyDiv document.getElementsByTagName(div)for (let index 0; index myDiv.length; index) {myDiv[index].innerHTMLfont colorred very good!/fontmyDiv[index].style.colorred}
/script
/html 十八.监听事件绑定方法 监听事件绑定的两种方式 1.在标签设置属性onclick为一个函数再到script里面写函数 2.直接在script里面获取对象然后设置对象的onclick属性为一个函数(推荐) !DOCTYPE html
html langen
headtitle/title
/headbodyinput typebutton onclickon() value按钮1input typebutton idbut2 value按钮2
/body
scriptfunction on(){alert(按钮一被点击了)}document.getElementById(but2).onclick function(){alert(按纽二被点击了)}
/script
/html 十九.常见监听事件 常见事件(可以作为标签的属性) 加载完成 onload 表单 onsubmit 焦点 onfocus,onblur 鼠标 onmouseover,onmouseout 键盘 onkeydown !DOCTYPE html
html langenheadtitle/title
/head
body idbodyform action idforminput typetext idtextbrinput typesubmit idsubmit/form
/body
scriptdocument.getElementById(body).onload function () {console.log(页面加载完成)}document.getElementById(form).onsubmit function () {alert(已提交表单)}document.getElementById(text).onblur function () {console.log(失去了焦点...)}document.getElementById(text).onfocus function () {console.log(成为了焦点...)}document.getElementById(text).onkeydown function () {console.log(按下键盘...)}document.getElementById(submit).onmouseover function () {console.log(鼠标移入...)}document.getElementById(submit).onmouseout function () {console.log(鼠标移出...)}document.getElementById(submit).onmouseout function () {console.log(鼠标移出...)}
/script
/html 二十. 表单处理案例
案例内容未填写规范则 1.出现提示 2.提交表单失败 1.正则表达式对象的创建与方法/^正则表达式$/.test(字符串)返回真假 2.引用函数不加括号表示拷贝地址加括号表示使用函数 3.对于onsubmit返回false则提交失败 !DOCTYPE html
html langenheadmeta charsetUTF-8title欢迎注册/titlelink hrefcss/register.css relstylesheet
/headbodydiv classform-divdiv classreg-contenth1欢迎注册/h1span已有帐号/span a href#登录/a/divform idreg-form action# methodgettabletrtd用户名/tdtd classinputsinput nameusername typetext idusernamebrspan idusername_err classerr_msg styledisplay: none用户名不太受欢迎/span/td/trtrtd密码/tdtd classinputsinput namepassword typepassword idpasswordbrspan idpassword_err classerr_msg styledisplay: none密码格式有误/span/td/trtrtd手机号/tdtd classinputsinput nametel typetext idtelbrspan idtel_err classerr_msg styledisplay: none手机号格式有误/span/td/tr/tablediv classbuttonsinput value注 册 typesubmit idreg_btn/divbr classclear/form/divscriptvar usernameInput document.getElementById(username)usernameInput.onblur checkUsername;function checkUsername() {var flag /^[a-zA-Z]{6,12}$/.test(usernameInput.value.trim())if (flag) document.getElementById(username_err).style.display noneelse document.getElementById(username_err).style.display return flag}var passwordInput document.getElementById(password)passwordInput.onblur checkPasswordfunction checkPassword() {var flag /^\w{6,12}$/.test(passwordInput.value.trim())if (flag) document.getElementById(password_err).style.display noneelse document.getElementById(password_err).style.display return flag}var telInput document.getElementById(tel)telInput.onblur checkTelfunction checkTel() {var flag /^[1]\d{10}$/.test(telInput.value.trim())if (flag)document.getElementById(tel_err).style.display noneelse document.getElementById(tel_err).style.display return flag}document.getElementById(reg-form).onsubmit function () {var flag checkUsername() checkPassword() checkTel()return flag}/script
/body
/html register.css
* {margin: 0;padding: 0;list-style-type: none;
}
.reg-content{padding: 30px;margin: 3px;
}
a, img {border: 0;
}body {background-image: url(../img/reg_bg_min.jpg) ;text-align: center;
}table {border-collapse: collapse;border-spacing: 0;
}td, th {padding: 0;height: 90px;}
.inputs{vertical-align: top;
}.clear {clear: both;
}.clear:before, .clear:after {content: ;display: table;
}.clear:after {clear: both;
}.form-div {background-color: rgba(255, 255, 255, 0.27);border-radius: 10px;border: 1px solid #aaa;width: 424px;margin-top: 150px;margin-left:1050px;padding: 30px 0 20px 0px;font-size: 16px;box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);text-align: left;
}.form-div input[typetext], .form-div input[typepassword], .form-div input[typeemail] {width: 268px;margin: 10px;line-height: 20px;font-size: 16px;
}.form-div input[typecheckbox] {margin: 20px 0 20px 10px;
}.form-div input[typebutton], .form-div input[typesubmit] {margin: 10px 20px 0 0;
}.form-div table {margin: 0 auto;text-align: right;color: rgba(64, 64, 64, 1.00);
}.form-div table img {vertical-align: middle;margin: 0 0 5px 0;
}.footer {color: rgba(64, 64, 64, 1.00);font-size: 12px;margin-top: 30px;
}.form-div .buttons {float: right;
}input[typetext], input[typepassword], input[typeemail] {border-radius: 8px;box-shadow: inset 0 2px 5px #eee;padding: 10px;border: 1px solid #D4D4D4;color: #333333;margin-top: 5px;
}input[typetext]:focus, input[typepassword]:focus, input[typeemail]:focus {border: 1px solid #50afeb;outline: none;
}input[typebutton], input[typesubmit] {padding: 7px 15px;background-color: #3c6db0;text-align: center;border-radius: 5px;overflow: hidden;min-width: 80px;border: none;color: #FFF;box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}input[typebutton]:hover, input[typesubmit]:hover {background-color: #5a88c8;
}input[typebutton]:active, input[typesubmit]:active {background-color: #5a88c8;
}
.err_msg{color: red;padding-right: 170px;
}
#password_err,#tel_err{padding-right: 195px;
}#reg_btn{margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}
