前端七七八八

最新推荐文章于 2026-08-17 23:30:53 发布

原创最新推荐文章于 2026-08-17 23:30:53 发布 · 936 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了HTML的结构、语法、文本、图片、列表、链接、表格、表单等元素，以及CSS的内联、内部和外部样式、选择器、属性等概念。此外，还讲解了JavaScript的基本语法、数据类型、运算符、事件处理和DOM操作。内容涵盖了B/S架构、前端流程、资源类型、HTML标签、CSS语法以及JavaScript的基础知识。

HTML与CSS

1.软件架构

B/S（Brower/Server,浏览器/服务器）模式又称B/S结构,是Web兴起后的一种网络结构模式.Web浏览器是客户端最主要的应用软件.

这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用.

B/S主用于JavaWeb,而C/S主用于JavaSE

2.前端流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hdg4fdZJ-1638427594679)(https://s3.jpg.cm/2021/08/02/I8E168.png)]

3.资源

3.1 静态资源

所有用户访问,看到的效果相同

eg: 文本,图片,音频, $html\quad css\quad javascript$

如果用户请求的是静态资源,那么服务器会将静态资源发送给浏览器,浏览器内置引擎可以解析这些资源

3.2 动态资源

所有用户访问,看到的效果不一样

eg: jsp/servlet,php,asp

如果用户请求的是动态资源,那么服务器转换这些动态资源到静态资源发送给浏览器.

4.HTML

超文本标记语言

超文本:利用超链接的方法,将不同空间的文字联系在一起的网状文本.

标记语言:由标签组成的信息,<标签名字>,eg: html,xml,不是编程语言

后缀名是html

4.1 基本语法

标签分为:

围堵标签: 开始标签和结束标签 <html> </html>$
自闭和标签: $< b r / >$ 开始即结束.
在开始标签可以定义属性,由键值对构成,属性可以用单引号或者双引号
HTML标签不区分大小写,但是最好用小写

4.2 文件标签

html $h t m l$ 文件的根标签
head 用于指定html文件的属性
title 定义标题
body 体标签
!DOCTYPE html $h t m l 5$ 文件中,定义该文件为 $h t m l$ 的标签.

<!DOCTYPE html>
<html lang="en"> //指定页面是哪个国家,非China会显示页面翻译
<head> //head 标题标签
    <meta charset="UTF-8"> //指定编码格式
    <title>Title</title>
</head>
<body>

</body>
</html>

4.3 文本标签

HTML的注释写法:

<!--注释内容-->

$b r$ 标签换行

你好世界<br>
zero

$h 1 到 h 6$ 标题标签

<h1>这是标题1</h1>
<h2>这是标题2</h2>

段落标签

<p>你是不是智商有问题</p>
<p>你是不是智商有问题</p>

$h r$ 标签显示一条水平线

自闭合标签,可以选择属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VALfCDjG-1638427594694)(https://s3.jpg.cm/2021/08/02/I8BVNQ.png)]

<hr color="red" width="100" size="90" align="left">
<!--从左往右: 颜色 长度 厚度 对齐方式-->

4.4 字体标签

$b$ 加粗
$i$ 斜体

<b><i>我是sb</i></b>

$f o n t$ 字体属性
$c e n t e r$ 相对父元素文本居中

<font color="red" size="12" face="楷体">什么垃圾</font>
<!--颜色 大小 字体-->
<font color="#0000FF" size="12" face="楷体">什么垃圾</font>
<!-- 十六进制表示红绿蓝占比-->
<!-- 如果用12%表示相对父元素的占比-->

color 属性可以通过英文单词和 $r g b (x, y, z)$ 赋值

此外还有些特殊字符,需要特别的代码才能显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMIpIn7O-1638427594696)(https://s3.jpg.cm/2021/08/03/I8BUo2.png)]

4.5 图片标签

$< i m g >$ 表示图片标签,其中有很多属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPFuQd1Z-1638427594698)(https://s3.jpg.cm/2021/08/03/I8BbDH.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E2xOqDVd-1638427594700)(https://s3.jpg.cm/2021/08/03/I8B1VL.png)]

<img src="images.jpg">

由此延伸,相对路径的格式:

$. /$ 表示以当前目录为起点

$. . /$ 表示上一级目录为起点

4.6 列表标签

li 定义列表中的项
ol 有序列表
ul 无序列表

<ol type="A" start = 3>    <li>睡觉</li>    <li>刷牙</li>    <li>喝水</li></ol>

下面是无序列表的属性

4.7 链接标签

$ $ 标签定义超链接，用于从一张页面链接到另一张页面。
默认在当前窗口打开超链接,也可以通过属性设置

属性:

href 定义 $u r l$ ,也可以访问当前项目写得html
target 默认值是 $_self$ ,在本页面内打开 _blank 另起一个新页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8RLG0Fwh-1638427594704)(https://s3.jpg.cm/2021/08/03/I8gAv2.png)]

<a href="https://www.w3school.com.cn/tags/tag_a.asp"> 点我 </a><br><a href="./1_HelloWorld.html">很菜</a><br><a href="mailto:12123633@qq.com">联系我</a>

也可以通过特定格式,在url写入邮箱

写mailto标注收件人邮箱

4.8 块标签

span 标签被用来组合文档中的行内元素,通常配合CSS使用

div 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联.一个div占一整行·

4.9 语义化标签

<header> 标签定义文档的页眉（介绍信息）

<footer> 标签定义文档或节的页脚.

除此之外没有意义,只是提高可读性.

html5中,还提供了其他语义标签,在此不做介绍

4.10 表格标签

<table>标签定义 HTML 表格.

<tr>表示表格内的一行

<td> 定义单元格

<th>定义表头单元格,一个th就是一个单元格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTRvsTEL-1638427594705)(https://s3.jpg.cm/2021/08/03/I8znok.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ORCVJip6-1638427594707)(https://s3.jpg.cm/2021/08/03/I8z5De.png)]

除此之外,还有caption定义表格标题

表头单元格默认加粗

<table border="1" width="100%" cellspacing="0">    <caption>HelloWorld</caption>    <th>月份</th>    <tr>        <th>Month</th>        <th>Savings</th>    </tr>    <tr>        <td>January</td>        <td>$100</td>    </tr></table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4HGAsyp-1638427594708)(https://s3.jpg.cm/2021/08/03/I8zY2E.png)]

<thead> 那些是语义化标签,只是提高可读性

<rowspan>,<colspan>表示合并单元格

<table border="1" width="100%" cellspacing="0">    <caption>HelloWorld</caption>    <tr>        <td rowspan="2">id</td>        <td>姓名</td>        <td>成绩</td>    </tr>    <tr>        <td colspan="2">王浩</td>    </tr></table>

当每一行的单元格数都不同时,有时需要合并单元格,因为每行的单元格数都不同,所以需要合并的单元格数并不确定.这时可以考虑在每行嵌套一个表格.

4.11 表单标签

用于采集用户输入的数据的.用于与服务器进行交互

<form> 标签定义表单.定义一个范围,表示收集用户信息的范围,即用户提交数据的范围.

属性值含义

action	URL	规定当提交表单时向何处发送表单数据。
method	get post	规定用于发送 form-data 的 HTTP 方法。

表单里的数据要想被提交,必须指定name属性

<form action="" method="get">    用户名:<input name="username"><br>    密码:<input name="password"><br>    <input type="submit" value="登录"><br></form>

关于 $g e t$ 和 $p o s t$ 的区别

get请求参数(以上图代码为例,指提交的数据)会在地址栏中显示,而post不会
url的长度在get是有限制的,但post没有

4.11.1 input

$i n p u t$ 标签可以改变 $t y p e$ 的值,

type 可取值:

text 文本输入框默认值
password 密码输入框
radio 单选框 如果想实现单选效果,需要让单选框name属性值相同,一般会给每个单选框指定value属性,来获取提交后的值
checkbox 复选框
checked 默认值
placeholder : 输入框的提示信息
File :提供文件
hidden:会自动隐藏,用于提交一些隐藏信息

label : 指定输入框的文字描述信息,当input的id与label的for一致时,我们就可以将label与输入框绑定

<form action="" method="get">    <label for="username">用户名</label>:<input id="username" name="username" type="text" placeholder="请输入不多于15字"><br>    密码:<input name="password" type="password"><br>    性别:<input name="gender" type="radio" value="male" checked> 男         <input name="gender" type="radio" value="famale"> 女<br>    爱好:<input name="hobby" type="checkbox" value="fight"> 打架        <input name="hobby" type="checkbox" value="water" checked> 吹水        <input name="hobby" type="checkbox" value="homework"> 写作业<br>    照片:<input type="file"><br>    隐藏域:<input type="hidden" id="你在干什么"><br>    <input type="submit" name="id" value="登录"><br></form>

sumbit按钮:
button 按钮,不加其他代码只是一个按钮
img 图片的提交按钮,要附注src
color 取色器,只要name有值就会被提交
date 日期.还有 datetime_local
email 邮箱: 提交时会做正则校验.
number 数字:只允许输入数字

 <input type="submit" name="id" value="登录"><br><input type="date" name="birthday"><br>

4.11.2 select 下拉列表

子元素option记录列表项

语法:

<select name="hometown">            <option>---请选择---</option>            <option>湖南</option>            <option>江西</option></select><!--可以赋值value属性改变提交的值-->

4.11.3 textarea

属性:

rows 展示多少行
cols 展示多少列

5.CSS

页面美化和布局控制

层叠:多个样式作用于同一个HTML文件上.

5.1 与HTML的结合方式

内联样式

<div style="color: red;">你好,css</div>

内部样式

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

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            color: blue;        }    </style></head><body><div>你好,css</div></body></html>

