Html+Css+Js_html js-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80286232/article/details/145077056

一:HTML

1.1 HTML概念

网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

1.2 什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素标记:标签，不同的标签实现不同的功能语言:人与计算机的交互工具

1.3 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户展现音频,视频,图片表格,列表超链接

1.4 HTML书写规范

HTML标签是以尖括号包围的关键字例如 HTML标签通常是成对出现的，有开始就有结束 HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开) 属性放在开标签内 HTML标签不区分大小写,建议全小写HTML标签支持合理的嵌套开闭标签之间加要展示的内容文件后缀是html,写完后使用浏览器打开

<a href="http://www.baidu.com" target="_blank">超链接</a>

1.5 开发工具

VSCode (微软) (我们使用这款)HBuilderX (国产)WebStorm (IDEA家族的)Dreamweaver (考古队)

1.5.1 安装 VSCode

默认下一步下一步就可以.

建议勾选2345,这样可以在右键时有一个提示"使用VSCode打开文件"

1.5.2 插件

安装插件Chinese (Simplified)(简体中文)

Auto rename tag (自动改标签名)Material lcon Theme (图标样式)

open in browser (快速使用浏览器打开页面)

以上几个是非常墙裂建议安装!,在应用商店,输入以上几个的名字即可

1.5.3 使用vscode

使用VSCode,最好的方式先在本地磁盘创建好一个前端项目(文件夹)使用VSCode打开该文件夹创建页面文件

1.5.4 运行

1 在磁盘中找到文件,使用浏览器打开2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开

二、HTML基本标签

2.1 结构(骨架)标签

<html>:根标签 <head>：网页头标签 <title></title>:页面的标题 </head> <body></body>：网页正文 </html>

属性名	代码	描述
text	< body text="#f00">	设置网页正文中所有文字的颜色
bgcolor	< body bgcolor="#00f">	设置网页的背景色
background	< body background="1.png">	设置网页的背景图

颜色的表示方式：第一种方式：用表示颜色的英文单词，例，red green blue 第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405第三种方式: 用三原色rgb(0,0,0) 数字取值0-255

2.2 排版标签

可用于实现简单的页面布局注释标签：快捷键 ctrl + ？换行标签：< br> (单标签,没有行间距)段落标签：

< p>文本文字

特点：段与段之间有空行 (行间距比较大)

属性：align对齐方式(left、center、right)

水平线标签:< hr/> (单标签)

属性:

width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)像素单位px,长度固定百分比单位% ,长度随着浏览器窗口会变化

size: 水平线的粗细 (像素表示，例如：10px)

color:水平线的颜色

align:水平线的对齐方式

2.3 块标签

块标签和行标签是无意义的标签，他们写上去没有明显的效果，但是可以单独成块或者成行

后期一般结合css和js使用

使用CSS+DIV是现下流行的一种布局方式

标签	代码	描述
div	< div>	行级块标签，独占一行，换行
span	< span>	行内块标签，所有内容都在同一行

2.4 基本文字标签

font标签处理网页中文字的显示方式

属性名	代码	描述
size	< font size="7">	用于设置字体的大小，最小1号，最大7号
color	< font color="#f00">	用于设置字体的颜色
face	< font face="宋体">	用于设置字体的样式

2.6 标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签	代码	描述
h1	< h1>	1号标题，最大字号
h2	< h2>	2号标题
h3	< h3>	3号标题
h4	< h4>	4号标题
h5	< h5>	5号标题
h6	< h6>	6号标题，最小字号

2.7 列表标签

无序列表123有序列表day01day02day03

无序列表：使用一组无序的符号定义， < ul>< /ul>

有序列表：使用一组有序的符号定义， < ol>< /ol>

属性值	描述	用法举例
1	数字类型	< ul type="1">< /ul>
A	大写字母类型	< ul type="A" >< /ul>
a	小写字母类型	< ul type="a">< /ul>
I	大写古罗马	< ul type="I">< /ul>
i	小写古罗马	< ul type="i">< /ul>

列表嵌套：无序列表与有序列表相互嵌套使用

代码举例： <ol> <li></li> <li></li> <li> <ul> <li></li> </ul> </li> </ol>

2.8 图片标签

在页面指定位置处中引入一幅图片， < img />

属性名	描述
src	引入图片的地址
width	图片的宽度
height	图片的高度
border	图片的边框
align	与图片对齐显示方式
alt	提示信息

路径问题:./ 当前文件夹 .../ 上一层文件夹../../上两级目录

2.9 超链接标签

