一、前言
网页是互联网所有页面的底层骨架，不管是日常浏览的资讯页、电商页面，还是后台管理系统，HTML都是前端开发的第一门必修课。
很多初学者学习HTML时，知识点零散杂乱，学完只会零散写几个标签，无法搭建完整规范的网页。本文整合全套HTML核心知识点，按照由浅入深的学习顺序编排，从基础语法、排版标签，到多媒体与交互表单实操，零基础也能跟着逐行敲代码学习。读完本篇，你可以独立完成完整静态网页编写，为后续CSS、JavaScript等前端进阶内容打下牢固基础。
二、HTML基础入门：网页结构与基础配置
1、初始HTML
W3C：World Wide Web Consortium（万维网联盟），成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构。
W3C标准包括：结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOM、ECMAScript）。
HTML：Hyper Text Markup Language（超文本标记语言，超文本包括：文字、图片、音频、视频、动画等），它不是编程语言，而是一套用来搭建网页结构的标签。每一个网页本质都是一个.html文件，浏览器读取文件后，解析标签并渲染出我们看到的页面。
一份标准网页拥有固定的骨架：<!DOCTYPE html> 声明文档类型，<html> 是整个网页的根标签，内部分为 <head> 和 <body> 。head存放网页看不见的配置信息，body存放页面所有可见内容。
<html>
<head>
<title>我的网页</title>
</head>
<body>
网页内容写这
</body>
</html>
2、网页基本信息
-<!DOCTYPE html>：声明文档内容
-<title>：网页标题
-<meta>：描述性标签，用来设置字符编码、网页描述、关键词，防止中文乱码
<!– DOCTYPE：告诉浏览器，我们要使用什么规范 –>
<!DOCTYPE html>
<html lang="en">
<!– head标签代表网页头部 –>
<head>
<!– meta描述性标签，它用来描述我们网站的一些信息 –>
<!– meta一般用来做SEO –>
<meta charset="UTF-8">
<!– title网页标签 –>
<title>HTML零基础系统入门教程</title>
</head>
<!– body标签代表网页主体 –>
<body>
HTML是前端开发的第一门必修课
</body>
</html>
3、网页基本标签
body内部存放基础文本标签，用来排版文字内容：
·标题标签：<h1>-<h6>，一共6级标题，h1字号最大
·段落标签：<p>，用来包裹一段文字，自带上下间距
·换行标签：<br/>，实现文字强制换行
·水平线：<hr/>，在页面生成一条分割线
·粗体：<strong>，字体样式标签
·斜体：<em>，英文常用字体样式标签
·空格： 仅凭键盘无论按多少下都只显示一个空格
·大于号、小于号：> 、<
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!– 标题标签 –>
<h1>一级标题</h1>
<h2>二级标题</h2>
<!– 段落标签 –>
<p>第一段</p>
<p>第二段</p>
<!– 换行标签 –>
第一行<br/>
第二行<br/>
<!– 水平线标签 –>
<hr/>
<h1>字体样式标签</h1>
粗体：<strong>这是粗体</strong>
<br/>
斜体：<em>这是斜体</em>
<br/>
<hr/>
空 格<br/>
空 格<br/>
大于号：><br/>
小于号：<<br/>
</body>
</html>
三、网页排版标签：文字、图片、链接、列表与表格
1、图像标签
常见的图像格式：JPG、GIF、PNG、BMP……
使用<img src="path" alt="text" title="text" width="x" height="y">在页面插入图片，核心属性：
·src：图片路径（本地路径或者网络图片地址）
·alt：图片加载失败时显示的替代文字
·title：鼠标悬停提示文字
·width/height：设置图片宽度高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!– ../上一级目录 –>
<img src="../resources/image/html.jpg" alt="未找到图片" title="HTML零基础系统入门教程" width="500" height="300">
</body>
</html>
2、块元素和行内元素
HTML标签分为两大类，是布局的基础：
·块元素：无论内容多少，该元素独占一行，比如h1-h6、p、div，可以设置宽高
·行内元素：内容有多宽就占多宽，不会自动换行，比如<a>、<span>、<strong>、<em>，宽高由内容决定
3、超链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>可以实现页面跳转：
·href：跳转的地址
·target：链接在哪个窗口打开，常用值有_self（在自己的网页中打开）、_blank（在新标签中打开）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!– 使用name作为标记 –>
<a name="top">顶部</a>
<!– a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
–>
<a href="初始html.html" target="_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<!–锚链接
1、需要一个锚链接
2、跳转到标记
#
–>
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!–功能性链接
邮件链接：mailto；
<a href="malto:填邮件地址"></a>
–>
</body>
</html>
点击第一个超链接后跳转到新标签
点击第二个标签在自己的网页中打开百度
4、列表标签
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
网页中三种常用列表：
1、无序列表<ul>+<li>：默认小黑圆点，导航栏最常用
2、有序列表<ol>+<li>：自带数字序号
3、自定义列表<dl>、<dt>、<dd>：用于图文说明、底部简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!–无序列表
应用范围：导航、侧边栏……
–>
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>C#</li>
</ul>
<!–有序列表
应用范围：试卷、问答……
–>
<ol>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>C#</li>
</ol>
<!–自定义列表
dl：标签
dt：列表名称
dd：列表内容
–>
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C++</dd>
<dd>C#</dd>
</dl>
</body>
</html>
5、表格标签
<table>用来展示规整的数据，搭配行标签<tr>、列标签（单元格）<td>，还可以实现单元格合并，制作课程表、成绩单等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!–表格table
行 tr rows
列 td cols
–>
<table border="1px">
<tr>
<!– colspan跨列 –>
<td colspan="3">成绩单</td>
</tr>
<tr>
<!– rowspan跨行 –>
<td rowspan="2">同学一</td>
<td>Java</td>
<td>100</td>
</tr>
<tr>
<td>Python</td>
<td>95</td>
</tr>
<tr>
<!– rowspan跨行 –>
<td rowspan="2">同学二</td>
<td>Java</td>
<td>99</td>
</tr>
<tr>
<td>Python</td>
<td>100</td>
</tr>
</table>
</body>
</html>
四、语义化标签、iframe与音视频媒体元素
1、页面结构分析（语义化标签）
传统页面全部使用div布局可读性很差，HTML5提供了语义化标签，让代码结构一目了然
| 元素名 | 描述 |
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚步区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<article>文章内容</article>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
2、iframe内联框架
<iframe src="path" name="mainFrame"></iframe>可以在当前页面里嵌入另一个独立网页，比如在页面里面嵌入地图，第三方页面，核心要素包括：
src：引用页面地址（必填）
name：框架标识名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" width="1000px" height="700px"></iframe>
</body>
</html>
3、媒体元素
媒体元素包括视频元素（video）和音频元素（audio）
网页可以直接播放音频和视频，不需要第三方播放器：<video>、<audio>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!–音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
–>
<video src="../resources/video/答辩.mp4" controls></video>
<audio src="../resources/audio/音乐1.mp3" controls></audio>
</body>
</html>
五、表单系统：控件使用、数据提交与简单校验
1、初识表单、form提交方式：get和post
表单是网页和用户交互的核心，用来收集用户填写的数据，提交给后端服务器。所有表单内容都包裹在<form>标签中。
<form action="path" method="post"></form>：
·action：表单提交的位置，可以是网站，也可以是一个请求处理地址
·method：post/get提交方式
get方式提交：可以在url中看到我们提交的信息，不安全，但高效
post方式提交：比较安全，传输大文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单、post和get提交</title>
</head>
<body>
<!– 表单 –>
<form action="表格标签.html" method="post">
<!– 文本输入框：input type="text" –>
<p>账号：<input type="text" name="account"></p>
<!– 密码框：input type="password" –>
<p>密码：<input type="password" name="password"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
提交后自动跳转
2、各类表单控件
表单元素格式：
| 属性 | 说明 |
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
① 文本框、单选框：单行输入文字、单选按钮，适合性别选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框、单选框</title>
</head>
<body>
<!– 表单 –>
<form action="表格标签.html" method="post">
<!– 文本输入框：input type="text" –>
<p>账号：<input type="text" name="account"></p>
<!– 密码框：input type="password" –>
<p>密码：<input type="password" name="password"></p>
<!–单选框
input type="radio"
value：单选框的值
name：表示组，同一组里同一时间只能选中一个选项值，单选框的关键要素
–>
<p>
<input type="radio" value="teacher" name="scholl">教师
<input type="radio" value="student" name="scholl">学生
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
② 按钮和多按钮：提交按钮、重置按钮，复选框可以多选爱好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮和多按钮</title>
</head>
<body>
<!– 表单 –>
<form action="表格标签.html" method="post">
<!–多选框
input type="checkbox"
–>
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">打游戏
</p>
<!–按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
–>
<p>
按钮：
<input type="button" name="btn" value="点击">
<input type="image" src="../resources/image/html.jpg" width="100" height="100">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
③ 下拉列表、文本域、文件域：下拉选择框、多行大文本输入、上传本地文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表框文本域和文件域</title>
</head>
<body>
<!– 表单 –>
<form action="表格标签.html" method="post">
<!– 下拉框，列表框 –>
<p>
下拉框：
<select name="列表名称">
<!– selected标记默认选中 –>
<option value="选项的值" selected>Java</option>
<option value="选项的值">Python</option>
<option value="选项的值">C++</option>
<option value="选项的值">#C</option>
</select>
</p>
<!– 文本域 –>
<p>
反馈：
<textarea name="textarea" rows="5" cols="50">文本内容</textarea>
</p>
<!–文件域
input type="file" name="files"
–>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
3、表单优化与高级控件
① 搜索框滑块和简单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框滑块和简单验证</title>
</head>
<body>
<!– 表单 –>
<form action="表格标签.html" method="post">
<!– 邮件验证 –>
<p>
邮箱：
<input type="email" name="email">
</p>
<!– URL –>
<p>
URL：
<input type="url" name="url">
</p>
<!– 数字 step调整的步长 –>
<p>
数字：
<input type="number" name="number" max="10" min="0" step="1">
</p>
<!–滑块
input type="range"
–>
<p>
音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!– 搜索框 –>
<p>
搜索：
<input type="search" name="search">
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
② 表单的应用：隐藏域、只读、禁用
-隐藏域<input type="hidden">：数据页面看不见，但是提交表单时会一起发给后端，用户无法看到和手动修改（前端可以调试改值，安全数据不能放这里）
-只读readonly：文本框文字能看见、可以复制，但是不能修改，表单提交时这个值可以传给后台，只对输入框、文本域生效，按钮、单选框无效
-禁用disabled：输入框变灰色，不能点击、不能编辑、不能复制，表单提交不会携带这个数据
| 属性 | 是否可见 | 是否能改 | 是否提交到后端 |
| hidden隐藏域 | ×不可见 | JS可以改 | √ 提交 |
| readonly只读 | √ 可见 | ×不能编辑，可复制 | √ 提交 |
| disabled禁用 | √ 灰色可见 | ×不能编辑、不能复制 | ×不提交 |
③ 表单初级验证：placeholder提示文字，required设置输入框不能为空，pattern正则表达式，实现浏览器原生的表单校验，不需要写复杂代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单、post和get提交</title>
</head>
<body>
<!– 表单 –>
<form action="表格标签.html" method="post">
<p>账号：<input type="text" name="account" placeholder="请输入用户名" required></p>
<!– 密码框：input type="password" –>
<p>密码：<input type="password" name="password" required></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
六、结语
本篇教程我们完整走完了HTML的学习路线，从搭建网页骨架，完成图文页面排版，再实现可收集用户数据的交互表单。
HTML只负责页面的结构，想要美化页面可以学习CSS，想要编写交互逻辑可以学习JavaScript。技术学习离不开动手敲代码练习，希望大家多多实操，后续还会更新前端进阶内容。
