HTML/CSS/JavaScript 基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41668667/article/details/113275104

本文档详细介绍了HTML的基础，包括简单的示例、语法规则、文本和图片标签、列表、表格和表单。接着讲解了CSS的结合方式、语法、选择器和属性，如字体、背景、边框和盒子模型。最后，概述了JavaScript的基础，包括与HTML的结合方式、数据类型、变量、运算符和流程控制语句，以及基本的对象如函数、数组、日期和正则表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML基础

基本概念

HTML： HTML的全称是Hyper Text Markup Language 超文本标记语言，是用于搭建基础网页，展示页面的内容，是最基础的网页开发语言

1.简单示例

<html>

<head>
    <title>title</title>
</head>

<body>
<FONT color='red'>Hello World</font><br/>

<font color='green'>Hello World</font>

</body>

</html>

2.语法规则

1.html文档后缀名 .html 或者 .htm

2.标签分为

围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>

3.标签可以嵌套

需要正确嵌套，不能你中有我，我中有你

4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

5.html的标签不区分大小写，但是建议使用小写。

3.文件标签

html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签
body：体标签

4.文本标签

注释
 < !-- 注释内容 -->
<!--    hello，world！-->

 <h1>to<h6>：标题标签，h1~h6:字体大小逐渐递减

<p>：段落标签

<br>：换行标签

<hr>：展示一条水平线
属性：color：颜色，width：宽度，size：高度，align：对其方式

<b>：字体加粗

<i>：字体斜体

<font>:字体标签

<center>:文本居中
属性：color：颜色，size：大小，face：字体

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<h1>
    公司简介
</h1>
<!--展示一条水平线-->
<hr color="#ffd700">
<!--第一段落-->
<p>
<!--    设置字体颜色，加粗，倾斜-->
    <font color="#FF0000">xxxxx1</font>xxxxx2<b><i>xxxxx3</i></b>
</p>
<!--第二段落-->
<p>
    xxxxx4
</p>
<!--第三段落-->
<p>
   xxxxx5
</p>
<!--第四段落-->
<p>
    xxxxx6
</p>
<!--展示一条水平线-->
<hr color="#ffd700">

<!--设置字体颜色，大小-->
<font color="gray" size="2">
<!--    设置字体居中-->
    <center>
        xxxxx7<br>
        xxxxx8
    </center>
</font>

</body>
</html>

5.图片标签

img：展示图片

属性：src：指定图片的位置

<img src="/image/banner_1.jpg" align="right" alt="图片显示不出来时名字" width="500" height="500"/>

相对路径
以 . 开头的路径

./：代表当前目录 ./image/1.jpg
…/:代表上一级目录

文件结构
在这里插入图片描述

6.列表标签

有序列表

ol：标签头
li：标签体

<oi>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</oi>

在这里插入图片描述
无序列表

ul：标签头
li：标签体

<ui>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</ui>

在这里插入图片描述
链接标签
a:定义一个超链接

<a href="https://www.baidu.com/" target="_self">百度一下</a>
属性：
	href：指定访问资源的URL(统一资源定位符)
	target：指定打开资源的方式
		_self:默认值，在当前页面打开
		_blank：在空白页面打开

拓展：用一张图片作为资源链接

用一张图片作为资源链接

<a href="http://www.baidu.cn"><img src="image/jiangwai_1.jpg"></a>

7.语义化标签

<header>：页眉

<footer>：页脚

8.div和span

div:每一个div占满一整行。块级标签

<body>
<div>盒子一</div>
<div>盒子二</div>
<div>盒子三</div>
</body>

在这里插入图片描述

div主要用于盒子模型中

span：文本信息在一行展示，行内标签内联标签

9.表格标签

table：定义表格

定义表格基本属性

属性：
width：设置宽度
border：设置边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
bgcolor：背景色
align：对齐方式
********************************************************
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">

</table>

在这里插入图片描述

当我们刷新上面表格时，只会出现一条横线，是因为没有定义表格内容

tr：定义行

定义一行的基本属性

tr属性
bgcolor：背景色
align：对齐方式
th：定义表头单元格
<!--定义表格基本属性-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">
<!--  第一表格的一行内容-->
    <tr>
<!--        第一行为表头，使用<th>标签-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
</table>

