【前端基础】HTML + CSS + JavaScript 快速入门（一）：HTML 详解

我的主页：寻星探路
个人专栏：《JAVA（SE）----如此简单！！！》《从青铜到王者，就差这讲数据结构！！！》
《数据库那些事！！！》《JavaEE 初阶启程记：跟我走不踩坑》
《JavaEE 进阶：从架构到落地实战》《测试开发漫谈》
《测开视角・力扣算法通关》《从 0 到 1 刷力扣：算法 + 代码双提升》
《Python 全栈测试开发之路》
没有人天生就会编程，但我生来倔强！！！

寻星探路的个人简介：

【前端基础】HTML + CSS + JavaScript 快速入门（一）：HTML 详解

摘要：本文是前端开发系列教程的第一篇。我们将从零开始认识 HTML 的基本结构，深入解析常用的 HTML 标签（如排版、媒体、链接、表格、表单等），并配合实际案例完成一个用户注册界面的搭建。
适用人群：后端开发人员、前端初学者、在校学生。

1. 学习目标

在开始之前，我们先明确本阶段（包含后续 CSS 和 JS）的学习目标：

认识 HTML 的基本结构，学习常用的 HTML 标签。
掌握 CSS 基本语法规范和 CSS 选择器的各种用法，熟练使用 CSS 的常用属性。
了解什么是 JavaScript，学习 JavaScript 的常见操作，以及使用 jQuery 完成简单的页面元素操作。

2. HTML 基础

2.1 什么是 HTML

HTML (Hyper Text Markup Language)，即超文本标记语言。

超文本：比文本要强大。通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片、音频，或者审阅过它的学者所加的评注、补充或脚注等等。
标记语言：由标签构成的语言。

HTML 的标签都是提前定义好的，使用不同的标签，表示不同的内容。这就类似飞书文档或 Word 文档，如果我们选中一段文本点击"标题1"，就会使用标题1的样式来显示文本。上述"标题1"在代码层面就是一个"标签" 。

代码示例：

html 复制代码

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

经过浏览器解析后的效果如下：

上面代码中的 <h1>、<h2>、<h3> 就是标签。学习 HTML 主要就是学习标签。

2.2 认识 HTML 标签

HTML 代码是由"标签"构成的。基本语法如下：

html 复制代码

<h3 id="myId">我是三级标题</h3>

标签名 （如 body）放到 < > 中。
双标签 ：大部分标签成对出现。<h1> 为开始标签，</h1> 为结束标签。
单标签：少数标签只有开始标签，称为"单标签" 。
内容：开始标签和结束标签之间，写的是标签的内容。
属性：开始标签中可能会带有"属性"。例如 id 属性相当于给这个标签设置了一个唯一的标识符（身份证号码）。

2.3 HTML 文件基本结构

一个标准的 HTML 文件结构如下所示：

html 复制代码

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

html 标签：是整个 HTML 文件的根标签（最顶层标签）。
head 标签：写页面的属性。
body 标签：写的是页面上显示的内容。
title 标签：写的是页面的标题。

2.4 标签层次结构

标签之间存在结构关系，主要分为父子关系 和兄弟关系 。

以基本结构代码为例：

head 和 body 是 html 的子标签（html 就是 head 和 body 的父标签）。
title 是 head 的子标签，head 是 title 的父标签。
head 和 body 之间是兄弟关系。

技巧：可以使用 Chrome 的开发者工具查看页面的结构。按 F12 或者右键"检查"（审查元素），开启开发者工具，切换到 Elements 标签，就可以看到页面结构细节。标签之间的结构关系，构成了一个 DOM 树（DOM 是 Document Object Model 文档对象模型的缩写）。

3. HTML 快速入门

3.1 开发工具

HTML 可以使用系统自带的记事本来编写，但是非常不方便。我们在课程中使用前端专业的开发工具：Visual Studio Code (简称 VS Code) 。

VS Code 是 Microsoft 在 2015 年推出的跨平台源代码编辑器，支持 Windows、Linux 和 macOS。它内置支持 JavaScript、TypeScript 和 Node.js，并拥有丰富的插件生态（支持 C++, C#, Java, Python, Go 等）。

官网下载 ：https://code.visualstudio.com 。

3.2 快速开发

在 VS Code 中创建文件 xxx.html，直接输入 ! (英文感叹号)，按 Enter 或 Tab 键，此时能自动生成代码的主体框架。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

细节解释（了解即可）：

<!DOCTYPE html>：DTD (文档类型定义)，描述当前的文件是一个 HTML5 的文件。
<html lang="en">：lang 属性表示当前页面是一个"英语页面"（浏览器可能会提示是否翻译）。
<meta charset="UTF-8">：描述页面的字符编码方式，防止中文乱码。
<meta name="viewport" ...>：设置可视区和设备宽度等宽，并设置初始缩放为不缩放（对移动端开发重要）。

在 <body></body> 标签中书写文字，按 Ctrl+S 保存文件，通过浏览器访问即可运行。

4. HTML 常见标签

4.1 标题标签：h1-h6

标题标签一共有六个，从 h1 到 h6。数字越大，字体越小。

