文章详情 学习记录

HTML学习

发布时间：2026-06-05 16:19 浏览次数：42 最后更新：2026-06-05 16:19

HTML

正文内容

HTML标签（按字母排序）
标签 描述
<!--...--> 定义注释
<!DOCTYPE> 定义文档类型
<a> 定义超文本链接
<abbr> 定义缩写
<acronym> 定义只取首字母的缩写，不支持HTML5
<address> 定义文档作者或拥有者的联系信息
<applet> 定义嵌入的 applet。HTML5中不支持使用。
<area> 定义图像映射内部的区域
<article> 定义一个文章区域
<aside> 定义页面的侧边栏内容
<audio> 定义音频内容
<b> 定义文本粗体
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 定义页面中文本的默认字体、颜色或尺寸。HTML5不支持使用。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 定义文字方向
<big> 定义大号文本，HTML5不支持使用。
<blockquote> 定义长的引用
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas> 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> 定义居中文本。HTML5不支持使用。
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd> 定义定义列表中项目的描述
<del> 定义被删除文本
<details> 用于描述文档或文档某个部分的细节
<dfn> 定义定义项目
<dialog> 定义对话框，比如提示框
<dir> 定义目录列表。HTML5不支持使用。
<div> 定义文档中的节
<dl> 定义列表详情
<dt> 定义列表中的项目
<em> 定义强调文本
<embed> 定义嵌入的内容，比如插件。
<fieldset> 定义围绕表单中元素的边框
<figcaption> 定义<figure> 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<font> 定义文字的字体、尺寸和颜色。HTML5不支持使用。
<footer> 定义 section 或 document 的页脚。
<form> 定义了HTML文档的表单
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<h1> to <h6> 定义 HTML 标题
<head> 定义关于文档的信息
<header> 定义了文档的头部区域
<hr> 定义水平线
<html> 定义 HTML 文档
<i> 定义斜体字
<iframe> 定义内联框架
<img> 定义图像
<input> 定义输入控件
<ins> 定义被插入文本
<kbd> 定义键盘文本
<keygen> 规定用于表单的密钥对生成器字段。
<label> 定义 input 元素的标注
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目
<link> 定义文档与外部资源的关系
<map> 定义图像映射
<mark> 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu> 定义菜单列表。HTML5不支持使用。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分
<noframes> 定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义不同类型的输出，比如脚本的输出。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress> 定义运行中的进度（进程）。
<q> 定义短的引用。
<rp> <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt> <rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby> <ruby> 标签定义 ruby 注释（中文注音或字符）。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span> 定义文档中的节。
<strike> HTML5不支持，不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary> <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期或时间，或者两者。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track> <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video> <video> 标签定义视频，比如电影片段或其他视频流。
<wbr> 规定在文本中的何处适合添加换行符。