在页面中使用链接标签跳转到另一页面标签： < a href="">< /a>属性：href:跳转页面的地址(跳转到外网需要添加协议) 设置跳转页面时的页面打开方式，target属性_blank在新窗口中打开_self在原页面中打开

<!-- 图片背后是连接 --> <a href="https://baike.baidu.com/item/Java/85979?fr=ge_ala"> <img src="../images/6.jpg" width="200px"> </a>

2.10 表格标签

表格标签非常重要,用于在项目中展示数据的,例如下方这个

普通表格(table,tr,td)

<table> <!-- 表格 --> <tr> <!-- table row 行 --> <td></td> <!-- table data单元格数据 --> </tr> </table>

表格的列标签(th)：内容有加粗和居中效果

<table> <thead> <!-- 表头,一般用在第一行--> <th></th> <!-- table head--> </thead> </table>

表格的列合并属性(colspan)：在同一行内同时合并多个列 column 列

<table> <tr> <td colspan="合并的列数"></td> </tr> </table>

表格的行合并属性(rowspan)：在同一列跨多行合并

<table> <tr> <td rowspan="合并的行数"></td> </tr> </table>

三、HTML表单标签

html表单用于收集不同类型的用户输入数据

3.1 form元素常用属性

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理method:请求方式：get 和postget:地址栏,请求参数都在地址后拼接 path?name=张三&password=23456不安全效率高get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据post：地址栏：请求参数单独处理。安全可靠些效率低post请求大小理论上无限；一般用于插入删除修改等操作

enctype:表示是表单提交的类型默认值：application/x-www-form-urlencoded 普通表单multipart/form-data 多部分表单(一般用于文件上传)

3.2 input元素

form结合input输入框

作为表单中的重要元素，可根据不同type值呈现为不同状态

属性值	描述	代码
text	单行文体框	< input type="text"/> 默认的
password	密码框	< input type="password"/>
radio	单选按钮	< input type="radio"/>
checkbox	复选框	< input type="checkbox"/>
date	日期框	< input type="date"/>
time	时间框	< input type="time"/>
datetime	日期和时间框	< input type="datetime"/>
email	电子邮件输入	< input type="email"/>
file	文件上传	< input type="file"/>
hidden	隐藏域	< input type="hidden"/>
submit	表单提交按钮	< input type="submit"/>
button	普通按钮，配合js使用	< input type="button"/>
reset	重置按钮	< input type="reset"/>

input标签中属性value 输入框的值name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据

<!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>
    <form action="标题标签.html">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        性别: <input type="radio" name="gender" value="male" checked>男
            <input type="radio" name="gender" value="female">女<br>
            <!-- checkbox属性表示多选按钮，可以多选 -->
        爱好: <input type="checkbox" name="hobby" value="reading"> 阅读
            <input type="checkbox" name="hobby" value="swimming"> 游泳
            <input type="checkbox" name="hobby" value="running"> 跑步<br>
        日期: <input type="date" name="birthday"><br>
        时间: <input type="time" name="time"><br>
        日期和时间: <input type="datetime-local" name="datetime"><br>
        邮箱: <input type="email" name="email"><br>
        电话: <input type="tel" name="tel"><br>
        文件上传: <input type="file" name="file"><br>
        隐藏域: <input type="hidden" name="hidden" value="123456"><br>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="button" value="确定">
    </form>
</body>
</html>

3.3 select 元素(下拉列表)

单选下拉列表：< select>< /select>默认选中属性：selected="selected"ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可

<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>

多选下拉列表属性： < select>多选列表：multiple="multiple"

<select multiple="multiple">
    <option></option>
</select>

3.4 textarea元素(文本域)

多行文本框： < textarea cols="列" rows="行">< /textarea>

一、CSS

1.1CSS概念

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、 CSS简介

2.1 什么是CSS

CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，不冲突的共同作用

2.2 CSS能干什么

修饰美化html网页。外部样式表可以提高代码复用性从而提高工作效率。html内容与样式表现分离，便于后期维护。

2.3 CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明选择器通常是您需要改变样式的 HTML 元素(标签)。每条声明由一个属性和一个值组成。

2.4 基础语法

选择器｛属性：值; 属性:值….. ｝

<!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样式 -->
     <style>
        h1 {
            color: red;
            font-size: 14px;
        }
     </style>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

注意事项：请使用花括号来包围声明多个属性声明之间使用分号;分开css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

三、 CSS导入方式

咋写css在咱们html的文件中。

3.1 内嵌方式(内联方式)

把CSS样式嵌入到html标签当中，类似属性的用法

 <div style="color:blue;font-size:50px">This is my HTML page. </div>