外部样式

定义css文件
在css文件定义样式
在需要的文件head标签引入css文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="CSS/color.css"><!--    rel是定义当前文件与引入文件的关系--></head><body><div>你好,css</div></body></html>

也可以不用link引入.参考如下: 同样需要在head标签内

    <style>        @import "CSS/color.css";    </style>

5.2 CSS语法

格式:

选择器{   属性名:属性值;   ...}

选择器:筛选具有相同特征的元素,

最后一个属性可以不加**,**

5.3 基本选择器

5.3.1 id选择器

语法:

#id名{    属性名 = 属性值;}

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #d1{            color: red;        }    </style><!--    貌似id不允许用纯数字--><!--    rel是定义当前文件与引入文件的关系--></head><body><div id="d1">你好,css</div></body>

5.3.2 元素选择器

选择具有相同标签的元素,

语法:

标签名称{}

$i d$ 选择器的优先级比类选择器更高

5.3.4 类选择器

具有相同的class属性的元素.

语法:

.class名{    属性名:属性值;}

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #d1{            color: red;        }        .cls1{            color: blue;        }    </style><!--    貌似id不允许用纯数字--><!--    rel是定义当前文件与引入文件的关系--></head><body><div id="d1">你好,css</div><div class="cls1">你好,css!</div></body>

