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

本文链接：https://blog.youkuaiyun.com/Hello_zbs/article/details/105720079

本文介绍了网页编程设计中的HTML和JavaScript基础知识，包括HTML的结构、基础语法和JavaScript的组成部分、基础语法。HTML是一种超文本标记语言，用于构建网页结构，而JavaScript则是实现网页动态效果和交互的关键。文中详细讲解了HTML的标签、语句和注释，以及JavaScript的变量、数据类型、函数转换等内容，为初学者提供了全面的入门指南。

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

B/S 架构
B Browser 浏览器
S Server 服务器

HTML、CSS 与 JS 的关系
在这里插入图片描述

HTML 与 CSS

1. 主要内容

在这里插入图片描述

2. HTML

HTML（HyperText Markup Language）就是超⽂本标记语⾔。“超⽂本"就是表示⻚⾯内可以包含
⾮⽂字元素，如：图⽚、链接、⾳乐等等。
它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示
出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。
HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或
.html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件⽤浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
基础语法
标签
HTML 标记是由”<“和”>“所括住的指令标记，⽤于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由”<起始标记>“＋内容＋”</结束标记>“构成）。
HTML语⾔使⽤标志对的⽅法编写⽂件，既简单⼜⽅便。它通常使⽤”<标志名>内容</标志名>"来表示
标志的开始和结束，因此在HTML⽂档中这样的标志对都必须是成对使⽤的。
为了便于理解，将HTML标记语⾔⼤致分为：基本标记、格式标记、⽂本标记、图像标记、表格标
记、链接标记、表单标记和帧标记等。
单标签
单标签,不设置属性值。
如：

<br/>、<hr/>

单标签属性
单标签(也叫空元素)，设置属性值。如：

<hr width="800" />

双标签

双标签，不设置属性值。如：

<title>…</title>

双标签属性

双标签，设置属性值。如：

<body bgcolor="red">…</body> 
<font size="7">…</font>

整体结构
HTML的内容都是由⼀对⼀对的标签组成，标签不能混乱，⻚⾯有⻚⾯的整体架构和规则，标签和标
签之间有需要正确嵌套。
通常⼀个HTML⽹⻚⽂件包含3个部分：标记头区…、内容区和⽹⻚区…。

<html> <head></head> <body></body>
</html> <html> <head> <meta charset="UTF-8"> <title>HTML⽂档的基本结构</title> <script></script> <link rel="stylesheet" type="text/css" href=""/>
</head> <body>
</body>
</html>

html
标志⽤于HTML⽂档的最前边，⽤来标识HTML⽂档的开始。⽽标志放在HTML⽂档的最后边，⽤来标
识HTML⽂档的结束，两个标志必须⼀块使⽤。
head
和构成HTML⽂档的开头部分。和标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必
须⼀块使⽤。
在此标志对之间可以使⽤、、、等标签。
：⽤来提供关于⽂档的信息，起始属性为：charset=“utf8”。表示告诉浏览器⻚⾯采⽤的什么编码，
⼀般来说我们就⽤ utf8。当然，⽂件保存的时候也是utf8，⽽浏览器也设置 utf8 即可正确显示中⽂。
：⽤来引⼊css⽂件
：⽤来引⼊js⽂件或编写js代码。

JavaScript基础语法

1. 主要内容

在这里插入图片描述

2. JavaScript

JavaScript 的组成

在这里插入图片描述

