HTML+CSS+JavaScript

一、HTML

1、什么是HTML

HTML（Hyper Text Markup Language）也叫超文本标记语言，什么意思呢？

超文本：普通文本语言没有什么特殊功能，而超文本，是表示一种比文本语言功能更强大的语言，它不仅仅有文本，还可以包含图片、音频等……

标记语言：意思是这种语言是由标签构成的语言，不同的标签有不同的功能，比如某些标签可以插入图片，某些标签可以设置文字的颜色等……

2、认识HTML标签

<h3 id="myId"> 我是三级标题</h3>

如图，上面就是HTML的一个标签，关于标签，有以下几个性质：

1）标签名存放在<>中，比如h3就是这个标签的标签名

2）大部分标签都是成对出现，并且以<标签名>为开始标签，以<\标签名>为结束标签

3）少数标签只有开始标签，称为“单标签”

4）开始标签和结束标签之间，写的是标签的内容，比如上述例子中的：我是三级标题，即为标签的内容

5）开始标签里，可能会带有属性，id相当于给这个标签设置属性，使该标签可以表现不同的效果，比如可以设置字体的颜色时，就可以在标签中添加属性

3、HTML基本格式

1）html标签是整个html文件的根标签

2）head标签中书写页面的属性

3）body标签中写的是页面上显示的内容

4）title标签写的是页面的标题

另外需要说明，标签是可以嵌套的，比如title标签是嵌套在head标签里的、head和body标签是嵌套在html标签里的。

4、HTML标签关系

1）父子关系：存在一个标签中的另外一个标签之间为父子关系，外标签为父，内标签为子，比如html（父）和head（子）、html（父）和body（子）、head（父）和title（子）

2）兄弟关系：在关系上属于同一级的不同标签互为兄弟关系，比如head和body互为兄弟关系

5、第一个html标签

接下来我们使用Visual Studio Code来实现我们的第一个html网页！

1）我们打开这个软件，创建一个html文件

2）在编辑器中输入一个感叹号

3、按下回车后,VS Code就会直接写出一个html的基本框架

4、我们在body标签里面写入我们的内容：我的第一个html，然后记得保存文件，接着再去运行该文件！

6、HTML常见标签

1）标题标签：<h1>标题内容<\h1>（一级标题标签）

2）段落标签：<p>段落内容</p>

注意：

1、html内容首尾处的换行，空格均无效

2、在html中文字之间输入的多个空格相当于一个空格

3、html中输入换行并不会真的换行，而是相当于一个空格

3）换行标签：<br>（单标签）

4)图片标签：<img src="rose.jpg">

图片标签里面带有属性，src填写的是图片的路径。src就是标签的属性！比如，我将一张图片放在和该html文件同一级的目录下，就可以使用相对路径插入图片！

7、超链接：<a href="文件路径、网络路径、或者#">文字内容</a>

herf表示点击后会跳转到哪个页面，在href中输入百度的网络路径

此时运行html文件时，会出现一个百度的超链接页面，点击“百度”，网页即可跳转到百度页面

当你还不清楚herf该输入什么路径时，可以输入#表示空路径。

8、表格标签

制作表格需要一系列标签，让我们来学习一下它们各自的效果：

1）table标签：表示整个表格

2）tr：表示表格的一行

3）td：表示表格的一个单元格

表格标签里面有一些属性，可以用于设置大小边框等，这些属性要放在表格标签里面。

1）align：是表格相对于周围元素的对齐方式，如align=“center”表示居中

2）border：表示边框，1表示有边框（数字越大，边框越粗），“”表示没有边框

3）cellpadding：内容距离边框的距离，默认1像素（1px）

4）cellspcing：单元格之间的距离，默认2像素

5）width/height：设置尺寸

1、制作一个3行2列的表格

快捷方式：

2、合并单元格

合并单元格在td标签内添加属性：

colspan：合并该单元格所处行数的列，以该单元格开始，从左往右合并

rowspan：合并该单元格所处列的行，以该单元格开始，从上往下合并

9、表单标签

表单是让用户输入信息的重要途经，表单分为两个部分：

