前端网页开发学习HTMLCSSJS有这一篇就够目录HTML教程▐ 概述▐ 基础语法▐ 文本标签▐ 列表标签▐ 表格标签▐ 表单标签CSS教程▐ 概述▐ 基础语法▐ 选择器▐ 修饰文本▐ 修饰背景▐ 透明度▐ 伪类▐ 盒子模型▐ 浮动▐ 定位JavaScript教程▐ 概述▐ 基础语法▐ 函数▐ 事件▐ 计时▐ HTML DOMhtml css js三者之间的关系HTML教程▐概述HTML是HyperText Markup Language的缩写即超文本标记语言。它为我们提供了许多功能不同的标签最终运行时由浏览器对标签进行解析呈现出不同标签的样子。▐基础语法注释 Ctrl / body !-- html注释 -- /body基本框架解读▐文本标签➱ 标题标签…➱ 超链接➱ 段落标签➱ 图片标签➱ 换行标尺线加粗h1标题一/h1 a href跳转链接百度一下/a p段落标签/p img srcimg/lisa.jpg/ br / hr / bEND/b▐列表标签➱无序列表➱ 有序列表➱ 列表项ul li无序项1/li li无序项2/li li无序项3/li /ul ol li有序项1/li li有序项2/li li有序项3/li /ol▐表格标签➱ 表格标签➱表格中的行➱表格的表头➱表格的单元格*快速建表tabletr/*4td/4 按Tab键 生成一个4行4列的表)!-- table 表格标签 -- !-- cellspacing 设置单元格与单元格之间的距离(外边距) -- table border1 width400 cellspacing0 !-- tr表格中的行 -- tr !-- th 表头单元格 居中加粗-- th姓名/th th语文/th th数学/th th英语/th /tr tr td 张三/td td84/td td87/td td94/td /tr tr td李四/td td79/td td88/td td92/td /tr tr td小王/td td79/td td88/td td92/td /tr /table绘制表格时的一些常用属性:border 边框height 高度width 宽度align 内容水平方向的位置 (left,center,right)valign 内容垂直方向的位置 (top,middle,bottom)cellspacing 设置单元格与单元格之间的距离 (外边距)cellpadding 设置单元格内容到边框的距离 (内边距)bgcolor 背景颜色colspan 跨多列合并 (从哪个合并就在哪个单元格添加并删除多余的单元格)rowspan 跨多行合并 (合并完成后需要删除其他行多余的单元格)• th 表头单元格中的内容是居中加粗的td 普通单元格就没有此效果• 表格中的内容只能放在单元格中.• 绘制表格时必须要添加border边框属性否则表格不会显示出来▐表单标签➱ 表单区域➱ 单行输入框标签中提供了type属性我们可以通过设置type的属性值来改变单行输入框的样式如type text 文本输入框type password 密码框type radio 单选框 (多个选项的name必须相同才能互斥)type checkbox 多选框!-- form标签 表示一个表单区域 -- form 账号:input typetext placeholder请输入账号 / br / 密码:input typepassword / br / !-- 注意:多选框和单选框的多个选项的name必须相同才能互斥 -- 性别:input typeradio namegender /男 input typeradio namegender /女 br / 课程:input typecheckbox namecourse /政治 input typecheckbox namecourse /语文 input typecheckbox namecourse /数学 input typecheckbox namecourse /英语 br / /form➱ 下拉选择框 选项内容籍贯select !-- 选择性组件必须要给默认的value -- option value101陕西/option option value102四川/option option value103浙江/option option value104湖南/option /select➱ 多行文本域!-- 可设置文本域的大小(列和行) -- textarea cols30 rows10/textarea➱ 按钮 按钮依然写在标签中只不过不同按钮的type属性不同!-- 提交按钮触发表单的提交动作 -- input typesubmit value提交/ !-- 重置按钮 -- input typereset value重置/ !-- 普通按钮用来绑定事件 (在JavaScript中会详细介绍) -- input typebutton value触发/CSS教程▐ 概述css是一种样式表语言它提供了许多属性来对Html标签进行修饰使我们的页面更加美观。▐基础语法我们把对文本样式进行定义和修饰的CSS代码写在中。注释 //* /*/ Ctrl / style /* CSS注释 */ /styleCSS样式表分为行内样式表*、*内嵌样式表、外部样式表.简单来说就是css代码写的位置不同而已如果标签只出现一次可以考虑使用行内样式写法。若有多组标签且样式需求一致可以使用内嵌样式写法。一般在大的项目css代码很多情况下才使用外部样式写法也就是将css代码单独写在一个.css文件中再在html文件中通过导入即可。!-- href .css文件位置 -- link relstylesheet href /▐ 选择器选择器是将样式表和标签进行匹配的常用选择器有4种➱ 标签选择器 匹配页面中所有的指定标签➱ id选择器 匹配id值唯一的一个标签➱ 类选择器 匹配class属性相同的一组标签➱ 通配选择器 匹配页面中所有标签style /* 标签选择器 */ p{ } /* id选择器 */ #shell{ } /* 类选择器 */ .content{ } /* 通配选择器 */ *{ } /style body p/p div idshell/div div classcontent/div div classcontent/div h1/h1 /body▐ 修饰文本▐ 修饰背景▐ 透明度CSS中opacity属性是用来定义透明度的并且规定范围是从 0.0 ~ 1.0 ( 完全透明 ~ 完全不透明 )style #photo{ opacity: 0.5; /*完全透明 0.0 ~~ 1.0 完全不透明*/ } /style body !-- 原图 -- img srcimg/lisa.jpg / !-- 设置半透明 -- img srcimg/lisa.jpg idphoto/ /body效果如下▐ 伪类CSS伪类专门用来表示标签的一种的特殊的状态常用的伪类有: hover表示鼠标移入的状态: active表示被点击的状态: focus向拥有键盘输入焦点*(例如输入框)*的标签添加样式style #photo{ opacity: 0.5; } #photo:hover{ opacity: 1.0; } /style body img srcimg/lisa.jpg idphoto/ /body此段代码表示当鼠标移入图片时图片的样式从原本的半透明转变为完全不透明▐ 盒子模型CSS处理网页时它认为每个标签都包含在一个不可见的盒子里如果把所有的标签都想象成盒子那么我们对网页的布局就相当于是摆放盒子只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。一个盒子分为4个部分内容区、内边距、边框、外边距标签大小 内容区大小 内边距大小 边框content内容区指盒子中放标签内容的区域子标签都存在于内容区中。width和 height两个属性就是设置内容区大小的。如果没有为标签设置内边距和边框则内容区大小默认和盒子大小一致。padding内边距指标签内容区到边框以内的区域。内边距会影响整个盒子的大小*(涉及计算问题)*border边框是标签可见框的最外部也会算在标签大小中。 边框的三要素有宽度width、颜色color、样式 s*tyle*三者缺一不可。margin外边距指标签边框与周围其他标签相距的区域外边距不影响盒子的整体大小 但是会影响盒子的位置。若想使标签位置水平居中可以将margin设置为auto这样浏览器会将左右外边距设置为相等但要注意若把标签上下外边距设置为auto不会使标签垂直居中外边距依然为0上下外边距需要给具体的值。▐浮动由于网页默认是一个二维平面当我们在网页中一行行摆放标签时块标签会独占一行行标签则只占自身大小这种情况下要实现网页布局就很麻烦所以我们就需要通过一些方法来改变这种默认的布局方式。CSS中的浮动属性可以让标签脱离原来的文档流也就是二维平面浮动后的标签默认是内容的大小且可以为其设置宽和高。但是浮动后的标签不占用原来文档流的空间下面的标签就会向上移动会影响后面的网页布局所以我们通常在浮动的标签后使用清除浮动属性自动让父级标签撑开▐定位position属性规定应用于元素的定位方法的类型static、relative、fixed、absolute 或 sticky➱ position: static; 默认HTML元素默认情况下的定位方式为 static静态静态定位的元素不受 top、bottom、left 和 right 属性的影响不会以任何特殊方式定位它始终根据页面的正常流进行定位。➱ 固定定位 position: fixed;固定定位的元素是相对于视口定位的即使滚动页面它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。➱ 相对定位 position: relative;(相对定位和绝对定位是我们常用的 )元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。➱ 绝对定位 position: absolute;元素相对于最近的定位祖先元素进行定位而不是相对于视口定位如 fixed如果绝对定位的元素没有祖先它将使用文档主体body并随页面滚动一起移动。JavaScript教程▐ 概述JavaScript简称JS是为网页添加各式各样的动态功能的一种前端脚本语言也就是网页的行为。JS是前端脚本语言Java是后端高级语言不要因名字相似而混为一谈二者并无联系▐基础语法JS脚本写在哪?JavaScript的脚本写在一个标签中如果在代码量很多的情况下可以写在外部js文件中再在html文件中导入外部js文件即可.一旦标签导入其他的js文件script // 单行注释 /* 多行注释 */ /script单行注释//快捷键Ctrl /多行注释///*/* 快捷键Ctrl Shift /变量如何声明?• JavaScript属于弱类型语言即变量是没有类型的给它什么类型的值就是什么类型.• 我们通过关键字var声明一个变量.var a 10; var b 5; var c true;数据类型• 数值型 number包含整数和浮点数• 字符串型 string单引号或双引号都可以表示字符串• 布尔型 boolean返回 true / false• undefined类型 声明了变量但没有赋值var g; //此时g就属于undefined类型 alert(typeof(g)); //type()函数用于获取数据类型• Object类型编译器本身(自带)为我们提供的一些类如日期类Datevar date new Date(); alert(date.getFullYear); //获取年 alter(date.getMonth() 1); //获取月 alert(date.getDate); //获取日运算符JavaScript中的运算符和Java中的运算符几乎没有差别但也有特殊所在不过大致也可分为算术运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符。在此我主要给大家详细介绍下不同之处和特殊所在。算数运算符特殊点’’ 不仅表示加法运算也表示字符串的连接.var a 10; var b 5; var c 5; var d d; alert(ab);// 15 (加法运算) alert(ac);// 105 (连接作用) alert(ad);// 10d (连接作用)’-’ 减法运算中字符串 - 数值 数值.JavaScript中会把表达式中数字字符尝试类型转换 5 — 5但要注意这里的字符串必须是数字若不是数字无法类型转换进行运算返回NaN(not a number)var a 10; var b 5; var c 5; var d d; alert(a-b);// 5 (减法运算) alert(a-c);// 5 (减法运算,将数字字符转化为数值) alert(a-d);// NaN (Not a Number)NaN并不是报错它只是为我们返回了NaN结果并不是程序错误比较运算符特殊点’’ 表示全等在此之前我们很少见到三个等号它比较的是值和类型而 ’ ’ 只比较值.var a 5; var b 5; var c 5; alert(ac);// true (只比较值) alert(ac);// flase (比较值和类型)赋值运算符逻辑运算符条件运算符➩此三者并无无特殊点流程控制JavaScript中的流程控制语法和Java中的相同例如选择结构中的 if / if else循序结构中的for循环、while循环…这些基本的语法在这里我就不详细介绍了用法和Java相同▐ 函数函数的声明和调用在JavaScript中我们使用关键字function 来声明一个函数。//声明函数 function test() { lert(你好); } //调用函数 test();常用的全局函数• alert 弹出框• typeof 返回参数数据类型• eval 将某个字符串当做js脚本运行• parseInt 将参数转为整数• parseFloat 将参数转为浮点数▐ 事件事件指的是在网页上发生的交互动作或状态变化例如用户点击按钮、输入文本、滚动页面等。通过监听这些事件可以在特定的情况下执行相应的操作或函数实现交互和动态效果。Javascript中的常用事件有• onclick 鼠标单击事件• dblclick 鼠标双击事件• onblur 标签失去焦点• onfocus 标签获得焦点• onmouseover 鼠标移到某标签上• onmouseout 鼠标从某标签上移开• onkeydown 用户按下键盘按键• onload 网页加载完毕后触发相应的的事件处理程序• onchange 当前标签失去焦点并且标签的内容发生改变时触发事件处理程序▐ 计时通过JS我们可以做到在一个设定的时间间隔之后来执行代码而不是在函数被调用后立即执行这种也称之为计时事件.setTimeout 表示延迟 “指定时间” 后调用 “指定函数” 且只调用一次.clearTimeout关闭setTimeout定时器setInterval 表示每隔 “指定时间” 就调用一次 “指定函数” 只要不关闭定时器就会一直调用.clearInterval关闭setInterval定时器关于JS中的计时语法在之前的文章有详细介绍请大家参考如下链接JavaScript计时语法详解https://blog.csdn.net/2301/_79263365/article/details/139471844?spm1001.2014.3001.5502▐ HTML DOMJS HTML DOM是我们学习JavaScript过程中非常重要的内容它可以解决如何在JavaScript中操作网页中的标签? 这个问题。Dom是document Object Model (文档对象模型) 的缩写JavaScript认为网页中的每个标签都是一个对象在js中把这一类标签对象称为html/_dom对象既然我们要操作网页中的标签那么第一步肯定是先拿到标签对象那么第一个问题来了如何在js中获得网页中的标签对象在网页加载完毕后在js中生成一个document对象(表示整个html文档)里面提供了一个方法 getElementById()//通过标签id获得网页中的标签对象 var obj1 document.getElementById(txt1); var obj2 document.getElementById(txt2);拿到网页中的标签对象后就可以通过dom对象操作标签的属性了(包括css属性).style #box{ width: 300px; height: 300px; } /style script function test(){ var obj document.getElementById(box); obj.style.backgroundColorblue; } /script /head body input typebutton onclicktest() value蓝色/ div idbox/div /body除此之外我们还可以操作标签体中的内容innerText 把标签内部值拿到,获得标签体中的文本内容innerHtml 获得标签内的所有内容(包括子标签)html css js三者之间的关系HTML、CSS和JS是构建网页不可或缺的技术组成部分它们各自扮演不同的角色HTML超文本标记语言它是网页内容的骨架负责创建页面的基本结构和内容布局。HTML元素是构成网页的最基本的块状单位如段落、标题、图像等。CSS层叠样式表它负责为HTML元素提供样式描述包括颜色、字体大小、边距、布局等。CSS使得网页在不同设备和屏幕尺寸下都能保持一致性和美观性。JSJavaScript它是一种动态脚本语言允许开发者向用户提供交互式体验如动画、滑动效果、表单验证等。JavaScript还可以改变和更新网页的内容和样式使网页具有响应式行为。因此HTML、CSS、JavaScript 也被称为前端三剑客是学习前端网页开发的必备的基础技能。结语到这里又要和大家说再见了本篇文章总结了前端网页开发的的三门基础语言即HTML、CSS和Javascript供新手学习或期末复习希望我的分享能给您带来帮助创作不易也欢迎大家三连支持你们的点赞就是博主更新最大的动力如有不同意见欢迎评论区积极讨论交流让我们一起学习进步有相关问题也可以私信博主评论区和私信都会认真查看的我们下次再见 本人微信g2279605572海漫浩浩,我亦苦作舟!大家一起学习,一起进步!《网络安全从零到精通全套学习大礼包》96节从入门到精通的全套视频教程免费领取如果你也想通过学网络安全技术去帮助就业和转行我可以把我自己亲自录制的96节 从零基础到精通的视频教程以及配套学习资料无偿分享给你。网络安全学习路线图想要学习 网络安全作为新手一定要先按照路线图学习方向不对努力白费。对于从来没有接触过网络安全的同学我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线大家跟着这个路线图学习准没错。配套实战项目/源码所有视频教程所涉及的实战项目和项目源码学习电子书籍学习网络安全必看的书籍和文章的PDF市面上网络安全书籍确实太多了这些是我精选出来的面试真题/经验以上资料如何领取配套实战项目/源码所有视频教程所涉及的实战项目和项目源码学习电子书籍学习网络安全必看的书籍和文章的PDF市面上网络安全书籍确实太多了这些是我精选出来的面试真题/经验以上资料如何领取文章来自网上侵权请联系博主