HTML标签（按功能排序）
标签 描述
基础 ----------------------------------------------------------------------------------
<!DOCTYPE> 定义文档类型。
<html> 定义一个 HTML 文档
<title> 为文档定义一个标题
<body> 定义文档的主体
<h1> to <h6> 定义 HTML 标题
<p> 定义一个段落
<br> 定义换行符。
<hr> 定义水平线。
<!--...--> 定义一个注释
格式 ----------------------------------------------------------------------------------
<acronym> HTML5不再支持。 定义只取首字母的缩写。
<abbr> 定义一个缩写。
<address> 定义文档作者或拥有者的联系信息。
<b> 定义粗体文本。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 定义文本的方向。
<big> HTML5不再支持。 定义大号文本。
<blockquote> 定义块引用。
<center> HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em> 定义强调文本。
<font> HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
<i> 定义斜体文本。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<pre> 定义预格式文本
<progress> 定义运行中的任务进度（进程）。
<q> 定义短的引用。
<rp> 定义不支持 ruby 元素的浏览器所显示的内容。
<rt> 定义字符（中文注音或字符）的解释或发音。
<ruby> 定义 ruby 注释（中文注音或字符）。
<s> 定义加删除线的文本。
<samp> 定义计算机代码样本。
<small> 定义小号文本。
<strike> HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。
<strong> 定义语气更为强烈的强调文本。
<sub> 定义下标文本。
<sup> 定义上标文本。
<time> 定义一个日期/时间
<tt> HTML5不再支持。 定义打字机文本。
<u> 定义下划线文本。
<var> 定义文本的变量部分。
<wbr> 规定在文本中的何处适合添加换行符。
表单 ----------------------------------------------------------------------------------
<form> 定义一个 HTML 表单，用于用户输入。
<input> 定义一个输入控件
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<datalist> 规定了 input 元素可能的选项列表。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义一个计算的结果
框架 ----------------------------------------------------------------------------------
<frame> HTML5不再支持。 定义框架集的窗口或框架。
<frameset> HTML5不再支持。定义框架集。
<noframes> HTML5不再支持。 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。
图像 ----------------------------------------------------------------------------------
<img> 定义图像。（使用src 属性指向一个图片的具体地址）
<map> 定义图像映射。
<area> 定义图像地图内部的区域。
<canvas> 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<figcaption> 定义一个 caption for a <figure> element
<figure> figure 标签用于对元素进行组合。
Audio/Video
<audio> 定义声音，比如音乐或其他音频流。
<source> 定义media元素 (<video> 和 <audio>)的媒体资源。media
<track> 为媒体(<video> 和 <audio>)元素定义外部文本轨道。
<video> 定义一个音频或者视频
链接 ----------------------------------------------------------------------------------
<a> 定义一个链接（在href属性中指定链接的地址）
<link> 定义文档与外部资源的关系。
<nav> 定义导航链接
列表 ----------------------------------------------------------------------------------
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dir> HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
<dl> 定义一个定义列表
<dt> 定义一个定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义菜单列表。
<command> 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格 ----------------------------------------------------------------------------------
<table> 定义一个表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
样式/节 ----------------------------------------------------------------------------------
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义一个文档头部部分
<footer> 定义一个文档底部
<section> 定义了文档的某个区域
<article> 定义一个文章内容
<aside> 定义其所处内容之外的内容。
<details> 定义了用户可见的或者隐藏的需求的补充细节。
<dialog> 定义一个对话框或者窗口
<summary> 定义一个可见的标题。 当用户点击标题时会显示出详细信息。
元信息 ----------------------------------------------------------------------------------
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> HTML5不再支持。 HTML 4.01 已废弃。定义页面中文本的默认字体、颜色或尺寸。
程序 ----------------------------------------------------------------------------------
<script> 定义客户端脚本。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<applet> HTML5不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet。
<embed> 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
<object> 定义嵌入的对象。
<param> 定义对象的参数。

简介

HTML（超文本标记语言），用于描述网页

Web标准

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面构成。

  • 结构用于对网页元素进行整理和分类，使用HTML来描述
  • 表现用于设置网页元素的版式、颜色、大小等外观，使用CSS来描述
  • 行为指网页模型的定义及交互行为的编写，使用Javascript来描述

结构、表现和行为三者应互相分离（可以理解为写到三个文件中）

HTML语法规范

HTML标签是由尖括号包围的关键词

  • 大部分HTML标签都是成对出现的，称之为双标签（分为开始标签和结束标签）

  • 也有少部分的单标签，如：

（以反斜杠结尾）

标签关系

分为两类：包含关系和并列关系

  • 包含关系（可嵌套的关系）

  • 并列关系

HTML基本结构标签（骨架标签）

使用VSCode创建页面

只要输入一个！然后使用Tab键就可以生成如下代码

安装了如下插件后可以使用Alt+B在默认浏览器中打开HTML文件

文档右键菜单：

使用Ctrl+加号键/减号键可以放大缩小VSCode的代码界面字号

VSCode中快捷键

  • Shift+Alt+上/下箭头 ：快速复制一行
  • Ctrl+D ：选定多个相同的单词
  • Ctrl+ 加号/减号 ：放大缩小整个编辑器页面

