大白话html 第一章了解基本概念

第一章了解基本概念

什么是HTML

HTML呢，简单来说就是一种专门用来跟浏览器“沟通”的语言。咱们平时看到的那些花花绿绿、各种各样的网页，都是靠HTML来搭建起来的。它就像是一个建筑师手里的图纸，告诉浏览器这个网页上都有啥东西，这些东西该放在什么位置，怎么摆放。不过它不是用我们平常说的话或者画的图来表达，而是用一堆特殊的“标签”来写指令。这些标签就像一个个小盒子，把网页里的各种内容装起来，告诉浏览器怎么处理这些内容。比如说要在网页上放一段文字，就得把这段文字放在特定的标签里面，浏览器看到这个标签，就知道要把里面的文字显示出来给我们看。

html"><!DOCTYPE html>
<html><body><p>这是一段用HTML显示的文字哦。</p></body>
</html>

在上面这段代码里，<html>标签就像是一个大容器，把整个网页的内容都包起来了。<body>标签里面放的就是我们能在网页上直接看到的内容，这里面的<p>标签就是专门用来放段落文字的，浏览器看到这个标签，就会把“这是一段用HTML显示的文字哦。”这段话按照段落的格式显示在网页上。

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来给它打扮一下。

html"><!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来实现啦。

html"><!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>