ECMAScript定义的只是这⻔语⾔的基础，与Web浏览器没有依赖关系，⽽在基础语法上可以构建更
完善的脚本语⾔。JavaScript的运⾏需要⼀定的环境，脱离了环境JavaScript代码是不能运⾏的，
JavaScript只能够寄⽣在某个具体的环境中才能够⼯作。JavaScript运⾏环境⼀般都由宿主环境和执⾏期
环境共同构成，其中宿主环境是由外壳程序⽣成的，如Web浏览器就是⼀个外壳程序，它提供了⼀个可
控制浏览器窗⼝的宿主环境。执⾏期环境则由嵌⼊到外壳程序中的JavaScript引擎（或称为JavaScript解
释器）⽣成，在这个环境中 JavaScript能够⽣成内置静态对象，初始化执⾏环境等。
Web浏览器⾃定义的DOM组件，以⾯向对象⽅式描述的⽂档模型。DOM定义了表示和修改⽂档所需
的对象、这些对象的⾏为和属性以及这些对象之间的关系。DOM对象，是我们⽤传统的⽅法
(javascript)获得的对象。DOM属于浏览器，⽽不是JavaScript语⾔规范⾥的规定的核⼼内容。
前⾯的DOM是为了操作浏览器中的⽂档，⽽为了控制浏览器的⾏为和操作，浏览器还提供了
BOM（浏览器对象模型）。

ECMAScript(基础语法)
JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象
DOM(⽂档对象模型)
⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝
BOM(浏览器对象模型)
浏览器对象模型（BOM）—— 描述了与浏览器进⾏交互的⽅法和接⼝

开发⼯具

1.浏览器：Chrome
2.开发⼯具：Hbuilder X
3.进⼊浏览器控制台 Console：F12
控制台的作⽤:

console对象代表浏览器的JavaScript控制台，⽤来运⾏JavaScript命令，常常⽤来显示⽹⻚运⾏
时候的错误信息。Elements⽤来调试⽹⻚的html和css代码。

基本⽤法

JS需要和HTML⼀起使⽤才有效果，我们可以通过直接或间接的⽅式将JS代码嵌⼊在HTML⻚⾯中。
⾏内JS : 写在标签内部的js代码
内部JS : 定义在script标签内部的js代码
外部JS : 单独的js⽂件，在HTML中通过script标签引⼊
我们可以将JavaScript代码放在html⽂件中任何位置，但是我们⼀般放在⽹⻚的head或者body部
分。由于⻚⾯的加载⽅式是从上往下依次加载的，⽽这个对我们放置的js代码运⾏是有影响的。
放在部分，最常⽤的⽅式是在⻚⾯中head部分放置元素，浏览器解析head部分就会执⾏这个代码，
然后才解析⻚⾯的其余部分。
放在部分，JavaScript代码在⽹⻚读取到该语句的时候就会执⾏。
⾏内 JS：

<button onclick="alert('you clicked hered!!!')">click here</button>

内部 JS：

<script type="text/javascript" charset="utf-8">
alert('this is inner js code')
</script>

外部 JS ⽂件：

hello.js

alert('this is a outter js document');

hello.html

<!-- 在需要使⽤js的html⻚⾯中引⼊ -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

3. JavaScript基础语法

语句和注释

JavaScript程序的执⾏单位为⾏（line），也就是⼀⾏⼀⾏地执⾏。⼀般情况下，每⼀⾏就是⼀个语句。
语句（statement）是为了完成某种任务⽽进⾏的操作，语句以分号结尾，⼀个分号即表示⼀个语句结束。
多个语句可以写在⼀⾏内（不建议这么写代码），但是⼀⾏写多条语句时，语句必须以分号结尾。
表达式不需要分号结尾。⼀旦在表达式后⾯添加分号，则JavaScript引擎就将表达式视为语句，这样
会产⽣⼀些没有任何意义的语句。

单⾏注释：⽤//起头；
多⾏注释：放在/* 和 */之间。
兼容html注释⽅式：

标识符和关键字

标识符就是⼀个名字，⽤来给变量和函数进⾏命名，有特定规则和规范
规则：

由Unicode字⺟、_、$、数字组成、中⽂组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分⼤⼩写

规范：

（1）⻅名知意
（2）驼峰命名或下划线规则

关键字也称保留字，是被JavaScript征⽤来有特殊含义的单词