显示结果
在这里插入图片描述

从上面我们可以看到，<th>标签是自动居中的

td：定义单元格

colspan：合并列
rowspan：合并行

<!--定义表格基本属性-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">
<!--  第一表格的一行内容-->
    <tr>
<!--        第一行为表头，使用<th>标签-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>

<!--定义内容，td标签默认不是居中的，需要自己手动设置居中-->
    <tr align="center" bgcolor="yellow">
        <td>1</td>
        <td>小龙女</td>
        <td>100</td>
    </tr>

<!--    和并单元格-->
    <tr>
        <td>2</td>
        <td>杨过</td>
        <td>50</td>
    </tr>
    <tr>
        <td>3</td>
        <td>郭靖</td>
        <td>50</td>
    </tr>

</table>

显示结果
在这里插入图片描述
合并单元格操作

<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <tr>

        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>

    <tr>
        <td colspan="2">1</td>
<!--        <td>小龙女</td>-->
        <td>100</td>
    </tr>

    <tr>
        <td>2</td>
        <td>杨过</td>
        <td rowspan="2">50</td>
    </tr>
    
    <tr>
        <td>3</td>
        <td>郭靖</td>
<!--        <td>50</td>-->
    </tr>

</table>

显示结果
在这里插入图片描述

10表单标签

表单概念：用于采集用户输入的数据的。用于和服务器进行交互。

表单申明
form标签

form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：
action：指定提交数据的URL(地址)
method:指定提交方式
分类：一共7种，2种比较常用
get请求
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
post请求
4. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
5. 请求参数的大小没有限制。
6. 较为安全。

