[Web网页] 零基础入门 HTML

目录

[一、HTML 入门:先写一个 HelloWorld](#一、HTML 入门:先写一个 HelloWorld)

1️⃣开发步骤(超简单!)

[二、理解 HTML 的核心:什么是 "标记"?](#二、理解 HTML 的核心:什么是 “标记”?)

1️⃣标记的组成

[2️⃣标记的 "附加信息":属性](#2️⃣标记的 “附加信息”:属性)

[三、HTML 文档的基本结构](#三、HTML 文档的基本结构)

1️⃣头部标签

2️⃣主体标签

四、中的核心标签:从文字到多媒体

1️⃣文字排版标签:让文字更有层次

(1)标题标签

(2)段落与换行标签

(3)水平标尺标签

[2️⃣链接与图像:让网页 "动" 起来](#2️⃣链接与图像:让网页 “动” 起来)

(1)超级链接标签

(2)图像标签

3️⃣列表标签:让内容更有条理

(1)无序列表

(2)有序列表

(3)自定义列表

4️⃣表格标签:展示结构化数据

(1)基本表格结构

(2)复杂表格:单元格合并

5️⃣表单标签:实现用户交互

(1)表单容器

(2)常用表单控件

(3)完整表单示例(登录表单)

6️⃣布局标签:

[五、总结:HTML 学习路径建议](#五、总结:HTML 学习路径建议)


对于想要踏入前端开发领域的初学者来说,HTML 是必须掌握的第一门核心技术。它是构建网页的 "骨架",决定了网页的基本结构和内容呈现方式。本文将从最基础的 HTML 入门知识讲起,逐步深入核心标签的用法,帮助你快速搭建 HTML 知识框架,轻松开启前端学习之旅。

一、HTML 入门:先写一个 HelloWorld

学习任何编程语言,"HelloWorld" 都是经典的起点,HTML 也不例外。通过编写第一个 HTML 文件,你能直观感受 HTML 的基本格式和运行方式。

1️⃣开发步骤(超简单!)

  1. 创建文件:打开电脑自带的 "记事本"(Windows)或 "文本编辑"(Mac),新建一个空白文本文件。

  2. 编写代码:复制粘贴以下代码到文件中(建议手动敲一遍,加深记忆):

    html

    预览

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <title>HTML版HelloWorld</title>
    </head>
    <body>
        HTML版HelloWorld!
    </body>
    </html>
  3. 保存文件:点击 "文件 - 另存为",文件名需以.html.htm结尾(例如Hello.html),保存类型选择 "所有文件",避免保存为.txt格式。

  4. 运行文件:找到保存的Hello.html文件,双击它 ------ 默认会用浏览器(Chrome、Edge 等)打开,你会看到浏览器窗口中显示 "HTML 版 HelloWorld!",标题栏显示 "HTML 版 HelloWorld"。

二、理解 HTML 的核心:什么是 "标记"?

HTML 全称为 "超文本标记语言"(HyperText Markup Language),核心就是 "标记"(也叫 "标签")。它不是编程语言,而是一套用于定义网页结构和内容的规范,浏览器通过解析这些标签,就能知道如何显示网页内容。

1️⃣标记的组成

HTML 标签有固定的格式,主要特点如下:

  • 尖括号包裹:所有标签都用<>包围,例如<html><body>
  • 成对出现(大部分):标签通常分为 "开始标签" 和 "结束标签",结束标签比开始标签多一个/。例:<body>(开始标签)和</body>(结束标签),两者之间的内容是网页的主体内容。
  • 自闭合标签(少数):有些标签功能简单,不需要包裹内容,直接写成<标签名 />的形式(也可省略/,但建议规范书写)。例:换行标签<br />、图像标签<img />

2️⃣标记的 "附加信息":属性

标签可以通过 "属性" 添加额外设置,实现个性化效果。属性的规则如下:

  • 格式:属性名="属性值",多个属性之间用空格分隔,写在开始标签内部。例:<img src="pic.jpg" alt="风景图" width="300" />,其中srcaltwidth都是属性。
  • 注意事项:
    • 标签不区分大小写(例如<HTML><html>都有效),但推荐小写(符合行业规范)。
    • 标签名和属性名中不能有空格(例如< title>是错误的,浏览器无法识别)。
    • 代码中的空格和回车不影响显示,如需在网页中插入空格,需用&nbsp;;如需换行,用<br />
    • 属性值建议用双引号包裹(单引号也可,甚至省略引号,但双引号更规范)。

三、HTML 文档的基本结构

所有 HTML 文件都遵循固定的结构,就像房子有 "地基 - 墙体 - 屋顶" 一样,HTML 文档的结构也有明确的层级:

html

复制代码
<!DOCTYPE html>  <!-- 1. 声明文档类型:告诉浏览器这是HTML5文档 -->
<html>           <!-- 2. 根标签:整个HTML文档的容器,所有内容都在其中 -->
    <head>       <!-- 3. 头部:存放文档的"元信息",不直接显示在网页中 -->
        <title>网页标题</title>  <!-- 3.1 标题:显示在浏览器窗口的标题栏 -->
        <!-- 还可包含样式、脚本、元数据等,下文详细讲 -->
    </head>
    <body>       <!-- 4. 主体:网页的可见内容,如文字、图片、链接等都在这里 -->
        这是网页的正文内容!
    </body>
</html>

下面我们分别拆解<head><body>的核心内容:

1️⃣头部标签<head>:网页的 "幕后配置"

<head>中的内容不显示在网页主体,但对浏览器解析网页、搜索引擎抓取信息至关重要,常见子标签如下:

子标签 功能说明
<title> 定义网页标题(显示在浏览器标题栏 / 标签页),是 SEO(搜索引擎优化)的重要因素。
<meta> 提供 "元数据"(数据的描述信息),如编码格式、关键词、作者等。
<style> 内嵌 CSS 样式,用于美化网页(后续学习 CSS 时会用到)。
<script> 内嵌 JavaScript 代码,实现网页交互(后续学习 JS 时会用到)。

其中,<meta>标签的用法非常灵活,举几个常用例子:

  • 设置网页编码(避免中文乱码):<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • 定义搜索引擎关键词(帮助网页被搜索到):<meta name="keywords" content="HTML入门,前端学习,零基础HTML" />
  • 自动刷新并跳转页面(5 秒后跳转到百度):<meta http-equiv="refresh" content="5; URL=http://www.baidu.com" />

2️⃣主体标签<body>:网页的 "可见内容区"

<body>是网页内容的 "舞台",所有用户能看到的元素都在这里。它本身也有一些属性(但现在更推荐用 CSS 控制,了解即可):

  • bgcolor:设置网页背景色,例:<body bgcolor="#CCFFCC">#CCFFCC是浅青色的十六进制代码)。
  • background:设置背景图片,例:<body background="images/bg.jpg">(图片路径需正确)。
  • text:设置正文文字颜色,例:<body text="#FF6666">#FF6666是浅红色)。

接下来,我们详细讲解<body>中最常用的核心标签。

四、<body>中的核心标签:从文字到多媒体

<body>中的标签按功能可分为 "文字排版""链接与图像""列表""表格""表单""布局" 等类别,我们逐一拆解:

1️⃣文字排版标签:让文字更有层次

(1)标题标签<h1>~<h6>

用于定义不同级别的标题,<h1>最大(一级标题,通常用于页面主标题),<h6>最小(六级标题,用于次要内容标题)。特点:标题自带 "加粗" 和 "换行" 效果,同级标题之间有默认间距。

html

预览

复制代码
<h1>一级标题(页面主标题)</h1>
<h2>二级标题(章节标题)</h2>
<h3>三级标题(小节标题)</h3>
<!-- 以此类推到<h6> -->
<h6>六级标题(最小标题)</h6>
(2)段落与换行标签
  • 段落标签<p>:定义一个段落,段落之间会自动添加空白间距(区分不同段落)。例:

    html

    预览

    复制代码
    <p>这是第一个段落,段落之间会有默认空白。</p>
    <p>这是第二个段落,即使代码中换行,浏览器也会把它当成一个段落显示。</p>
  • 换行标签<br />:强制换行(无空白间距),常用于段落内部的换行。例:

    html

    复制代码
    <p>这是第一行文字<br />这是第二行文字(用<br />实现换行,没有段落间距)</p>
  • 预格式化标签<pre>:保留代码中的空格和换行,按 "输入时的格式" 显示文字(常用于展示代码或需要固定格式的文本)。例:

    html

    复制代码
    <pre>
    床前明月光,
      疑是地上霜。
    举头望明月,
      低头思故乡。
    </pre>

    (浏览器会原样显示缩进和换行,无需额外加<br />

(3)水平标尺标签<hr />

在页面中插入一条水平线,用于分隔不同内容区块,可通过属性设置样式:

  • size:线的高度(像素值),例:<hr size="3" />
  • width:线的宽度(像素值或百分比),例:<hr width="50%" />(占页面宽度的 50%)。
  • align:对齐方式(left左对齐、center居中、right右对齐),例:<hr align="left" />
  • color:线的颜色(十六进制或颜色名),例:<hr color="red" />

完整示例:<hr size="3" width="75%" align="center" color="red" />

2️⃣链接与图像:让网页 "动" 起来

(1)超级链接标签<a>

定义 "点击跳转" 的链接,核心属性是href(指定跳转目标)和target(指定打开方式)。

  • 基本用法:跳转到外部网页例:<a href="http://www.baidu.com" target="_blank">在新窗口打开百度</a>

    • href="http://www.baidu.com":跳转目标是百度的网址(绝对路径)。
    • target="_blank":在新浏览器窗口打开链接(默认_self,在当前窗口打开)。
  • 跳转到本地文件如果链接目标是同一文件夹下的文件,用 "相对路径" 即可:

    • 同一文件夹:<a href="about.html">跳转到同一文件夹的about.html</a>
    • 子文件夹:<a href="pages/about.html">跳转到pages文件夹下的about.html</a>
    • 上级文件夹:<a href="../about.html">跳转到上级文件夹的about.html</a>../表示 "返回上一级")。
  • 页内跳转(锚点)用于 "长页面" 内的快速定位,步骤如下:

    1. 给目标位置的标签添加id属性(唯一标识,不能重复):<div id="part1">第一部分内容...</div>
    2. <a href="#id值">创建跳转链接:<a href="#part1">跳转到第一部分</a>
(2)图像标签<img />

在网页中插入图片,必须包含两个属性:src(图片路径)和alt(图片加载失败时显示的文字,用于无障碍访问)。

  • 基本用法:

    html

    预览

    复制代码
    <img src="images/photo.jpg" alt="风景照片" width="300" height="200" />
    • src:图片的路径(相对路径或绝对路径,和<a>标签的路径规则一致)。
    • alt:图片加载失败时显示的文字(例如图片路径错误时,会显示 "风景照片")。
    • width/height:图片的宽度 / 高度(值可以是像素px或百分比%,只设置一个会自动等比例缩放)。
  • 图片加链接:将<img />嵌套在<a>标签中,点击图片即可跳转:

    html

    预览

    复制代码
    <a href="http://www.baidu.com" target="_blank">
        <img src="images/baidu-logo.jpg" alt="百度logo" />
    </a>

3️⃣列表标签:让内容更有条理

HTML 支持三种列表:无序列表(用符号标记)、有序列表(用数字标记)、自定义列表(用于 "术语 - 解释" 场景)。

(1)无序列表<ul>+<li>
  • <ul>:定义无序列表的 "容器"。
  • <li>:定义列表中的 "每一项"(必须嵌套在<ul>中)。
  • 默认样式:每一项前有一个小黑点(可通过 CSS 修改为圆圈、方块等)。

例:

html

复制代码
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

显示效果:

  • 苹果
  • 香蕉
  • 橙子
(2)有序列表<ol>+<li>
  • <ol>:定义有序列表的 "容器"。
  • <li>:定义列表中的 "每一项"(必须嵌套在<ol>中)。
  • 默认样式:每一项前有数字(从 1 开始,可通过start属性修改起始数字)。

例:

html

复制代码
<ol start="3">  <!-- 从3开始计数 -->
    <li>第一步:打开浏览器</li>
    <li>第二步:输入网址</li>
    <li>第三步:按下回车</li>
</ol>

显示效果:3. 第一步:打开浏览器4. 第二步:输入网址5. 第三步:按下回车

(3)自定义列表<dl>+<dt>+<dd>

用于 "术语 - 解释" 的场景(例如字典、商品参数说明):

  • <dl>:定义自定义列表的 "容器"。
  • <dt>:定义 "术语"(需要解释的内容)。
  • <dd>:定义 "解释"(对术语的说明,默认会缩进)。

例:

html

复制代码
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言,用于构建网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表,用于美化网页。</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言,用于实现网页交互。</dd>
</dl>

显示效果:HTML  超文本标记语言,用于构建网页结构。CSS  层叠样式表,用于美化网页。JavaScript  脚本语言,用于实现网页交互。

4️⃣表格标签:展示结构化数据

表格用于展示 "行 - 列" 形式的结构化数据(例如成绩表、商品价格表),核心标签有<table>(容器)、<tr>(行)、<td>(单元格)、<th>(表头单元格)。

(1)基本表格结构

html

预览

复制代码
<table border="1">  <!-- border="1":显示表格边框(默认无边框) -->
    <caption>学生成绩表</caption>  <!-- 表格标题(可选,显示在表格上方) -->
    <!-- 表头行:用<th>,文字默认居中加粗 -->
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
    </tr>
    <!-- 数据行:用<td>,文字默认左对齐 -->
    <tr>
        <td>张三</td>
        <td>95</td>
        <td>98</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>88</td>
        <td>92</td>
    </tr>
</table>
(2)复杂表格:单元格合并

当需要合并单元格时,使用colspan(跨列合并)和rowspan(跨行合并)属性:

  • colspan="n":合并当前单元格右侧的n-1个单元格(横向合并)。
  • rowspan="n":合并当前单元格下方的n-1个单元格(纵向合并)。

例:合并 "总计" 单元格(跨 2 列):

html

预览

复制代码
<table border="1">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>95</td>
        <td>98</td>
    </tr>
    <tr>
        <td colspan="2">总计(跨2列)</td>  <!-- 合并"语文"和"数学"列 -->
        <td>193</td>
    </tr>
</table>

5️⃣表单标签:实现用户交互

表单是网页与用户交互的核心(例如登录、注册、搜索),用于收集用户输入的数据并提交给后台。核心标签是<form>(表单容器),内部包含多种 "表单控件"(如输入框、按钮、下拉框等)。

(1)表单容器<form>

必须包含actionmethod属性:

  • action:指定数据提交的 "后台地址"(例如action="login.php",后续学习后端时会用到)。
  • method:指定提交方式,常用get(数据显示在 URL 中,适合简单查询)和post(数据隐藏,适合敏感信息如密码)。
(2)常用表单控件

表单控件主要通过<input>标签实现(通过type属性区分不同类型),还有<textarea>(多行输入框)、<select>(下拉框)等。

控件类型 代码示例 功能说明
单行文本框 <input type="text" name="username" placeholder="请输入用户名" /> 输入单行文字(如用户名)
密码框 <input type="password" name="pwd" placeholder="请输入密码" /> 输入密码(文字隐藏为圆点)
单选按钮 <input type="radio" name="sex" value="male" checked /> 男 多选一(name相同为一组)
复选框 <input type="checkbox" name="hobby" value="sports" checked /> 运动 多选多(name相同为一组)
提交按钮 <input type="submit" value="登录" /> 提交表单数据
重置按钮 <input type="reset" value="重置" /> 清空表单输入
多行文本框 <textarea rows="5" cols="30" placeholder="请输入个人简介"></textarea> 输入多行文字(如简介)
下拉框 <select name="city"><option value="sh">上海</option></select> 选择预设选项
(3)完整表单示例(登录表单)

html

复制代码
<form action="login.php" method="post">
    <p>
        用户名:<input type="text" name="username" placeholder="请输入用户名" required />
        <!-- required:设置为必填项,不填无法提交 -->
    </p>
    <p>
        密码:<input type="password" name="pwd" placeholder="请输入密码" required />
    </p>
    <p>
        性别:<input type="radio" name="sex" value="male" checked /> 男
             <input type="radio" name="sex" value="female" /> 女
    </p>
    <p>
        爱好:<input type="checkbox" name="hobby" value="sports" /> 运动
             <input type="checkbox" name="hobby" value="music" /> 音乐
             <input type="checkbox" name="hobby" value="reading" /> 阅读
    </p>
    <p>
        城市:<select name="city">
                <option value="bj">北京</option>
                <option value="sh" selected>上海</option>  <!-- selected:默认选中 -->
                <option value="gz">广州</option>
             </select>
    </p>
    <p>
        <input type="submit" value="登录" />
        <input type="reset" value="重置" />
    </p>
</form>

6️⃣布局标签:<div><span>

用于划分网页区域、组合元素,方便后续用 CSS 美化(是 "CSS 布局" 的基础)。

标签 功能说明 特点
<div> 定义 "块级区域"(独占一行,可包含任何元素,如文字、图片、表格等)。 块级元素,默认宽度 100%,可设置宽高。
<span> 定义 "行内区域"(不独占一行,只包裹部分文字或行内元素)。 行内元素,默认宽度由内容决定,无法直接设置宽高。

例:用<div>划分网页的 "头部 - 主体 - 底部",用<span>高亮部分文字:

html

复制代码
<!-- 头部区域 -->
<div style="background: #f5f5f5; padding: 10px;">
    <h1>我的博客</h1>
</div>

<!-- 主体区域 -->
<div style="padding: 20px;">
    <p>这是一篇关于<span style="color: red; font-weight: bold;">HTML基础</span>的文章,适合初学者阅读。</p>
</div>

<!-- 底部区域 -->
<div style="background: #333; color: white; padding: 10px; text-align: center;">
    版权所有 © 2024 我的博客
</div>

五、总结:HTML 学习路径建议

  1. 先掌握 "结构":熟记 HTML 文档的基本结构(<!DOCTYPE html>-<html>-<head>-<body>),理解标签的 "嵌套关系"。
  2. 重点练习核心标签:优先掌握文字排版(<h1>~<h6><p><br />)、链接与图像(<a><img />)、列表(<ul>/<ol>/<dl>),这些是最常用的标签。
  3. 尝试实战案例:写一个简单的 "个人介绍页"(包含标题、文字、图片、链接、列表),再写一个 "登录表单",通过实战巩固知识点。
  4. 后续学习方向:HTML 只是 "骨架",后续需要学习 CSS(美化网页)和 JavaScript(实现交互),三者结合才能开发出完整的网页。

希望本文能帮助你快速入门 HTML,后续可以多尝试修改代码、查看效果,"边做边学" 是掌握前端技术的最佳方式!

相关推荐
岁月宁静2 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
golang学习记2 小时前
从0死磕全栈之Next.js Server Actions 入门实战:在服务端安全执行逻辑,告别 API 路由!
前端
光影少年3 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
这儿有一堆花3 小时前
三种 弹出广告 代码开发实战
前端·html
练习时长一年3 小时前
Bean后处理器
java·服务器·前端
excel3 小时前
Vue 中 v-if 与 v-for 的优先级及最佳实践(Vue2 / Vue3 对比)
前端
吃饭最爱3 小时前
tomcat的功能和作用
前端
ObjectX前端实验室3 小时前
【图形编辑器架构】:编辑器的 Canvas 分层事件系统
前端·canvas·图形学
真的想不出名儿5 小时前
登录前验证码校验实现
java·前端·python