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

前端三大件--HTML

news 来源：原创 2025/5/11 9:32:53

引言

在互联网的世界里，每一个绚丽多彩的网页背后，都离不开 HTML 的支撑。HTML（Hyper Text Markup Language，超文本标记语言）作为网页开发的基础语言，就像是搭建高楼大厦的砖块，是所有 Web 开发者必须掌握的核心技能。本文将结合详细的知识点和丰富的示例，带您深入了解 HTML 的奥秘，助力您开启网页开发之旅。

一、HTML 概述

HTML 本质上是一种标记语言，它通过一系列标签（Tags）来描述网页的结构和内容。这些标签就像特殊的指令，告诉浏览器如何展示文本、图片、链接、表格等各种元素，从而将分散在网络上的文档格式统一，将 Internet 资源连接成一个逻辑整体。简单来说，HTML 负责提供网页的内容骨架，而后续的 CSS（层叠样式表）和 JavaScript 则分别用于美化页面和赋予页面交互功能。

二、HTML 标签基础

2.1 标签基本结构

HTML 标签通常由开始标签<标签名称>、结束标签</标签名称>和其中包含的内容组成。例如：<p>这是一段段落内容</p>。还有一些自闭合标签，如<br>（换行）、<img>（图片）等，它们没有结束标签，格式为<标签名称/> 。

2.2 网页骨架标签

一个标准的 HTML 网页骨架由以下标签构成：

<html><head><meta charset="UTF-8"><title>标题</title></head><body>核心内容</body>
</html>

<html>：整个 HTML 文档的根标签，包裹了网页的所有内容。
<head>：包含了网页的元数据，如字符编码<meta charset="UTF-8">（指定页面字符编码，避免乱码）、页面标题<title>等，这些信息不会直接显示在页面中，但对网页的正确解析和搜索引擎优化等有重要作用。
<body>：网页的主体部分，我们在浏览器中看到的实际内容，如文字、图片、链接等，都写在这个标签内。

三、常用基础标签

3.1 标题标签

标题标签用于定义网页中的各级标题，从<h1>到<h6>，重要性依次递减，字号也逐渐变小。例如：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

合理使用标题标签不仅能让网页内容结构清晰，还对搜索引擎优化（SEO）有积极作用。

3.2 横线与换行标签

<hr>：用于在页面中插入一条水平线，起到分隔内容的作用，例如：<hr>。
<br>：用于强制换行，当需要在文本中换行显示时使用，如：这是第一行<br>这是第二行 。

3.3 字体标签（已不推荐，推荐使用 CSS）

虽然现在更推荐使用 CSS 来设置字体样式，但早期的<font>标签也能实现字体颜色和大小的调整，例如：

<font color="#7fffd4" size="+4">我是字体标签</font>

不过，随着 Web 标准的发展，使用 CSS（如style属性或外部样式表）来控制字体样式更加灵活和规范。

3.4 链接标签

链接标签<a>用于创建超链接，让用户可以从一个页面跳转到另一个页面。常见属性如下：

href：指定链接的目标地址，例如：<a href="https://www.baidu.com">百度</a> 。
target：指定链接的打开方式：
- _blank：在新的浏览器选项卡中打开链接。
- _self：在当前窗口中打开链接（默认值）。
- _parent：在父框架中打开链接（用于框架结构的网页）。
- _top：在整个窗口中打开链接，会取消所有框架结构。

3.5 列表标签

无序列表<ul>：用于创建无顺序的列表，每个列表项用<li>标签表示，例如：

<ul><li>用户管理</li><li>用户姓名</li><li>用户年龄</li><li>用户性别</li>
</ul>

有序列表<ol>：用于创建有顺序的列表，同样每个列表项用<li>标签，例如：

<ol><li>用户1</li><li>用户2</li><li>用户3</li><li>用户4</li>
</ol>

3.6 图片与视频标签

图片标签<img>：用于在网页中插入图片，关键属性src指定图片的路径（可以是本地路径或网络路径），width和height用于设置图片的宽度和高度（单位通常为像素px），例如：

<img src="https://img1.baidu.com/it/u=1557466037,285199853&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1420" width="100px" height="100px">

视频标签<video>：用于在网页中嵌入视频，width和height设置视频尺寸，controls属性显示视频播放控制条，<source>标签用于指定不同格式的视频源，以兼容不同浏览器，例如：