1）表单域：包含表单元素的区域，重点是form标签

2）表单控件：输入框、提交按钮、重点是input标签

表单控件就是如图的输入手机号码的框、输入验证码的框、点击登录的按钮称；表单域则是整张图片，包含表单控件的区域

我们先来介绍表单控件：

1）input标签：

input标签可以实现各种输入控件，比如单行文本框、按钮、单选框、复选

input表的各种属性：

type（必须有）：取值的种类有很多，button、checkbox、text、file、image、password、radio等

name：给input起了个名字，尤其对于单选按钮，具有同一的名字才能多选一

value：input中的默认值

checked：默认被选中（用于单选按钮和多选按钮）

文本框：可以输入文本文字

密码框：输入密码时，密码不可见

文件框：点击“选择文件”，会打开电脑的文件，此时可以进行选择

单选按钮：可以选择需要选择的目标，只能选一个

复选框：可以选择多个目标

普通按钮：该按钮可以被按，至于按下该按钮后会发生什么，需要另外写代码实现

提交按钮：可以提交信息

2）下拉菜单标签

3)文本域标签

文本域标签是用来写文本的，可以在里面设置行属性和列属性，表示该文本框默认几行几列，但是其实文本框可以展开扩大，这里设置的行数列数只是表示，打开浏览器时，该文本框的默认大小！

文本框默认5行10列，但是文本框如果需要可以展开！

表单区域：

我们前面学习了表单控件，通过表单控件，我们可以获取到用户输入的信息，那么这些信息是要传输到后端中的，这个操作需要使用form标签！

form标签的action属性是表示，要将表单控件中获取到的信息提交到哪里，由于我们还没有学习后端，我们暂时先将信息提交到test1.html（提交到前端页面也是可以的），按照下面操作，我们输入用户名和密码，点击提交，页面跳转到test1.html，观察它的URL，会发现用户名和密码已经被传输到test1.html中了！

10）无语义的标签

div是用来占地方的，是一个大盒子，会换行

span也是用来占地方的，是一个小盒子，不会换行

其实我们可以理解为div和span是用来占地的，div可以占一行的地方，span只能占用和它自身大小一致的地方！

7、综合案例：用户注册界面

接下来我们使用前面所学，做一个如图的简单的用户注册界面！

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <h1>用户注册</h1>

    <!-- 生成3行2列的表格 -->
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text"  placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
    </table>

    <div>
        <input type="button" value="注册">
        <span>已有账号？</span>
        <span><a href="#">登录</a></span>
    </div>
</body>
</html>

8、VS Code快捷键

注释：ctrl+/

生成html基本框架：！+回车

代码格式化：Shift+Alt+F

向上或者向下复制一行代码：Shift+Alt+Up 或 Shift +Alt+Down

二、CSS

1、什么是CSS

CSS（Cascading Style Sheet）中文名称是层叠样式表，用于控制页面的样式。CSS能够对页面中的元素位置的排版进行像素级精确控制，实现美化页面的效果。俗称给页面”化妆“。

2、CSS基本语法规范

CSS的语法规范是：选择器+{一条或N条声明}

1）选择器决定对谁进行修改

2）声明决定怎么改

3）声明的属性是键值对，不同键值对之间使用；隔开，使用：区分键和值

如下代码是CSS使用的一个案例：

