【前端基础】HTML + CSS + JavaScript 快速入门（一）：HTML 详解
【前端基础】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”在代码层面就是一个“标签” 。
代码示例：
<h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3>经过浏览器解析后的效果如下 ：
上面代码中的 <h1>、<h2>、<h3> 就是标签。学习 HTML 主要就是学习标签 。
2.2 认识 HTML 标签
HTML 代码是由“标签”构成的。基本语法如下 ：
<h3id="myId">我是三级标题</h3>- 标签名（如
body）放到< >中 。 - 双标签：大部分标签成对出现。
<h1>为开始标签，</h1>为结束标签 。 - 单标签：少数标签只有开始标签，称为“单标签” 。
- 内容：开始标签和结束标签之间，写的是标签的内容 。
- 属性：开始标签中可能会带有“属性”。例如
id属性相当于给这个标签设置了一个唯一的标识符（身份证号码） 。
2.3 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 等） 。
3.2 快速开发
在 VS Code 中创建文件 xxx.html，直接输入 ! (英文感叹号)，按 Enter 或 Tab 键，此时能自动生成代码的主体框架 。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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。数字越大，字体越小 。
<h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>4.2 段落标签：p
在 HTML 中，代码中的换行符、空格都会失效。如果需要分成段落，需要使用专门的标签 p 。
<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 属性，表示图片的路径 。
<imgsrc="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 标签用于实现页面跳转。
<ahref="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: 设置尺寸。
代码示例：
<tablealign="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 标签
<formaction="test.html"></form>描述了要把数据按照什么方式，提交到哪个页面中（需结合后端理解） 。
6.2 input 标签
各种输入控件。type 属性必须有，决定了控件的类型 。
常用 type 类型 ：
- 文本框 (
text)：<input type="text"> - 密码框 (
password)：<input type="password"> - 单选框 (
radio)：
<inputtype="radio"name="sex">男 <inputtype="radio"name="sex"checked="checked">女 注意：单选框必须具备相同的 name 属性，才能实现多选一。
4. 复选框 (checkbox)：<input type="checkbox"> 吃饭
5. 普通按钮 (button)：需搭配 JS 使用。
<inputtype="button"value="我是个按钮"onclick="alert('hello')">- 提交按钮 (
submit)：必须放到form内，点击后尝试发送请求。
6.3 select 标签（下拉菜单）
option 标签定义选项，selected="selected" 表示默认选中 。
<select><option>北京</option><optionselected="selected">上海</option></select>6.4 textarea 标签（多行文本域）
<textarearows="3"cols="50"> 默认内容 </textarea>注意：文本域中的空白空格也会被视为内容 。
7. 无语义标签：div & span
这两个标签没有特定的语义，主要用于网页布局，可以理解为“盒子” 。
div(division)：分割。是块级元素，独占一行，是大盒子 。span：跨度。是行内元素，不独占一行，是小盒子。
<div><span>内容1</span><span>内容2</span></div>8. 综合练习：用户注册页面
需求：使用表格进行整体布局，使用各种 input 标签实现页面中的输入控件 。
代码实现：
<h1>用户注册</h1><table><tr><td>用户名</td><td><inputtype="text"placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><inputtype="text"placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><inputtype="password"placeholder="请输入密码"></td></tr></table><div><inputtype="button"value="注册"><span>已有账号?</span><ahref="#">登录</a></div>
下一篇预告：
单纯的 HTML 页面虽然有了骨架，但还不够美观。在下一篇**【CSS 篇】**中，我们将学习如何使用 CSS 为页面“化妆”，通过选择器、盒子模型和各种样式属性，让网页变得更加漂亮。
