简单学习HTML+CSS+JavaScript
一、HTML
HTML被称为 超文本标记语言，是由一系列标签构成的语言。
下面介绍HTML中的标签：
（一）HTML文件基本结构
<!DOCTYPE html><html><head><title>Document</title></head>
<body></body></html>- html 标签是整个 html 文件的根标签 (最顶层标签)。
- head 标签中写页面的属性。
- title 标签中写的是页面标题。
- body 标签中写的是页面上显示的内容。
（二）HTML中标签层次结构
- head 和 body 是 html 的子标签 (html 就是 head 和 body 的父标签)。
- title 是 head 的子标签. head 是 title 的父标签。
- head 和 body 之间是兄弟关系。
（三）HTML常见标签
1.标题标签<h1>
标题标签一共有六个，h1-h6，数字越大标题字体越小。
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
2.段落标签<p>
表示一个段落，段落与其他格式的文本之间会自动空出一行，但是前面没有缩进。
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>3.换行标签<br/>
换行标签是一个单标签。
这是一个br标签<br/>
这是一个br标签<br/>
这是一个br标签<br/>观察段落标签和换行标签的区别：
4.图片标签 img
img标签内必须带有src属性，来表示图片的路径。
<img src="rose.jpg">img标签的其他属性：
width、height：控制宽度和高度，单位是像素（px）。往往只用修改一个即可，修改一个属性 图片会等比例变化。
border：表示图片的边框，单位是像素（px）。
<img src="" width="500px" height="500px" border="2px">- 属性可以有多个,不能写到标签之前。
- 属性之间用空格分割,可以是多个空格,也可以是换行。
- 属性之间不分先后顺序。
- 属性使用 "键值对" 的格式来表示。
5.超链接：a
<a href="http://www.baidu.com" target="_blank">百度</a>- href:必须具备,表示点击后会跳转到哪个页面。
- target:打开方式.默认是 _self.如果是 _blank 则用新的标签页打开。
href的链接可以是外部链接（如http://www.baidu.com），也可以是内部链接（在同一个目录下的文件，比如1.html）或者空链接（填入#表示空链接）。
6.表格标签
<table style="width: 200px;height: 300px;" border="1px black"><tr><td>aaa</td><td>bbb</td></tr><tr><td>ccc</td><td>ddd</td></tr><tr><td>eee</td><td>fff</td></tr><tr><td>ggg</td><td>hhh</td></tr></table>- table标签：表示的是整个表格。
- tr标签：表示表格中的一行。
- td标签：表示表格中的一个单元格。
7.表单标签
表单是让用户输入信息的重要途径。
分为表单域（form）和表单控件（input）。
form标签
<form action="test.html"></form>action表示将要把表单提交到哪个页面。
input标签
<input type="text">用于各种输入控件，单行文本框，按钮，单选框，复选框.
- type (必须有), 取值种类很多，button, checkbox, text, file, image, password, radio 等。
- name: 给 input 起了个名字。尤其是对于单选按钮，具有相同的 name 才能多选一。类似于一个四选一选择题，要将四个选项的name都设置成一样的，才知道这是个选项针对的是这一道题。
- value: input 中的默认值。
- checked: 默认被选中(用于单选按钮和多选按钮)。
下面是一些常见的type类型：
文本框:
<input type="text">密码框:
<input type="password">单选框(多个选项的name一样):
<input type="radio" name="sex">男性
<input type="radio" name="sex" checked="checked">女性复选框:
<input type="checkbox">吃饭 <input type="checkbox">睡觉 <input type="checkbox">打豆豆普通按钮:
<input type="button" value="我是一个普通按钮">提交按钮:
<form action="1.html"><input type="text" name="username"><input type="submit" value="提交">
</form>slecet标签
表示下拉菜单。
下拉菜单<select><option>北京</option><option selected="selected">上海</option></select>option标签中selected属性值为selected时，表示默认选中。
textarea标签
用于改变设置文本框的长宽大小。
<textarea rows="50px" cols="50px">你好呀</textarea>8.无语意标签：div&span
div和span就是两个盒子，用于网页布局。
- div 是独占一行的，是一个大盒子。
- span 不独占一行，是一个小盒子。
<div><span>咬人猫</span><span>咬人猫</span><span>咬人猫</span>
</div>
<div><span>兔总裁</span><span>兔总裁</span><span>兔总裁</span>
</div>
<div><span>阿叶君</span><span>阿叶君</span><span>阿叶君</span>
</div>使用这两个标签就能让其内部的元素整体移动和修改更方便。
（四）小练习
题目：
代码及结果如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" value="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" value="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" value="请输入密码"></td></tr></table><div><span><input type="button" value="注册"></span><span>已有账号？</span><span><a href="#">登录</a></span></div>
</body>
</html>
二、CSS
从这幅图中可以看出HTML、CSS、JavaScript的区别和特点：
- HTML是网页的基础结构层，本身不涉及样式美化和交互功能，只是单纯地组织内容。
- CSS专注于视觉呈现，依赖 HTML 的结构，通过选择器来针对特定的 HTML 元素应用样式规则。
- JavaScript是网页的行为层，能够让静态的网页变得动态、可交互，常与 HTML 和 CSS 配合，增强网页的功能性和用户体验。
（一）基本语法规范
选择器+{一条/n条声明}，一般写在head标签中的style中。
- 选择器决定针对谁进行修改。
- 声明决定怎样进行修改。
- 声明的属性是键值对。
<style>p {/* 设置字体颜色 */color: red;/* 设置字体大小 */font-size: 30px;}
</style><p>hello</p>（二）引入方式
一共有三种引入方式：
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对 | <div style="color:green">绿色</div> |
| 内部样式 | 定义style标签，在标签内部定义css样式 | <style> h1 {...} </style> |
| 外部样式 | 定义link标签，通过href属性引入外部css文件 | <link rel="stylesheet" href="[CSS文件路径]"> |
- 行内样式，只适合于写简单样式。只针对某个标签生效。缺点是不能写太复杂的样式。
- 内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
- 外部样式，html 和 css 实现了完全的分离，企业开发常用方式。
（三）CSS中的选择器类型
1.标签选择器
/* 选择所有的a标签，设置颜色为红色 */
a {color: red;
}/* 选择所有的div标签，设置颜色为绿色 */
div {color: green;
}2.class选择器
/* 选择class为font32的元素，设置字体大小为32px */
.font32 {font-size: 32px;
}3.id选择器
/* 选择id为submit的元素，设置颜色为红色 */
#submit {color: red;
}4.复合选择器
/* 设置页面所有元素，颜色为红色*/
* {color: red;
}5.通配符选择器
/*只设置 ul标签下的 li标签下的 a标签，颜色为红色*/
ul li a {color: blue;
}- 以上三个标签选择器
ullia中的任意，都可以替换成类选择器，或者 id 选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合。 - 不一定是相邻的标签，也可以是 "孙子" 标签。
- 如果需要选择多种标签，可以使用
,分割，如p, div { }表示同时选中 p 标签和 div 标签。逗号前后可以是以上任意选择器，也可以是选择器的组合。
（四）常见的CSS样式
有如下HTML代码：
<div class="text1">我是文本1</div>设置颜色
.text1{color: red;
}设置字体大小
.text1{font-size: 32px;
}设置边框
边框是一个复合属性，可以同时设置多个样式，不分前后顺序，浏览器会根据设置的值自动判断。
.text1{border: 1px solid purple;
}同时也可以写成这样：
.text1 {/* 这是 border 属性的拆分写法，原本可以用 border: 1px purple solid; 一次性设置，这里拆分为宽度、样式、颜色分别设置 *//* border: 1px purple solid; */border-width: 1px; /* 设置边框宽度为 1px */border-style: solid; /* 设置边框样式为实线（solid） */border-color: purple; /* 设置边框颜色为紫色（purple） */
}设置宽高
.text {/* 这是 width 和 height 属性的单独设置，分别控制元素的宽度和高度 */width: 200px; /* 设置元素宽度为 200px */height: 150px; /* 设置元素高度为 150px */
}设置内外边距
.text {/* 内边距（padding）：控制元素边框与内容之间的距离 */padding-top: 10px; /* 上内边距为 10px */padding-right: 20px; /* 右内边距为 20px */padding-bottom: 15px; /* 下内边距为 15px */padding-left: 25px; /* 左内边距为 25px *//* 外边距（margin）：控制元素与其他元素之间的距离 */margin-top: 5px; /* 上外边距为 5px */margin-right: 10px; /* 右外边距为 10px */margin-bottom: 8px; /* 下外边距为 8px */margin-left: 12px; /* 左外边距为 12px */
}
三、JavaScript
（一）引入方式
| 引入方式 | 语法表述 | 示例 |
| 行内样式 | 直接嵌入到 html 元素内部 | <input type="button" value="点我一下" οnclick="alert('haha')"> |
| 内部样式 | 定义<script>标签，写到 script 标签中 | <script>alert("haha");</script> |
| 外部样式 | 定义<script>标签，通过 src 属性引入外部 js 文件 | <script src="hello.js"></script> |
（二）基础语法
1.创建变量
创建变量常用到下面三个关键字：
| 关键字 | 解释 | 示例 |
| var | 早期JS中声明变量的关键字，作用域在该语句的函数内 | var name="zhangsan"; |
| let | ES6中新增的声明变量的关键字，作用域为该语句所在的代码块内 | let name="zhangsan"; |
| const | 声明常量的，声明后不能修改 | const name="zhangsan"; |
JavaScript是一门动态的弱类型语言，同一个变量也可以存放不同类型的值。
2.数据类型
| 数据类型 | 描述 |
| number | 数字，不区分整数和小数。 |
| string | 字符串类型，字符串字面值需要使用引号引起来，单引号双引号均可。 |
| boolean | 布尔类型：true 真，false 假。 |
| undefined | 表示变量未初始化，只有唯一的值 undefined。 |
<script>var a = 10;console.log(typeof a); //numbervar b = 'hello';console.log(typeof b); //stringvar c = true;console.log(typeof c); //booleanvar d;console.log(typeof d); //undefinedvar e = null;console.log(typeof e); //null
</script>3.运算符
JavaScript中的运算符和Java中基本一致，介绍一下==和===的区别：
- ==是仅仅比较值是否一样。
- ===在比较值是否一样的基础上，还要比较其类型。
<script>var age = 20;var age1 = "20";var age2 = 20;console.log(age == age1); //true，比较值console.log(age === age1); //false，类型不一样console.log(age == age2); //true，值和类型都一样
</script>（三）JavaScript对象
1.数组
创建方式：
//使用关键字new创建
// Array 的 A 要大写
var arr = new Array();//使用字面量方式创建 [常用]
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"对数组的操作：
<script>var arr = [1, 2, 'haha', false];// 读取数组console.log(arr[0]); // 1// 添加数组元素arr[4] = "add"console.log(arr[4]); // addconsole.log(arr.length); // 5，获取数组的长度// 修改数组元素arr[4] = "update"console.log(arr[4]); // update// 删除数组元素arr.splice(4, 1); // 第一个参数表示从下标为4的位置开始删除。第二个参数表示要删除的元素个数是 1 个console.log(arr[4]); // undefined 元素已经删除，如果元素不存在，结果为undefinedconsole.log(arr.length); // 4，获取数组的长度
</script>2.函数
函数的语法格式：
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {函数体return 返回值;
}// 函数调用
函数名(实参列表); // 不考虑返回值
let 返回值 = 函数名(实参列表); // 考虑返回值注意点：
- JavaScript中函数可以先调用再声明。
- 如果调用时实参与声明时的形参数量不匹配，多出来的不管，缺少的被当做undefined。
3.对象
使用{}创建对象：
var a = {}; // 创建了一个空的对象var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};使用Object创建对象：
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}console.log(student.name);
console.log(student['weight']);
student.sayHello();（四）JQuery
jQuery是一个快速、简洁且功能丰富的JavaScript框架，于2006年发布。它封装JavaScript常用的功能代码，提供了简洁而强大的选择器和DOM操作方法。使用JQuery可以轻松地选择和操作HTML元素，从而减少了开发人员编写的代码量，提高了开发效率，它提供的API易于使用且兼容众多浏览器，这让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单。JQuery对于事件的处理也进行了简化，提供了一个简单的API来绑定、触发和处理事件，使开发人员能够更方便地处理各种交互行为。
基础语法：
$(selector).action()$()是一个函数，它是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素。- Selector 选择器，用来 "查询" 和 "查找" HTML 元素。
- action 操作，执行对元素的操作。
JQuery 的代码通常都写在 document ready 函数中。
document：整个文档对象，一个页面就是一个文档对象，使用 document 表示。
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在文档加载完成后才可以对页面进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
示例如下：
<button type="button">点我消失</button>
<script>$(document).ready(function(){$('button').click(function(){//给按钮添加了click事件,点击后元素消失。$(this).hide();});});
</script>JQuery也有一些自定义的选择器：
$("标签/#id/.对象").action()JQuery事件
| 事件 | 代码 |
| 文档就绪事件 (完成加载) | $(document).ready(function) |
| 点击事件 | $(selector).click(function) |
| 双击事件 | $(selector).dblclick(function) |
| 元素的值发生改变 | $(selector).change(function) |
| 鼠标悬停事件 | $(selector).mouseover(function) |
操作元素
获取/设置元素内容
| JQuery方法 | 说明 |
| text() | 设置或返回所选文本内容 |
| html() | 设置或返回所选文本内容（包括HTML标签） |
| val() | 设置或返回表单字段的值 |
设置内容：
<div id="test"></div>
<div id="test2"></div>
<input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>设置html</h1>');$("#test2").text('<h1>设置text</h1>');$("input").val("设置内容");});
</script>获取内容：
<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html内容为:" + html);var text = $("#test").text();console.log("文本内容为:" + text);var inputVal = $("input").val();console.log(inputVal);});
</script>获取/设置元素属性
JQuery attr() 方法用于获取属性值。
设置元素属性
<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>
<script>$(function(){$("p a").attr("href","baidu.com")console.log($("p a").attr("href"));});
</script>获取元素属性
<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>
<script>$(function(){var href = $("p a").attr("href")console.log(href);});
</script>获取/返回css属性
获取元素属性
<div style="font-size: 36px;">我是一个文本</div>
<script>$(function(){var fontSize = $("div").css("font-size");console.log(fontSize);});
</script>设置元素属性
<div style="font-size: 36px;">我是一个文本</div>
<script>$(function(){$("div").css("font-size","24px");});
</script>添加元素/删除元素
添加元素
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("ol").before("before");$("ol").after("after");});
</script>- append ()：在被选元素的结尾插入内容
- prepend ()：在被选元素的开头插入内容
- after ()：在被选元素之后插入内容
- before ()：在被选元素之前插入内容
演示：
删除元素
remove()：删除被选元素（及其子元素）empty()：删除被选元素的子元素。
<div id="div1">我是一个div</div>
<button>删除 div 元素</button>
<script>$(function () {$('button').click(function(){$('#div1').remove();});});
</script><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>$(function () {$('button').click(function(){$('ol').empty();});});
</script>四、猜数字综合案例
预期效果：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数字猜谜游戏</title><script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body><div><input type="button" id="button1" value="重新开始一局游戏"></div><div><span>请输入要猜的数字：</span><span><input type="text" id="userNumber"></span><span><input type="button" id="button2" value="猜"></span></div><div><span>已经猜的次数：</span><span id="count">0</span></div><div><span>结果：</span><span id="result"></span></div><script>$(function(){let guessNumber = Math.floor(Math.random() * 100) + 1;let count = 0;// 点击猜按钮$("#button2").click(function(){count++;$("#count").text(count);// 将输入值转换为数字类型let userNumber = parseInt($("#userNumber").val(), 10);if(userNumber === guessNumber){$("#result").text("猜对了");$("#result").css("color", "gray");}else if(userNumber < guessNumber){$("#result").text("猜小了");$("#result").css("color", "blue");}else{$("#result").text("猜大了");$("#result").css("color", "red");} });// 重新开始游戏$("#button1").click(function() {guessNumber = Math.floor(Math.random() * 100) + 1;count = 0;$("#count").text(count);$("#result").text("");$("#userNumber").val("");});});</script>
</body>
</html>