html初识
html
- 盖楼第一步：HTML
- 1. HTML是啥玩意儿？
- 2. 动手！搭个你的"网络小窝" (第一个HTML页面)
- 3. 添砖加瓦：常用HTML"建材"详解
- 3.1 标题家族
- 3.2 段落哥俩好
- 3.3 传送门：链接
- 3.4 挂画：图片
盖楼第一步：HTML
是不是经常看到酷炫的网页，心里痒痒的也想自己做一个？或者老板突然说：“小X，这个产品介绍页你用HTML搞一下？” 别怕！HTML其实超简单，它就是网页的"骨架"。
今天这篇，就是给零基础小白量身定做的HTML"施工图纸"，带你从认识砖瓦（标签）开始，到亲手搭起你的第一个"小毛坯房"（网页）。全程大白话，配上实例和图示，保证你看完就能动手！
现在大部分服务器都是发送html，然后服务器断开，当你操作网页时候就会发送数据给服务器，这样能减少服务器资源，还能提高服务器效率，所以html很重要
下面是我写的deepseek调用api的html网页。
1. HTML是啥玩意儿？
简单说，HTML (HyperText Markup Language)，中文名叫"超文本标记语言"，它不是编程语言（不会让你头秃去算逻辑），而是一种标记语言。
把它想象成给网页内容贴标签的工具：
- 你想让这段文字变成大标题？贴个
<h1>标签！ - 你想让这里显示一张图片？贴个
<img>标签！ - 你想加个可以点击跳转的链接？贴个
<a>标签！
浏览器（比如Chrome、Firefox）看到这些标签，就知道该怎么把你的内容（文字、图片等）展示给用户看。所以，HTML就是网页内容的骨架和结构。
记住： HTML负责**“网页上有什么内容以及这些内容是什么结构”**，至于好不好看（颜色、布局），那是CSS（后面要学的）的事儿。
2. 动手！搭个你的"网络小窝" (第一个HTML页面)
理论太空，直接上手最快！咱们来创建一个最最简单的网页。
步骤：
- 在你的电脑上新建一个文本文档。
- 把下面的代码复制粘贴进去。
- 把文件另存为
myfirstpage.html(注意后缀是.html)。 - 双击这个文件，它就会在你的浏览器里打开啦！
代码 (myfirstpage.html):
<!DOCTYPE html> <!-- 给浏览器说：喂，这是最新的HTML5标准哈！ -->
<html> <!-- 整个网页的"总包裹" --><head> <!-- 这里放网页的"脑子"信息，用户看不到，但浏览器需要 --><meta charset="utf-8"> <!-- 告诉浏览器用万能的UTF-8编码，不然中文可能乱码 --><title>我的第一个网页</title> <!-- 显示在浏览器标签页上的标题 -->
</head><body> <!-- 这里放网页的"身体"，就是用户能看到的所有内容 --><h1>欢迎来到我的小窝!</h1> <!-- 一个大大的主标题 --><p>这是我用HTML搭的第一个页面，有点小激动！</p> <!-- 一个段落的文字 --></body></html> <!-- 网页结束啦 -->
代码大白话解读：
<!DOCTYPE html>: 开门见山，告诉浏览器按HTML5规范来解读。<html>...</html>: 最大的标签，像个大箱子，把所有网页内容都装进去。<head>...</head>: 网页的"幕后信息区"。<meta charset="utf-8">: 解决中文乱码问题的"神器"。<title>...</title>: 浏览器窗口顶部那个小标题。<body>...</body>: 网页的"展示区"，所有你能看见的文字、图片、按钮都在这里面。<h1>...</h1>: 定义一级标题（最大最重要）。<p>...</p>: 定义一个段落 (Paragraph)。
测试案例 1：
- 代码: 上面的 myfirstpage.html
- 操作: 保存文件，用浏览器打开。
- 预期输出: 页面上会显示一个大标题 “欢迎来到我的小窝!” 和一行文字 “这是我用HTML搭的第一个页面，有点小激动！”。浏览器标签页标题是 “我的第一个网页”。
流程图：浏览器如何"阅读"你的HTML
是不是很简单？你已经成功创建了一个网页！
3. 添砖加瓦：常用HTML"建材"详解
光有标题和段落还不够，我们来学点更常用的"建筑材料"（标签）。
3.1 标题家族
标题有不同级别，<h1> 最大最重要，<h6> 最小。通常一个页面只有一个 <h1> (主标题)，然后根据内容层级使用 <h2>, <h3> 等。
测试案例 2 (headings.html):
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>标题演示</title>
</head>
<body><h1>这是一级标题 (最大)</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题 (最小)</h6>
</body>
</html>
预期输出: 浏览器会显示6行文字，字体大小依次减小。
3.2 段落哥俩好
<p> 用来定义一个段落，段落之间会有默认的间距。如果你只是想在段落内部强制换行，而不是开始一个新段落，可以用 <br> (Break)。<br> 是个"单身狗"标签，没有结束标签。
测试案例 3 (paragraphs.html):
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>段落和换行</title>
</head>
<body><p>这是第一个段落。它会自动和其他段落分开。</p><p>这是第二个段落。<br>你看，我在这里用了br标签强制换行了，<br>但我们还在同一个段落里哦。</p><p>这是第三个段落。</p>
</body>
</html>
预期输出: 显示三个段落，第二个段落内部有两处换行。
3.3 传送门：链接
想让用户点击文字或图片跳转到其他地方？用 <a> (Anchor) 标签！关键属性是 href (Hypertext Reference)，用来指定跳转的目标地址。
测试案例 4 (links.html):
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>链接示例</title>
</head>
<body><p>想学习更多编程知识？可以访问：</p><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN Web Docs (HTML部分)</a><p>上面就是一个可以点击的链接！</p><a href="https://www.example.com" target="_blank">点我会在新标签页打开Example.com</a><!-- target="_blank" 让链接在新窗口打开 -->
</body>
</html>
预期输出: 页面上出现两行可点击的蓝色下划线文字，点击第一个会跳转到MDN网站，点击第二个会在新标签页打开example.com。
3.4 挂画：图片
想在网页上展示图片？用 <img> (Image) 标签。它也是"单身狗"标签。需要两个重要属性：
src(Source): 图片的地址 (可以是本地路径或网络URL)。alt(Alternative text): 图片加载