一般来说，CSS是使用style标签的，一般放置在head标签里面。其中，p即为选择器，在body标签里，被选择器标签标记的hello1和hello2就可以被CSS修饰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 设置css样式，一般放置在head标签 -->
    <style>
       p{
        /*  设置字体为红色，字体大小30px */
            color:red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    
  <!-- 被选择器标签选中的内容，会被CSS修饰成指定的样式 -->
  <p>hello1</p>
  <p>hello2</p>
    
</body>
</html>

3、CSS引入方式

CSS有三种引入方式，语法规则如下：

引入方式	语法描述	实例
行内样式	在标签内使用style属性，属性值是css键值对	<div style="color :green">绿色</div>
内部样式	定义<style>标签，在标签内部定义css样式	<style> h1 {……}</style>
外部样式	定义<link>标签，通过href 属性引入外部css文件	<link rel="stylesheet" href="css文件路径“>

1）行内样式案例：

在标签内部使用style属性即可！

 <div style="color:green; font-size:40px;">hello</div>

2）内部样式案例：

使用style标签定义css样式，内部样式有一个选择器，如下例子：选择器为p，被p标签修饰的内容，将会按照规定的css样式进行修饰！

 <style>
       p{
        /*  设置字体为红色，字体大小30px */
            color:red;
            font-size: 30px;
        }
 </style>

3）外部样式案例：

先创建一个Demo文件夹，这个文件夹里面存放一个css文件和html文件；

css文件定义css样式：

html文件在内部使用link标签，获取到css文件内部的样式，后续即可模仿内部样式，使用选择器选中要修饰的内容！

3、CSS选择器

CSS是用来修饰网页中的各个元素的，比如修饰hello的字体颜色，字体大小……那么改如何实现修饰指定元素呢？这里依赖CSS选择器；CSS常见的选择器有：标签选择器、类选择器、id选择器、通配符选择器

1）标签选择器

2）类选择器

每个标签都有一个类属性，基于类属性我们就可以产生了“类选择器”的概念。我们在style标签中定义每个类的CSS修饰。

类选择器的基本格式为 .类名{语句1；语句2；语句n……；}，使用的话，将标签内定义属性class属性的值为某个类名，该元素就可以被CSS进行专属于这个类的修饰！

3）id选择器

id选择器的逻辑和类选择器差不多， id选择器基本格式为 #id名称{语句1；语句2；语句n……；}，使用的话，将标签内的id属性的值定义为某个id的名称，CSS就会根据对该元素进行专属该id特有的CSS修饰。

注意：类选择器可以被多个元素使用，id只能被一个元素使用；类可以重复，id不能重复！

4）通配符选择器

通配符选择器是设置页面中的所有元素都为通配符里面的CSS样式！

4、复合选择器

1）空格：表示后代，以下例子表示，ul标签的后代li标签，都可以被CSS修饰

2）没空格：表示交集，以下例子表示，网页中的元素要被p标签标记且标签class属性值要为red才可以被CSS修饰

3）逗号：表示并集，以下例子对red类和green类取并集，标签的class属性值只要为red或者green，即可被CSS修饰

4）>：表示相邻后代，以下例子表示，ul标签相邻li标签，li标签相邻a标签，最后的a标签可以被CSS修饰

5、常见的CSS

1）color：设置颜色‘，color设置颜色有以下几种方式：

其中rgb是指三原色，任何一种颜色都可以通过红色、绿色、蓝色通过不同比例混合生成，rgb表示法的每个参数范围在0--255之间。

2）border：设置边框

border是用来设置边框的，我们前面学习的div和span标签是用来占地方的，我们可以给它们设置边框，这样就可以看出来它们所占空间的大小。

下面我们来介绍设置边框的一些样式：

样式	说明	取值
border-width	设置边框粗细	数值
border-style	设置边框样式	dotted：点状 solid：实线 double：双线 dashed：虚线
border-color	设置边框颜色	同color

3）width、height

width：设置宽度

height：设置高度

注意，只有块级元素才可以设置宽和高。常见的块级元素有h1-h6、p、div……；常见的行内元素有 a span 。块级元素独占一行，可以设置宽高，行内元素不独占一行，不能设置宽高。

但是，也可以使用display属性修改元素的显示模型，display：block改成块级元素，display：inline 改成行内元素.

三、JavaScript

1、初识JavaScript

JavaScript（简称JS）是一个脚本语言，解释型或即使编译的编程语言，它是作为开发Web网页的脚本语言而出名。

2、引入方式

JS有3种引入方式，语法如下表格所示：

引入方式	语法描述	实例
行内样式	直接嵌入到html元素内部	<input type="button" value="点我一下“ onlick="alert(‘haha')">
内部样式	定义<script>标签，写到script标签中	<script> alert("haha"); </script>
外部样式	定义<script>标签，通过src 属性引入外部jss文件	<script src="hello.js"></script>

3、变量

与Java和C语言类似，JS是可以定义变量的，在Java中，定义整数要使用int关键字，定义字符串要使用String关键字……但是在JS中，定义变量不需要使用那么多的变量类型关键字，我们只需要掌握三种关键字即可，因为JS是一门动态弱类型的语言，变量可以存放不同类型的值。

关键字	解释	示例
var	早期JS中声明变量的关键字，作用域在该语句的函数内	var name=”zhangsan";
let	ES6中新增的声明变量的关键字，作用域为该语句所在的代码块内	let name="zhangsan";
const	声明常量使用，声明后不能修改	const name="zhangsan";

如下的代码在JS是合法的，但是在Java中是不合法的。

var name = "zhangsan";
nema =10;

let age=10;
age="hehe";

当然，我们可以通过查看变量的值和类型：

运行该html文件，点击f12。

4、数据类型

虽然JS是一门弱类型编程语言，但是也有数据类型

数据类型	描述
number	数字，不区分整数和小数
string	字符串类型
boolean	布尔类型，真为true，假为false
undefinded	表示变量未初始化，数据类型为undefinded

代码案例：

5、‘=’ 运算符

JS的运算符和Java的运算符效果差不多，但是‘=’这个运算符略有不同；

a==b：如果a和b的值相同，表达式为true（如果a为“10",b为10，值相同，表达式为true）

a===b：如果a和b的值和类型都相同，表达式为true

6、数组

值得注意的是，JS的数组中，一个数组可以有不同类型的数据。

7、函数

1）语法格式

JS也有函数，其语法格式为：

//有返回值的函数
function 函数名（形参列表）{
   函数体
   return 返回值;
}

//无返回值的函数
function 函数名（形参列表）{
   函数体
}

函数的另外一种写法：

定义一个变量add，用add来接收function的值。add输入的值表示参数列表！

8、对象

在JS中，字符串，数值，数组都是对象，函数都是对象，每个对象包含若干个属性和方法。

1）如何创建对象

JS中一般使用{ }创建对象

//创建一个空对象
var a={};

//创建一个非空对象
var student={
   name:"xiaomin",
   age:10;
   say:function(){
      console.log("hello");
   }

1、属性和方法使用键值的形式来组织

2、键值对之间使用逗号分割

3、键和值之间使用冒号：分割

4、方法的值使用的是匿名函数

2）如何调用对象的属性和方法

9、JQuery

1）什么是JQuery

W3C标准为我们提供了一系列的函数，让我们可以操作网页内容、网页结构、网页样式，但是原生的JavaScript提供的API操作DOM元素时，代码比较繁琐，冗长，因此我们学习使用的JQuery来操作页面对象。

JQuery是一个快速、简洁且功能丰富的JacaScript框架，于2006年发布，它封装了JavaScript常用的功能代码，提供了简单的选择器和DOM操作方法，使用JQuery可以轻松的选择和操作HTML元素，从而提高了开发效率！

2）引入依赖

使用JQuery需要引入对应的库，在使用JQuery CDN时，只需要在html文档中加入其文件即可！其对应的JS文件地址为：https://code.jquery.com/jquery-3.7.1.min.js

我们搜索这个网址，然后将里面的内容另存为一个本地文件，文件保存到到要运行的html文件同一级中。接着使用script标签的scr属性引入库文件。

2）JQuery基础语法

JQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

基础语法：$(selector).action()

$( )是一个函数，它是JQuery提供的一个全局函数，用于选择和操作HTML元素

Selector选择器：用来查询某个HTML元素

action操作：执行对元素的操作

案例一：

JQuery的代码通常都写在document ready函数中

document：表示整个文档对象，一个页面就是一个文档对象，使用document表示

这个案例的意思是，选择器选中了doucment对象，当doucment对象加载完成，执行function方法。

案例二：

3）JQuery选择器

JQuery的选择器基于已存在的CSS选择器，除此之外，还有一些自定义的选择器，JQuery中所有选择器都以$开头。

语法	描述
$("*")	选取所有元素
$(this)	选取当前的HTML元素
$("p")	选取所有的<p>元素
$(".box")	选取所有class=”box"的元素
$("#box")	选取所有id=“box”的元素
$(".intro.demo")	选取所有class=“intro”且class="demo"的元素

4）JQuery事件

JS要创建动态页面，就需要感知到用户的行为。用户对于页面的一些操作（点击、选择、修改等）都会在浏览器中产生一个个事件，被JS获取到，从而进行更复杂的交互操作。

事件由三部分组成：

1.事件源：哪个元素触发的

2.事件类型：是点击，选中，还是修改

3.事件处理程序：进一步如何处理，往往是一个回调函数

常见的事件有：

文档就绪事件：$(document).ready(function)

点击事件：$(selector).click(function)

元素的值发生改变事件：$(selector).change(function)

鼠标悬停事件：$(selector).mouseover(function)

5）操作元素

三个简单的获取元素的JQuery方法

JQuery方法	说明
text（）	设置或返回所选元素的文本内容
html（）	设置或返回所选元素的内容（包括html标签）
val（）	设置或返回表单字段的值
attr（）	设置或修改标签属性

text（）案例：

id为content的标签的文本内容本来是“我是一个文本”，使用text（）获取文本内容，将其赋值给content，打印content；

使用text（“我是修改后的内容”）修改了id为content的标签的文本内容，将其赋值给content，打印content；

控制台两次打印的结果如图。

html（）案例：

我们前面所学的text只能获取文本内容，但是却无法获取html标签，如果我们使用html（），就可以获取到html标签的内容了

可以看到，控制台打印content的时候，html标签也被打印了。这就是htm（）与text（）的不同之处。那么带参数的html（）和带参数的text（）又有什么不同呢？

带参数的html（）方法，可以修改内容，如果修改的内容包含html标签，标签的效果会被执行。

val（）案例：

无参数的val（）方法可以获取标签中的value值，带参数的val（）方法可以修改标签中的value值。

attr（）案例：

获取标签属性的值：语句attr（“属性名”）

修改标签属性的值：语句attr（“属性名”， “修改内容”）

同理获取或者设置CSS样式使用css（）方法。

6）添加元素

append（）：在被选元素的结尾插入内容

prepend（）：在被选元素的开头插入内容

after（）：在被选元素之后插入内容

before（）：在被选元素之前插入内容

案例：

可以看出来，before（）和after（）是在标签外部添加元素，prepend（）和append（）是在标签内部添加元素。

7）删除元素

remove（）：删除被选元素

empty（）：删除被选元素的子元素

四、综合案例

猜数字游戏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <!-- 引入jquery路径，根据自己保存的js路径在哪，填写路径 -->
    <script src="jquery-3.7.1.min.js"></script>
    <button id="again" >重新开始一局游戏</button><br>
    <span>请输入要猜的数字: </span>
    <input type="text" id="guessNumber">
    <button id="guess" >猜</button><br>
    <span>已经猜的次数：</span>
    <span id="count">0</span><br>
    <span>结果：</span>
    <span id="result"></span>

    <script>
        //生成一个随机数1-100
        var rightNumber=Math.floor(Math.random()*100)+1;
        var count=0;
        $("#guess").click(function(){
           count++;
           $("#count").text(count);
           var guessNumber=$("#guessNumber").val();
           if(guessNumber>rightNumber){
             $("#result").text("猜大了");
           }else if(guessNumber<rightNumber){
              $("#result").text("猜小了");
           }else{
            $("#result").text("猜对了");
           }
        });

        $("#again").click(function(){
            rightNumber=Math.floor(Math.random()*100)+1;
            count=0;
            $("#count").text(count);
            $("#result").text("");
            $("#guessNumber").val("");
        })
    </script>

</body>
</html>

留言板：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>
    <!-- 引入jquery路径，根据自己保存的js路径在哪，填写路径 -->
    <script src="jquery-3.7.1.min.js"></script>
    <script>
 
        function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }
            //2. 构造节点
            var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
            //3. 把节点添加到页面上    
            $(".container").append(divE);

            //4. 清空输入框的值
            $('#from').val("");
            $('#to').val("");
            $('#say').val("");
            
        }
        
    </script>
</body>

</html>