第一章了解基本概念
什么是HTML
HTML呢，简单来说就是一种专门用来跟浏览器“沟通”的语言。咱们平时看到的那些花花绿绿、各种各样的网页，都是靠HTML来搭建起来的。它就像是一个建筑师手里的图纸，告诉浏览器这个网页上都有啥东西，这些东西该放在什么位置，怎么摆放。不过它不是用我们平常说的话或者画的图来表达，而是用一堆特殊的“标签”来写指令。这些标签就像一个个小盒子，把网页里的各种内容装起来，告诉浏览器怎么处理这些内容。比如说要在网页上放一段文字，就得把这段文字放在特定的标签里面，浏览器看到这个标签，就知道要把里面的文字显示出来给我们看。
<!DOCTYPE html>
<html>
<body>
<p>这是一段用HTML显示的文字哦。</p>
</body>
</html>
在上面这段代码里，<html>标签就像是一个大容器，把整个网页的内容都包起来了。<body>标签里面放的就是我们能在网页上直接看到的内容，这里面的<p>标签就是专门用来放段落文字的，浏览器看到这个标签，就会把“这是一段用HTML显示的文字哦。”这段话按照段落的格式显示在网页上。
HTML的作用
HTML的作用可太重要啦！它就像是一个超级厉害的“组织者”，能把各种各样的东西都整合到一个网页上，让它们各就各位，组成一个完整的网页。不管是好看的图片、好听的音乐、有趣的视频，还是一大段一大段的文字，它都能把它们安排得明明白白。比如说你想做一个介绍自己宠物的网页，就可以用HTML把宠物的照片放上去，再写一些文字介绍宠物的名字、性格，甚至还能放一段宠物玩耍的视频呢。
<!DOCTYPE html>
<html>
<body>
<h1>我的可爱宠物</h1>
<img src="pet.jpg" alt="我的宠物照片">
<p>这是我的宠物，它叫小白，特别活泼可爱。</p>
</body>
</html>
在这段代码里，<h1>标签表示这是一个一级标题，会把“我的可爱宠物”这几个字以比较大的字体显示在网页上，作为这个网页的大标题。<img>标签就是用来放宠物照片的，src属性告诉浏览器照片的位置，alt属性是给照片写个说明，要是照片没显示出来，别人也能知道这张照片大概是什么。<p>标签里写的就是关于宠物的介绍文字啦。
HTML与其他技术的关系
HTML就像是一个房子的框架，光有它的话，房子能立起来，但是可能不太好看，也没有什么特别的功能。这时候就需要CSS和JavaScript来帮忙啦，它们三个可是网页开发的黄金搭档。
- CSS：CSS就像是给这个房子做装修的，能让网页变得超级好看。它可以给网页上的各种东西设置颜色、字体、大小，还能让它们按照你想要的方式排列，让整个网页看起来特别舒服、特别漂亮。比如说，你觉得刚才“我的可爱宠物”这个标题颜色不好看，字体也不够个性，就可以用CSS来给它打扮一下。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>我的可爱宠物</h1>
<img src="pet.jpg" alt="我的宠物照片">
<p>这是我的宠物，它叫小白，特别活泼可爱。</p>
</body>
</html>
在这段代码里，<style>标签里面写的就是CSS代码啦。它让<h1>标签里的文字颜色变成了绿色，字体也换成了Arial这种比较常见的字体，如果没有Arial字体，就会用无衬线字体来代替。
- JavaScript：JavaScript就像是给这个房子里放了很多好玩的机关和道具，能让网页动起来，有各种各样的互动效果，变得超级有趣。比如说，你想在网页上做一个按钮，点一下按钮就能听到宠物的叫声，这就得靠JavaScript来实现啦。
<!DOCTYPE html>
<html>
<body>
<h1>我的可爱宠物</h1>
<img src="pet.jpg" alt="我的宠物照片">
<p>这是我的宠物，它叫小白，特别活泼可爱。</p>
<button onclick="playSound()">点我听宠物叫声</button>
<script>
function playSound() {
var audio = new Audio('pet_sound.mp3');
audio.play();
}
</script>
</body>
</html>
在这段代码里，<button>标签创建了一个按钮，onclick属性指定了点击按钮时要执行的JavaScript函数playSound()。在<script>标签里定义了这个函数，它会创建一个音频对象，然后播放宠物叫声的音频文件pet_sound.mp3。
总的来说，HTML是基础，负责搭建网页的结构和内容；CSS负责让网页变得好看；JavaScript让网页有了互动和动态效果，它们三个一起合作，才能做出我们平时看到的那些又好看又好玩的网页。