HTML学习笔记

发表于 更新于

首发于羽毛工作室官方博客——和有趣的人做尽有趣的事！

HTML相对简单，常用标签和属性就这么几个，此文档记录在学习HTML过程中，自己掌握的知识，方便复习。

标签元素表

基础

标签 描述
!DOCTYPE 定义文档类型。
html 定义一个 HTML 文档
title 为文档定义一个标题
body 定义文档的主体
h1 to h6 定义 HTML 标题
p 定义一个段落
br 定义简单的折行。
hr 定义水平线。
!–…– 定义一个注释 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

</body>
</html>

元信息

标签 描述
head 定义关于文档的信息
meta 定义关于 HTML 文档的元信息。
base 定义页面中所有链接的默认地址或默认目标。
basefont HTML5不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。

格式

标签 描述
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 规定在文本中的何处适合添加换行符。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

表单

标签 描述
form 定义一个 HTML 表单，用于用户输入。
input 定义一个输入控件
textarea 定义多行的文本输入控件。
button 定义按钮。
select 定义选择列表（下拉列表）。
optgroup 定义选择列表中相关选项的组合。
option 定义选择列表中的选项。
label 定义 input 元素的标注。
fieldset 定义围绕表单中元素的边框。
legend 定义 fieldset 元素的标题。
datalist 规定了 input 元素可能的选项列表。
keygen 规定用于表单的密钥对生成器字段。
output 定义一个计算的结果 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

框架

标签 描述
frame HTML5不再支持。 定义框架集的窗口或框架。
frameset HTML5不再支持。定义框架集。
noframes HTML5不再支持。 定义针对不支持框架的用户的替代内容。
iframe 定义内联框架。 
1
<iframe src="demo_iframe.htm"></iframe>

图像

标签 描述
img 定义图像。
map 定义图像映射。
area 定义图像地图内部的区域。
canvas 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
figcaption 定义一个 caption for a figure element
figure figure 标签用于对元素进行组合。 
1
<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">

音视频

标签 描述
audio 定义声音，比如音乐或其他音频流。
source 定义media元素 (video 和 audio)的媒体资源。media
track 为媒体(video 和 audio)元素定义外部文本轨道。
video 定义一个音频或者视频 
1
2
3
4
5
6
7
8
9
10
11
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

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

链接

标签 描述
a 定义一个链接
link 定义文档与外部资源的关系。
main 定义文档的主体部分。
nav 定义导航链接 
1
2
3
4
5
6
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

列表

标签 描述
ul 定义一个无序列表
ol 定义一个有序列表
li 定义一个列表项
dir HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
dl 定义一个定义列表
dt 定义一个定义定义列表中的项目。
dd 定义定义列表中项目的描述。
menu 定义菜单列表。
command 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格

标签 描述
table 定义一个表格
caption 定义表格标题。
th 定义表格中的表头单元格。
tr 定义表格中的行。
td 定义表格中的单元。
thead 定义表格中的表头内容。
tbody 定义表格中的主体内容。
tfoot 定义表格中的表注内容（脚注）。
col 定义表格中一个或多个列的属性值。
colgroup 定义表格中供格式化的列组。 
1
2
3
4
5
6
7
8
9
10
<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

样式/节

标签 描述
style 定义文档的样式信息。
div 定义文档中的节。
span 定义文档中的节。
header 定义一个文档头部部分
footer 定义一个文档底部
section 定义了文档的某个区域
article 定义一个文章内容
aside 定义其所处内容之外的内容。
details 定义了用户可见的或者隐藏的需求的补充细节。
dialog 定义一个对话框或者窗口
summary 定义一个可见的标题。 当用户点击标题时会显示出详细信息。 
1
2
3
4
5
6
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

程序

标签 描述
script 定义客户端脚本。
noscript 定义针对不支持客户端脚本的用户的替代内容。
applet HTML5不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet。
embed 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
object 定义嵌入的对象。
param 定义对象的参数。 
1
2
3
<script>
document.write("Hello World!")
</script>

全局属性