3.2 内部方式

在head标签中使用style标签引入css

<style type=“text/css”> //告诉浏览器使用css解析器去解析
    div{
        color:red;
        font-size:50px
     }
</style>

3.3 外部方式

将css样式抽成一个单独文件，使用者直接引用

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部
    <link rel="stylesheet" type="text/css" href=“div.css" />
    rel:代表当前页面与href所指定文档的关系[固定]
    type:文件类型，告诉浏览器使用css解析器去解析[固定]
    href:css文件地址

四、 CSS选择器

功能：选择器是为了找到html元素（标签）的！！！

选择器主要就是选到标签,给其加样式

选择器 { 属性:值 }

主要用于选择需要添加样式的html元素但是选择方式不一样,选择的标签不一样可以选择一个标签,也可以选择同名所有标签,可以选择一类标签,甚至还可以选择后过滤选择

4.1 基本选择器

基本选择器元素选择器(标签名)id选择器类选择器

元素选择器：(标签名选择器)在head中使用style标签引入在其中声明元素选择器 html标签{ 属性:属性值 }

id选择器：给需要修改样式的html元素添加id属性标识在head中使用style标签引入在其中声明id选择器 #id{ 属性:属性值}

创建id选择器：
    <div id="s1">hello,everyone!</div>
    <div id="s2">hello,everyone!</div>
    <div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
        #s1{color: red;font-size: 100px}
        #s2{color: green;font-size: 100px}
        #s3{color: blue;font-size: 100px}
    </style>

class选择器：给需要修改样式的html元素添加class属性标识在head中使用style标签引入在其中声明class选择器 .class名{ 属性:属性值}

创建class选择器：
    <div class="s1">hello,everyone!</div>
    <div class="s2">hello,everyone!</div>
    <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

备注：以上基本选择器的优先级从高到低：id选择器>class选择器>元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    /* 1.标签选择器:直接使用标签的名字 */
        div {
            color: rosybrown;
            font-size: 20px;
        }
        /* 2.id选择器: # 后面跟上 id 的属性值 */
        #myDiv {
            color: blue;
            font-size: 30px;
        }

        /* 3.class选择器:. 后面跟上 class 的属性值 */
        .myClass {
            color: green;       
            font-size: 40px;
        }
        #myDiv2 {
            color: pink;
            font-size: 50px;
        }
        .myClass2 {
            color: purple;
            font-size: 60px;
        }
        .myClass3 {
            color: yellow;
            font-size: 70px;
        }
        /* css 选择器的优先级: 内联样式 > id > class > 标签 */
    </style>
</head>
<body>
    <div>狗蛋</div>
    <div id="myDiv">猫咪</div>
    <!-- class 的属性值可以有多个，用空格隔开 -->
    <div class="myClass myClass2 myClass3" >lovely</div>
</body>
</html>

4.2 属性选择器

根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明 htm标签[属性='属性值']{ css属性:css属性值; } html标签[属性]{ css属性:css属性值; }

body内容：
    <form name="login" action="#" method="get">
        <font size="3">用户名：</font>
        <input type="text" name="username" value="zhangsan"><br>
        <font size="3">密码：</font>
        <input type="password" name="password" value="123456"><br/>
        <input type="submit" value="登录">
    </form>
head中书写：
    <style type="text/css">
        input[type='text'] {
            background-color: pink;
        }
        input[type='password'] {
            background-color: yellow;
        }
        font[size] {
            color: green
        }
        a[href] {
            color: blue;
        }
    </style>

了解:组合选择,兄弟选择器,层级选择器等等 CSS 选择器参考手册 (w3school.com.cn)

五、 CSS属性

5.1 文字属性

属性名	取值	描述
font-size	数值	设置字体大小（像素/百分比）
font-family	默体、宋体、楷体等	设置字体样式
font-style	normal正常; italic斜体;	设置斜体样式
font-weight	100~900数值;bold;bolder;	粗体样式

5.2 文本属性

属性名	取值	描述
color	十六进制;表示颜色的英文单词;	设置文本颜色
text-indent	5px缩进5像素;20%缩进父容器宽度的百分之二十;	缩进元素中文本的首行
text-decoration	dnone;underline;overline;blink;	文本的装饰线
text-align	left;right;center	文本水平对齐方式
word-spacing	normal;固定值;像素	英语单词之间的间隔,得有空格
line-height	normal;固定值;像素	设置文本的行高

5.3 背景属性