5.4 扩展选择器

5.4.1 选择所有元素

语法:

*{}

5.4.2 并集选择器

下列提及选择器的样式都按代码改变

选择器1,选择器2{    }

5.4.3 子选择器

选择器1元素下的选择器2元素

选择器1 选择器2{}

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div p{            color: red;        }    </style><!--    貌似id不允许用纯数字--><!--    rel是定义当前文件与引入文件的关系--></head><body><div>    <p>你好世界!</p></div><div>hello,css!</div></body>

5.4.4 父选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”,孙子或兄弟都不行.

5.4.5 属性选择器

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器

eg:可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像

img[alt] {border: 5px solid red;} input[type="text"]{            color :red; }/*将输入框type=text属性的元素全部变红*/

5.4.6伪类选择器

伪类用于定义元素的特殊状态

以链接为例

/* 未访问的链接 */a:link {  color: #FF0000;}/* 已访问的链接 */a:visited {  color: #00FF00;}/* 鼠标悬停链接 */a:hover {  color: #FF00FF;}/* 已选择的链接 */a:active {  color: #0000FF;}

5.5 属性

5.5.1 字体文本

font-size 字体大小
color
text-align 对齐方式
line-height 行高

5.5.2 背景

5.5.3 边框

border :设置边框,是复合属性.

所谓的复合属性就是类型 border 这样的属性，能够一个属性规定对象的多个样式

p{            font-size: 30px;            text-align: center;            border: 3px solid red;/*这里同时赋值多个属性*/}

5.5.4 尺寸

width
height

5.5.5 背景

background

复合属性

div{            width: 2000px;            height: 800px;            background: red url("image/banner_1.jpg") no-repeat center;        }

5.6 盒子模型

控制布局

外边距: CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间

即当前边框与父边框之间的距离

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间

即当前边框与子边框之间的距离

但是默认情况下:调整内边距会影响盒子大小.

可以使用box-sizing 设置为border-box,需要使用在外围的盒子上,防止外围盒子变化.

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            border: red solid;        }        .div1{            width: 200px;            height: 200px;            padding: 50px;            box-sizing: border-box;        }        .div2{            width: 100px;            height: 100px;        }    </style><!--    貌似id不允许用纯数字--><!--    rel是定义当前文件与引入文件的关系--></head><body>    <div class="div1">        <div class="div2">        </div>    </div></body>