html 复制代码

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

4.2 段落标签：p

在 HTML 中，代码中的换行符、空格都会失效。如果需要分成段落，需要使用专门的标签 p 。

html 复制代码

<p>这是一个段落</p>
<p>这是一个段落</p>

注意：

p 标签描述的段落，前面没有首行缩进（后续 CSS 会学）。
会自动根据浏览器宽度来决定排版。
HTML 内容首尾处的换行、空格均无效。
在 HTML 中文字之间输入的多个空格只相当于一个空格。
在 HTML 中直接输入换行不会真的换行，而是相当于一个空格。

4.3 换行标签：br

想要完成换行，可以通过 <br/> 标签来实现。br 是 break 的缩写。

br 是一个单标签。
br 标签不像 p 标签那样带有一个很大的段落空隙。
规范写法是 <br/>，不建议写成 <br> 。

4.4 图片标签：img

img 标签必须带有 src 属性，表示图片的路径。

html 复制代码

<img src="rose.jpg" width="500px" height="800px" border="5px">

常用属性 ：

width/height：控制宽度高度。一般改一个就行，另一个会等比例缩放，否则图片会失衡。
border：边框（一般使用 CSS 设定）。

关于目录结构与路径 ：

相对路径：以 html 所在位置为基准。

同级路径：直接写文件名 (如 rose.jpg 或 ./rose.jpg)。
下一级路径：image/1.jpg。
上一级路径：../image/1.jpg。

绝对路径：完整的磁盘路径或网络路径。

磁盘路径：D:/rose.jpg (建议使用 /)。
网络路径：完整的 URL 地址。

4.5 超链接：a

a 标签用于实现页面跳转。

html 复制代码

<a href="http://www.baidu.com" target="_blank">百度</a>

常用属性 ：

href：必须具备，表示点击后会跳转到哪个页面。
target：打开方式。默认是 _self (当前页打开)，如果是 _blank 则用新标签页打开。

链接形式 ：

外部链接：引用其他网站地址。
内部链接 ：网站内部页面跳转，写相对路径即可（如 <a href="2.html">跳转</a>）。
空链接 ：使用 # 占位（如 <a href="#">空链接</a>）。

5. 表格标签

表格标签用于展示数据。

table：表示整个表格。
tr：表示表格的一行。
td：表示一个单元格。
thead / tbody：表格的头部和主体区域。

常用属性 （放到 table 标签中）：

align: 表格相对于周围元素的对齐方式（如 center）。
border: 边框，1 表示有边框，"" 表示没边框。
cellpadding: 内容距离边框的距离。
cellspacing: 单元格之间的距离。
width / height: 设置尺寸。

代码示例：

html 复制代码

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
</table>

6. 表单标签

表单是让用户输入信息的重要途径。主要分为表单域 （form）和表单控件 （input 等）。

6.1 form 标签

html 复制代码

<form action="test.html">
    </form>

描述了要把数据按照什么方式，提交到哪个页面中（需结合后端理解）。

6.2 input 标签

各种输入控件。type 属性必须有，决定了控件的类型。

常用 type 类型 ：

文本框 (text)：<input type="text">
密码框 (password)：<input type="password">
单选框 (radio)：

html 复制代码

<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意：单选框必须具备相同的 name 属性，才能实现多选一。

复选框 (checkbox)：<input type="checkbox"> 吃饭
普通按钮 (button)：需搭配 JS 使用。

html 复制代码

<input type="button" value="我是个按钮" onclick="alert('hello')">

提交按钮 (submit)：必须放到 form 内，点击后尝试发送请求。

6.3 select 标签（下拉菜单）

option 标签定义选项，selected="selected" 表示默认选中。

html 复制代码

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

6.4 textarea 标签（多行文本域）

html 复制代码

<textarea rows="3" cols="50">
    默认内容
</textarea>

注意：文本域中的空白空格也会被视为内容。

7. 无语义标签：div & span

这两个标签没有特定的语义，主要用于网页布局，可以理解为"盒子" 。

div (division) ：分割。是块级元素，独占一行，是大盒子。
span ：跨度。是行内元素，不独占一行，是小盒子。

html 复制代码

<div>
    <span>内容1</span>
    <span>内容2</span>
</div>

8. 综合练习：用户注册页面

需求：使用表格进行整体布局，使用各种 input 标签实现页面中的输入控件。

代码实现：

html 复制代码

<h1>用户注册</h1>
<table>
    <tr>
        <td>用户名</td>
        <td><input type="text" placeholder="请输入用户名"></td>
    </tr>
    <tr>
        <td>手机号</td>
        <td><input type="text" placeholder="请输入手机号"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="password" placeholder="请输入密码"></td>
    </tr>
</table>
<div>
    <input type="button" value="注册">
    <span>已有账号?</span>
    <a href="#">登录</a>
</div>

下一篇预告 ：

单纯的 HTML 页面虽然有了骨架，但还不够美观。在下一篇**【CSS 篇】**中，我们将学习如何使用 CSS 为页面"化妆"，通过选择器、盒子模型和各种样式属性，让网页变得更加漂亮。