属性名	取值	描述
background-color	16进制;用于表示颜色的英语单词;	设置背景色
background-image	url('图片路径')	设置背景图片
background-repeat	repeat-y;repeat-x;repeat;no-repeat;	设置背景图的平铺方向
background-position	top;bottom;left;right ; center;	改变图像在背景中的位置
background-size	像素;百分比	设置图片大小

5.4 列表属性

属性名	取值	描述
list-style-type	disc等	改变列表的标识类型
list-style-image	url("图片地址")	用图像表示标识

阿里巴巴矢量图标库

5.5 尺寸属性

width:设置元素的宽度,单位 px %height:设置元素的高度,单位 px %

5.6 显示属性

显示属性display ，以下是常用取值：none:不显示,即隐藏了block:块级显示,占一行inline:行级显示,占部分

5.7 定位属性

使用的是css属性position,属性值有relative (相对)absolute (绝对)fixed (固定) 使用了定位属性后,才可以使用top,bottom,left,right这些位置属性

相对

相对定位(relative)：元素框偏移某个距离，相对于父元素中其正常位置(相对于自己)进行定位。元素仍保持其未定位前的形状，它原本所占的==空间仍保留==。

<head>
    <style type="text/css">
        h2.pos_left {
            position: relative;
            left: -20px
        }
        h2.pos_right {
            position: relative;
            left: 20px
        }
    </style>
</head>
<body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

绝对定位

绝对定位(absolute)：元素框==从文档流完全删除==，并相对于最近的定位祖先元素进行定位（祖先元素需要定位）。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。

<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            h2.pos_abs {
                position: absolute;
                left: 100px;
                top: 150px
            }
        </style>
    </head>
    <body>
        <h2 class="pos_abs">这是带有绝对定位的标题</h2>
        <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
    </body>
</html>

绝对和相对定位: 最主要的区别相对定位后,原来位置还在绝对定位后,原来位置没了,其他标签元素内容会顶上

固定定位

固定定位(fixed)：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

六、 CSS盒子模型

6.1 边框相关属性

属性名	取值	描述
border-style	solid;double;dashed;dotted等	设置边框的样式
border-color	16进制;用于表示颜色的英文;	设置边框的颜色
border-width	数值	设置边框的粗
border	同时设置线型,颜色,尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* border-style: solid;
            border-width: 10px;
            border-color: red; */
            /* 简写的写法 */
            /* border: 3px solid greenyellow; */
            /* border-radius 用于设置边框圆角 */
            border-radius: 10px;
            border-top: 3px solid blue;
        }
    </style>
</head>
<body>
    <div>
        莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
    </div>
</body>
</html>

6.2 外边距相关属性

margin：外间距,边框和边框外层的元素的距离 (相对于父级元素定位)

属性名		描述
margin	top;right;bottom;left	四个方向的距离
margin-top	数值	上间距
margin-bottom	数值	下间距
margin-left	数值	左间距
margin-right	数值	右间距

6.3 内边距相关属性

padding：内间距,元素内容和边框之间的距离((top right bottom left))

属性值	取值	描述
padding-left
padding-right
padding-top
padding-bottom
padding

一、引言

1.1 JavaScript简介

JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

二、 JS的引入

2.1 在标签内写js(内嵌)

2.2 在文件使用

css写样式,需要把style标签写在head标签内但是写js代码的script标签,可以写在html页面的任何位置,head标签内,body标签内都可,但是一般建议放在后面,越晚加载越好

2.3 独立的js文件

1 创建一个后缀为.js的文件

2 文件内写js代码

3 在html文件内使用

<body>
<!-- 引入方式1：直接在标签内写js代码 
 onclick是js的点击事件， 当点击了button按钮就会触发这个事件说通俗一点
就会执行alert('嘻嘻') 函数
    onclick属性中写js代码，代码会在按钮点击时执行
    alert() 是一个弹框的函数！！！
-->
<button onclick="alert('狗蛋')">点击</button>
</body>
<!-- 引入方式3：引入外部的js文件 -->
<script src="test.js"></script> <!-- 引入js文件 -->
<!-- 引入方式2：在文件使用<script>标签引入js -->
<script>
//以下这两行代码是js代码，会在页面加载完成后执行
var a= 10;//声明了一个变量  a的值是10
console.log(a);//控制台输出a的值为10
</script>

三、JavaScript基本语法

3.1 变量

在JavaScript中，

任何变量任何类型都用var关键字来声明，var是variable的缩写。

var是声明关键字，a是变量名，语句以分号结尾(其实可有可无)。
这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。

JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型

补充： let 局部变量,const 常量

3.2 基本数据类型

基本类型有五种

