网页的格式网页的制作可以分为三个部分html负责网页结果就是网页内容css负责网页的样式就是设置布局大小颜色javaScript负责网页的交互效果就是动图用户控制鼠标指定位置时的显示动画一html1基本概念html超文本标记语言超文本超越了文本的限制除了文字信息可以存储音频视频图片等内容标记语言由许多的标签 标签名 构成的语言html标签都是定义好的例如使用h1展示标题使用img展示图片使用video展示视频html代码直接在浏览器中运行html标签由浏览器解析css用于设置格式比如图片位置字体大小颜色......2html快速入门建立文本文件后缀名改为.html书写html基本框架定义标题在 body 中填写内容绿色部分用来存放给浏览器看的信息如css样式就是设置信息的样子蓝色部分用来存放给用户看的信息如文字图片视频3小结一基本骨架标签htmlheadtitleHTML快速入门/title/headbodyh1hello html/h1img srcimg/1.jpg/body/html二特点html不区分大小写甚至可以大小写混用但建议使用小写html中引用文件地址的引用符可以是 单引号 或 双引号但建议使用双引号html的语法格式非常松散可以没有结尾语句但建议还是严谨的书写语法一html与Css的网页制作1网页格式网页标题网页主题2渲染方式浏览器的渲染方式就是根据代码从上到下进行渲染所以编写前端网页需要从上到下依次编写那么标题就是最先编写的3网页制作一标题排版html标签h1 - h6一共只有六个标签没有其他标签超链接标签a href链接地址 target打开方式超链接显示的名字/aa 就是超链接的设置标题设置超链接就可以跳转到其他连接地址a有一个设置target是设置超链接的打开方式_blanket开启一个新页面_self直接在当前页面上打开默认方式可以直接在a后面直接写注释body !-- 定义一个标题叫做【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -- h1【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章/h1 !-- 定义一个超链接跳转到央视网 -- a hrefhttps://www.cctv.com/央视网/a2025年1月2日17:49 /body央视显示点击央视网会直接在当前页面跳转到央视网二标题样式设置1Css的三种引入方式行内样式写在标签中的style属性中一般配合javaScript一起使用缺点只能对当前这个标签内的字体有效其他无效复用性差span使用span无意义标签包裹需要改变颜色的数据为了就是在内部样式中使用span修改当前页面所有span包裹的信息的颜色!-- 将文字2025年1月2日17:49 设置成灰色 使用行内样式 span表示无特殊意义的标签 style表示行内样式 color表示文字颜色 gray表示灰色 -- span stylecolor:gray;2025年1月2日17:49/span内部样式写在style标签中可以写在任意位置但一般写在head内部特点只对当前的页面产生效果其他页面无影响--这里就只会对 h1 这个标签的内容修改颜色!-- 方法二内部样式 直接在style里面设置 定义字体颜色是灰色-- style h1{ color:gray; } /style外部样式可以先将定义的样式写在一个单独的Css后缀名的文件内使用的使用用link关键字进行调用!-- 方法三使用外部样式 就是定义一个文件后缀是css的文件用于存储相关样式是文件 然后使用link标签引入到html文件中 rel表示关系 stylesheet表示样式表就是css编辑样式 href表示引入的文件路径-- link relstylesheet hrefcss/new.css2颜色的设置原因是英文涉及的颜色范围过小局限性很大style span{ /* 关键字 */ color:gray /* rgb表示颜色 */ color:rgb(256,0,0); /* rgba表示颜色a表示透明度 */ color: rgba(256,256,0,0.5); /* 十六进制表示颜色 */ color: #ff00ff; } /style3css选择器/* 元素选择器 */ span{ color: #ff00ff; } /* 类选择器 */ .cls{ color: rgb(256,256,0); } /* id选择器 */ #time{ color: rgb(0,0,256); }span2025年1月2日17:49/span span classcls冬天/span span idtime小妹妹/span选择器的优先级id选择器 类选择器 元素选择器细节假如选择到同一个元素那么就按照优先级搞的显示对应的颜色三正文排版p匹配段落就是这一段文字就是一个段落会与其他段落p之间产生间隔video视频播放能将视频地址存放到这个里面然后设置参数一controls设置视频播放的按钮显示视频的进度开关参数二autoplay设置自动播放一旦写这个就会自动播放参数三with 设置视频宽度单位可以是像素px也可以是相对父标签的百分比%参数四height设置高度但是最好只设置一个另外一个会按照比例变化audio跟视频的差不多这个是播放音频br手动换行就是普通的换行操作写一个就换一行!-- 定义一个视频地址video/news.mp4 controls表示显示控制条就是显示进度条还有开始按钮声音按钮...等等 autoplay表示自动播放 width表示宽度 (建议只设置其中一个就行主要是只要设置一个那么另一个就会按比例变化) height表示高度 单位px 像素点 % 表示百分比占父类标签的百分比当前父类标签就是body -- video srcvideo/news.mp4 controls autoplay width80%/video地址可以分为绝对路径盘符路径D:\javaWebDeveloper\html.css\快速入门-央视新闻 \img\1.gif网络路径网络地址比如上网看到图片就可以拷贝他的网络地址来使用相对路径有一个父路径 .\img\1.jpg -----可以省略前面的.\ -- img\1.jpg有两个父路径 ..\img\1.jpg!-- 定义一张图片地址是img/1.gif src表示图片的路径 width表示宽度 (建议只设置其中一个就行主要是只要设置一个那么另一个就会按比例变化) 路径分为绝对路径磁盘路径:D:\javaWebDeveloper\html.css\快速入门-央视新闻\img\1.gif 网络路径https://www.cctv.com/img/1.gif 相对路径1.gif表示当前目录下的img文件夹中的1.gif文件 ../img/1.gif表示上一级目录下的img文件夹中的1.gif文件 -- img srcimg/1.gif width80%四正文样式b表示加粗而strong表示强调和加粗最好还是使用strong三盒子模型1盒子模型的基础概念盒子网页中的所有东西都可以看成盒子由盒子将网页的所有数据存储起来然后通过管理盒子的大小做到安排网页数据的布局位置盒子模型组成内容区域content内边距区域padding边框区域border外边距区域margin2布局标签网页开发中会使用 div 和 span 这两个没有语义的布局标签区别div标签 span标签一行只显示一个一个就独占一行 一行可以十多个span标签组成宽度默认为父类标签的宽度高度默认由内容撑开 长度和宽度都是默认由内容撑开的可以设置宽度和高度widthheight 不可以设置高度和宽度widthheight假设只有三个指传入那么第一个值就是上面的距离第二个值就是左右的距离第三个值就是下面的距离假如填入四个值默认顺序就是顺时针上右下左#content-contain p{ /* 设置盒子的长宽 */ width: 400px; height: 200px; /* 设置背景颜色 */ background-color: #f011f1; /* 设置内边框 */ padding: 30,30,30,30; /* 设置边框 */ border: 10px solid #000000; /* 设置外边框 */ margin: 30px; /* 设置当前widthheight是盒子总的长宽或者是content的长宽 */ box-sizing: border-box;/*假设是border-box那么widthheight就是盒子总的长宽 假设是content-box那么widthheight就是content的长宽 */ }四flex分布模型flex就是flexible box的缩写意为“弹性布局”是一种一维的布局模型flex布局可以为元素之间提供强大的空间分布和对齐能力简单说就是将一堆东西要么按照横轴方向排要么按照纵轴方向排style .container{ width: 500px; height: 300px; background-color: darkgray; display: flex; flex-direction: row; /* 设置分配方式全部靠左 */ justify-content: flex-start; /* 全部靠右 */ justify-content: flex-end; /* 平均分配空间 */ justify-content: space-around; /* 先左右占据一个然后中间的空间分配 */ justify-content: space-between; } /style五表单标签1提交方式就是在页面创建类似文本框选择框文本域...等等让用户书写信息并提交到服务端的工具例如登录界面信息注册员工信息的添加....标签from表单项不同类型的 input 元素下拉列表文本框input定义一个表单项通过type关键字确定类型text / password / ....select定义一个下拉链表就比如选择性别什么的textarea定义文本域就是大一点的文本框写一些详细信息属性action定义表单项向何处发送数据发送方式分为两种method规定发送的方式get就是将数据存放到url后面类似save数据名称数据...url其实就是网络地址的名称然后就是在要发送端的服务端的网络地址后添加数据缺点最好不要传输敏感信息不然别人一眼就知道传输数据的个数是有限的post就是将数据存放到 消息体通过F12打开底层代码然后在载荷内就是他的存放数据优点信息是隐藏的不怕敏感信息暴露传输数据的个数是无限的!-- 创建两个文本框一个是名字一个是年龄 -- !-- type属性就表示输入框的类型 -- !-- action属性表示数据发送的地址 -- !-- method属性表示数据发送的方式 -- !-- get属性的提交方式是存放到url的后面类似/save?namezzsage1234 -- !-- post是将数据存放到请求体中 -- form typetext action/save methodpost !-- 需要设置发送数据的属性名称比如name“name” -- 姓名:input namename/input 年龄:input nameage/input !-- 定义提交按钮点击后将数据发送到服务器 -- !-- submit表示提交数据 value属性就是显示按钮的名字-- input typesubmit value提交/input /form2表单项使用细节radio使用的标签底层命名必须一样不然不是同一组无法实现只选择一个checkbox使用也需要将名称命名一样才学历select nameedu option value1高中/option option value2大学/option option value3研究生/option /selectbrvalue是最终发送给服务端的数据样式label标签可以将包括名字部分包裹起来然后点击文字也会选择增强用户的使用体验label性别/label labelinput typeradio namesex value1男生/label labelinput typeradio namesex value2女生/labelbr3表格table表示创建一个表格样式放置内部的就是表格thead包含在 table 里面表示创建表头会将文字加大加粗tr包含在 thead 里面表示表头的方向r-row表示横向显示表头td包含在 tr 里面表示表头的单元样式比如姓名性别等等th包含在 thead 里面表示表头的内容tbody包含在 table 里面表格的主体就是表格的数据内容tbtb 存在 tbody 标签内表示表格的数据显示具体数据六Css和html总结二javascript1javaScript基础介绍javaScript是一门跨平台面向对象脚本的语言用于控制网页交互的行为javaScript 和 java 是不同的两门语言但是还是有一些基础语法和 java 相识组成ECMAScript规定了JS的基础语言包括了操作流程数据类型函数等BOM浏览器的对象模型用于控制浏览器本身如网页弹窗地址栏等DOM文档对象模型用于操作gtml的文档2JS核心语法一JS引入方式1内部脚本将JS代码直接定义在 html 里面JavaScript代码必须定义在Script/Script标签内在 html 内部JS可以定义在任意地方但是建议定义在body的尾部原因是解析JS语言需要耗费时间假如定义在 html 顶部那么下面的页面渲染就无法第一时间加载出来!-- 方法一内部脚本直接将JS代码写在html -- script alert(hello JS); /script2外部脚本将JS语言写在 .js 文件下然后直接引用就可以了!-- 方法二外部脚本将JS代码放在一个外部的JS文件中 -- script srcjs/01.js/script二JS书写规范书写JS语言最好要么全部都加上分号要么全都不要三变量数据类型1变量和常数1JS变量使用let 关键字来声明JS声明变量是弱类型语言let 可以声明整数字符串boolean 等等命名规则只能使用数字英文下划线英文的$注意数字不能当首字符变量名字严格区分大小写name ! Name不能使用关键字如letifvar...等命名2JS常量使用const 关键字来声明一旦声明为常数就不可以再次声明否则会报错2JS输出方式三种方式1alert(); 直接输出在弹窗上面使用频次较高2console.log(); 结果打印在浏览器的控制台使用频次较高3document.write(); 直接输出在浏览器的界面少使用3JS数据类型JavaScript数据类型分为基本数据类型和引用数据类型基本数据类型为number数字整数小数负数booleantruefalseString可以使用双引号单引号反引号建议使用单引号null表示对象为空但是JavaScript严格区分大小写所以NullnullNULL都有区别undefined未定义数值的变量script //1. 数据类型 alert(typeof 10); //number alert(typeof 1.5); //number alert(typeof true); //boolean alert(typeof false); //boolean alert(typeof Hello); //string alert(typeof JS); //string alert(typeof JavaScript); //string alert(typeof null); //object let a ; alert(typeof a); //undefined /script4字符模板字符模板的语法使用 反引号来定义字符串然后字符串拼接的时候使用 ${字符串} 包裹变量字符串的拼接有两种方式我比较喜欢第一种let name张三; let age18; // 拼接方法一 console.log(姓名 name 年龄 age); // 拼接方法二 console.log(姓名${name}年龄 ${age});四函数函数用于指定执行某些任务的代码块方便代码复用函数指定有两种方式1具名函数具有名字的函数script // 具名函数的使用定义 function add(a,b){ return ab; } // 调用方法 let aadd(1,2); console.log(a); /script细节1函数无需定义返回类型函数变量也无需定义返回类型直接使用假如传入 (2, 2 ) 结果是22直接默认为字符串拼接细节2调用函数也无需要求调用内部引用的变量数和函数的变量数一样可以比函数的变量数还多例如下面// 具名函数的使用定义 function add(a,b){ return ab; } // 调用方法 let aadd(1,2,20);//结果是3因为只取前两个参数 console.log(a);2匿名函数没有名称的函数匿名函数可以有两个种调用方式函数式表达式箭头函数一函数式表达式// 匿名函数--函数式表达式 let add2function(a,b){ return ab; } console.log(add2(1,2));二匿名函数//匿名函数--箭头函数 let add3(a,b){ return ab; } console.log(add3(1,2));五自定义对象// 自定义对象--方法一 let user1{ name:张三, age:18, sex:男, sing:function(){ alert(this.name正在唱着最炫民族歌); } }//方法二对象内的方法省略 let user2{ name:张三, age:18, sex:男, sing(){ //细节方法不能使用箭头函数this会指向父级标签 alert(this.name正在唱着最炫民族歌); } } // 自定义对象的调用 alert(user1.name); user1.sing();六JSON就是一个纯文本数据作用就是在数据传输方面非常方便原因是格式简单层次鲜明和普通的对象最大的区别就是 键值 必须是使用双引号包裹起来JSON.parse() 是将纯文本的对象转化为对象JSON.stringify() 是将对象转化为纯文本字符串//使用JSON将对象转化为字符串 let user3JSON.stringify(user1); alert(user3); //将字符串转化为对象 let user4{name:张三,age:18,sex:男}; alert(JSON.parse(user4).name);细节使用parse方法时字符串必须是 单引号或者反引号不能使用 双引号五DOM对象1DOM基础获取和使用就是将html封装成一个对象叫做 Document能用来控制 html 的内容显示或者内容修改简单来讲直接将 html 的所有东西都看成对象然后直接使用对象使用DOM的方法1获取DOM对应的标签的对象2直接使用DOM对象获取方法1获取匹配到到的第一个元素document.querySelector( 选择器 )id, class, 标签2获取所有匹配到的元素document.querySelectorAll( 选择器 )方法二返回的是一个NodeList节点集合是一个伪数组(有长度有索引但没有数组相关的方法)body !-- 设置三个标签 -- h1 classtitle11111111111/h1 h12222222222/h1 h13333333333/h1 !-- 操作标签要在script标签内使用 -- script // 获取DOM对象指定的id是title1 let h1document.querySelector(.title1); // 使用DOM的方法修改标签的文本内容 h1.innerHTML修改后的文本内容; /script /body结果显示就是 h1 在浏览器上的显示变为 修改后的文本内容 或者可以直接使用querySelectorAll获取所有对象然后使用索引获取想要的对象// 获取所有标签是h1的DOM对象 let h1sdocument.querySelectorAll(h1); //将第一个设置修改内容 h1s[0].innerHTML第一个h1标签;2DOM对象监听事件一事件监听的基本概念类似java的事件监听事件html事件发生在html元素上的“事件”比如按钮被点击鼠标移动到元素上按下键盘快捷键事件监听JavaScript可以在事件触发时立即执行调用一个函数做出相应称为事件绑定或事件注册二事件监听的语法语法事件源.addEventListener‘事件类型’事件触发时调用的函数;事件监听的三要素1事件源哪一个元素被触发监听事件要获取dom元素2事件类型用什么方法触发鼠标单击 clink3事件触发执行的函数要做什么事件细节二者最大的区别就是新方法中同一个元素可以被多个事件一起监听触发就所有函数一起执行旧方法不能被多个事件监听会被最后一个监听事件覆盖假设触发事件只能执行一个函数当前使用的方法为//获取idbtn1的元素的DOM对象 let btn1document.querySelector(#btn1); //为btn1添加点击事件监听--调用方法可以使用箭头函数现在使用的方法 btn1.addEventListener(click,function(){ console.log(你点击了按钮1); })而先前使用的方法为//获取idbtn2的元素的DOM对象--使用先前的方法 let btn2document.querySelector(#btn2); btn2.onclickfunction(){ console.log(你点击了按钮2); }三常见事件3程序化代码将代码的监听事件存放到一个专门的文件进行管理便于维护假如抽取出来的代码有多个重复代码也可以将重复的抽取到一个专门的工具类文件文件和文件之间的关联就需要导包就是import一个文件A使用另一个文件B中的函数需要文件B对应的函数进行暴露类似Java的public而javaWeb是使用export文件A需要导包文件B最后假如使用这种模块化的文件代码在html调用时就需要声明type“module”表示模块化