使用VSCode工具自动生成的骨架标签

<!DOCTYPE>标签

此标签告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>表示使用的HTML5版本来显示网页


注意：

  • <!DOCTYPE>声明必须位于文档的最前面位置

  • <!DOCTYPE>不是一个HTTML标签，它是文档类型声明标签


lang语言

用于定义当前文档的显示语言

<html lang="en">中lang即language的缩写，en表示显示语言为英文，zh-CN定义语言为中文，fr定义页面语言为法文

此属性会警示浏览器此时的页面语言种类，从而激活浏览器的翻译功能，下图中即lang="en"时浏览器弹出的提示框。

charset字符集

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

Charset常用的值有GB2312（简体中文）、BIG5（繁体中文）、GBK（国标，包含了简体与繁体中文）和UTF-8（万国码）

标题标签<h1>-<h6>

h是英文header标题的缩写

作为标题使用，依据重要性进行字号递减

每个标题标签会独占一行

段落标签与换行标签

P是英文paragraph段落的缩写

用于定义段落，此标签可以将整个网页分为若干个段落

文本在一个段落中会根据浏览器窗口的大小自动换行

段落和段落之间会自动生成空隙

在HTML中，一个段落中的文字会从左到右依次排列直到浏览器窗口的右端，然后才自动换行

<br />用于某段文本强制换行

br是英文break换行的缩写

<br />是单标签

<br />标签只是简单的开始一行，跟段落不一样，段落之间会插入一些垂直的间距

HTML中的空格

无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。

下面的两个代码片段是等价的：

格式化标签

文本格式化

预格式文本

使用<pre>标签对空格和空行进行控制

计算机输出标签

地址标签

点击超链接可以打开邮件程序

实现缩写和首字母缩写

改变文字显示方向

实现长短不一的引用语。

标记删除文本和插入文本

HTML常用标签

布局标签<div>与<span>

这两个标签没有语义相当于一个盒子可以用来装内容。用于布局。

<div>表示分割、分区。特点为一行只能放一个<div>

<span>表示跨度、跨距。特点是一行可以有多个<span>

图像标签<img>

<img src=“图像URL”/>

Src属性用于指定文件的路径

图像标签所具有的其他属性：

在修改图像宽度或高度时，只设置宽或只设置高会使图片等比例缩放，若同时设置了宽和高则会造成图片的拉伸

超链接标签<a>

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

Target可以设置为_self（自身中打开）或_blank（新页面中打开）

链接分类：

  • 外部链接：必须以http://开头
  • 内部链接：网站内部页面之间的相互链接，直接链接内部页面地址即可
  • 空链接：没有确定链接的目标时使用空链接<a href="#"></a>
  • 下载链接：如果href里的地址是一个文件（如：.exe）或压缩包（如：.zip），点击会下载这个文件
  • 网页元素链接：网页中的各种元素，如文本，图像，表格，音频，视频都可以添加超链接
  • 锚点链接：快速定位到页面中的某个位置<a href="#location"></a>且<h3 id="location">跳转到的位置</h3>

表格标签<table>

用于展示数据，显示数据

基本语法：

<table>
<tr>

<td>单元格内的文字</td>

……

</tr>

……

</table>

其中：

<table></table>定义表格

<tr></tr>用于表示表格中的行，必须在<table></table>中才可以使用

<td></td>用于表示单元格，必须存在于<tr></tr>标签中

表头单元格标签<th>

表头单元格里的内容会加粗居中显示

表格外观属性

通过css来设置

表格结构标签

当表格很长时可以使用表格结构标签以更好的区分表格结构

<thead></thead>标签规定表格的头部区域，其内部必须拥有<tr>标签

<tbody></tbody>标签规定表格的主体区域

以上两个标签必须位于<table>标签中

合并单元格

  • 合并步骤
    1. 先确定是跨行还是跨列
    2. 找到目标单元格，写上合并方式=合并的单元格数量。如：<td colspan = "2"></td>
    3. 删除多余的单元格
  • 合并方式：