数字(number)
字符串(string)
布尔型(boolean)
未定义(undefined)
空(null)

<script>
    // ------    基本数据类型    -----
    // 1. 数字型 number
    var num1 = 10;
    var num2 = 3.14;
    var num3 = -5;
    
    console.log(num1, num2, num3);
    console.log(typeof num1, typeof num2, typeof num3);
    // 2. 字符串型 string  单引号和双引号都可以
    var str1 = "hello";
    var str2 = 'world';
    console.log(str1, str2);
    console.log(typeof str1);//typeof 运算符可以判断数据类型 string
    // 3. 布尔型 boolean
    var bool1 = true;
    var bool2 = false;
    console.log(bool1, bool2);
    console.log(typeof bool1);//typeof 运算符可以判断数据类型 boolean
    // 4. 空值 null
    var null1 = null;
    console.log(null1);// null 是一个特殊的关键字，表示空值
    console.log(typeof null1);//typeof 运算符可以判断数据类型 object
    // 5. 未定义 undefined
    var x;
    console.log(x);// undefined 是一个特殊的关键字，表示未定义
    console.log(typeof x);//typeof 运算符可以判断数据类型 undefined
</script>

3.3 JSON类型

其实JSON类型是借鉴Java中的对象的思想.

JS中的引用类型其实就是JSON,全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中， JSON是用于标记一个对象的。

JSON非常重要!!!!后期做项目,前后端交互用的数据格式就是JSON.

JSON表示一个对象,它主要作用/目的/应用场景: 存储数据

语法格式: {id:1,age:18,sex:true,name:"zs",phone:[110,120],child:{id:1,age:18}}

JSON对象使用大括号,{}
大括号内,是键值对,键值对使用是冒号分割.{key:value}
键正常写,值得写法区分数字,字符串,布尔值,数组,对象等
- {id:18} 数字直接写
- {name:"张三"} 字符串需要双引号
- {sex:true} 布尔值直接写
- {arr:[1,2,3]} 数组使用[]
- {obj:{}} 对象使用{}
大括号内,可以同时写多个键值对,中间使用逗号隔开
- {id:18,name:"李四",sex:true}

3.4 数组类型

数组是用来存储多个数据

创建时可以是空数组,后面也可以继续赋值
数组没有长度限制
数组存储的类型没有限制
创建数组的语法

var 数组的名字 = []
var 数组的名字 = new Array()

取值赋值的语法

数组名[下标]

<script>
    // 创建数组
    //方式1：使用字面量语法
    var arr1 = [];
    console.log(arr1);
    console.log(typeof arr1);// object
    //通过下标来赋值
    arr1[0] = 1;
    arr1[1] = true;
    arr1[2] = "hello";
    console.log(arr1);// [1, true, "hello"] 存放不同的数据类型
    var arr2 = [1, 2, 3, 4, 5];
    console.log(arr2);
    
    //方式2：使用构造函数
    var arr3 = new Array();//这种写法创建的数组，元素类型都是对象 Object很少用
    console.log(arr3);
    arr3[0] = `hello`;
    arr3[1] = 123;
    console.log(arr3);// ["hello", 123]
    arr3.push(true);//也是可以添加元素的    
    console.log(arr3);// ["hello", 123, true]
    //3.数组的取值 通过下标可以直接取值
    console.log(arr3[0]);// hello
    console.log(arr3[1]);// 123
    console.log(arr3[2]);// true 
    //4.数组的方法  不需要记！！！
    //1.push() 向数组的末尾添加元素
    arr3.push(123);
    console.log(arr3);// ["hello", 123, true, 123]
    //2.pop() 移除数组的最后一个元素
    arr3.pop();
    console.log(arr3);// ["hello", 123, true]
    //3.unshift() 向数组的开头添加元素
    arr3.unshift("world");
    console.log(arr3);// ["world", "hello", 123, true]
    //4.shift() 移除数组的第一个元素
    arr3.shift();
    console.log(arr3);// ["hello", 123, true]
    //5.indexOf() 查找数组中元素的位置
    console.log(arr3.indexOf(123));// 1
    console.log(arr3.indexOf("world"));// -1
    //6.lastIndexOf() 从后往前查找元素的位置
    console.log(arr3.lastIndexOf(123));// 1
    console.log(arr3.lastIndexOf("world"));// -1
    //7.concat() 合并两个数组


    //5.splice() 向数组中添加或删除元素
    //6.sort() 对数组进行排序
    //7.reverse() 反转数组

    
    //8.filter() 过滤数组中的元素
    //8.join() 将数组转换为字符串
    //9.length 数组的长度
    //10.forEach() 遍历数组中的元素
    arr3.forEach(function(item){
        console.log(item);    
    });
    //11.map() 遍历数组中的元素，并返回一个新的数组