属性 描述
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名（classname）
contenteditable 规定是否可编辑元素的内容。
contextmenu 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-* 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggable 指定某个元素是否可以拖动
dropzone 指定是否将数据复制，移动，或链接，或删除
hidden hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheck 检测元素是否拼写错误
style 规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translate 指定是否一个元素的值在页面载入时是否需要翻译

全局事件

窗口事件

属性 值 描述
onafterprint script 在打印文档之后运行脚本
onbeforeprint script 在文档打印之前运行脚本
onbeforeonload script 在文档加载之前运行脚本
onblur script 当窗口失去焦点时运行脚本
onerror script 当错误发生时运行脚本
onfocus script 当窗口获得焦点时运行脚本
onhashchange script 当文档改变时运行脚本
onload script 当文档加载时运行脚本
onmessage script 当触发消息时运行脚本
onoffline script 当文档离线时运行脚本
ononline script 当文档上线时运行脚本
onpagehide script 当窗口隐藏时运行脚本
onpageshow script 当窗口可见时运行脚本
onpopstate script 当窗口历史记录改变时运行脚本
onredo script 当文档执行再执行操作（redo）时运行脚本
onresize script 当调整窗口大小时运行脚本
onstorage script 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundo script 当文档执行撤销时运行脚本
onunload script 当用户离开文档时运行脚本

表单事件

属性 值 描述
onblur script 当元素失去焦点时运行脚本
onchange script 当元素改变时运行脚本
oncontextmenu script 当触发上下文菜单时运行脚本
onfocus script 当元素获得焦点时运行脚本
onformchange script 当表单改变时运行脚本
onforminput script 当表单获得用户输入时运行脚本
oninput script 当元素获得用户输入时运行脚本
oninvalid script 当元素无效时运行脚本
onreset script 当表单重置时运行脚本。HTML 5 不支持。
onselect script 当选取元素时运行脚本
onsubmit script 当提交表单时运行脚本

键盘事件

属性 值 描述
onkeydown script 当按下按键时运行脚本
onkeypress script 当按下并松开按键时运行脚本
onkeyup script 当松开按键时运行脚本

鼠标事件

属性 值 描述
onclick script 当单击鼠标时运行脚本
ondblclick script 当双击鼠标时运行脚本
ondrag script 当拖动元素时运行脚本
ondragend script 当拖动操作结束时运行脚本
ondragenter script 当元素被拖动至有效的拖放目标时运行脚本
ondragleave script 当元素离开有效拖放目标时运行脚本
ondragover script 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart script 当拖动操作开始时运行脚本
ondrop script 当被拖动元素正在被拖放时运行脚本
onmousedown script 当按下鼠标按钮时运行脚本
onmousemove script 当鼠标指针移动时运行脚本
onmouseout script 当鼠标指针移出元素时运行脚本
onmouseover script 当鼠标指针移至元素之上时运行脚本
onmouseup script 当松开鼠标按钮时运行脚本
onmousewheel script 当转动鼠标滚轮时运行脚本
onscroll script 当滚动元素的滚动条时运行脚本

多媒体事件

属性 值 描述
onabort script 当发生中止事件时运行脚本
oncanplay script 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange script 当媒介长度改变时运行脚本
onemptied script 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended script 当媒介已抵达结尾时运行脚本
onerror script 当在元素加载期间发生错误时运行脚本
onloadeddata script 当加载媒介数据时运行脚本
onloadedmetadata script 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart script 当浏览器开始加载媒介数据时运行脚本
onpause script 当媒介数据暂停时运行脚本
onplay script 当媒介数据将要开始播放时运行脚本
onplaying script 当媒介数据已开始播放时运行脚本
onprogress script 当浏览器正在取媒介数据时运行脚本
onratechange script 当媒介数据的播放速率改变时运行脚本
onreadystatechange script 当就绪状态（ready-state）改变时运行脚本
onseeked script 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseeking script 当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled script 当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend script 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate script 当媒介改变其播放位置时运行脚本
onvolumechange script 当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting script 当媒介已停止播放但打算继续播放时运行脚本

其他事件

属性 值 描述
onshow script 当 menu 元素在上下文显示时触发
ontoggle script 当用户打开或关闭 details 元素时触发