```html
<form action="提交的地址" method="提交的方法">
</form>

表单项申明

input标签：表单项申明

<form method="post" action="#">
    姓名：<input type="text" name="username"><br/>
</form>

显示结果
在这里插入图片描述
代码分析

表单项其他属性

type对应属性：
text：文本输入框，默认值
password：密码输入框
********************************
radio：单选框
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
checkbox：复选框
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
********************************
file：文件标签，用于提交文件
********************************
submit：提交按钮
button：普通按钮
image：图片提交按钮
********************************
select：下拉框

placeholder属性：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

基本数据输入

<form method="post" action="#">
    姓名：<input type="text" name="username" placeholder="请输入用户名"><br/>
    密码：<input type="text" name="username" placeholder="请输入密码"><br/>
</form>

在这里插入图片描述

单选框

<form method="post" action="#">
    北京：<input type="radio" name="city"><br/>
    上海：<input type="radio" name="city"><br/>
</form>

显示结果
在这里插入图片描述

单选框：

要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
一般会给每一个单选框提供value属性，指定其被选中后提交的值
checked属性，可以指定默认值

复选框

<form method="post" action="#">
    爱好：<br/>
    <input type="checkbox" name="hobby" value="shopping">英雄联盟<br/>
    <input type="checkbox" name="hobby" value="java">穿越火线<br/>
    <input type="checkbox" name="hobby" value="game">绝地求生<br>
</form>

显示结果
在这里插入图片描述

复选框:

一般会给每一个单选框提供value属性，指定其被选中后提交的值
checked属性，可以指定默认值

file文件标签

<form method="post" action="#">
    上传图片：<input type="file" name="file"><br>
</form>

在这里插入图片描述

按钮

submit：提交按钮
button：普通按钮
image：图片提交按钮

<form method="post" action="#">
    姓名：<input type="text" name="name" placeholder="请输入姓名"><br/>
    <input type="submit" value="提交表单"><br/>
    <input type="button" value="普通按钮"><br/>
    <input type="image" src="./image/icon_1.jpg" value="图片提交按钮"><br/>
</form>

显示结果
在这里插入图片描述

下拉框

select标签: 下拉列表，子元素：option标签：指定列表项

<form action="提交的地址" method="提交的方法">
    
    省份：<select name="province">
    <option value="">--请选择--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected>陕西</option>
</select><br>

</form>

显示结果
在这里插入图片描述

文本域

textarea：文本域
cols：指定列数，每一行有多少个字符
rows：默认多少行。
name：提交对应的名字(K)

<form method="post" action="#">
    自我描述：<textarea cols="20" rows="5" name="des"></textarea>
</form>

在这里插入图片描述

其他

<form action="提交的地址" method="提交的方法">
    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"> <br>
    生日：<input type="datetime-local" name="birthday"> <br>
    邮箱：<input type="email" name="email"> <br>
    年龄：<input type="number" name="age"> <br>
</form>

显示结果
在这里插入图片描述

2.CSS

1.CSS与html结合方式

内联样式

在标签内使用style属性指定css代码

<div style="color: red">hello,css</div>

显示结果
在这里插入图片描述

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
   <!--css样式-->
    <style>
    div{
        color: red;
    }
    </style>
    
</head>
<body>
<div>hello,css</div>
</body>
</html>

外部样式

在head标签内，定义link标签，引入外部的资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 引入css样式-->
    <link rel="stylesheet" href="css/st.css">
</head>
<body>

<div>hello,css</div>

</body>
</html>

2.CSS语法

* 格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}

选择器：选择需要修饰的属性

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:green;
        }
        #div1{
            color: red;
        }
    </style>
</head>
<body>
<div id="div1">英雄联盟</div>
<div class="cls1">绝地求生</div>
</body>
</html>

在这里插入图片描述

3.选择器

选择器是指筛选具有相似特征的元素，大白话说，就是CSS样式指向的内容，当多个选择器指向同一内容，他们之间有优先级的，例如上面的例子

基础选择器

1.id选择器

选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法：

#id属性值{
..............
}
例如：
#div1{
        color: red;
}
<!--指向下面这个id-->
<div id="div1">传智播客</div>

优先级最高

2.类选择器

选择具有相同的class属性值的元素。

语法:
.class属性值{
................
}
例如：
.cls1{
color: blue;
}
<!--指向所有的名字叫cls1的类标签-->
<p class="cls1">哔哩哔哩1</p>
<p class="cls1">哔哩哔哩2</p>

优先级居中

3.元素选择器

选择具有相同标签名称的元素

语法： 
标签名称{
................
}
例如

div{
    color:green;
}
<!--指向所有的div标签-->
<div>blbl</div>
<div>哔哩哔哩</div>

优先级最低

扩展选择器

1.选择所有元素

修饰所有元素

语法： *{
................
}

示例：选择所有，设置为红色
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
          color: red;
      }
    </style>
</head>
<body>
<div id="div1">英雄联盟</div>
<div class="cls1">绝地求生</div>
</body>

2.并集选择器

修饰元素1和元素2

选择器1,选择器2{
................
}
示例：选择1和2，设置为红色
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div,p{
          color: red;
      }
    </style>
</head>
<body>
<div>英雄联盟</div>
<p>绝地求生</p>
</body>

3.子选择器

修饰元素1下的元素2

语法：  选择器1 选择器2{
................
}
示例：筛选选择器1元素下的选择器2元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

      div p{
          color: red;
      }
    </style>
</head>
<body>
<div>英雄联盟
    <p>绝地求生</p>
</div>
</body>

显示结果
在这里插入图片描述

4.父选择器

修饰元素2(子)之上的元素1(父)

语法：  选择器1 > 选择器2{
................
}

示例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
      div > p{
          border: 2px red solid;
      }
</style>
</head>
<body>
<div>
    <p id="s1">绝地求生</p>
</div>
</body>

显示结果
在这里插入图片描述

5.属性选择器

选择元素名称，属性名=属性值的元素

语法
元素名称[属性名="属性值"]{
................
}
示例
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input[type='text']{
            border: 5px solid red;
        }
    </style>
</head>
<body>
<div>
    <input type="text" >
</div>
</body>

显示结果
在这里插入图片描述

6.伪类选择器

选择一些元素具有的状态

 语法： 元素:状态{
................
}
状态
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
示例
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a:link{
        color: pink;
        }

        a:hover{
        color: green;
        }

        a:active{
        color: yellow;
        }

        a:visited{
        color: red;
        }
    </style>
</head>
<body>
<div>
    <a href="#">英雄联盟</a>
</div>
</body>

4.CSS属性

字体

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高

代码示例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       p{
           font-size: 20px;
           color: #8800ff;
           text-align: left;
           line-height: 20px;
       }
    </style>
</head>
<body>
<div>
    <p>英雄联盟</p>
</div>
</body>

背景

background

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       div{
           height: 387px;
           background: url("./image/img.png") ;
       }
    </style>
</head>
<body>
<div>

</div>
</body>

注意：必须设置行高(height)，背景图片才能显示出来

边框

border：设置边框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       div{
           height: 387px;
          border: 2px red solid;
       }
    </style>
</head>
<body>
<div>
</div>
</body>

尺寸

width：宽度
height：高度

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       div{
           height: 387px;
           width: 300px;
          border: 2px red solid;
       }
    </style>
</head>
<body>
<div>
</div>
</body>

显示结果
在这里插入图片描述

5.盒子模型

盒子模型图示
在这里插入图片描述
边距

margin：外边距
padding：内边距

默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

在这里插入图片描述
设置浮动：float
设置浮动可以让盒子横向平铺，既多个盒子占一行，如果不是在浮动，一个盒子占一行。

left：左浮动
right：右浮动

注册界面模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
        }

        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
        }

        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;

        }


        .rg_center{
            float: left;
            /* border: 1px solid red;*/

        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }

        .rg_right > p:first-child{
            font-size: 15px;

        }
        .rg_right p a {
            color:pink;
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px ;
        }

        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 110px;
        }

        #img_check{
            height: 32px;
            vertical-align: middle;
        }

        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }

    </style>

</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    
                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>


</div>


</body>
</html>

登录界面模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
<!--    设置css样式-->
    <style type="text/css">
        #top{
            height: 60px;
            border:2px solid red;
        }
        #body{
            height: 600px;
            border:2px solid red;

        }
        #bottom{
            height: 60px;
            border:2px solid red;
        }

        #login{
            height: 500px;
            width: 400px;
            border:2px solid red;
            float: left;
            margin-top: 50px;
            margin-left: 60%;
            padding-left: 20px;


        }
        .td{
            /*border: red 2px solid;*/
            padding-left: 20px;
            text-align: right;
        }
        .td1{
            /*border: red 2px solid;*/
            padding-left: 20px;
            text-align: left;
        }

        #username,#password,#checkcode{
            width: 200px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;

        }


       .trhead{
          height: 75px;
       }

       .sub{
           width: 75px;
           height: 50px;
           border: red 2px solid;
           border-radius: 5px;
           background-color: #FFD026;
       }

    </style>
</head>
<body>
<div id="top">

</div>
<div id="body">

    <div id="login">
        <form action="#" method="post">
            <table >
<!--   用户名称-->
                <tr class="trhead">
                    <td class="td">用户名</td>
                    <td class="td1"><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
                </tr>

                <tr class="trhead">
                    <td class="td">密码</td>
                    <td class="td1" align=""><input  type="text"   id="password" name="password" placeholder="请输入用户名"></td>
                </tr>

                <tr class="trhead">
                    <td class="td">验证码</td>
                    <td class="td1"><input type="text"  id="checkcode" name="checkcode" placeholder="请输入用户名">
                        <img id="img_check" src="img/verify_code.jpg">
                    </td>
                </tr>

                <tr class="trhead">
                    <td class="td"  colspan="2" style="text-align: center"><input class="sub" type="submit" id="login1" value="登录"></td>
                </tr>

                <tr class="trhead">
                    <td class="td" colspan="2" style="text-align: center"><a href="#">没有账户？点击注册</a></td>
                </tr>

            </table>
        </form>
    </div>

</div>
<div id="bottom">


</div>
</body>
</html>

3.JavaScript基础

基本概念
一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

1.与html结合方式

内部JS

* 内部JS：定义<script>，标签体内容就是js代码

<script>
  alert("Hello World");
</script>

外部JS

* 外部JS：定义<script>，通过src属性引入外部的js文件

<script src="js/a.js"></script>

注意

<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
<script>可以定义多个

2.数据类型

原始数据类型(基本数据类型)

number：数字
整数/小数/NaN(not a number 一个不是数字的数字类型)

string：字符串
字符串 “abc” “a” ‘abc’

boolean: true和false，用来设置逻辑判断的

null：一个对象为空的占位符，在script中，每一个null都是唯一的

undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

引用数据类型

对象

3.变量

变量：一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言。
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法示例

```html
var 变量名 = 初始化值;
例如
    <script>
        //定义变量
        var a  = 3;
        alert(a);
        a = "abc";
        alert(a);

       //定义number类型
        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        //输出到页面上
        document.write(num+"<br>");
        document.write(num2+"<br>");
        document.write(num3+"<br>");
        
        //定义string类型
        var str = "abc";
        var str2 = 'edf';
        document.write(str+"<br>");
        document.write(str2+"<br>");

        //定义boolean
        var flag = true;
        document.write(flag+"<br>");

        // 定义null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"<br>");
        document.write(obj2+"<br>");
        document.write(obj3+"<br>");
    </script>