</script>

3.5 日期类型

日期设置方法 (w3school.com.cn)

<script>
    // 1.创建日期对象
    var date = new Date();
    console.log(date); // Thu Jan 09 2025 14:48:25 GMT+0800 (中国标准时间)

    //创建时间指定毫秒值，日期对象会自动计算出年月日时分秒
    //时间从1970年1月1日00:00:00 UTC+0开始计时，加上1000 * 60 * 60 * 24 * 365 * 10  得到的年月日时分秒
    var date2 = new Date(1000 * 60 * 60 * 24 * 365 * 3); // Sun Dec 30 1979 08:00:00 GMT+0800 (中国标准时间)
    console.log(date2);
    //创建指定的年月日 月份-1 因为月份是从0开始的
    var date2 = new Date(2021, 10, 24); 
    console.log(date2);//Wed Nov 24 2021 00:00:00 GMT+0800 (中国标准时间)

    //2.获取日期
    console.log(date.getFullYear()); // 获得年份
    console.log(date.getMonth() + 1); // 获得月份，因为getMonth()返回的是0-11，所以要加1
    console.log(date.getDate()); // 获得日
    console.log(date.getDay()); // 获得星期几，0代表星期日，1代表星期一，以此类推

    //3.设置日期
    date.setFullYear(2022); // 设置年份
    date.setMonth(11); // 设置月份，因为getMonth()返回的是0-11，所以要减1
    date.setDate(25); // 设置日
    console.log(date); // 输出设置后的日期对象

</script>

3.6 运算符

算术运算关系运算逻辑运算三目运算

算术运算

名称	运算符
加	+
减	-
乘	*
除	/
求余	%

关系运算

名称	运算符
等于(内容相等即可)	==
小于	<<>
小于或等于	<=<>
大于	>
大于或等于	>=
不等于	!=
值和类型相同	===

三目运算

    <script>      
        console.log("================三目运算=================");
      // 前面的表达式如果为true,就执行冒号左边
      // 如果前面的表达式为false,就执行冒号后边
      console.log(1 > 0 ? "111" : "000");
    </script>

3.7 分支

if
if-else
if-elseif-elseif-else
switch

3.8 循环

while

dowhile
for

3.9 函数

函数就是java中方法 的概念,用来完成某些功能的.

function 函数名(参数1,参数2,...) {
// 执行代码
}
/*
1. function是固定,每个方法都需要设置
2. 没有定义返回值类型,也没有void
3. 函数名,见名知意
4. 参数直接写参数名,没有 数据类型,也没有var
5. 如果要返回数据,通过return 值;返回
*/

    <script>
      // 1 无参无返回值
      function fun1() {
        console.log("无参无返回值...");
      }
      // 调用方法,方法名直接调用
      fun1();

      // 2 有参无返回值
      function fun2(a) {
        console.log("fun2执行");
        console.log(a);
      }
      // 方法有参数,调用时不传参数,方法能执行,但是变量显示未定义
      // 方法有参数,调用时实参多于形参,方法能执行,多余的参数无意义
      fun2(10, 20);

      // 3 无参有返回值
      function fun3() {
        return 200;
      }

      var result = fun3();
      console.log(result);

      // 4 有参有返回值
      // 设计方法,传入2个参数,相加后返回
      
    </script>

特殊的函数定义:匿名函数

      // 5 匿名函数,主要用于配合事件操作
      var obj = function () {
        console.log("匿名函数");
      };
        // 匿名函数可以改成箭头函数(类似java的lambda)
        btn.onclick = () => {
            console.log("yyyyy");
        }

<!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>
    
</body>
<script>
    //1.无参无返回值的函数
    function fun1 () {
        console.log("无参无返回值的函数");
    }
    fun1();//函数的调用
    //2.有参无返回值的函数
    function fun2 (name) {
        console.log("有参无返回值的函数，参数：" + name);
    }
    fun2("张三");//函数的调用
    fun2(true);
    //3.无参有返回值的函数
    function fun3 () {
        //return 关键字就是用来返回值的
        return "无参有返回值的函数";
    }
    var result = fun3();
    console.log(result);//函数的调用
    //4.有参有返回值的函数
    function fun4 (num1, num2) {
        //return 关键字就是用来返回值的
        return num1 + num2;
    }
    var result = fun4(10, 20);
    console.log(result);//函数的调用
    //5.匿名函数
    var fun5 = function () {
        console.log("匿名函数");
    }
    fun5();//用变量的方式调用匿名函数
    //6.匿名函数可以写成箭头函数的形式类似于Java的lambda表达式
    var fun6 = (name)=> {
        console.log("匿名函数，参数：" + name);
    }
    fun6("狗蛋");
    //7.函数作为参数传递【重要！！！】
    function fun7 (callback) {
        callback();
    }
   
    fun7(function () {
        console.log("函数作为参数传递");
    });
    
    //8.函数作为返回值返回
    function fun8 () {
        return function () {
            console.log("函数作为返回值返回");
        }
    }


    var result = fun8();
    result();
    
