目录
HTML && CSS入门
专业词汇
html语法细节
VScode安装地址
Documentation for Visual Studio Code
VScode需要插件
VScode常用配置
HTML常见标签
<h1>一级标题 </h1> 标题标签（最多六级）
<p> 段落内容 </p> 段落标签
<br> 换行标签
<hr> 换行线
有序列表 ol
无序列表 ul
列表项 li
可嵌套
超链接标签
<a href = "https://www.baidu.com">百度链接</a>
图片标签 <img>
表格标签
常用： rowspan 表示跨行占用 colspan 表示跨列占用
<table border="lpx" style="margin: 0px auto; width: 500px;">
<thead> 设置表头，第一行
<tr> 一个 tr 表示第一行
<th>排名</th> 一个 th 表示第一列
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">前三名升职加薪</td> 表示包括自身占用 2 行
</tr>
<tr>
<td colspan="2">2000</td> 表示包括自己占用 2 列
</tr>
</tbody>
<tfoot>
</tfoot>
</table>表单标签
<body>
<form action="08welcome.html" method="get">
用户名 <input type="text" name="username" /> <br>
密码 <input type="password" name="passwd"/> <br>
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</form>
</body>
表单提交方式
常见表单项
<body>
<form action="08welcome.html" method="get">
<input type="hidden" name="id" value="123">
<input type="text" name="Uid" value="456" readonly="readonly">
<br>
用户名 <input type="text" name="username" /> <br>
密码 <input type="password" name="passwd"/> <br>
<br>
性别：
<input type="radio" name="gender" value="1" checked > 男
<input type="radio" name="gender" value="0"/> 女
<br>
爱好:
<input type="checkbox" name="hobby"> 篮球
<input type="checkbox" name="hobby"> 羽毛球
<input type="checkbox" name="hobby"> 足球
<input type="checkbox" name="hobby"> 乒乓球
<br>
个人简介：
<textarea name="intro" style="width: 300px; height: 100px;"></textarea>
<br>
籍贯:
<select name="pro">
<option value="1">津</option>
<option value="2">沪</option>
<option value="3">贵</option>
<option value="4">川</option>
<option value="0" selected>-请选择-</option>
</select>
<br>
请选择头像:
<input type="file">
<br>
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</form>
</body>布局标签
span 标签套用到 div里面
<body style="background-color: azure;">
<div style="border: 1px solid red; width: 300px; height: 100px; margin: 10px auto; background-color: aqua;">123</div>
<div style="border: 1px solid red; width: 300px; height: 100px; margin: 10px auto; background-color: aquamarine;">456</div>
<div style="border: 1px solid red; width: 300px; height: 100px; margin: 10px auto; background-color: bisque;">Java基础: 尚硅谷Java零基础全套视频教程(宋红康主讲，java入门自学必备)
Java基础(上部): <span style="border: 1px slateblue; font-size: 20px;color: greenyellow;">尚硅谷</span>2024最新Java入门视频教程（上部）java零基础入门教程
Java基础(下部):尚硅谷2024最新Java入门视频教程(下部) java零基础入门教程
IDEA: 尚硅谷IDEA安装idea实战教程（百万播放，新版来袭）</div>
<span style="border: 1px solid greenyellow; width: 500px; height: 100px;">555</span>
</body>特殊字符
w3school 在线教程 在文档中了解，不需要硬记
CSS
<body>
<!--
Css三种引入方式：
1.行内式
2.内嵌式
3.外部样表式
-->
<!-- 1 直接实现改变 -->
<input type="button" value="按钮"
style="
width: 60px;
height: 40px;
background-color: aquamarine;
color: rgb(35, 35, 172);
font-size: 20px;
font-family: '隶书';
border: 2px solid greesn;
border-radius: 5px;"
>
<!-- 2 内嵌式 实现统一改变，不能统一改变别的文件-->
<style>
input{
width: 60px;
height: 40px;
background-color: aquamarine;
color: rgb(35, 35, 172);
font-size: 20px;
font-family: '隶书';
border: 2px solid greesn;
border-radius: 5px;
}
</style>
<input type="button" value="按钮">
<!-- 3 外部样表式 -->
<link rel="stylesheet" href="btn.css">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
</body>CSS元素选择器
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--元素选择器-->
<!-- <style>
input{
width: 80px;
height: 40px;
background-color: aqua;
color: white;
font-size: 20px;
font-family: '隶书';
line-height: 30px;
border: 5px;
}
</style>
<input type="button" value="按钮">
<input type="button" value="按钮">
-->
<!--id选择器-->
<!-- <style>
#btn4{
width: 80px;
height: 40px;
background-color: aqua;
color: white;
font-size: 20px;
font-family: '隶书';
line-height: 30px;
border: 5px;
}
</style>
-->
<!--class选择器-->
<style>
.shapeClass{
width: 80px;
height: 40px;
border-radius: 5px;
}
.colorClass{
background-color: rgb(179, 241green, 85blue);
color: red;
border: 3px solid green;
}
.fontClass{
font-size: 20px;
font-family: '隶书';
line-height: 30px;
}
</style>
</head>
<body>
<input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮">
<input id="btn4" type="button" value="按钮">
<input id="btn5" type="button" value="按钮">
</body>CSS浮动
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid rgb(112, 136,112);
background-color: beige;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
/* display: inline; /*display 实现将块转换为同一行内,但是会使对块的设置失效 block 块 inline 行内*/
}
.d1{
background-color: greenyellow;
float: right;
}
.d2{
background-color: aqua;
float: right;
}
.d3{
background-color: blueviolet;
float: right;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</div>
</body>CSS定位
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
/* display: inline; /*display 实现将块转换为同一行内,但是会使对块的设置失效 block 块 inline 行内*/
}
.d1{
background-color: greenyellow;
position: fixed; /*网页广告用的fixed 相对浏览器窗口 static 默认 absolute 绝对 relative 相对元素原本位置 */
top: 30px;
left: 30px;
}
.d2{
background-color: aqua;
}
.d3{
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</div>
</body>CSS盒子模型
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid rgb(112, 136,112);
background-color: beige;
margin: 0px auto;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
/* display: inline; /*display 实现将块转换为同一行内,但是会使对块的设置失效 block 块 inline 行内*/
}
.d1{
background-color: greenyellow;
margin: 10px;
padding: 30px;
}
.d2{
background-color: aqua;
margin-right: 10px;
}
.d3{
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</div>
</body>JavaScript(JS)
两种引入方式
声明函数
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn1{
width: 150px;
height: 40px;
font-size: 24px;
font-family: '隶书';
background-color: aqua;
color: black;
border: 3px solid greenyellow;
border-radius: 5px;
}
</style>
<!--内嵌式-->
<script>
function suprise(){
/*弹窗提示*/
alert("hello 我是惊喜!!")
}
</script>
<!--通过外部文件引入-->
<script src="js/button.js" type="text/javascript"></script>
<script>
function sayHello(){
alert("hi javaScript")
}
</script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
<button class="btn2" onclick="sayHello()">点我有惊喜</button>
</body>数据类型与变量
变量声明特点
常见运算符
分支结构
其中 if 分支与 switch 分支结构与java相同
if 判断不同点
循环结构
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var i = 1
while(i <= 9){
var j = 1
while(j <= i){
document.write(i + " * " + j + " = " +(i*j) + "       ")
j++
}
document.write("<hr>")
i++
}
for(var i = 1;i <= 9; i++){
for(var j = 1;j <= i; j++){
document.write(i + " * " + j + " = " +(i*j) + "       ")
}
document.write("<br>")
}
var arr = ["北京","上海","广州"]
document.write("<ul>")
for(var index in arr){
document.write("<li> "+ arr[index] + "</li>")
}
document.write("</ul>")
</script>
</head>函数
创建对象
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//初始化对象
var person = new Object()
//初始化属性
person.name = "张三"
person.age = 20
//初始化方法
person.eat = function(food){
console.log(this.age + "岁的"+ this.name +"正在吃" + food)
}
var person2 = {
"name" : "李四",
"age" : 21,
"eat" : function(food){
console.log(this.age + "岁的"+ this.name +"正在吃" + food)
}
}
//访问属性
console.log(person.name)
console.log(person.age)
//调用方法
person.eat("西瓜")
//访问属性
console.log(person2.name)
console.log(person2.age)
//调用方法
person2.eat("南瓜")
</script>
</head>JSON格式
JS_前端的使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var person='{"name":"shily","sex":"女","age":"23"}';//json字符串
console.log(person)
console.log(person.name)
console.log(typeof person)
//通过 JSON.parse() 方法将 json字符串 转换为 json对象
var person = JSON.parse(person)
console.log(person)
console.log(person.name)
console.log(typeof person)
//通过 JSON.stringify() 方法将 json对象 转换为 json字符串
var objToStr = JSON.stringify(person);
console.log(objToStr)
console.log(objToStr)
console.log(typeof objToStr)
</script>
</head>常见事件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun1(){
console.log("点击了1")
}
function fun2(){
console.log("点击了2")
}
function fun3(){
alert("双击 666!")
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="fun1(),fun2()" ondblclick="fun3()"/>
</body>表单事件
获得焦点：输入的地方变为一闪一闪的即为获得焦点
光标的移动，悬停，离开等
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function testFocus(){
console.log("获得焦点了!!!")
}
function testblur(){
console.log("获得焦点了!!!")
}
function testchange(value){
console.log("内容改变为：" + value)
}
function testchange2(vlaue){
console.log("籍贯发生改变了!!! 改变为：" + vlaue)
}
function testsubmit(){
// alert("表单发生已提交!!!")
var chose = confirm("确定要提交吗？")
if(!chose){
event.preventDefault(); //阻止组件默认行为
}
}
function testReset(){
alert("表单要重置了")
}
</script>
</head>
<body>
<form action="01js引入方式.html" method="get" onsubmit="testsubmit()" onreset="testReset()">
用户昵称：<input type="text"
name="realName"
onfocus="testFocus()"
onblur="testblur()"
onchange="testchange(this.value)"> <br>
登录账号：<input type="text" name="loginName"> <br>
选择籍贯:
<select onchange="testchange2(this.value)">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>成都</option>
</select>
<br>
<input type="submit" value="注册">
<input type="reset" value="清空" onreset="testReset">
</form>
</body>事件动态绑定
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
//通过dom获得要操作的元素
var btn = document.getElementById("btn1")
//绑定一个事件
btn.onclick=function(){
alert("按钮单击了!!!")
//通过dom编程触发事件，相当于某些事件发生了
//通过dom编程触发div的单击事件
div1.onclick()
}
//为div绑定以事件
var div1 = document.getElementById("d1")
div1.onclick = function(){
div1.style.backgroundColor="red"
}
}
</script>
<style>
.div1{
width: 100px;
height: 100px;
background-color: rgb(23, 226, 23);
}
</style>
</head>
<body>
<div id="d1" class="div1">
<h3>变色块</h3>
</div>
<button id="btn1">按钮</button>
</body>BOM编程
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//三种弹窗方式 alert prompt confirm
//定时任务 两秒后向控制台打印 hello
function fun1(){
window.alert("信息的提示")
}
function fun2(){
var name = prompt("请输入姓名")
console.log(name)
}
function fun3(){
var qu = confirm("请确认输入正确")
console.log(qu)
}
function fun4(){
setTimeout(function(){
console.log("你在干什么!!!")
},2000)
}
</script>
</head>
<body>
<button onclick="fun1()" class="button1">信息提示框</button>
<button onclick="fun2()">信息输入框</button>
<button onclick="fun3()">信息确认框</button>
<button onclick="fun4()">定时任务</button>
</body>window对象常见属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//三种弹窗方式 alert prompt confirm
//定时任务 两秒后向控制台打印 hello
//history 窗口访问历史
//location 地址
//sessionStorge 用于存储一些会话级数据 (浏览器关闭时删除)
//localStorage 用于存储一些持久级数据 (浏览器关闭时数据还在)
//console log
function fun1(){
window.alert("信息的提示")
}
function fun2(){
var name = prompt("请输入姓名")
console.log(name)
}
function fun3(){
var qu = confirm("请确认输入正确")
console.log(qu)
}
function fun4(){
setTimeout(function(){
console.log("你在干什么!!!")
},2000)
}
function funA(){
//返回上一页
history.forward()
}
function funB(){
//往后翻页
history.back()
//history.go(1) 向前翻一页
}
function funC(){
location.href="https:www.baidu.com"
}
function funD(){
//向 sessionStorage 中存储数据
sessionStorage.setItem("keya" , "valueA")
//向 localStorage 中存储数据
localStorage.setItem("keyb" , "valueB")
}
function funF(){
console.log(sessionStorage.getItem("keya"))
console.log(localStorage.getItem("keyb"))
}
function funE(){
sessionStorage.removeItem("keya")
localStorage.removeItem("keyb")
}
</script>
</head>
<body>
<button onclick="funD()">存储数据</button>
<button onclick="funF()">读取数据</button>
<button onclick="funE()">清空数据</button>
<hr>
<button onclick="funA()">上一页</button>
<button onclick="funB()">下一页</button>
<button onclick="funC()">百度</button>
<a href="https://www.baidu.com">百度</a>
<hr>
<button onclick="fun1()" class="button1">信息提示框</button>
<button onclick="fun2()">信息输入框</button>
<button onclick="fun3()">信息确认框</button>
<button onclick="fun4()">定时任务</button>
</body>DOM编程
获取元素的几种方式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1、获得 document dom树
window.document
2、从 document 中获得操作的元素
1）直接获取
fun1、2、3、4
2）间接获取
fun A、B、C
3、从元素进行操作
1）操作元素的属性
2）操作属性的样式
3）操作元素的文本
4）增删元素
*/
function fun1(){
//获得document
//通过document获得元素
var el1 = document.getElementById("username") //根据元素的id值获取页面上唯一的一个元素
console.log(el1)
}
function fun2(){
var els = document.getElementsByTagName("input") //根据标签值获取多个元素的属性值
for(var i=0;i<els.length;i++){
console.log(els[i])
}
}
function fun3(){
var els = document.getElementsByName("aaa") //根据name 属性值获取多个元素
for(var i=0;i<els.length;i++){
console.log(els[i])
}
}
function fun4(){
var els = document.getElementsByClassName("a") //根据元素 class 属性值获取多个元素
for(var i=0;i<els.length;i++){
console.log(els[i])
}
}
function funA(){
//先获取父元素，在获取子元素
var div01 = document.getElementById("div01")
//获取所有子元素
var cs = div01.children
for(var i=0;i<cs.length;i++){
console.log(cs[i])
}
//获取第一个子元素
console.log(div01.firstChild)
//获取最后一个子元素
console.log(div01.lastChild)
}
function funB(){
//获取子元素
var pinput = document.getElementById("password")
//通过获取子元素得到父元素
console.log(pinput.parentElement)
}
function funC(){
//获取元素
var pinput = document.getElementById("password")
//获取当前元素的兄弟元素
console.log(pinput.previousElementSibling) //获取前一个兄弟元素
console.log(pinput.nextSibling) //获取后一个兄弟元素
}
</script>
</head>
<body>
<div id="div01">
<input type="text" class="a" id="username" name="aaa" />
<input type="text" class="b" id="password" name="aaa" />
<input type="text" class="a" id="email" />
<input type="text" class="b" id="address" />
</div>
<input type="text" /> <br>
<input type="button" value="通过父元素获取子元素" onclick="funA()" id="btn01">
<input type="button" value="通过子元素获取父元素" onclick="funB()" id="btn02">
<input type="button" value="通过当前元素获取兄弟元素" onclick="funC()" id="btn03">
<hr>
<input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01">
<input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02">
<input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03">
<input type="button" value="根据class属性值获取过个元素" onclick="fun4()" id="btn04">
</body>操作元素的属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun1(){
var in1 = document.getElementById("in1")
//元素.属性名
console.log(in1.type)
console.log(in1.value)
in1.type="button"
in1.value="嗨！！"
in1.style.color="green"
}
function fun2(){
var in2 = document.getElementById("in1")
in2.type = "text"
in2.value = "hello"
in1.style.color="red"
}
function fun3(){
var in2 = document.getElementById("in1")
in2.value = "你好!!!"
in1.style.color="red"
//有横杠的要改为驼峰式
in1.style.borderRadius= "10px"
}
function fun4(){
var div01 = document.getElementById("div01")
//语法：
// 元素名.innerText 只识别文本
// 元素名.innerHTML 识别文本同时可以识别html代码
console.log(div01.innerText)
div01.innerText="<h1>嗨嗨嗨!!!<h1>"
div01.innerHTML="<h1>我是标题!!!<h1>"
}
</script>
<style>
.in1{
color: rgb(228, 23, 23);
background-color: blue;
}
</style>
</head>
<body>
<input type="text" value="hello" id="in1">
<hr>
<div id="div01">hello</div>
<hr>
<button onclick="fun1()">变</button>
<button onclick="fun2()">变回来</button>
<hr>
<button onclick="fun3()">改变操作样式</button>
<hr>
<button onclick="fun4()">操作文本</button>
</body>DOM编程对元素的操作
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function addCS(){
//创建一个新的子元素
var csli = document.createElement("li") //<li> </li>
//设置子元素的属性与文本
csli.id="cs"
csli.innerText="长沙"
//将子元素放入父元素
var citys = document.getElementById("City")
citys.appendChild(csli)
}
function addDZ(){
//创建一个新的子元素
var dzli = document.createElement("li") //<li> </li>
//设置子元素的属性与文本
dzli.id="dz"
dzli.innerText="达州"
//获取父元素
var citys = document.getElementById("City")
//获取参照元素
var target = document.getElementById("cs")
citys.insertBefore(dzli,target)
}
function replaceDZ(){
//创建一个新的子元素
var dzli = document.createElement("li") //<li> </li>
//设置子元素的属性与文本
dzli.id="dz"
dzli.innerText="达州"
//获取父元素
var citys = document.getElementById("City")
//获取参照元素
var target = document.getElementById("cs")
citys.replaceChild(dzli,target)
}
function deleteDZ(){
//哪个元素调用了remove该元素就会从dom树中删除
var dazhou = document.getElementById("dz")
dazhou.remove()
}
function clearCity(){
var citys = document.getElementById("City")
/* 这个方法可以保留 <ul> </ul>
var citys = document.getElementById("City")
var firstChild = citys.firstChild
while(firstChild != null){
firstChild.remove()
firstChild = citys.firstChild
} */
//直接把 ul 删掉
citys.remove()
}
</script>
</head>
<body>
<ul id="City">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="sz">深圳</li>
<li id="gz">广州</li>
</ul>
<hr>
<!--在城市列表后面增加一个子元素<li id=cs>长沙</li> -->
<button onclick="addCS()">增加长沙</button>
<hr>
<!--在上海前面增加一个子元素<li id=dz>达州</li> -->
<button onclick="addDZ()">增加达州</button>
<!--将城市列表中的长沙替换为达州 -->
<button onclick="replaceDZ()">替换为达州</button>
<!--将城市列表中删除达州 -->
<button onclick="deleteDZ()">删除达州</button>
<!--清空城市列表 -->
<button onclick="clearCity()">删除城市列表</button>
</body>正则表达式
常见应用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//验证
//定义一个正则表达式
var reg = /o/
//自定义一个字符串
var str = 'hello world!'
//校验是否符合正则规则
console.log(reg.test(str))
//匹配 /o/ 默认匹配第一个 /o/g 后面g代表全局匹配 返回的是数组
var reg2 = /o/g
var result = str.match(reg2)
console.log(result)
//替换 /o/gi 表示全局查找替换并忽略大小写
var newStr = str.replace(reg2,'@')
console.log(newStr)
var str1 = 'java love me'
var str2 = 'i love java'
// /^java/表示以 java 开头 /java$/表示以 java 结尾
var reg3 = /^java/
// /^java$/ 以java开头并以java结尾
console.log(reg3.test(str1))
console.log(reg3.test(str2))
//校验邮箱是否合法
var email = "3028787503@qq.com"
var faem = "654s664644@wechat.com"
reg_email = /^[1-9a-zA-Z.-_]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/
console.log(reg_email.test(email))
console.log(reg_email.test(faem))
</script>
</head>XML
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
