HTML基础入门：零基础快速上手

前言：HTML 是什么？

HTML（超文本标记语言）是网页的骨架。它诞生之初只为解决两个核心问题：

结构化内容：用“标签”区分标题、段落、图片等，让文档排版清晰。
超链接：实现点击跳转，把孤立的文档连成“万维网”。

核心 1：HTML 元素 —— 网页的“积木”

网页由一个个“元素”拼装而成。

1. 元素的标准结构

就像汉堡包，一个标准元素包含三部分：

<p>这是一段文字</p>

 开始标签：告诉浏览器“段落开始”。
这是一段文字 内容：用户实际看到的文字。
 结束标签：多了一个 /，表示“段落结束”。

2. 特殊情况：空元素（自闭合）

有些元素不需要包裹内容，只执行动作或嵌入资源，比如换行   或图片 <img>。它们没有结束标签。

<img src="https://xxx.png" alt="图片描述">

3. 嵌套规则：像穿衣服一样

元素可以互相嵌套（比如段落里加粗文字），但必须先开后关，不能交叉。

✅ 正确：我的猫特别凶
❌ 错误：我的猫特别凶（交叉嵌套会导致页面错乱）

核心 2：HTML 属性 —— 给元素加“配置”

属性写在开始标签里，用于提供额外信息（如图片地址、链接网址）。格式为 属性名="属性值"。

<img src="cat.jpg" alt="猫咪照片" width="300">

src：图片地址（必填）。
alt：图片加载失败时的替代文字（对视障用户和 SEO 很重要）。

两个避坑指南：

属性值必须加引号：双引号 "" 或单引号 '' 均可，千万别省略。
布尔属性：有些属性写上就生效，不需要赋值。比如禁用输入框：
```
<input type="text" disabled> 
```

核心 3：HTML 文档结构 —— 网页的标准骨架

把元素组合成一个 .html 文件，需要一个标准骨架：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>网页标题（显示在浏览器标签页）</title>
  </head>
  <body>
    <h1>欢迎来到我的页面</h1>
    <p>用户能看到的内容都在 body 里</p>
  </body>
</html>

骨架拆解：

<!DOCTYPE html>：声明这是 HTML5 文档，让浏览器按最新标准渲染。
<html lang="zh-CN">：网页的根元素，lang 告诉浏览器和搜索引擎这是中文网页。
<head>：后台配置。用户看不见，包含字符编码（utf-8 防止中文乱码）、网页标题等。
<body>：前台内容。用户看到的所有文字、图片、按钮都在这里。

💡 小贴士：代码里的空格
在 HTML 代码里敲再多空格和换行，浏览器都会压缩成一个空格。我们换行缩进只是为了让代码更易读。

核心 4：注释与特殊字符

1. 注释（写给代码阅读者看）

浏览器会忽略注释内容，常用于备注或临时隐藏代码。

<!-- 这是一个注释，浏览器不会显示它 -->

2. 特殊字符（实体引用）

如果你想在网页上直接显示 < 或 >，浏览器会误以为是标签。必须用“字符实体”代替：

想显示的符号	代码写法	说明
`<`	`<`	小于号 (less than)
`>`	`>`	大于号 (greater than)
`&`	`&`	和号 (ampersand)

示例： 是段落标签 会在网页上显示为  是段落标签。

🚀 实战：写你的第一个网页

只需 3 步，见证奇迹：

在电脑上新建一个文本文件，重命名为 index.html（注意后缀必须是 .html）。

将以下代码复制进去并保存：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>我用 HTML 写的第一个页面</h1>
    <p>今天学会了 HTML 的基本语法，包括：</p>
    <ul>
      <li>元素的结构（开始、内容、结束）</li>
      <li>属性的用法</li>
    </ul>
    <img src="https://picsum.photos/300/200" alt="随机图片">
  </body>
</html>

双击 index.html，它会在浏览器中打开。恭喜，你已经是一名网页开发者了！

posted @ 2026-02-24 12:00 喝水的长颈鹿阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

mn9527