还有一个是浮动属性

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它.典型的应用就是报纸上围绕图片环绕文字.

根据float取值,可以分为:

left 表明元素必须浮动在其所在的块容器左侧的关键字.
right 表明元素必须浮动在其所在的块容器右侧的关键字
none 表明元素不进行浮动的关键字
inline-start 关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            border: red solid;            float: left;        }        .div1{            width: 200px;            height: 200px;            padding: 50px;            box-sizing: border-box;        }        .div2{            width: 100px;            height: 100px;        }    </style><!--    貌似id不允许用纯数字--><!--    rel是定义当前文件与引入文件的关系--></head><body>    <div>aaaa</div><div>bbbb</div></body></html>

6.JavaScript

客户端脚本语言,运行在客户端浏览器中,每个浏览器都有解析JavaScript的引擎.

脚本语言不需要编译,可以直接被浏览器解析执行.

作用:可以增强用户与HTML页面交互的过程,让页面有动态的效果,增强用户体验.

JavaScript = ECMAScript+ JavaScript所特有的(BOM+DOM)

6.1 ECMAScript

客户端脚本语言的标准

6.1.1 与html的结合方式

6.1.1.1 内部`JS`

内部JS就是在html页面内,定义script标签,标签内代码就是内部JS

注意script可以写在任意位置,但不同位置会影响执行顺序.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript</title></head><body>用户名:<input type="text"></body><script>  alert("你好世界!")</script></html>

6.1.1.2 外部JS

引入外部JS文件.由此发现script可以定义多个.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript</title></head><body>用户名:<input type="text"></body><script src="JS/dec.js">  </script></html>

6.1.2 注释

和java完全一样,但是没有文档注释

6.1.3 数据类型

类似Java，数据类型分为两类,一类是引用数据类型,一类是原始数据类型.

先介绍原始数据类型:

number 数字/小数/NaN
String 字符和字符串都用String 表示
boolean
null
undefined 未定义 ,如果一个变量没用默认初始化值,会被默认为undefined

