HTML学习笔记

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

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

标签元素表

基础

标签 描述
定义文档类型。
定义一个 HTML 文档
为文档定义一个标题
定义文档的主体
定义 HTML 标题
定义一个段落
定义简单的折行。
定义水平线。
定义一个注释
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>

元信息

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

格式

标签 描述
HTML5不再支持。 定义只取首字母的缩写。
定义一个缩写。
定义文档作者或拥有者的联系信息。
定义粗体文本。
允许您设置一段文本,使其脱离其父元素的文本方向设置。
定义文本的方向。
HTML5不再支持。 定义大号文本。
定义块引用。
HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
定义引用(citation)。
定义计算机代码文本。
定义被删除文本。
定义定义项目。
定义强调文本。
HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
定义斜体文本。
定义被插入文本。
定义键盘文本。
定义带有记号的文本。
定义度量衡。仅用于已知最大和最小值的度量。
定义预格式文本
定义运行中的任务进度(进程)。
定义短的引用。
定义不支持 ruby 元素的浏览器所显示的内容。
定义字符(中文注音或字符)的解释或发音。
定义 ruby 注释(中文注音或字符)。
定义加删除线的文本。
定义计算机代码样本。
定义小号文本。
HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。
定义语气更为强烈的强调文本。
定义下标文本。
定义上标文本。
定义一个日期/时间
HTML5不再支持。 定义打字机文本。
定义下划线文本。
定义文本的变量部分。
规定在文本中的何处适合添加换行符。
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> (上标文本)

表单

标签 描述
定义一个 HTML 表单,用于用户输入。
定义一个输入控件
定义多行的文本输入控件。
定义按钮。
定义选择列表(下拉列表)。
定义选择列表中相关选项的组合。
定义选择列表中的选项。
定义 input 元素的标注。
定义围绕表单中元素的边框。
定义 fieldset 元素的标题。
规定了 input 元素可能的选项列表。
规定用于表单的密钥对生成器字段。
定义一个计算的结果
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>

框架

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

图像

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

音视频

标签 描述
定义声音,比如音乐或其他音频流。
定义media元素 (video 和 audio)的媒体资源。media
为媒体(video 和 audio)元素定义外部文本轨道。
定义一个音频或者视频
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>

链接

标签 描述
定义一个链接
定义文档与外部资源的关系。
定义文档的主体部分。
定义导航链接
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>

列表

标签 描述
定义一个无序列表
定义一个有序列表
定义一个列表项
HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
定义一个定义列表
定义一个定义定义列表中的项目。
定义定义列表中项目的描述。
定义菜单列表。
定义用户可能调用的命令(比如单选按钮、复选框或按钮)。
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>

表格

标签 描述
定义一个表格
定义表格标题。
定义表格中的表头单元格。
定义表格中的行。
定义表格中的单元。
定义表格中的表头内容。
定义表格中的主体内容。
定义表格中的表注内容(脚注)。
定义表格中一个或多个列的属性值。
定义表格中供格式化的列组。
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>

样式/节

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

程序

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

全局属性

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

全局事件

窗口事件

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

表单事件

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

键盘事件

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

鼠标事件

属性 值 描述
script
当单击鼠标时运行脚本
script
当双击鼠标时运行脚本
ondrag
script
当拖动元素时运行脚本
ondragend
script
当拖动操作结束时运行脚本
ondragenter
script
当元素被拖动至有效的拖放目标时运行脚本
ondragleave
script
当元素离开有效拖放目标时运行脚本
ondragover
script
当元素被拖动至有效拖放目标上方时运行脚本
ondragstart
script
当拖动操作开始时运行脚本
ondrop
script
当被拖动元素正在被拖放时运行脚本
script
当按下鼠标按钮时运行脚本
script
当鼠标指针移动时运行脚本
script
当鼠标指针移出元素时运行脚本
script
当鼠标指针移至元素之上时运行脚本
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
当媒介已停止播放但打算继续播放时运行脚本

其他事件

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