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

HTML零基础快速入门教程（详细篇）

news 2025/7/20 6:15:53

本文详细介绍HTML零基础快速入门的基础知识，包括HTML的介绍、语言的一些实际作用、语法规范注意，如标签结构、标签属性、大小写不敏感等，还介绍了HTML文件的具体书写规则，如文件扩展名、文档类型声明和HTML结构以及具体的一些HTML标签示例，标题、段落、列表、图片、超链接、表格等等

本文目录

- - 1. HTML 编程语言介绍
  - - 1.1 基本定义
    - 1.2 发展历程
  - 2. HTML 编程语言作用
  - - 2.1 网页结构搭建
    - 2.2 内容展示
    - 2.3 页面导航
  - 3. HTML 编程语言语法规范
  - - 3.1 标签结构
    - 3.2 标签属性
    - 3.3 大小写不敏感
  - 4. HTML 文件书写规则
  - - 4.1 文件扩展名
    - 4.2 文档类型声明
    - 4.3 HTML 结构
  - 5. HTML 常用标签
  - - 5.1 标题标签
    - 5.2 段落标签
    - 5.3 列表标签
    - 5.4 图片标签
    - 5.5 链接标签
    - 5.6 表格标签

1. HTML 编程语言介绍

1.1 基本定义

HTML即超文本标记语言，它不是一种编程语言，而是一种用于创建网页的标记语言。它通过各种标签（tag）来描述网页的结构和内容。

1.2 发展历程

HTML 自诞生以来经历了多个版本的发展，如 HTML 2.0、HTML 3.2、HTML 4.01，直至现在广泛使用的 HTML5。HTML5 引入了许多新的特性和功能，增强了网页的多媒体处理能力和交互性。

2. HTML 编程语言作用

2.1 网页结构搭建

HTML 用于定义网页的基本结构，如标题、段落、列表、链接、图片等元素的位置和层次关系。在一些电商系统中，可用于构建商品列表页、商品详情页、购物车页等页面的框架。

2.2 内容展示

将文本、图片、视频等各种形式的内容整合到网页中，为用户提供丰富的信息。例如在电商系统中展示商品的名称、价格、图片、描述等信息。

2.3 页面导航

通过超链接（<a> 标签）实现页面之间的跳转，方便用户在不同页面之间进行浏览。在电商系统中，用户可以通过导航栏中的链接快速切换到不同的商品分类页面或功能页面。

3. HTML 编程语言语法规范

3.1 标签结构

HTML 标签通常由尖括号包围，分为开始标签和结束标签，如 <p> 是段落的开始标签，</p> 是段落的结束标签。有些标签是单标签，如 <img>、<br> 等，不需要结束标签。

3.2 标签属性

标签可以包含属性，用于提供关于标签的额外信息。属性通常以键值对的形式出现，如 <img src="product.jpg" alt="商品图片"> 中，src 和 alt 是属性，"product.jpg" 和 "商品图片" 分别是它们的值。

3.3 大小写不敏感

HTML 标签和属性名不区分大小写，但建议使用小写，以符合代码规范和提高可读性。

4. HTML 文件书写规则

4.1 文件扩展名

HTML 文件的扩展名通常为 .html 或 .htm。

4.2 文档类型声明

每个 HTML 文件都应该以文档类型声明（DOCTYPE）开头，用于告诉浏览器当前文档使用的 HTML 版本。HTML5 的文档类型声明为 <!DOCTYPE html>。

4.3 HTML 结构

HTML 文件由 <html> 标签包裹，内部包含 <head> 和 <body> 标签。<head> 标签用于包含页面的元数据，如标题、字符编码、引入的外部文件等；<body> 标签用于包含页面的可见内容。

5. HTML 常用标签

5.1 标题标签

使用 <h1> - <h6> 标签定义不同级别的标题，<h1> 表示最高级别的标题，<h6> 表示最低级别的标题。在商品详情页中，可使用 <h1> 标签显示商品名称。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品详情</title>
</head><body><h1>智能手机</h1><p>这是一款高性能的智能手机。</p>
</body></html>

5.2 段落标签

使用 <p> 标签定义段落，用于展示文本内容。可使用 <p> 标签描述商品的特点、功能等信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品详情</title>
</head><body><h1>智能手机</h1><p>该手机采用了先进的处理器，性能强劲。</p><p>拥有高清屏幕，显示效果出色。</p>
</body></html>

5.3 列表标签

无序列表：使用 <ul> 标签和 <li> 标签创建无序列表，常用于展示商品的特点、优势等信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品详情</title>
</head><body><h1>智能手机</h1><ul><li>高性能处理器</li><li>高清屏幕</li><li>大容量电池</li></ul>
</body></html>

有序列表：使用 <ol> 标签和 <li> 标签创建有序列表，可用于展示商品的使用步骤、排名等信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品使用步骤</title>
</head><body><h1>智能手机使用步骤</h1><ol><li>开机</li><li>设置网络连接</li><li>安装应用程序</li></ol>
</body></html>

5.4 图片标签

使用 <img> 标签插入图片，通过 src 属性指定图片的路径，alt 属性提供图片的替代文本，当图片无法加载时显示。用于展示商品的图片。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品详情</title>
</head><body><h1>智能手机</h1><img src="smartphone.jpg" alt="智能手机图片"><p>这是一款高性能的智能手机。</p>
</body></html>

5.5 链接标签

使用 <a> 标签创建超链接，通过 href 属性指定链接的目标地址。可用于导航栏、商品推荐等地方，实现页面之间的跳转。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>电商首页</title>
</head><body><h1>欢迎来到电商平台</h1><nav><a href="products.html">商品列表</a><a href="cart.html">购物车</a><a href="account.html">个人中心</a></nav>
</body></html>

5.6 表格标签

使用 <table>、<tr>、<th> 和 <td> 标签创建表格，用于展示结构化的数据。可用于展示商品的规格参数、价格比较等信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>商品规格参数</title>
</head><body><h1>智能手机规格参数</h1><table><tr><th>参数</th><th>详情</th></tr><tr><td>处理器</td><td>骁龙 8 Gen 2</td></tr><tr><td>屏幕尺寸</td><td>6.7 英寸</td></tr><tr><td>电池容量</td><td>5000mAh</td></tr></table>
</body></html>