后面两个应该偏向于变量的值

Java是强类型语言.在开辟空间时必须定义数据类型.

而JavaScript 是弱类型语言,没必要定义数据类型.

注意是在script标签里才是JavaScript

语法:

var 变量名 = 初始值;var 变量名;

这里输出到页面的语法是

<script>        var a = "你好世界"        var b = 5;        alert(a);        alert(b);        document.write(a+"<br>");        document.write(b)</script>

6.1.4 typeof

返回变量类型.

<script>        var a = "你好世界"        var b = 5;        alert(a);        alert(b);        document.write(a+"<br>");        document.write(typeof b);//这里是语法格式</script>

null会被返回object

6.1.5 一元运算符

++
–
+(正号)

在JS引擎中,如果不是JS要求的数据类型,会自动进行转换.

其他类型—>number

String --> number 如果字面值是数字,就转为number,不是就转为NaN
boolean–> number true-->1,false = 0

6.1.6 算数运算符

唯一的区别是Java整型运算还是整型.但是JavaScript有可能是小数

6.1.7 赋值运算符

6.1.8 比较运算符

6.1.9 逻辑运算符

其他类型转boolean

number 非0为true
String 非空为true
null和undefined 为 false
所有对象都为true

6.1.10 特殊语法

如果一行只有一条语句,分号可以不写
变量定义可以不用var.第一句是全局变量,第二句是局部变量.

a = 4;var a = 4;

在JavaScript中,switch任意的数据类型都可以接受.
html的空格是&nbsp.

九九乘法表练习:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript</title>    <style>        td{            border: black solid;        }    </style>    <script>        document.write("<table align='center'>");        for(var i=1;i<=9;i++){            document.write("<tr>")            for(var j=1;j<=i;j++) {                document.write("<td>" + i + "×" + j + "=" + i * j + "</td>");            }            document.write("</tr>");        }    </script></head><body></body></html>

6.2.1 ECMAScript定义的基本对象

6.2.1.1 Function

调用

函数名(参数列表)

创建

var fun = new function(形参列表,方法体);//方法一var fun = new Function("a","b","alert(a+b);");fun("333",3);

//方法二function cal(a,b){      alert(a+b);}cal(1,3);

这里方法定义形参的类型不用写,因为都是var.

//方法三var funs = function(a,b) {	alert(a+b);}funs(1,3);//注意没有new!!!!

方法属性

length 新参个数

alert(funs.length);

特点

在JS中,方法调用只与方法名有关,传几个参都不会报错.

var funs = function(a,b) {            alert(a+b);        }        funs(1);

在JS中,方法声明有内置对象arguments,封装了所有实际参数.

function cal(){            var sum = 0;            for (let i = 0; i < arguments.length; i++) {                sum+=arguments[i];            }            return sum;}var x = cal(1,3,4,5);document.write(x);

6.2.1.2`Array`

创建

	   var arrs1 = new Array(1,2,3);	   var arrs2 = new Array(10);       var arrs3 = [1,2,3,4];       document.write(arrs1.length+"<br>");//3       document.write(arrs2.length+"<br>");//10       document.write(arrs3.length);//4

