HTML
在浏览器里打开随便一个网址（比如： badminton.whale.life/），现在看到的这个界面，就是浏览器将 HTML文件进行渲染之后的结果
元素
一个HTML文件包含各种各样的元素，它们共同描述了一个网页的结构
下面这段代码，包含了一个标题和一个段落
这段代码里，<h1>NBA</h1> 是一个 h1元素，它表示一个标题（Heading level 1）
<h1>开始标签NBA标签内容，这是你想用这个标签去呈现的文本</h1>结束标签
在上面的编辑器里把
h1改成h2（或者 h3、h4...h6）看看会发生什么
在h1元素后面，是一个p标签，表示一个段落(Paragraph)。它同样包含三部分：<p>、The NBA ...、</p>
标签的属性
我们来看一个包含多种元素的HTML文件
这份代码里包含了更加多样的元素，除了我们已经见过的h1和p，还有 head title img a input button等，通过这些标签的名字基本上可以猜出这些元素的作用
我们看一下其中的 img元素，它似乎包含了一些陌生的成分
<img src="https://s1.ax1x.com/2022/08/18/vrEw0H.jpg" alt="A beautiful image" width="100">
它们是img标签的三个属性
src="https://s1.ax1x.com/2022/08/18/vrEw0H.jpg"表示图片的路径alt="A beautiful image"图片的文本描述width="100"图片的宽度
标签里，像 key="value" 这样的结构就是标签的属性，属性包含了一个元素的额外信息
代码里
<!-- 页面标题 -->这样的结构叫作注释，它不会显示在最终的页面上。你可以写一段注释去解释代码的含义，也可以不写，这是可选的
在编辑器中，将
img标签的src属性改成其他图片地址，如 s1.ax1x.com/2022/08/22/…
写一个 HTML 文件
现在你需要动手写一个HTML文件
在你的电脑随便什么地方，新建一个文件叫 index.html
接下来为它添加代码，你可以使用上面提到的各种元素去创建简单的内容：段落、图片、标题等
也可以参考下面的代码：
编辑完之后，用浏览器打开这个HTML文件（右键选择“用浏览器打开” 或者 直接把文件拖到浏览器里）
现在，你可以看到它在浏览器中的样子
页面的内容已经完全地展示出来了，不过我们还是希望它能稍微好看一点，也许是加点颜色或者间距什么的。别着急，很快我们会用一个叫 CSS 的东西去装饰这个
HTML页面
总结
现在你已经了解：如何创建一个HTML文件，为其添加各种元素以实现简单的页面效果，并在浏览器中预览它
没错，将不同的元素组合起来就实现了一个网页。不论是看上去“很简单”的搜索引擎首页，还是包含大量内容的购物网站，它们都是由一个个的元素组成
不过，在真实的 Web Application 的开发过程中，我们会借助框架的组件去拼接一个页面，它们最终依然会以HTML文件的形式出现在用户的浏览器中
想了解更多的HTML元素，可以去官方的网站查看 developer.mozilla.org/zh-CN/docs/…
