前端开发——HTML 网页开发基础

[一、HTML 的基础文档结构](#一、HTML 的基础文档结构)

[二、HTML 常用核心标签及实践](#二、HTML 常用核心标签及实践)

[1. 超链接标签](#1. 超链接标签)

2.图片标签

3.表单标签

[三、HTML 开发的核心规范](#三、HTML 开发的核心规范)

四、参考资源

HTML（超文本标记语言）是万维网内容呈现与结构组织的基础技术，是前端开发的核心入门知识。本文将系统梳理 HTML 的基础结构、常用标签及核心属性，为网页开发初学者提供清晰的实践指引。

一、HTML 的基础文档结构

一个标准的 HTML 文档需遵循固定的结构规范，其核心组成部分及语义如下：

html 复制代码

<!DOCTYPE html> <!-- 文档类型声明，指定当前文档遵循HTML5标准 -->
<html> <!-- 文档根元素，包裹所有HTML内容 -->
  <head> <!-- 文档元数据区域，包含页面配置信息（非可见内容） -->
    <meta charset="utf-8"> <!-- 定义文档字符编码，确保多语言内容正确渲染 -->
    <title>页面标题</title> <!-- 定义浏览器标签栏显示的页面标题，同时作用于搜索引擎索引 -->
  </head>
  <body> <!-- 文档可见内容区域，网页的所有展示元素均包含于此 -->
    页面主体内容
  </body>
</html>

二、HTML 常用核心标签及实践

HTML 通过 "标签" 定义页面元素，不同标签对应不同的语义与功能，以下是开发中最常用的核心标签及用法。

1. 超链接标签

<a> 标签用于创建超链接，实现页面内、页面间或外部资源的跳转，其核心属性为 href（目标地址）与target（打开方式）。

链接外部资源：

html 复制代码

<a href="https://www.w3school.com.cn" target="_blank">访问W3School教程（新标签页打开）</a>

target="_blank"：表示在新浏览器标签页中打开链接，避免覆盖当前页面；

链接本地文档：

html 复制代码

<a href="./articles/1.html">查看本地文章</a>

./ 表示当前目录，路径需与文件的实际存储位置对应

页面内锚点跳转：

html 复制代码

<!-- 定义锚点（通常用id标识） -->
<h2 id="section1">1. HTML文档结构</h2>

<!-- 跳转到锚点 -->
<a href="#section1">跳转到"HTML文档结构"章节</a>

**图片链接：**将图片作为可点击的链接载体

html 复制代码

<a href="1.html"><img src="abc.jpg"></a>

2.图片标签

<img> 为单标签（无需闭合），用于在页面中嵌入图像，核心属性包括：

src：指定图像文件的路径（本地 / 网络地址）
alt：图像加载失败时的替代文本（同时提升无障碍访问性）
width / height：定义图像显示尺寸（支持像素或百分比单位）
title：可选属性，鼠标悬浮在图片上时显示的提示文本

示例：

html 复制代码

<img 
  src="./images/avatar.jpg" 
  alt="用户头像" 
  width="150" 
  height="150"
  title="用户头像：张三"
>

3.表单标签

表单是网页与后端系统进行数据交互的核心载体，<form> 为表单容器，<input> 为输入控件，核心配置如下：

html 复制代码

<!-- form标签：指定数据提交地址（action）与提交方式（method） -->
<form action="后端接口地址" method="get">
  <!-- type="text"：单行文本输入框 -->
  用户名：<input type="text" name="username" placeholder="请输入用户名" required>
  <br>
  <!-- type="password"：密码输入框（内容隐藏） -->
  密码：<input type="password" name="pwd" placeholder="请输入密码" required>
  <br>
  <!-- type="submit"：提交按钮（触发表单数据提交） -->
  <input type="submit" value="登录">
  <!-- type="reset"：重置按钮（清空表单输入内容） -->
  <input type="reset" value="重置">
</form>

form 元素：表单中重要的字元素
- action：指定表单发送的地址
- method：发送的方式（get / post）
  - get：数据会附加到 url 的后面传递给服务器（默认）
  - post：将数据包大包发给服务器，等候服务器来读取
input 元素：他是表单的一个字属性。指定表单中的内容项，比如输入内容的文本框，可以指定表单属性，也可以放在表单的外面。
- type：指定输入框的类型，text 单行文本，password 密码，submit 提交按钮
- reset：重置按键
- button：普通按键（普通的按键需要和特定的事件关联）
- image：图片式按键
- hidden：隐藏字段，该内容不显示在页面上，提交其他的一些变量
- email：是一个邮箱类型，新特性，可能支持有差异
- required：表示内容必须填写，不然不能提交
- name：名称，输入内容识别名称，传递参数时候的参数名称
- value：默认值，输入框默认填入的内容
- maxlength：指定最大长度
- placeholder：设置提示信息

三、HTML 开发的核心规范

语义化标签优先：优先使用 <h1>-<h6>（标题）、<p>（段落）、<nav>（导航）等语义化标签，替代通用的 <div>，提升页面的可读性与 SEO 效果；
属性引号统一：属性值建议使用双引号（如 src="image.jpg"），避免单引号与无引号的混用；
标签闭合规范：双标签（如<div></div>）必须闭合，单标签（如<img>）建议添加自闭合符号（<img />），提升代码兼容性；
字符编码统一：所有 HTML 文档必须声明 charset="UTF-8"，避免中文乱码问题。

四、参考资源

HTML 标签及属性的权威查询可参考：W3School HTML 教程
在线练习：W3School HTML 在线编辑器