html
1.基础标签
<!--html5 标识-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--页面的字符集-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>
<hr>
<!--
html 表示颜色
1.英文单词：red,pink,blue....
2.rgb(值1，值2，值3)，值的取值范围：0~255 rgb(255,0,0)
3.#值1值2值3：值的范围：00~FF
-->
<font face="楷体" size="5" color="#ffc0cb">传智教育</font>
<hr>
乾坤未定，你我皆是黑马~<br>
乾坤未定，你我皆是黑马~
<hr>
<p>
乾坤未定，你我皆是黑马~
</p>
<p>
乾坤未定，你我皆是黑马~
</p>
<hr>
<!--
b 加粗
i斜体
u下划线
-->
沙滩和树流淌<br>
<b>沙滩和树流淌</b><br>
<i>沙滩和树流淌</i><br>
<u>沙滩和树流淌</u>
<hr>
<center>
<b>沙滩和树流淌</b>
</center>
<h3>庆祝中国-洪都拉斯建交一周年招待会在北京举行</h3>
<font color="yellow"><hr></font>
<p>
<font color="red">中新网</font>北京3月22日电 (记者 余湛奕)中国人民对外友好协会和洪都拉斯驻华使馆22日在北京共同举办招待会，庆祝中国与洪都拉斯建交一周年。中国人民对外友好协会秘书长沈昕、洪都拉斯驻华大使蒙卡达出席并致辞。</p>
<p>
沈昕表示，洪都拉斯是中国第182个建交国，是中国的新朋友。中国与洪都拉斯正式建交，开启两国关系新的历史篇章。一年来，在两国元首战略引领和各界共同努力下，中洪关系起航定向，快速发展，呈现出蓬勃活力和广阔前景。
</p>
<font color="yellow"><hr></font>
</body>
</html>
2.图片音频视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
资源路径：
1.绝对路径：完整路径
2.相对路径：
xxx/html/02-图片音频视频
xxx/html/QQ图片20231123171853.jpg
./QQ图片20231123171853.jpg ./当前目录
QQ图片20231123171853.jpg
xxx/html/02-图片音频视频
xxx/img/QQ图片20231123171853.jpg
../img/QQ图片20231123171853.jpg ../当前目录退一级，前目录
尺寸单位：
1.px:像素
2.百分比
-->
<img src="QQ图片20231123171853.jpg" width="500" height="400" >
<!--
音频
<audio scr="b.mp3" controls></audio>
视频
<video scr="c.mp4" controls width="500" height="300"></video>
-->
</body>
</html>
3.超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.itcast.cn">点我有惊喜</a>
<!--
href:指定访问资源的URL
target:指定打开资源的方式
*_self:默认值，在当前页面打开
*_blank:在空白页面打开
-->
</body>
</html>
4.列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="A">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
5.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr align="center">
<th colspan="2">品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td>无</td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td rowspan="2">009</td>
<td>无</td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td>无</td>
<td>小米</td>
</tr>
<!--
<table>:定义表格
*border:规定表格边框的宽度
*width:规定表格的宽度
*cellspacing:规定单元格之间的空白
<tr>:定义行
*align:规定单元格之间的对齐方式
<td>:定义单元格
*rowspan:规定单元格可横跨的行数
*colspan:规定单元格可横跨的列数
<th>:定义表头单元格
-->
</table>
</body>
</html>
6.布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
7.表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="username">
<input type="submit">
</form>
<!--
form:
action:指定表单数据提交的URL
*:表单项数据要想被提交，则必须指定其name属性
method:指定提交方法
1.get:默认值
*请求参数会拼接在URL后面
2.post:
*请求参数会拼接在http请求协议的请求集体中
-->
</body>
</html>
8.表单项标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<label for="username"> 用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码： </label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file">
<br>
城市：
<select name="city">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select><br>
个人描述：
<textarea cols="20" rows="5"></textarea><br>
<input type="submit" value="免费注册">
<input type="reset"> <!--重置-->
<input type="button" value="一个按钮">
css
1.导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color:red;
}
</style>
<link href="../css/demo.css" rel="stylesheet">
</head>
<body>
<div style="color:red">hello css</div>
<span>hello css</span>
<p>hello css</p>
</body>
</html>
2.css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:red;
}
#name{
color:blue;
}
.cls{
color:pink;
}
</style>
</head>
<body>
<div >div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>
<span class="cls">span</span>
<!--
css选择器
分类
1.元素选择器
元素名称{color:red;} div
2.id选择器
#id属性值{color:red;} #name
<div id="name">hello css2</div>
3.类选择器
.class属性值{color:red;} .cls
<div class='cls">hello css3</div>
class可以多个一样
id不能一样
-->
</body>
</html>
js
1.引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello js");
</script>
<!--
<script src="../js/demo.js"></script>
-->
</body>
</html>
2.输出语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.alert("hello js");//写入警告框
document.write("hello is 2~");//写入html界面
console.log("hello js 3~");//写入浏览器的控制台
</script>
</body>
</html>
3.变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var test=20;
test="张三";
alert(test);
/*
var:
1.作用域：全局变量
2.变量可以重复定义
let:
只在let关键字所在的代码块内有效
不可重复使用
const:
一旦声明，常量的值就不能改变
*/
</script>
</body>
</html>
4.数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//number
<!-- var age=20;-->
<!-- var price=99.8;-->
<!-- alert(typeof age);-->
<!-- alert(typeof price);-->
//string
<!-- var ch='a';-->
<!-- var name="张三";-->
<!-- var addr="北京";-->
<!-- alert(typeof ch);-->
<!-- alert(typeof name);-->
<!-- alert(typeof addr);-->
//boolen
<!-- var flag=true;-->
<!-- var flag2=false;-->
<!-- alert(typeof flag);-->
<!-- alert(typeof flag2);-->
//null
<!-- var obj=null;-->
<!-- alert(typeof obj);-->
//underfined
var a;
alert(typeof a);
/*
JavaScript中分为：原始类型和引用类型
5种原始类型：
number:数字(整数，小数，NaN(Not a Number))
string:字符，字符串，单双引皆可
boolean:布尔，true,false
null:对象为空
underfined:当声明的变量未初始化时，该变量的默认值是underfined
使用typeof运算符可以获取数据类型
*/
</script>
</body>
</html>
5.运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
<!-- ==：-->
<!-- 1.判断类型是否一样，如果不一样，则进行类型转换-->
<!-- 2.再去比较其他-->
<!-- ===：全等于-->
<!-- 1.判断类型是否一样，如果不一样，则直接返回false-->
<!-- 2.在直接比较其他-->
<!-- var age1=20;-->
<!-- var age2="20";-->
<!-- alert(age1==age2);//true-->
<!-- alert(age1===age2);//false-->
/*
类型转换：
*其他类型转换成number：
1.string：按照字符串的字面值，转为数字，如果字面值不是数字，转为NaN,一般使用parseInt
2.boolean:true->1 false->0
*其他类型转换成boolean
1.number：0和NaN转为false，其他的数字转为true
2.string：空字符串转为false，其他的字符串转为true
3.null：false
4.undefined：false
*/
<!-- var str=+"20";-->
<!-- alert(str+1);-->
<!-- var str="20";-->
<!-- alert(parseInt(str)+1);-->
<!-- var flag=+false;-->
<!-- alert(flag);-->
<!-- var flag=0;-->
<!-- var flag='a';-->
<!-- var flag='';-->
var flag=null;
var flag=undefined;
if(flag){
alert("转为true");
}else{
alert("转为false");
}
</script>
</body>
</html>
6.流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//if
//switch
<!-- var num=3;-->
<!-- switch(num){-->
<!-- case 1:{-->
<!-- alert("星期一");-->
<!-- break;-->
<!-- }-->
<!-- case 2:{-->
<!-- alert("星期二");-->
<!-- break;-->
<!-- }-->
<!-- case 3:{-->
<!-- alert("星期三");-->
<!-- break;-->
<!-- }-->
<!-- case 4:{-->
<!-- alert("星期四");-->
<!-- break;-->
<!-- }-->
<!-- case 5:{-->
<!-- alert("星期五");-->
<!-- break;-->
<!-- }-->
<!-- case 6:{-->
<!-- alert("星期六");-->
<!-- break;-->
<!-- }-->
<!-- case 7:{-->
<!-- alert("星期日");-->
<!-- break;-->
<!-- }-->
<!-- default:{-->
<!-- alert("数字有误~");-->
<!-- break;-->
<!-- }-->
<!-- }-->
//for
<!-- var sum=0;-->
<!-- for(let i=1;i<=100;i++){-->
<!-- sum+=i;-->
<!-- }-->
<!-- alert(sum);-->
//while
<!-- var sum=0;-->
<!-- var i=1;-->
<!-- while(i<=100){-->
<!-- sum+=i;-->
<!-- i++;-->
<!-- }-->
<!-- alert(sum);-->
//do while
var sum=0;
var i=1;
do{
sum+=i;
i++;
}while(i<=100);
alert(sum);
</script>
</body>
</html>
7.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
形式参数不需要写-
js中，函数可以传入多个参数
-->
<script>
<!--function add(a,b){-->
<!-- return a+b;-->
<!-- }-->
<!-- var result=add(1,2);-->
<!-- alert(result);-->
var add=function(a,b){
return a+b;
}
var result=add(1,2);
alert(result);
var result=add(1,2,3);
alert(result);
var result=add(1);
alert(result);
</script>
</body>
</html>
8.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//方式一
var arr=new Array(1,2,3);
<!-- alert(arr);-->
//方式二
var arr2=[1,2,3];
<!-- alert(arr2);-->
//数组
arr2[0]=10;
<!-- alert(arr2);-->
//特点：js数组相当于Java的集合，变长变类型
//变长
var arr3=[1,2,3];
arr3[10]=10;
<!-- alert(arr3[10]);-->
<!-- alert(arr3[9]);-->
//变类型
<!-- arr3[5]="hello";-->
<!-- alert(arr3[5]);-->
<!-- alert(arr3);-->
//属性：length：数组中元素的个数
var arr4=[1,2,3];
<!--for (let i=0;i<arr4.length;i++){-->
<!-- alert(arr[i]);-->
<!--}-->
//方法
//push：添加方法
var arr5=[1,2,3];
<!-- arr5.push(10);-->
<!-- alert(arr5);-->
//splice:删除元素
arr5.splice(0,1);
alert(arr5);
//从位置0开始删除，删除长度1
</script>
</body>
</html>
9.字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//方法一
var str1=new String("abc");
//方式二
var str2="abc";
var str3="abc";
//length
<!-- alert(str3.length);-->
//trim()
<!-- var str4=' abc ';-->
<!-- alert(1 +str4.trim() +1);-->
</script>
</body>
</html>
10.自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//自定义对象
var person={
name: "zhangsan",
age:20,
eat: function(){
alert("干饭");
}
};
alert(person.name);
alert(person.age);
person.eat();
</script>
</body>
</html>
11.window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//alert
//confirm.点击确定按钮，返回true，点击取消按钮，返回false
<!-- var flag=confirm("确认删除？");-->
<!-- alert(flag);-->
<!-- if(flag){-->
<!-- //删除按钮-->
<!-- }-->
//定时器
/*
setTimeout(function,毫秒值):在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
*/
// setTimeout(function(){
// alert("haha~");
// },3000);
setInterval(function(){
alert("haha~");
},2000);
</script>
</body>
</html>
12.定时器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage"border="0" src="off.jpg" style="..." >
<input type="button" onclick="off()" value="关灯">
<script>
function on(){
document.getElementById("myImage").src='on.jpg';
}
function off(){
document.getElementById("myImage").src='off.jpg';
}
var x=0;
setInterval(function (){
if(x%2==0){
on();
}else{
off();
}
},1000);
</script>
</body>
</html>
13.location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
<!-- alert("要跳转了");-->
<!-- location.href="http://www.baidu.com";-->
document.write("三秒跳转到首页...");
setTimeout(function(){
location.href="http://www.baidu.com";
},3000)
</script>
</body>
</html>
14.DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="off.jpg"><br>
<div class="cls">传博教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
//1.getElementById:根据id属性获取，返回一个Element对象
var img=document.getElementById("light");
<!-- alert(img);-->
//2.getElementByTagName:根据标签名称获取，返回Elememt对象数组
var divs=document.getElementsByTagName("div");
<!-- alert(divs.length);-->
<!-- for(let i=0;i<divs.length;i++){-->
<!-- alert(divs[i]);-->
<!-- }-->
//3.getElementById:根据name
var hobbys=document.getElementsByName("hobby");
// for(let i=0;i<hobbys.length;i++){
// alert(hobbys[i]);
// }
//4.getElementByClassName:class
var clss=document.getElementsByClassName("cls");
for(let i=0;i<clss.length;i++){
alert(clss[i]);
}
</script>
</body>
</html>
15.HTML Element对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="off.jpg"><br>
<div class="cls">传博教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
//1.getElementById:根据id属性获取，返回一个Element对象
var img=document.getElementById("light");
<!-- alert(img);-->
img.src="on.jpg";
//2.getElementByTagName:根据标签名称获取，返回Elememt对象数组
var divs=document.getElementsByTagName("div");
for(let i=0;i<divs.length;i++){
<!-- divs[i].style.color='red';-->
divs[i].innerHTML="hehe";
}
//3.getElementById:根据name
var hobbys=document.getElementsByName("hobby");
for(let i=0;i<hobbys.length;i++){
hobbys[i].checked=true;//全选中
}
//4.getElementByClassName:class
var clss=document.getElementsByClassName("cls");
<!-- for(let i=0;i<clss.length;i++){-->
<!-- alert(clss[i]);-->
<!-- }-->
</script>
</body>
</html>
16.事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">
<script>
function on(){
alert("我被点了");
}
document.getElementById("btn").onclick= function(){
alert("我被点了");
}
</script>
</body>
</html>
17.常见事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<form id="register" action="#">
<input type="test" name="username" />
<input type="submit" name="提交">
</form>
<script>
document.getElementById("register").onsubmit=function(){
return false;
}
</script>
</body>
</html>
18.表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1.验证用户名是否符合规则
//1.1获取用户名的输入框
var usernameInput=document.getElementById("username");
//1.2绑定onblur事件，失去焦点
usernameInput.onblur= checkUsername;
function checkUsername(){
//1.3获取用户输入的用户名
var username=usernameInput.value.trim();
//1.4判断用户是否符合规则，长度6-12
var flag=username.length >=6 && username.length<=12
if(flag){
//符合规则
document.getElementById("username_err").style.display='none';
}else{
//不符合规则
document.getElementById("username_err").style.display='';
}
return flag;
}
//1.验证密码是否符合规则
//1.1获取密码的输入框
var passwordInput=document.getElementById("password");
//1.2绑定onblur事件，失去焦点
passwordInput.onblur=checkPassword;
function checkPassword(){
//1.3获取用户输入的密码
var password=passwordInput.value.trim();
//1.4判断用户是否符合规则，长度6-12
var flag=password.length >=6 && password.length<=12
if(flag){
//符合规则
document.getElementById("password_err").style.display='none';
}else{
//不符合规则
document.getElementById("password_err").style.display='';
}
return flag;
}
//1.验证手机号是否符合规则
//1.1获取手机号的输入框
var telInput=document.getElementById("tel");
//1.2绑定onblur事件，失去焦点
telInput.onblur=checkTel;
function checkTel(){
//1.3获取用户输入的手机号
var tel=telInput.value.trim();
//1.4判断用户是否符合规则 11数字组成，第一位是1
var reg=/^[1]\d{10}$/;
var flag=reg.test(tel);
var flag=tel.length ==11
if(flag){
//符合规则
document.getElementById("tel_err").style.display='none';
}else{
//不符合规则
document.getElementById("tel_err").style.display='';
}
return flag;
}
//1.获取表单对象
var regForm=document.getElementById("reg-form");
//2.绑定onsubmit事件
regForm.onsumbit=function(){
//挨个判断一个表单项是否都符合规则、
var flag=checkUsername() && checkPassword() && checkTel();
return flag;
}
</script>
</body>
</html>
19.正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var reg=/^\w{6,12}$/;
var str="abc";
var flag=reg.test(str);
alert(flag);
</script>
</body>
</html>
3188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