<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>

3.7 滚动与段落标签

滚动标签<marquee>：可使内容在页面中滚动显示（该标签已逐渐被 CSS 动画替代，但在一些简单场景仍可使用），例如：<marquee direction="left">我是滚动标签</marquee> 。
段落标签<p>：用于定义一个段落，将文本内容进行分段展示，例如：<p>这是一个段落内容</p> 。

四、表格标签

表格标签<table>用于创建表格，通过以下属性来设置表格的样式和结构：

border：设置表格边框的宽度（单位为像素px）。
cellspacing：设置单元格之间的间距。
width和height：设置表格的宽度和高度。

表格由行标签<tr>和单元格标签<td>组成，还可以使用<th>定义表头单元格，例如：

<table border="1px" cellspacing="0" width="500px"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>

此外，还可以通过colspan属性实现单元格跨列合并，rowspan属性实现单元格跨行合并，如：

<table border="1px" cellspacing="0" width="500px"><tr><td colspan="2" >1</td><td rowspan="2">3</td></tr><tr><td rowspan="2">4</td><td>5</td></tr><tr><td colspan="2">8</td></tr>
</table >

五、表单标签

表单标签<form>用于收集用户输入的数据，并将其提交到服务器。<form>标签的重要属性：

action：指定数据提交的后端路径。
method：指定提交数据的请求方法，常用get和post 。

表单内包含多种输入控件，如：

<input>：根据type属性的不同有多种类型：
- text：文本输入框。
- password：密码输入框（输入内容会被隐藏）。
- number：数字类型输入框。
- date：日期选择框。
- checkbox：复选框，可多选。
- radio：单选框（同一组单选框需设置相同的name属性）。
- file：文件上传框。
- button：普通按钮（需配合 JavaScript 实现功能）。
- submit：提交按钮，点击后会将表单数据提交到action指定的路径。
- reset：重置按钮，点击后会清空表单内的所有输入内容。
- email：邮箱输入框（浏览器会自动验证输入格式）。
- hidden：隐藏域，用于存储一些不需要用户看到但需要提交的数据。
<select>：下拉框，通过<option>标签定义下拉选项。
<textarea>：多行文本输入框，用于输入较长的文本内容，通过rows和cols属性设置行数和列数。

示例表单：

<form action="login" method="get">用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br>年龄：<input type="number" name="age"><br>年龄：<input type="date"><br>年龄：<input type="datetime-local"><br>性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女 <br>性别：<select name="gender" ><option value="3">=======请选择=======</option><option value="0">男</option><option value="1">男</option></select> <br>兴趣爱好：<input type="checkbox" name="like" value="lanqiu">篮球<input type="checkbox" name="like" value="yumaoqiu">羽毛球<input type="checkbox" name="like" value="zuqiu">足球 <br>头像： <input type="file" name="touxiang"> <br><input type="button" value="没有功能的按钮"> <br>邮箱：<input type="email"> <br>简介：<textarea rows="5" cols="20"></textarea> <br><input type="submit" value="提交"> <br><input type="reset"> <br><input type="color"><input type="hidden" name="id" value="12345">
</form>

六、布局标签（框架布局，已较少使用）

早期的 HTML 使用<frameset>和<frame>标签进行网页框架布局，将页面划分为多个区域，每个区域显示不同的 HTML 页面。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<frameset rows="10%,80%,*"><frame src="5.7top.html"><frameset cols="20%,*"><frame src="5.7left.html"><frame src="right.html" name="right"></frameset><frame src="down.html">
</frameset>
</html>

但随着响应式设计和 CSS 布局技术（如 Flexbox、Grid）的发展，框架布局已逐渐被淘汰，如今更推荐使用 CSS 来实现灵活且美观的网页布局。

总结

HTML 作为网页开发的基础，掌握其各种标签和语法规则是构建网页的第一步。通过本文对 HTML 概述、基础标签、表格、表单以及布局等内容的详细讲解，相信您对 HTML 有了更全面的认识。在实际开发中，还需不断练习和探索，结合 CSS 和 JavaScript，创造出功能强大、界面美观的网页。后续我们将继续深入学习 CSS 和 JavaScript 相关知识，进一步提升网页开发技能。