typeof运算符：用来获取变量的类型

代码示例

    <script >
        
        var num2 = 1.2;
        var num3 = NaN;

        //输出到页面上
        document.write(num2+"---"+typeof(num2)+"<br>");
        document.write(num3+"---"+typeof(num3)+"<br>");

        //定义string类型
        var str = "abc";
        document.write(str+"---"+typeof(str)+"<br>");

        //定义boolean
        var flag = true;
        document.write(flag+"---"+typeof(flag)+"<br>");

        // 定义null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"---"+typeof(obj)+"<br>");
        document.write(obj2+"---"+typeof(obj2)+"<br>");
        document.write(obj3+"---"+typeof(obj3)+"<br>");
    </script>

显示结果
在这里插入图片描述

4.运算符(了解)

一元运算符

只有一个运算数的运算符 ++，-- ， +(正号)

++ --: 自增(自减)
++(–) 在前，先自增(自减)，再运算
++(–) 在后，先运算，再自增(自减)
+(-)：正负号

注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

其他类型转number：

string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

boolean转number：true转为1，false转为0

<script>
var num = 3;
var a = ++ num ;
document.write(num);// 4
document.write(a); // 4
document.write("<hr>"); 分割

var b = +"123abc";
document.write(typeof (b)); 
document.write(b + 1);
document.write("<hr>");分割


