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)，中文名叫"超文本标记语言"，它不是编程语言（不会让你头秃去算逻辑），而是一种标记语言。
把它想象成给网页内容贴标签的工具：
浏览器（比如Chrome、Firefox）看到这些标签，就知道该怎么把你的内容（文字、图片等）展示给用户看。所以，HTML就是网页内容的骨架和结构。
记住： HTML负责**“网页上有什么内容以及这些内容是什么结构”**，至于好不好看（颜色、布局），那是CSS（后面要学的）的事儿。
2. 动手！搭个你的"网络小窝" (第一个HTML页面)
理论太空，直接上手最快！咱们来创建一个最最简单的网页。
步骤：
- 在你的电脑上新建一个文本文档。
- 把下面的代码复制粘贴进去。
- 把文件另存为
myfirstpage.html(注意后缀是.html)。 - 双击这个文件，它就会在你的浏览器里打开啦！
代码 (myfirstpage.html):
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页title>
head>
<body>
<h1>欢迎来到我的小窝!h1>
<p>这是我用HTML搭的第一个页面，有点小激动！p>
body>
html>
代码大白话解读：
: 开门见山，告诉浏览器按HTML5规范来解读。...: 最大的标签，像个大箱子，把所有网页内容都装进去。...: 网页的"幕后信息区"。: 解决中文乱码问题的"神器"。... ...: 网页的"展示区"，所有你能看见的文字、图片、按钮都在这里面。...
...
测试案例 1：
- 代码: 上面的 myfirstpage.html
- 操作: 保存文件，用浏览器打开。
- 预期输出: 页面上会显示一个大标题 “欢迎来到我的小窝!” 和一行文字 “这是我用HTML搭的第一个页面，有点小激动！”。浏览器标签页标题是 “我的第一个网页”。
流程图：浏览器如何"阅读"你的HTML
`, 显示大标题
`, 显示段落文字
是不是很简单？你已经成功创建了一个网页！
3. 添砖加瓦：常用HTML"建材"详解
光有标题和段落还不够，我们来学点更常用的"建筑材料"（标签）。
3.1 标题家族
标题有不同级别， 最大最重要， 最小。通常一个页面只有一个 (主标题)，然后根据内容层级使用 , 等。
测试案例 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 段落哥俩好
用来定义一个段落，段落之间会有默认的间距。如果你只是想在段落内部强制换行，而不是开始一个新段落，可以用
测试案例 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 传送门：链接
想让用户点击文字或图片跳转到其他地方？用 (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.coma>
body>
html>
预期输出: 页面上出现两行可点击的蓝色下划线文字，点击第一个会跳转到MDN网站，点击第二个会在新标签页打开example.com。
3.4 挂画：图片
想在网页上展示图片？用
src(Source): 图片的地址 (可以是本地路径或网络URL)。alt(Alternative text): 图片加载