day01-HTML
HTML语言开发工具:HBuilder
HTML:超文本标记语言
HTML语法规范
1.HTML语言的注解方式:<!--注解内容-->
2.标签不区分大小写,官方建议使用小写
3.标签通常都是由开始标签和结束标签组成,也有个例,如:<br/>表示换行,<hr/>表示水平分割线
4.在谷歌浏览器上右键点击选择:显示网页源代码,可看到HTML源码,选择:检查,也可展示源码
HTML标签
1.<title></title>标签内容展示在网页的tab标签上;
2,<meta> :网站的配置信息
eg:<meta charset=utf-8">指定浏览器打开页面的编码方式,如果内容有中文,编码方式设置为gbk,则会出现中文乱码的问题;
3.<p></p>段落标签,段落内容会前后都有空行
4.<h1></h1>标题标签,范围:1-6
5.<font></font>标签常用属性
color:颜色
size:改变字体大小,范围:1-7
face:设置字体
格式:<标签 属性的名称="属性的值">
6.<b></b>:加粗
7.<i></i>:斜体
8.<strong></strong>:加粗,带语义的标签
9.<em></em>:斜体,带语义的标签
10.img标签常用属性:
src:指定图片路径
./:代表的是当前路径
../:代表上一级路径
../../:代表上上一级路径
width:指定图片宽度
heigth:图片高度
alt:文件加载失败时的提示信息
11.ul标签是无序列表
内必须嵌套子标签<li>:列表项
属性type:circle-小圆圈,disc-小方块,默认小黑点square
12.ol标签是有序列表,展示1、2、3序列号
常用属性:
type:指定序号的类型,如:a
start:从几开始,必须得写数字
13.a超链接标签
常用的属性:
href:指定要跳转去的链接地址,需要加上http协议,如果访问的是本网站的html文件,可以直接写文件路径,="#",井号是占位符,相当于一个锚
target:以什么方式打开
_self:默认打开方式,在当前窗口打开
_blank:新起一个标签页打开页面
值也可填充frame设置的name名称,这样的话,点击后跳转至此name名称对应的frame框架界面
14.table表格标签
常用属性:
border:指定边框,=1px
width:宽度,=100%,等于铺平网页宽度
height:高度
bgcolor:背景色
align:对齐方式,在table标签上写此属性,表格在网页页面居中(设置值为:center)
tr标签:行
align:对齐方式,在tr标签上写此属性,单元格中内容居中(设置值为:center)
td标签:列
合并单元格:
colspan:跨列操作,把合并的另外一个单元格删除
rowspan:跨行操作
background:设置背景图片
说明:顺序是table标签内嵌套tr标签,tr标签内再嵌套td标签
表格的嵌套:table标签中嵌套table标签
15.input标签
属性type(指定输入项的类型)的属性值:
text:文本输入框
password:密码输入框
file:文件上传按钮
radio:单选按钮,注意:选项为多个,需设置属性name的值相同,这样才会限制此一组中仅可选中一个
checkbox:复选框,可同时选择多个选项
submit:提交按钮,通常搭配属性value使用,设置按钮名称如:value="提交"
button:普通按钮
reset:重置按钮,清空文本框录入内容
hidden:隐藏域(在表单界面中不展示),主要是用来存放页面上一些ID信息(get请求方式,此参数不会展示在链接中)
date:日期选择框
datetime-local:日期+时间选择框
tel:在手机端会弹出纯数字的9宫格软键盘
number:限制文本输入框仅可输入数字,不可录入字母
属性name(在表单提交的时候,当作参数的名称):表单提交时文本录入框显示在网页链接中的名字,如设置name="username",则链接中会展示:username=123
属性id:给输入项取一个名字,以便于后期我们去找到它,并操作它
属性placeholder:文本录入框中默认的灰色提示信息
16.textarea:文本域,可以输入一段文本
属性:
cols:列宽
rows:行宽
17.select:下拉选择标签
option子标签:下拉选项
18.form表单标签:主要是用来向服务器提交数据
属性:
action:指定提交的地址,即页面跳转到哪里
method:
get 方式,默认提交方式,(会将参数拼接在链接的后面,有大小限制,4K)form表单提交的信息会拼接在网页链接的网址中,不安全
post 方式,form表单提交的参数信息,(会将参数封装在请求体中,没有大小限制====通过右键->点击检查:form中查看)不会在网页链接中显示
19.frameset框架标签
属性rows:拆分成几行,说明:最后的取值可以用*,表示占满剩余的百分比,eg:rows="15%,*"
属性cols:拆分成几列
frame:子标签
属性src:链接到的html地址
属性name:给个名称,此名称可设置为a超链接标签点击后跳转至的frame
说明:frameset框架标签存在,则body标签需删除,因为通过frame的src管理了多个html的body标签
day02-CSS&JS
CSS简单的入门
表格布局的缺陷:
1.嵌套层级太多,一旦出现嵌套顺序错乱,整个页面打不到预期效果
2.采用表格布局,页面不够灵活,动其中某一块,整个表格布局的结构全都要变
HTML的块标签:
div标签:默认占一行,自动换行
span标签:内容显示在同一行
CSS概述:
Cascading Style Sheets:层叠样式表
主要作用:
1.美化页面
2.将页面美化和HTML代码进行分离,提高代码的复用性
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在header标签中
<style> 选择器{ 属性名称:属性的值; 属性名称2:属性的值2; } </style>
CSS选择器:帮助我们找到我们要修饰的标签
元素选择器:
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
ID选择器:
以#开头 ID在整个页面中必须是唯一的 取div/span标签的id属性值
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
类选择器:
以.开头 取div/span标签的class属性值
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
CSS的引入方式:
外部样式:通过link标签引入一个外部的css文件
内部样式:直接在style标签内编写CSS代码
行内样式:直接在标签中添加一个style属性,编写CSS样式
CSS浮动:浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性:清除浮动(可以添加一个空的div标签,指定style属性,设置clear)
both:两边都不允许浮动
left:左边不允许浮动
right:右边不允许浮动
流式布局
CSS选择器的优先级:
按照选择器搜索精度来排序: 行内样式》ID选择器〉类选择器》元素选择器
就近原则(即:当某个标签设置了class属性,名称定义了两个,则优先生效的是更靠近被修饰元素的那个css样式)
CSS中的其他选择器:
选择器分组:
选择器1,选择器2{属性的名称:属性的值} ,以逗号隔开,eg:h1,h2,h3{color:red;}
属性选择器:
a[title] :包含某个属性的
a[title='aaa']:指定属性等于某个具体值的
a[href][title]:包含两个属性的
后代选择器:
爷爷选择器 孙子选择器(中间以空格分开 ),找出所有的后代
子元素选择器:
父亲选择器>儿子选择器,(中间以大于号隔开),仅可找到直系儿子
伪类选择器:通常都是应用在a标签上===链接未点击时展示颜色,点击后展示颜色,鼠标悬浮展示颜色
CSS的盒子模型:万物皆盒子
内边距:控制的是盒子内容的距离
padding-top:
padding-right:
padding-bottom:
padding-left:
1 2 3 4 | padding:10px;上下左右都是10px padding:10px 20px;上下是10px 左右是20px padding:10px 20px 30px; 上10px 右20px 下30px 左20px padding:10px 20px 30px 40px;上右下左,顺时针的方向 |
外边距:控制盒子与盒子之间的距离
margin-top:
margin-right:
margin-bottom:
margin-left:
CSS绝对定位:
position:absolute
top:控制距离顶部的位置
left:控制距离左边的位置
JavaScript概述
什么是JavaScript:一种直译式脚本语言
什么是脚本语言?
java源代码》编译成.class文件〉java虚拟机中才能执行
脚本语言:源码》解释执行
js由我们的浏览器来解释执行
HTML(超文本标记语言):设计网页,决定了页面的框架
CSS(层叠样式表):用来美化我们的页面,将美化和HTML代码进行分离
JS:脚本语言,由浏览器解释执行,弱类型语言(var i),提供用户的交互的
JS的组成:
ECMAScript:核心部分,定义js的语法规范
DOM:document Object Model 文档对象模型,主要是用来管理页面的
BOM:Browser Object Model 浏览器对象模型,前进、后退、页面刷新、地址栏、历史记录、屏幕宽高
JS的语法
变量弱类型:var i=true
区分大小写
语句结束之后的分号,可以有,也可以没有
写在script标签中
JS的数据类型
基本类型
string
number
boolean
undefine
null
eg:alert(typeof i)==alert表示弹框,结果展示变量所属类型
引用类型
对象,内置对象
类型转换
js内部自动转换
JS的运算符和语句
运算符和java一样
"==="全等号:值和类型都必须相等
"=="值相等就可以了
语句和java一样
JS的输出
alert():直接弹框
document.write() 向页面输出
console.log() 向控制台输出
innerHTML:向页面输出,可设置标签属性,如字体颜色===可用来修改页面内容(文本替换)
innerText:向页面输出,纯文本不识别标签
获取页面元素:document.getElementById("Id的名称")
JS声明变量:
var 变量的名称=变量的值;
JS声明函数:
var 函数的名称=function(){
}
function函数的名称(){
}
JS的开发步骤
1.确定事件(注意:onsubmit事件比较特殊,需要一个返回,eg:onsubmit="return chechForm()")
2.通常事件都会触发一个函数
3.函数里面通常都会去操作页面元素,做一些交互动作
说明:通过document.getElementById("Id的名称")获取到文本输入框input对象,再通过value获取到填写的文本内容值
var email=document.getElementById("email");
var uEmail=email.value;
正则表达式需要前后添加斜杠,eg:/正则表达式/===正则表达式对象.test(校验内容),返回true或false
day03-JS
定时器
HTML DOM setInterval()方法
定义和用法
setInterval()方法可按照指定的周期(以毫米计)来调用函数或计算表达式。
setInterval()方法会不停的调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。
语法:
setInterval(code,millisec)
code:要调用的函数或要执行的代码块
millisec:周期性执行或调用code之间的时间间隔,以毫秒计算
setTimeout()方法
用于在指定的毫秒数后调用函数或计算表达式
图片隐藏
var img = document.getElementById("img1");
img.style.display="none";
图片显示
img.style.display="block";
注册表单校验涉及的事件
onfocus:获得焦点事件
onblur:失去焦点事件
onkeyup:键盘按键弹起事件
补充:
文档加载完成的事件 onload事件
ondbclick:双击事件
鼠标移入:onmouseinter
鼠标移出:onmouseout
引入一个外部js文件
1 | < script src="js文件的路径" type="text/javascript"/> |
DOM的常见操作
DOM( Document Object Model ) 文档对象模型,提供了很多对标签增删改查的操作。
下边分享DOM中常见的增删改查操作:
常用方法:
1.获取节点:
document.getElementById(idName) //通过id号来获取元素,返回一个元素对象
document.getElementsByName(name) //通过name属性获取id号,返回元素对象数组
document.getElementsByClassName(className) //通过class来获取元素,返回元素对象数组(ie8以上才有)
document.getElementsByTagName(tagName) //通过标签名获取元素,返回元素对象数组
document.querySelector() //ES6标准,通过css选择器获取元素。返回匹配得元素
document.querySelectorAll() //ES6标准,通过css选择器获取元素,返回类数组集合
2.获取/设置元素的属性值:
element.getAttribute(attributeName) //括号传入属性名,返回对应属性的属性值
element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值
3.创建节点Node:
document.createElement("h3") //创建一个html元素,这里以创建h3元素为例
document.createTextNode(String); //创建一个文本节点;
document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例
4.增添节点:
element.appendChild(Node); //往element内部最后面添加一个节点,参数是节点类型
elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
5.删除节点:
element.removeChild(Node) //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null
element.removeAttribute(new,old)
常用属性:
1.获取当前元素的父节点 :
element.parentNode //返回当前元素的父节点对象
2.获取当前元素的子节点:
element.chlidren //返回当前元素所有子元素节点对象,只返回HTML节点
element.chilidNodes //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)
element.firstChild //返回当前元素的第一个子节点对象
element.firstElementChild //ie6,7,8 不兼容
element.lastChild //返回当前元素的最后一个子节点对象
element.lastElementChild //ie6,7,8 不兼容
3.获取当前元素的同级元素:
element.nextSibling //返回当前元素的下一个同级元素 没有就返回null
element.previousSibling //返回当前元素上一个同级元素 没有就返回null
4.获取当前元素的文本:
element.innerHTML //返回元素的所有文本,包括html代码
element.innerText //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码
5.获取当前节点的节点类型:
node.nodeType //返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。
6.设置样式:
element.style.color=“#eea”; //设置元素的样式时使用style,这里以设置文字颜色为例。
select标签多行显示属性:
multiple="multiple" 允许多选
checked属性,值设置为checked,表示input标签的复选框已被选中
转译符号:& eg:>,大于号
修改行的颜色:
row.bgColor="red"
row.style.backgroundColor="black"
row.style.background="red"
"background-color:red"
"background:red"
day04-JQuery
JQuery概述
javaScript函数库
JQuery的作用:
1.写更少的代码,做更多的事情(write Less,Do more)
2.将js代码和HTML页面代码进行分离
JQ的入门案例
JQ函数关于文档加载完成(onload)事件的三种写法:
JQuery(document).ready(function(){
alert("第一种写法");
});
$(document).ready(function(){
alert("第二种写法");
});
$(function(){
alert("第三种写法");
});
js加载完成的事件:
window.onload = function(){
alert("js写法");
}
JQ和JS对象之间的转换
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <! DOCTYPE HTML> < html > < head > < meta charset="UTF-8"> <!--引入JQ的js文件--> < script > function changeJS(){ var div = document.getElementById("div1"); div.innerHTML = "JS成功修改了内容"; //将JS对象转成JQ对象 //$(div).html("转成JQ对象来修改内容"); } $(function(){//给按钮绑定事件 $("#btn2").click(function(){//找到div $("#div1").html("JQ方式成功修改了内容"); //将JQ对象转换成JS对象来用 var div = $("#div1"); var jsDiv = div.get(0); //也可以 var jsDiv = div[0]; });}); </ script > </ head > < body > < input type="button" value="JS修改div内容" onclick="changeJS()"/> < input type="button" value="JQ方式修改div内容" id="btn2"/ > < div id="div1"> 这里的内容要被JS/JQ代码修改掉 </ div > </ body > </ html > |
JQ的动画效果
show():显示
hide():隐藏
slideUp:向下滑动(窗帘拉上),隐藏
slideDown:向上滑动(窗帘拉下),显示
fadeIn:淡入
fadeOut:淡出
animate: 自定义动画
JQuery中的选择器
让我们能够更加精确找到我们要操作的元素
JQ中根据ID查找元素
1 2 3 4 5 | 全都是根据选择器去找的< br >#ID{ } .类名{ } $("#ID的名称") |
补充:link标签引入css样式文件
基本选择器
ID选择器:#ID的名称
类选择器:以.开头 .类名
元素选择器:标签的名称
通配符选择器:*
选择器分组:选择器1,选择器2
层级选择器
子元素选择器:选择器1>选择器2===找出所有儿子
后代选择器:选择器1 选择器2====找出所有儿孙
相邻兄弟选择器:选择器1+选择器2====找出紧挨着的一个弟弟
找出所有弟弟选择器:选择器1~选择器2
基本过滤器
说明:css() :修改css样式
$("div:first").css("background-color","green"); //过滤出所有div中第一个元素
$("div:even").css("background-color","green"); //过滤出所有div中索引为偶数位的div
$("div:odd").css("background-color","green"); //过滤出所有div中索引为奇数位的div
$("div:gt(2)").css("background-color","green"); //过滤出所有div中找出索引大于2的
:last
:lt(index)
:eq(index)
属性过滤器
$("a[href]").css("background-color","green"); //过滤出包含属性href的所有a标签元素
$("a[href][title]").css("background-color","green"); //过滤出包含属性href和title的标签
$("a[href][title='tit1']").css("background-color","green"); //过滤出包含属性href和title,且title属性值等于tit1的标签
说明:红色字体也可写成^tit1(以tit1开头),tit1$(以tit1结尾),tit1*(包含tit1)
表单过滤器
$(":input").css("background-color","green"); //注意,这里过滤出来的并非只有input标签元素,包含所有输入框的元素,如textarea
:text 找出type类型为text的
:password
说明:过滤器都是在选择器的基础上进行过滤的,通过冒号:过滤
表单对象属性
$("select option:selected").css("background-color","green"); //找出select标签中被选中的选项
:checked
JQ的开发步骤:
1.导入JQ相关的包
2.文档加载完成的事件($(function(){});),页面初始化:绑定事件,启动定时器
3.确定事件,如:onclick
4.实现事件所要触发的函数
5.函数里面再去操作我们要操作的元素
JQ的表格全选和全不选
attr:操作一些自定义的属性 <img abc="123" />
prop:通常是用来操作元素固有属性的,建议大家使用prop来操作属性
prop()方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性,如<a>标签的href属性。具体语法示例如下。
1 2 | $(selector).prop("属性名") //获取属性值 $(selector).prop("属性", "属性值") //设置属性值 |
下面我们通过代码演示prop()方法的使用。
1 2 3 4 5 | < a href="http://localhost" title="主页"></ a > < script > console.log($("a").prop("href")); //输出结果: http://localhost $("a").prop("title", "首页"); //设置title的值为“首页" </ script > |
开发中,还会经常使用prop('属性')获取表单元素的checked值,示例代码如下。
1 2 3 4 5 6 7 | < input type="checkbox" checked> < script > //获取表单元素的checked值 $("input").change(function(){ console.log($(this).prop("checked")); //复选框选中时,输出结果为true }); </ script > |
上述代码中,第1行代码设置了input的type值为checkbox,表示复选框。第4行代码给input绑定了change事件,当表单元素状态发生变化时触发。如果复选框处于选中状态,则输出结果为true,否则输出false。
技巧:
网页上右键,选择检查,找到对应元素,然后,再在元素标签上右键,选择copy》selector:显示元素的选择器结果
JQ添加节点(文档操作):
appendChild(JS)
1.append:添加子元素到末尾
2.appendTo:给自己找个爹,将自己添加到别人家里
3.prepend:在自己最前面添加子节点
4.after:在自己的后面添加一个兄弟
5.before:在自己的前面添加一个兄弟
6.empty:清空所有子节点
遍历函数:each(object,[callback])
1.JQ对象调用遍历
$("数组对象").each(function(index,data))
1 2 3 4 5 | $([上海市,深圳市,广州市,北京市]).each(function(i,n){ //function中第一个参数表示数组索引,第二个参数表示数组元素值 console.log(i+"===="+n); }) |
2.JQ的函数调用
$.each(arr,function(index,data))
1 2 3 4 5 | $.each([上海市,深圳市,广州市,北京市],function(i,n){ //each函数参数,each(object,[callback]):第一个表示需要被遍历的数组或对象,第二个表示每个成员/元素执行的回调函数 console.log(i+"===="+n); }) |
day05-BootStrap
trigger( event, [data] )
在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个’submit’,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
triggerHandler( event, [data] )
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作:
trigger()会操作jQuery对象匹配的所有元素,而triggerHandler()只会影响匹配到的第一个元素。
is()
JSON格式
JSON对象
1 2 3 4 | { key1:value1, key2:value2 } |
JSON数组
1 | [{key:value},{key:value},{key:value}] |
ajax请求:
$.get(url,function(data){})
bootstrap概述
1.轻量级开发响应式页面的前端框架
2.全局CSS、组件、JS插件
3.栅格系统:将页面的宽度分为12个等分
col-lg-数字:在超宽屏幕上使用
col-md-数字:在中等屏幕上,PC电脑
col-sm-数字:在平板电脑上
col-xs-数字:在手机上
注意:jquery文件的引入,一定要在bootstrap核心javascript文件之前引入。
什么是bootstrap?
是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。
什么是响应式页面?
适应不同的分辨率显示不同的样式,提高用户的体验
全局CSS样式:css样式
栅格系统
将屏幕划分成12个格子/12列
class='row' 当前是行
行里面放的是列 col-屏幕分辨率-数字(每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)
col-lg-数字:在超宽屏幕上使用
col-md-数字:在中等屏幕上,PC电脑
col-sm-数字:在平板电脑上
col-xs-数字:在手机上
组件:导航条、进度条、字体
javascript插件:轮播图
总结:
HTML(超文本标记语言):设计网页,决定了页面的框架
CSS(层叠样式表):用来美化我们的页面,将美化和HTML代码进行分离
JS:脚本语言,由浏览器解释执行,弱类型语言(var i),提供用户的交互的
jquery:javascript函数库,进一步的封装
选择器:
ID选择器
类选择器
元素选择器
通配符选择器
选择器分组
层级选择器
后代选择器
子元素选择器
相邻兄弟选择器
兄弟选择器:找出所有的弟弟
属性选择器:
选择器[属性名称="属性值"]
表单选择器:
:input
:text
:password
右键》copy〉selector:可拷贝选择器路径
子元素过滤器:nth-child(数字)
基本过滤器:
:first
:last
:even
:odd
:gt
:lt
:eq
表单对象属性:
:selected
:checked
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现