</script>
</html>

四、常见的弹窗函数

4.1 警告框

    <script>
      function fun1() {
        alert("你好");
      }
      fun1();
    </script>

4.2 确认框

<script>
      function fun2() {
        // 该函数有返回值,是ture/false
        // 点击确定,返回true,点击取消返回fasle
        if (confirm("确定要删除?")) {
          alert("删除成功!!");
        } else {
          alert("取消删除!");
        }
      }
      fun2();
 </script>

4.3 输入框

<script>     
      function fun3() {
        // 会弹出对话框,输入值后点击确定返回输入框的值
        // 点击取消返回的就是null
        var ret = prompt("请输入身份证号!");
        console.log(ret);
      }
      fun3();
    </script>

五、事件

5.1 事件介绍

事件: 就是发生在浏览器(页面)上一件事, 键盘事件 , 鼠标事件 , 表单事件 , 加载事件 等等

5.2 事件绑定方式

事件要想发生,就得将 事件和标签先绑定(确定哪个标签发生什么事情,又有什么响应)

一个完整的事件有三部分

事件源(标签),哪里发出的事.
什么事(事件)
响应(动作效果)

事件绑定,其实就是事件和标签绑定

方式1: 事件源,事件,响应在一起(都写在标签内)
方式2: 事件源,事件在一起(写标签内),响应抽取函数(写script)
方式3: 事件和响应全部抽取(标签是单独标签,事件和响应写在js中)

方式1: 事件源,事件,响应在一起

  <body>
    <!-- 事件源(标签),事件,响应(函数) -->
    <!-- 方式1: 事件源,事件,响应在一起 -->
    <!-- onclick是单击事件,是html属性 -->
    <!-- alert() 函数就是事件的响应 -->
    <button type="button" onclick="alert('听说你点我了?')">按钮</button>
  </body>

方式2: 事件源,事件在一起,响应抽取函数

  <body>
    <hr />
    <!-- 方式2: 事件源,事件在一起,响应抽取函数 -->
    <button type="button" onclick="dian()">按钮</button>
    <script>
      // 定义函数
      function dian() {
        alert("你又点我?!");
      }
    </script>
  </body>

方式3【重要】: 事件和响应全部抽取

    <!-- 方式3: 事件和响应全部抽取 -->
    <button id="btn">再点一下试试</button>
    <script>
      // 1) 先获得标签对象
      var btn = document.getElementById("btn");
      // 2) 给标签对象设置事件以及响应,注意是匿名函数
      btn.onclick = function () {
        alert("上瘾了是不是?!");
      };
    </script>

<!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>
    <!-- 方式1: 事件源,事件,响应在一起(都写在标签内)
        事件源: button
        事件: onclick
        响应: alert('Hello World')
    -->
     <button onclick="alert('Hello World')">点击我</button>
     <!-- 方式2: 事件源,事件在一起(写标签内),响应抽取函数(写script) -->
      <button onclick="sayHello()">点击你</button>
      <!-- 方式3: 事件和响应全部抽取(标签是单独标签,事件和响应写在js中) -->
       <button id="myBtn">点击他</button>
</body>
<script>
    function sayHello() {
        alert('nihao   ');    
    }
    // 方式3: 事件和响应全部抽取(标签是单独标签,事件和响应写在js中)
        //1.获取事件源
    var btn = document.getElementById("myBtn");//btn就是事件源
    //2.绑定事件
    //btn.onclick是事件,这里用匿名函数包裹响应函数,也可以直接写函数名
    btn.onclick = function () {
        alert('你好啊');//3.响应
    }


</script>

5.3 不同事件的演示

这些事件,都是html中标签的属性,都是以onxxx开头

事件名称	描述
onchange	HTML 元素内容改变
onblur	输入框失去焦点
onfocus	输入框获得焦点
onclick	用户点击（单击）HTML 元素
ondblclick	用户双击HTML元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onkeyup	键盘弹起
onkeypress	按压键盘
onload	浏览器已完成页面的加载
onsubmit	表单提交

