当前位置：首页 > news >正文

html初识

news 来源：原创 2025/6/17 12:11:31

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): 图片加载