var flag = + true;
var f2 = + false;
document.write(typeof (flag) + "<br>");//number
document.write(flag + "<br>");// 1
document.write(f2 + "<br>");// 0
</script>

算数运算符

- - / % …

<script>
var a = 3;
var b = 4;

document.write(a+b +"<br>");
document.write(a-b +"<br>");
document.write(a*b +"<br>");
document.write(a/b +"<br>");
document.write(a%b +"<br>");
</script>

赋值运算符
= += -+…

比较运算符

< >= <= == ===(全等于)

比较方式

类型相同：直接比较

字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型转换，再比较

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

逻辑运算符
&& || !

其他类型转boolean：

number：0或NaN为假，其他为真
string：除了空字符串("")，其他都是true
null&undefined:都是false
对象：所有对象都为true

三元运算符

? : 表达式
var a = 3;
var b = 4;

var c = a > b ? 1:0;

语法：
表达式? 值1:值2;
判断表达式的值，如果是true则取值1，如果是false则取值2；

5.流程控制语句

1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for
*************************************************
<script>
//1 ~ 100 求和  5050
var sum = 0;
for (var i = 1; i <= 100; i ++){
sum += i;
}
alert(sum);


//1 ~ 100 求和  5050
var sum = 0;
var num = 1;
while(num <= 100){
sum += num;
num ++;
}
alert(sum);
</script>

4.JavaScript基本对象

1.方法对象:function

方法对象也称函数对象
1.创建代码格式

1.
function 方法名称(形式参数列表){
方法体
}

2.
var 方法名 = function(形式参数列表){
方法体
}

示例

<script>
    // 定义方法
    function fun2(a , b){
        alert(a + b);
    }
    // 执行方法
    fun2(3,4);
    //查看参数个数
 let number = fun1.length;
 alert(number);
</script>

查看参数个数
方法名.length:代表形参的个数

特点

方法定义是，形参的类型不用写,返回值类型也不写。
方法是一个对象，如果定义名称相同的方法，会覆盖
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

2.数组对象:Array

创建

1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];

方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度

    <script>
        var arr = [1,"abc",true];
        //将数组中的元素按照--分隔符拼接为字符串
        document.write(arr.join("--")+"<br>");
        arr.push(11); //把11方到数组中去

        //显示字符串长度
        document.write(arr.length+"<br>");
    </script>