六、DOM操作

6.1 概述

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM

有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式

JavaScript 能够改变页面中的所有 HTML 元素。

JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。

6.2 查找元素

为啥要查找元素？找到元素对元素进行操作！！

查找元素(标签)有很多方式

通过id查找元素
- document.**getElementById**("id属性值");
- 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
- 如果未找到该元素，则 x 将包含 null。
通过标签名查找元素
- 方法：**getElementsByTagName**("合法的元素名");
- 如果找到,返回的是数组
通过class查找元素
- 方法：**getElementsByClassName**("class属性的值")
- 如果找到,返回的是数组

<!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>
    <button id="btn1">按钮1</button>
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>  
    </ol>
    <div class="box">zuixiaohua</div>
    <div class="box">遇事不决 </div>
    <div class="box">嘻嘻嘻</div>
</body>
<script>
    // 1.通过id属性查找元素  id属性是唯一的
    var btn1 = document.getElementById("btn1");//返回值是一个元素对象
    console.log(btn1); // <button id="btn1">按钮1</button>
    // 2.通过标签名查找元素
    var lis = document.getElementsByTagName("li");//返回值是一个HTMLCollection 数组对象
    console.log(lis); // [<li>列表1</li>, <li>列表2</li>, <li>列表3</li>]
    //扩展
    console.log(lis[1]); // <li>列表2</li>
    // 3.通过类名查找元素
    var divs = document.getElementsByClassName("box");//返回值是一个HTMLCollection 数组对象
    console.log(divs); // [<div class="box">zuixiaohua</div>, <div class="box">遇事不决 </div>, <div class="box">嘻嘻嘻</div>]
</script>
</html>

6.3 元素内容的查找和设置

元素内容,是指标签开闭之间的内容.

<<><<><=<>p>这就是内容p>

<<><<><<><=<>p><<>span>这就是内容span>p>

查找和设置使用的是相同的属性

innerHTML 获得或设置标签的内容

innerText 获得或设置标签的内容

<!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>
    <div class="container">
        <h1>翩若惊鸿，婉若游龙</h1>
    </div>
    <button id="btn">点击</button>
</body>
<script>
    // 获取元素
    var container= document.getElementsByClassName("container");//数组
    //数组没有属性叫innerHTML，所以要用下标取元素
    //1.获取元素的内容  带有标签的
    console.log(container[0].innerHTML); //[div.container]//获取元素的内容  <h1>翩若惊鸿，婉若游龙</h1>
    //2.获取元素的内容  不带标签
    console.log(container[0].innerText); //翩若惊鸿，婉若游龙 //获取元素的文本内容

    //设置元素的内容
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        //3.设置元素的内容  带标签
        //container[0].innerHTML = "<p>落霞与孤鹜齐飞，秋水共长天一色。</p>"; //设置元素的内容  带有标签的
        container[0].innerText = "<p>落霞与孤鹜齐飞，秋水共长天一色。</p>"; //设置元素的内容  不带标签
    }
</script>
</html>

6.4 元素属性的查找和设置

<div id="xi" class="c" >嘻嘻</div>

元素属性,是指开标签内的属性,通过dom对象直接调用操作.比如domObj.iddomObj.namedomObj.value...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .input-class {
            border: 1px solid red;
            background-color: purple;
        }
        .new-class {
            border: 1px solid blue;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" id="input1" value="hello" class="input-class" name="input-name">
    <button id="btn1">按钮1</button>
</body>
<script>
    // 获取元素
    var input1 = document.getElementById("input1");
    // 1.获取元素的属性
    console.log(input1.type); // text
    console.log(input1.id); // input1
    console.log(input1.value); // hello
    console.log(input1.name); // input-name
    console.log(input1.className); // input-class
    // 2.设置元素的属性
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function() {
        input1.value = "world"; // 设置input1的value属性为"world"
        input1.type = "password"; // 设置input1的type属性为"password"
        //input1.className = "new-class"; // 设置input1的className属性为"new-class"
        input1.setAttribute("class", "goudan"); // 设置input1的disabled属性为true
    }   
</script>
</html>

6.5 元素CSS样式的查找和设置

元素css样式的查找和设置,是指标签中style的属性值的获得和设置获得属性值元素对象.style.属性设置属性值元素对象.style.属性 = ""

  <body>
    <div
      id="box"
      style="width: 200px; height: 200px; background-color: red"
    ></div>
    <button id="btn1">获得css样式</button>
    <button id="btn2">设置css样式</button>
  </body>