​ 跨行合并：rowspan=“合并单元格的个数”

​ 跨列合并：colspan=“合并单元格的个数”

  • 目标单元格：

​ 跨行：最上侧单元格为目标单元格，需要在其中书写合并代码

​ 跨列：最左侧单元格为目标单元格，需要在其中书写合并代码

  • 删除单元格

如：一行中有三个单元格，当合并了第2和3个单元格时，需要将之前代码中的第三个单元格删除

列表标签

用于布局

根据使用场景的不同，可以分为三大类：无序列表、有序列表和自定义列表

无序列表

<ul>标签表示无需列表，一般会以项目符号来呈现列表项。

<li>标签定义列表项。

注：无序列表的各个项之间没有顺序级别之分。<ul>中只能嵌套<li>，不允许有文字和其他标签。而<li>相当于一个容器，可以存放任何标签。无序列表的样式属性可以使用css来设置。

有序列表

<ol>标签表示有序列表，一般会以数字来顺序呈现列表项。

<li>标签定义列表项。

注：<ol>中只能嵌套<li>，不允许有文字和其他标签。而<li>相当于一个容器，可以存放任何标签。有序列表的样式属性可以使用css来设置。

自定义列表

经常用于对术语或名词进行解释和描述，列表项前无任何符号或数字

<dl>标签表示自定义列表。

<dt>标签表示项目标题。

<dd>标签表示项目列表。

注：<dl>中只能有<dt>和<dd>标签，<dt>和<dd>没有数量限制。<dt>和<dd>不是包含关系，是并列关系。其样式属性可以使用css来设置。

表单标签

常用于收集用户信息

一个完整的表单通常由表单域、表单元素和提示信息三部分组成

表单域

表单域是一个包含表单元素的区域

<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器

表单元素

  • Input输入表单元素
  • Select下拉表单元素
  • Textarea文本域元素

表单元素标签

Input输入表单元素

<input>标签用于收集用户信息

<input>标签的type属性可以设置输入字段的形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等）。

<input>为单标签

注：name和value属性主要是为后台人员使用。对于单选按钮和复选框要有相同的name值。checked属性主要针对于单选按钮和复选框，作用为一打开页面就使其处于勾选状态。

Select下拉表单元素

页面中如果有多个选项让用户选择，可以使用<select>标签控件以节省空间。

注：<select>中至少需要包含一个<option>。在<option>中定义selected=“selected”时，当前项即为默认选中项。

Textarea文本域元素

当用户输入内容较多时，需使用<textarea>标签定义多行文本输入控件。常见形式为留言板，评论区等等。

属性cols：定义每行的字符数

属性rows：定义显示的行数

实际开发中会使用css来设置其样式属性。

标注标签<label>

<label>标签为input元素定义标注标签。

<label>标签用于绑定一个表单元素，当点击<label>内的文本时，浏览器就会自动将光标选中对应的表单元素上，用来增加用户体验。

<label>标签的for属性应当与相关元素的id属性相同

注释标签<!--注释-->

快捷键：ctrl+/

特殊字符

正文内容已启用复制保护，代码块与行内代码仍支持复制。

评论区

欢迎参与讨论，评论提交与展示状态会在下方同步更新。

发表评论

提交后将进入人工审核，审核通过后才会展示。

邮箱仅用于必要的联系与基础风控，不会在页面中公开展示。

评论内容最多 1000 个字符。 0 / 1000

请文明发言，避免发布广告、链接或敏感内容；短时间内频繁提交会被限制。

隐私提示：提交评论即表示你同意站点为评论展示、审核、防刷与安全风控目的处理你填写的昵称、邮箱和评论内容。

其中邮箱不会公开展示，也不会用于与评论无关的公开用途。

读者留言

还没有评论，来发表第一条评论吧。

共 0 条评论 已展示 0 / 0 条评论
当前还没有评论，来发表第一条评论吧。若评论需要审核，通过后会展示在这里。