方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BH1F8Kdo-1638427594711)(https://s3.jpg.cm/2021/08/04/IAG2fS.png)]

       var arrs3 = new Array(1,2,4);       /*join(参数) 以指定参数分割*/       let s = arrs3.join(" ");       document.write(s+"<br>");       /*push(参数) 返回新长度*/       arrs3.push(131);       let numbers = arrs3.push("21");       document.write(numbers+"<br>");       document.write(arrs3);

属性

length 长度

特点

JS中,数组的类型是任意的.
JS中,数组的长度是可变的.

6.2.1.3 Date

创建

var d = new Date();

方法

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

       var d = new Date();       document.write(d+"<br>");       document.write(d.toLocaleString()+"<br>");

6.2.1.4 Math

创建

特性:类似Java,不用创建直接使用.

属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EDay85gG-1638427594712)(https://s3.jpg.cm/2021/08/04/IAG3ZW.png)]

方法

唯一值得一提的是random()产生 $[0, 1)$ 的随机数.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVDkPp5M-1638427594716)(https://s3.jpg.cm/2021/08/04/IAGKA2.png)]

6.2.1.5 Global

全局对象,里面的方法不需要对象就可以调用,

方法

url编码: 将字符转换为可通过因特网传输的格式,即在网络传输时,将字符转化为可识别的序列.

GBK编码,一个汉字2个字节

UTF-8编码,一个汉字3个字节.

url编码是将每两个十六进制位前加一个%,然后传输.

encodeURL与字更多的函数的区别是字更多的函数返回值字符数>=encodeURL
parseInt 逐一判断是否为数字,直到非数字部分,将数字部分转为int
isNaN() 要注意的是NaN参与的比较==全部为false.

6.2.1.6 正则表达式

检验字符串规则的类.

单个字符 []

创建

var reg =  new RegExp();var reg =  /正则表达式/; //不能加字符串

方法

test(参数)	检索字符串中指定的值。返回 true 或 false。

	    let name = document.getElementById("username").value;        let reg = new RegExp("\\w{1,20}");//这里是定义字符串里面,所以需要转义        return reg.test(name)	   let name = document.getElementById("username").value;        let reg = /\w{1,20}/   //注意不要写两个/....不需要反义        return reg.test(name)

7.DOM 简单学习

DOM是一个接口.它容许脚本( $j s$ )控制 $W e b$ 页面、窗口和文档.在DOM中，文档是由节点构成的集合，而节点又分为不同的类型。元素( $e l e m e n t$ )节点，文本( $t e x t$ )节点，属性( $a t t r i b u t e$ )节点.

DOM将这些封装为了对象 $E l e m e n t$ ,并允许操控这些对象:

document.getElementById(id);

<body><!--    <img src="image/banner_1.jpg" id="images">--><h1 id="images">标题</h1><script>    let id = document.getElementById("images");    document.write(id);</script></body>

注意代码的定义顺序,如果 $< s c r i p t >$ 定义位置比 $< h 1 >$ 早,那么就会读到对象 $N u l l$ .因为还没定义.

设置属性:

    let id = document.getElementById("images");    document.write(id);    id.align = "center";

修改内容

<body><!--    <img src="image/banner_1.jpg" id="images">--><h1 id="images">标题</h1><script>    let id = document.getElementById("images");    document.write(id);    alert("换内容了!!!")   // id.innerText = "我爱我家";    id.innerHTML = "你妈的";</script></body>

这里涉及两个方法:

innerHTML指的是****从对象的起始位置到终止位置的全部内容,包括Html标签****。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了.

8.事件的简单学习

功能:某些组件被执行了某些功能后,触发某些代码的执行.

如何绑定事件:

直接在html标签上,指定事件的属性(操作).属性值就是js代码.

<head>    <meta charset="UTF-8">    <title>JavaScript</title>    <script>        function cal() {            alert('你妈的');        }    </script></head><body><img id="images" src="image/icon_3.jpg" onclick="cal();"></body>

通过JS获取元素对象,指定事件属性,设置一个函数.

<head>    <meta charset="UTF-8">    <title>JavaScript</title>    <script>        function cal() {            alert('你妈的');        }        function cals() {            alert('我查地位和');        }        let element = document.getElementById("images2");        element.onclick = cals;    </script></head><body><img id="images2" src="image/icon_3.jpg" onclick="cals();"></body>

应用:

模拟灯泡亮灭:

<body><img src="images/off.gif" id="light"><script>    let id = document.getElementById("light");    var flag = false;    id.onclick = function (){        if(flag)            id.src = "images/on.gif";        else            id.src = "images/off.gif";        flag = !flag;    }</script></body>