arguments、break、case、catch、class、const、continue、debugger、default、delete、
do、else、enum、eval、export、extends、false、finally、for、function、if、
implements、import、in、instanceof、interface、let、new、null、package、private、
protected、public、return、static、super、switch、this、throw、true、try、typeof、
var、void、while、with、yield、Infinity、NaN、undefined

变量

变量即⼀个带名字的⽤来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。

变量的声明
JavaScript是⼀种弱类型语⾔，在声明变量时不需要指明数据类型，直接⽤var修饰符进⾏声明。
变量声明和赋值：

// 先声明再赋值
var a ; a = 10;
// 声明同时赋值
var b = 20;

变量的注意点
（1）若只声明⽽没有赋值，则该变量的值为undefined。

var box;
console.log(box);

（2）变量要有定义才能使⽤，若变量未声明就使⽤，JavaScript会报错，告诉你变量未定义。

console.log(box2);

（3）可以在同⼀条var命令中声明多个变量。

var a, b, c = 10;
console.log(a,b,c);

（4）若使⽤var重新声明⼀个已经存在的变量，是⽆效的。

var box = 10
var box;

（5）若使⽤var重新声明⼀个已经存在的变量且赋值，则会覆盖掉前⾯的值

var box = 10;
var box = 25;

（6）JavaScript是⼀种动态类型、弱类型语⾔，也就是说，变量的类型没有限制，可以赋予各种类型的值。

var box = ‘hello world’;
box = 10;

变量提升

JavaScript 引擎的⼯作⽅式是，先解析代码，获取所有被声明的变量，然后再⼀⾏⼀⾏地运⾏。这造
成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

console.log(msg);
var msg = "so easy";
// 变量提升，相当于下⾯的代码
var msg;
console.log(msg);
msg = "so easy";
// 说明： 最后的结果是显示undefined，表示变量msg已声明，但还未赋值。

注意：变量提升只对 var 命令声明的变量有效，如果变量不是⽤ var 命令声明的，就不会发⽣变量提升。

console.log(msg);
msg = "error";

数据类型

虽说JS是弱类型语⾔，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进⾏不同
的操作。
JavaScript 中有6 种数据类型，其中有五种简单的数据类型：Undefined、Null、布尔、数值和字符
串。⼀种复杂数据类型Object。

数值（Number）：整数和⼩数（⽐如 1 和 3.14）字符串（String）：字符组成的⽂本（⽐如"Hello World"）
布尔值（Boolean）：true（真）和 false（假）两个特定值 Undefined：表示“未定义”或不存在，即此处⽬前没有任何值
Null：表示空缺，即此处应该有⼀个值，但⽬前为空对象（object）(引⽤) ：各种值组成的集合
1)、对象（object）{name:”zhangsan”,age:”18”} 2)、数组（array）[1,2,3]
3)、函数（function）function test() {}

undefined

undefined类型的值是undefined。
undefined 是⼀个表示"⽆"的原始值，表示值不存在。
出现undefined的常⻅情况：
（1）当声明了⼀个变量⽽没有初始化时，这个变量的值就是undefined

var box;
console.log(box); //undefined

（2）调⽤函数时，该函数有形参，但未提供实参，则该参数为undefined。

function noData(str) {
    // js函数形参只需要变量名即可
console.log(str); // undefined
}
noData(); // 调⽤⽅法时，未传递参数

（3）函数没有返回值时，默认返回 undefined。

// ⽅法没有返回值
function noData() {
   
console.log("Hello");
}
var re = noData();// 定义变量接收⽆返回值的⽅法
console.log(re);

null

null类型是只有⼀个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示⼀
个空对象引⽤。
使⽤Null类型值时注意以下⼏点：
1）使⽤typeof操作符测试null返回object字符串。
2）undefined派⽣⾃null，所以等值⽐较返回值是true。未初始化的变量和赋值为null的变量相等。

console.log