属性

length:数组的长度

特点

JS中，数组元素的类型可变的。
JS中，数组长度可变的。

3.日期对象:Date

创建

var date = new Date();

方法
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

代码示例

    <script>
        //定义时间
        var date = new Date();
        //显示当前时间
        document.write(date + "<br>");
        //返回当前date对象对应的时间本地字符串格式
        document.write(date.toLocaleString() + "<br>");
        //获取毫秒值
        document.write(date.getTime() + "<br>");
    </script>

4.数学对象:Math

创建
Math对象不用创建，直接使用 Math.方法名();

方法
random()：返回 0 ~ 1 之间的随机数。含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。

属性
PI：圆周率

代码示例

    <script>
       let number = Math.abs(-234);
       alert(number);

       alert(Math.PI);
    </script>

5.正则表达式对象:RegExp

正则表达式：定义字符串的组成规则。其实就是对字符串限定一些条件，先行在网页上过滤不符合条件的字符串对象

当我们向网页传输字符串时，可以使用正则表达式来判断传输的字符串对象是否符合正则表达式的要求

单个字符

[a] 表示一个字符，为a
[ab] 表示一个字符，a或b
==[a-zA-Z0-9_]==表示一个字符，a-9之间一个

特殊符号代表特殊含义的单个字符

\d:单个数字字符 [ 0-9 ]

\d 表示0到9任意一个数字字符

\w:单个单词字符[ a-zA-Z0-9_ ]

\w 表示a-9任意一个单词字符

量词符号

?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次

{m,n}:表示 m<= 数量 <= n

m如果缺省： {,n}:最多n次
n如果缺省：{m,} 最少m次

开始结束符号

^:开始
$:结束

正则对象

创建

var reg = new RegExp("正则表达式");

例如：var reg = new RegExp("^\\w{6,12}$");  表示单词字符，最少6个人，最多12个。

var reg = /正则表达式/;
var reg2= /^\w{6,12}$/;  表示单词字符，最少6个人，最多12个。

方法

test(字符串):验证指定的字符串是否符合正则定义的规范
符合返回true，不符合返回false

例如：
var reg = new RegExp("^\\w{6,12}$"); 定义正则表达式
var username = "zhangsan"; 

test方法验证
var flag = reg.test(username);
alert(flag);

6.Global对象

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。

调用方式：方法名();

方法

encodeURI():对字符串进行url编码
decodeURI():对字符串进行url解码


encodeURIComponent():对字符串进行url编码,编码的字符更多
decodeURIComponent():对字符串进行url解码


parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

eval():将JavaScript字符串转换为JavaScript程序

代码示例

1.
encodeURI():对字符串进行url编码
decodeURI():对字符串进行url解码
var str = "哔哩哔哩";

将字符串编码为url格式
var encode = encodeURI(str);
document.write(encode +"<br>");//显示结果：％E5％93％94％E5％93％A9％E5％93％94％E5％93％A9

将url格式编码解析为字符串格式
var s = decodeURI(encode);
document.write(s +"<br>");//显示结果：哔哩哔哩


2.
encodeURIComponent():对字符串进行url编码,编码的字符更多
decodeURIComponent():对字符串进行url解码,编码的字符更多
var str1 = "http://www.baidu.com?wd=哔哩哔哩";

将字符串编码为url格式
var encode1 = encodeURIComponent(str1);
document.write(encode1 +"<br>");//显示结果：http％3A％2F％2Fwww.baidu.com％3Fwd％3D％E5％93％94％ E5％93％A9％E5％93％94％E5％93％A9

将url格式编码解析为字符串格式
var s1 = decodeURIComponent(encode);
document.write(s1 +"<br>");//显示结果：哔哩哔哩


parseInt():将字符串转为数字
*逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
var str = "1234abc123123";
var number = parseInt(str);
document.write(number);//显示结果为1234

isNaN():判断一个值是否是NaN
var a = NaN;
document.write(a == NaN); //显示false
document.write(isNaN(a)); //显示true

eval():将JavaScript字符串转换为JavaScript程序
var jscode = "alert(123)";
eval(jscode); //会弹出一个提示，显示123