三、HTML标签

最新推荐文章于 2024-09-19 21:47:53 发布

赫然哦都市

最新推荐文章于 2024-09-19 21:47:53 发布

阅读量434

点赞数

分类专栏：网页知识文章标签： html

网页知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的各种元素和属性，包括标题、段落、文本格式化、引文、链接、头部、图像、表格、列表、区块、表单、框架和全局属性。内容涵盖每个元素的作用、语法及常用属性，为HTML初学者提供了全面的参考。

摘要由CSDN通过智能技术生成

HTML标签

1 标题
- 1.1 <html>
- 1.2 <body>
- 1.3 <h1> ~ <h6>
- 1.4 <hr>
- 1.5 
- 1.6 <!DOCTYPE>
2 段落
- 2.1 <p>
- 2.1 <br>
3 文本格式化
- 3.1 <b>
- 3.2 <em>
- 3.3 <i>
- 3.4 <small>
- 3.5 <strong>
- 3.6 <sub>
- 3.7 <sup>
- 3.8 <ins>
- 3.9 <del>
4 引文
- 4.1 <abbr>
- 4.2 <address>
- 4.3 <bdo>
- 4.4 <blockquote>
- 4.5 <q>
- 4.6 <cite>
- 4.7 <dfn>
5 链接
- 5.1 <a>
6 头部
- 6.1 <head>
- 6.2 <title>
- 6.3 <base>
- 6.4 <link>
- 6.5 <meta>
- 6.6 <script>
- 6.7 <style>
7 图像
- 7.1 <img>
- 7.2 <map>
- 7.3 <area>
8 表格
- 8.1 <table>
- 8.2 <th>
- 8.3 <tr>
- 8.4 <td>
- 8.5 <caption>
- 8.6 <colgroup>
- 8.7 <col>
- 8.8 <thead>
- 8.9 <tbody>
- 8.10 <tfoot>
9 列表
- 9.1 <ol>
- 9.2 <ul>
- 9.3 <li>
- 9.4 <dl>
- 9.5 <dt>
- 9.6 <dd>
10 区块
- 10.1 <div>
- 10.2 <span>
11 表单
- 11.1 <from>
- 11.2 <input>
- 11.3 <textarea>
- 11.4 <label>
- 11.5 <fieldset>
- 11.6 <legend>
- 11.7 <select>
- 11.8 <optgroup>
- 11.9 <option>
- 11.10 <button>
- 11.11 <datalist>
- 11.12 <keygen>
- 11.13 <output>
12 框架
- 12.1 <iframe>
13 全局属性
- 13.1 accesskey
- 13.2 class
- 13.3 contenteditable
- 13.4 contextmenu
- 13.5 data-*
- 13.6 dir
- 13.7 draggable
- 13.8 dropzone
- 13.9 hidden
- 13.10 id
- 13.11 lang
- 13.12 spellcheck
- 13.13 style
- 13.14 tabindex
- 13.15 title
- 13.16 translate
14 事件属性
- 14.1 窗口事件属性
- 14.2 表单事件
- 14.3 键盘事件
- 14.4 鼠标事件
- 14.5 多媒体事件
- 14.6 其他事件

1 标题

1.1 <html>

作用：定义 HTML 文档
属性：

	值	描述
manifest	URL	定义一个 URL，在这个 URL 上描述了文档的缓存信息

语法：

<html manifest="URL"> 
</html>

1.2 <body>

作用：定义文档的主体

语法：

<html> 
<body>
文档内容......
</body> 
</html>

1.3 <h1> ~ <h6>

作用：定义 HTML 标题
语法：

<h1>这是标题 1</h1> 
<h2>这是标题 2</h2> 
<h3>这是标题 3</h3> 
<h4>这是标题 4</h4> 
<h5>这是标题 5</h5> 
<h6>这是标题 6</h6>

1.4 <hr>

作用：定义水平线
语法：

<hr>

1.5 <!–…-->

作用：定义注释
语法：

<!-- 这是一个注释 -->

1.6 <!DOCTYPE>

作用：定义文档类型
语法：

<!DOCTYPE html>

2 段落

2.1 <p>

作用：定义一个段落
语法：

<p>这是一个段落</p>

2.1 <br>

作用：插入单个折行（换行）
语法：

<p> 
使用&lt;br&gt;元素<br>在文本中<br>换行。 
</p>

3 文本格式化

3.1 <b>

作用：定义粗体文本
语法：

<p>这是一个普通的文本 <b>这是一个加粗文本</b> </p>

3.2 <em>

作用：定义着重文字
语法：

<em>强调文本</em>

3.3 <i>

作用：定义斜体字
语法：

<p>这是<i>斜体</i></p>

3.4 <small>

作用：定义小号字
语法：

<p><small>小号字</small></p>

3.5 <strong>

作用：定义加重语气
语法：

<strong>加粗文本</strong>

3.6 <sub>

作用：定义下标字
语法：

<p>这是 <sub>下标</sub>演示</p>

3.7 <sup>

作用：定义上标字
语法：

<p>这是<sup>上标</sup>演示</p>

3.8 <ins>

作用：定义插入字（下划线）
语法：

<p>这是<ins>插入</ins>演示</p>

3.9 <del>

作用：定义删除字
语法：

<p>这是<del>删除</del> 演示</p>

4 引文

4.1 <abbr>

作用：定义缩写
语法：

这是<abbr title="suoxie">缩写</abbr>

4.2 <address>

作用：定义地址
语法：

<address>这是地址</address>

4.3 <bdo>

作用：定义文字方向
属性：

属性	值	描述
dir	ltr/rtl	规定 <bdo> 元素内的文本方向。

语法：

<bdo dir="rtl">该段落文字从右到左显示。</bdo>

4.4 <blockquote>

作用：定义长的引用
属性：

属性	值	描述
cite	URL	规定引用的来源

语法：

<blockquote cite="url">这是长引用</blockquote>

4.5 <q>

作用：定义短的引用语
属性：

属性	值	描述
cite	URL	规定引用的来源

语法：

<qcite="url">这是长引用</q>

4.6 <cite>

作用：定义引用、引证
语法：

<cite>这是引用</cite>

4.7 <dfn>

作用：定义一个定义项目
语法：

<dfn>这是定义项目</dfn>

5 链接

5.1 <a>

作用：定义一个超级链接
属性：

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码
coords	coordinates	HTML5 不支持。规定链接的坐标
download	filename	指定下载链接
href	URL	规定链接的目标 URL
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用
media	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用
name	section_name	HTML5 不支持。规定锚的名称
rel	alternate/author/bookmark/help/license/next/nofollow/noreferrer/prefetch/prev/search/tag	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系
shape	default/rect/circle/poly	HTML5 不支持。规定链接的形状
target	_blank/_parent/_self/_top	规定在何处打开目标 URL。仅在 href 属性存在时使用
type	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用

语法：

<a href="URL">访问地址</a>

6 头部

6.1 <head>

作用：定义了文档的信息
属性：

属性	值	描述
profile	URL	HTML5 不支持。规定文档 URL 的一系列规则。这些规则能被浏览器识别并且准确读取标签的内容属性中的信息

语法：

<html>
<head> 
</head> 
<body>
文档内容......
</body> 
</html>

6.2 <title>

作用：定义了文档的标题
语法：

<html>
<head> 
<title>文档标题</title>
</head> 
<body>
文档内容......
</body> 
</html>

6.3 <base>

作用：定义了页面链接标签的默认链接地址

属性	值	描述
href	URL	规定页面中所有相对链接的基准 URL
target	_blank/_parent/_self/_top	规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖

语法：

<head> 
<base href="URL" target="_blank">
</head>

6.4 <link>

作用：定义了一个文档和外部资源之间的关系
属性：

属性	值	描述
charset	char_encoding	HTML5 不支持该属性。定义被链接文档的字符编码方式
href	URL	定义被链接文档的位置
hreflang	language_code	定义被链接文档中文本的语言
media	media_query	规定被链接文档将显示在什么设备上
rel	alternate/archives/author/bookmark/external/first/help/iconlast/license/next/nofollow/noreferrer/pingback/prefetch/prev/search/sidebar/stylesheet/tagup	必需。定义当前文档与被链接文档之间的关系
rev	reversed relationship	HTML5 不支持该属性。定义被链接文档与当前文档之间的关系
sizes	HeightxWidth
any	定义了链接属性大小，只对属性 rel=“icon” 起作用
target	_blank/_self/_top/_parent	HTML5 不支持该属性。定义在何处加载被链接文档
type	MIME_type	规定被链接文档的 MIME 类型

语法：

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

6.5 <meta>

作用：定义了HTML文档中的元数据
属性：

属性	值	描述
charset	character_set	定义文档的字符编码
content	text	定义与 http-equiv 或 name 属性相关的元信息
http-equiv	content-type/default-style/refresh	把 content 属性关联到 HTTP 头部
name	application-name/author/description/generator/keywords	把 content 属性关联到一个名称
scheme	format/URI	HTML5不支持。定义用于翻译 content 属性值的格式

语法：

<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

6.6 <script>

作用：定义了客户端的脚本文件

属性	值	描述
async	async	规定异步执行脚本（仅适用于外部脚本）
charset	charset	规定在脚本中使用的字符编码（仅适用于外部脚本）
defer	defer	规定当页面已完成解析后，执行脚本（仅适用于外部脚本）
src	URL	规定外部脚本的 URL
type	MIME-type	规定脚本的 MIME 类型
xml:space	preserve	HTML5 不支持。规定是否保留代码中的空白

语法：

<script>
document.write("Hello World!")
</script>

6.7 <style>

作用：定义了HTML文档的样式文件

属性	值	描述
media	media_query	为样式表规定不同的媒体类型
scoped	scoped	如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素
type	text/css	规定样式表的 MIME 类型

语法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head> 
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body> 
</html>

7 图像

7.1 <img>

作用：定义图像
属性：

属性	值	描述
align	top/bottom/middle/left/right	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像
alt	text	规定图像的替代文本
border	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框
crossorigin	anonymous/use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像左侧和右侧的空白
ismap	ismap	将图像规定为服务器端图像映射
longdesc	URL	HTML5 不支持。HTML 4.01 已废弃。指向包含长的图像描述文档的 URL
src	URL	规定显示图像的 URL
usemap	#mapname	将图像定义为客户器端图像映射
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像顶部和底部的空白
width	pixels	规定图像的宽度

语法：

<img src="URL" alt="tupian" width="50" height="50">

7.2 <map>

作用：定义图像地图
属性：

属性	值	描述
name	mapname	必需。为 image-map 规定的名称

语法：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

7.3 <area>

作用：定义图像地图中的可点击区域
属性：

属性	值	描述
alt	text	规定区域的替代文本。如果使用 href 属性，则该属性是必需的
coords	coordinates	规定区域的坐标
href	URL	规定区域的目标 URL
hreflang	language_code	规定目标 URL 的语言
media	media query	规定目标 URL 是为何种媒介/设备优化的。默认：all
nohref	value	HTML5 不支持。规定没有相关链接的区域
rel	alternate/author/bookmark/help/license/next/nofollow/noreferrer/prefetch/prev/search/tag	规定当前文档与目标 URL 之间的关系
shape	default/rect/circle/poly	规定区域的形状
target	_blank/_parent/_self/_top	规定在何处打开目标 URL
type	MIME_type	规定目标 URL 的 MIME 类型

语法：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

8 表格

8.1 <table>

作用：定义表格
属性：

属性	值	描述
align	left/center/right	HTML5 不支持。HTML 4.01 已废弃。规定表格相对周围元素的对齐方式
bgcolor	rgb(x,x,x)/#xxxxxx/colorname	HTML5 不支持。HTML 4.01 已废弃。规定表格的背景颜色
border	*	规定表格单元是否拥有边框
cellpadding	pixels	HTML5 不支持。规定单元边沿与其内容之间的空白
cellspacing	pixels	HTML5 不支持。规定单元格之间的空白
frame	void/above/below/hsides/lhs/rhs/vsides/box/border	HTML5 不支持。规定外侧边框的哪个部分是可见的
rules	none/groups/rows/cols/all	HTML5 不支持。规定内侧边框的哪个部分是可见的
summary	text	HTML5 不支持。规定表格的摘要
width	pixels/%	HTML5 不支持。规定表格的宽度

语法：

<table border="1"> 
</table>

8.2 <th>

作用：定义表格的表头
属性：

属性	值	描述
abbr	text	HTML5 不支持。规定表头单元格中内容的缩写版本
align	left/right/center/justify/char	HTML5 不支持。规定表头单元格内容的水平对齐方式
axis	category_name	HTML5 不支持。对表头单元格进行分类
bgcolor	rgb(x,x,x)/#xxxxxx/colorname	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的背景颜色
char	character	HTML5 不支持。规定根据哪个字符来进行内容的对齐
charoff	number	HTML5 不支持。规定对齐字符的偏移量
colspan	number	规定表头单元格可横跨的列数
headers	header_id	规定与表头单元格相关联的一个或多个表头单元格
height	pixels/%	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的高度
nowrap	nowrap	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格中的内容是否折行
rowspan	number	规定表头单元格可横跨的行数
scope	col/colgroup/row/rowgroup	规定表头单元格是否是行、列、行组或列组的头部
valign	top/middle/bottom/baseline	HTML5 不支持。规定表头单元格内容的垂直排列方式
width	pixels/%	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的宽度

语法：

<th>第一列</th>
<th>第二列</th>

8.3 <tr>

作用：定义表格的行
属性：

属性	值	描述
align	right/left/center/justify/char	HTML5 不支持。定义表格行的内容对齐方式
bgcolor	rgb(x,x,x)/#xxxxxx/colorname	HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色
char	character	HTML5 不支持。规定根据哪个字符来进行文本对齐
charoff	number	HTML5 不支持。规定第一个对齐字符的偏移量
valign	top/middle/bottom/baseline	HTML5 不支持。规定表格行中内容的垂直对齐方式

语法：

<table border="1">
<tr>
<th>第一列</th>
<th>第二列</th> 
</tr> 
</table>

8.4 <td>

作用：定义表格单元
属性：

属性	值	描述
abbr	text	HTML5 不支持。规定单元格中内容的缩写版本
align	left/right/center/justify/char	HTML5 不支持。规定单元格内容的水平对齐方式
axis	category_name	HTML5 不支持。对单元格进行分类
bgcolor	rgb(x,x,x)/#xxxxxx/colorname	HTML5 不支持。HTML 4.01 已废弃。规定单元格的背景颜色
char	character	HTML5 不支持。规定根据哪个字符来进行内容的对齐
charoff	number	HTML5 不支持。规定对齐字符的偏移量
colspan	number	规定单元格可横跨的列数
headers	header_id	规定与单元格相关联的一个或多个表头单元格
height	pixels/%	HTML5 不支持。HTML 4.01 已废弃。设置单元格的高度
nowrap	nowrap	HTML5 不支持。HTML 4.01 已废弃。规定单元格中的内容是否折行
rowspan	number	设置单元格可横跨的行数
scope	col/colgroup/row/rowgroup	HTML5 不支持。定义将表头单元格与数据单元格相关联的方法
valign	top/middle/bottom/baseline	HTML5 不支持。规定单元格内容的垂直排列方式
width	pixels/%	HTML5 不支持。HTML 4.01 已废弃。规定单元格的宽度

语法：

<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>

8.5 <caption>

作用：定义表格标题
属性：

属性	值	描述
align	left/right/top/bottom	HTML5 不支持。HTML 4.01 已废弃。定义标题的对齐方式

语法：

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

8.6 <colgroup>

作用：定义表格列的组
属性：

属性	值	描述
align	left/right/center/justify/char	HTML5 不支持。规定在列组合中内容的水平对齐方式
char	character	HTML5 不支持。规定根据哪个字符来对齐列组中的内容
charoff	number	HTML5 不支持。规定第一个对齐字符的偏移量
span	number	规定列组应该横跨的列数
valign	top/middle/bottom/baseline	HTML5 不支持。定义在列组合中内容的垂直对齐方式
width	pixels/%/relative_length	HTML5 不支持。规定列组合的宽度

语法：

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

8.7 <col>

作用：定义用于表格列的属性
属性：

属性	值	描述
align	left/right/center/justify/char	HTML5 不支持。规定与 <col> 元素相关的内容的水平对齐方式
char	character	HTML5 不支持。规定根据哪个字符来对齐与 <col> 元素相关的内容
charoff	number	HTML5 不支持。规定第一个对齐字符的偏移量
span	number	规定 <col> 元素应该横跨的列数
valign	top/middle/bottom/baseline	HTML5 不支持。规定与 <col> 元素相关的内容的垂直对齐方式
width	%/pixels/relative_length	HTML5 不支持。指定<col>元素的宽度

语法：

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

8.8 <thead>

作用：定义表格的页眉
属性：

属性	值	描述
align	right/left/center/justify/char	HTML5 不支持。定义 <thead> 元素中内容的对齐方式
char	character	HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐
charoff	number	HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量
valign	top/middle/bottom/baseline	HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式

语法：

<table border="1">
  <thead>
    <tr>
      <th> </th>
      <th> </th>
    </tr>
  </thead> 
</table>

8.9 <tbody>

作用：定义表格的主体
属性：

属性	值	描述
align	right/left/center/justify/char	HTML5 不支持。定义 <tbody> 元素中内容的对齐方式
char	character	HTML5 不支持。规定 <tbody> 元素中内容根据哪个字符来对进行文本对齐
charoff	number	HTML5 不支持。规定 <tbody> 元素中内容的第一个对齐字符的偏移量
valign	top/middle/bottom/baseline	HTML5 不支持。规定 <tbody> 元素中内容的垂直对齐方式

语法：

8.10 <tfoot>

作用：定义表格的页脚
属性：

属性	值	描述
align	right/left/centerjustify/char	HTML5 不支持。定义
char	character	HTML5 不支持。规定
charoff	number	HTML5 不支持。规定
valign	top/middle/bottom/baseline	HTML5 不支持。规定

元素中内容的对齐方式元素中内容根据哪个字符来对进行文本对齐元素中内容的第一个对齐字符的偏移量元素中内容的垂直对齐方式

语法：

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>

9 列表

9.1 <ol>

作用：定义有序列表
属性：

属性	值	描述
compact	compact	HTML5中不支持，不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧
reversed	reversed	指定列表倒序(9,8,7…)
start	number	HTML5不支持，不赞成使用。请使用样式取代它。规定列表中的起始点
type	1/A/a/I/i	规定列表的类型。不赞成使用。请使用样式代替

语法：

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

9.2 <ul>

作用：定义无序列表
属性：

属性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已废弃。规定列表呈现的效果比正常情况更小巧
type	disc/square/circle	HTML5 不支持。HTML 4.01 已废弃。规定列表的项目符号的类型

语法：

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

9.3 <li>

作用：定义列表项
属性：

属性	值	描述
type	1/A/a/I/i/disc/square/circle	HTML5 不支持该属性。HTML 4.01 已废弃该属性。不赞成使用。请使用样式取代它。规定使用哪种项目符号
value	number	不赞成使用。请使用样式取代它。规定列表项目的数字

语法：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

9.4 <dl>

作用：定义列表
语法：

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

9.5 <dt>

作用：自定义列表项
语法：

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

9.6 <dd>

作用：定义自定列表项的描述
语法：

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

10 区块

10.1 <div>

作用：定义了文档的区域，块级 (block-level)
属性：

属性	值	描述
align	left/right/center/justify	HTML5 不支持。HTML 4.01 已废弃。规定元素中的内容的对齐方式

语法：

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

10.2 <span>

作用：用来组合文档中的行内元素，内联元素(inline)
语法：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

11 表单

11.1 <from>

作用：定义供用户输入的表单
属性：

属性	值	描述
accept	MIME_type	HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset	character_set	规定服务器可处理的表单数据字符集
action	URL	规定当提交表单时向何处发送表单数据
autocomplete	on/off	规定是否启用表单的自动完成功能
enctype	application/x-www-form-urlencoded、multipart/form-data、text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）
method	get/post	规定用于发送表单数据的 HTTP 方法
name	text	规定表单的名称
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
target	_blank/_self/_parent/_top	规定在何处打开 action URL

语法：

<form action="URL" method="post"> 
</form>

11.2 <input>

作用：定义输入域
属性：

属性	值	描述
accept	audio/ video/ image/ MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
align	left/right/top/middle/bottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type=“image”)
alt	text	定义图像输入的替代文本。 (只针对type=“image”)
autocomplete	on/off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能
autofocus	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素
form	form_id	form 属性规定 <input> 元素所属的一个或多个表单
formaction	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”)
formenctype	application/x-www-form-urlencoded、multipart/form-data、text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)
formmethod	get/post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”)
formnovalidate	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性
formtarget	_blank/_self/_parent/_top	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”)
height	pixels	规定 <input>元素的高度。(只针对type=“image”)
list	datalist_id	属性引用 <datalist> 元素，其中包含元素的预定义选项
max	number date	属性规定 <input> 元素的最大值
maxlength	number	属性规定 <input> 元素中允许的最大字符数
min	number date	属性规定 <input>元素的最小值
multiple	multiple	属性规定允许用户输入到 <input> 元素的多个值
name	text	name 属性规定 <input> 元素的名称
pattern	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式
placeholder	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息
readonly	readonly	readonly 属性规定输入字段是只读的
required	required	属性规定必需在提交表单之前填写输入字段
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
step	number	step 属性规定 <input> 元素的合法数字间隔
type	button/checkbox/color/date/datetime/datetime-local/email/file/hidden/image/month/number/password/radio/range/reset/search/submit/tel/text/time/url/week	type 属性规定要显示的 <input> 元素的类型
value	text	指定 <input> 元素 value 的值
width	pixels	width 属性规定 <input> 元素的宽度。 (只针对type=“image”)

语法：

<form action="" method="post">
  账号: <input type="text" name="username"><br>
  密码: <input type="password" name="password"><br>
  <input type="submit" value="提交">
</form>

11.3 <textarea>

作用：定义文本域 (一个多行的输入控件)
属性：

属性	值	描述
autofocus	autofocus	规定当页面加载时，文本区域自动获得焦点
cols	number	规定文本区域内可见的宽度
disabled	disabled	规定禁用文本区域
form	form_id	定义文本区域所属的一个或多个表单
maxlength	number	规定文本区域允许的最大字符数
name	text	规定文本区域的名称
placeholder	text	规定一个简短的提示，描述文本区域期望的输入值
readonly	readonly	规定文本区域为只读
required	required	规定文本区域是必需的/必填的
rows	number	规定文本区域内可见的行数
wrap	hard/soft	规定当提交表单时，文本区域中的文本应该怎样换行

语法：

<textarea rows="10" cols="30">
这是一个文本框。
</textarea>

11.4 <label>

作用：定义了元素的标签，一般为输入标题
属性：

属性	值	描述
for	element_id	规定 label 与哪个表单元素绑定
form	form_id	规定 label 字段所属的一个或多个表单

语法：

<form action="">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

11.5 <fieldset>

作用：定义了一组相关的表单元素，并使用外框包含起来
属性：

属性	值	描述
disabled	disabled	规定该组中的相关表单元素应该被禁用
form	form_id	规定 fieldset 所属的一个或多个表单
name	text	规定 fieldset 的名称

语法：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

11.6 <legend>

作用：定义了 <fieldset> 元素的标题
属性：

属性	值	描述
align	top/bottom/left/right	HTML5 不支持。 HTML 4.01 已废弃。不建议使用。请使用样式代替。为 fieldset 中的标题定义对齐方式

语法：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

11.7 <select>

作用：定义了下拉选项列表
属性：

属性	值	描述
autofocus	autofocus	规定在页面加载时下拉列表自动获得焦点
disabled	disabled	当该属性为 true 时，会禁用下拉列表
form	form_id	定义 select 字段所属的一个或多个表单
multiple	multiple	当该属性为 true 时，可选择多个选项
name	text	定义下拉列表的名称
required	required	规定用户在提交表单前必须选择一个下拉列表中的选项
size	number	规定下拉列表中可见选项的数目

语法：

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

11.8 <optgroup>

作用：定义选项组
属性：

属性	值	描述
disabled	disabled	规定禁用该选项组
label	text	为选项组规定描述

语法：

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

11.9 <option>

作用：定义下拉列表中的选项
属性：

属性	值	描述
disabled	disabled	规定此选项应在首次加载时被禁用
label	text	定义当使用 <optgroup> 时所使用的标注
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态
value	text	定义送往服务器的选项值

语法：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

11.10 <button>

作用：定义一个点击按钮
属性：

属性	值	描述
autofocus	autofocus	规定当页面加载时按钮应当自动地获得焦点
disabled	disabled	规定应该禁用该按钮
form	form_id	规定按钮属于一个或多个表单
formaction	URL	规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=“submit” 配合使用
formenctype	application/x-www-form-urlencoded、multipart/form-data、text/plain	规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=“submit” 配合使用
formmethod	get/post	规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=“submit” 配合使用
formnovalidate	formnovalidate	如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=“submit” 配合使用
formtarget	_blank/_self/_parent/_top	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=“submit” 配合使用
name	name	规定按钮的名称
type	button/reset/submit	规定按钮的类型
value	text	规定按钮的初始值。可由脚本进行修改

语法：

<button type="button">这是一个按钮</button>

11.11 <datalist>

作用：指定一个预先定义的输入控件选项列表
语法：

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

11.12 <keygen>

作用：定义了表单的密钥对生成器字段
属性：

属性	值	描述
autofocus	autofocus	使 <keygen> 字段在页面加载时获得焦点
challenge	challenge	如果使用，则将 keygen 的值设置为在提交时询问
disabled	disabled	禁用 <keygen> 元素字段
form	form_id	定义该 <keygen> 字段所属的一个或多个表单
keytype	rsa/dsa/ec	定义密钥的安全算法
name	name	定义 <keygen> 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值

语法：

<form action=" " method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

11.13 <output>

作用：定义一个计算结果
属性：

属性	值	描述
for	element_id	描述计算中使用的元素与计算结果之间的关系
form	form_id	定义输入字段所属的一个或多个表单
name

语法：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

12 框架

12.1 <iframe>

作用：定义一个内联的iframe
属性：

属性	值	描述
align	left/right/top/middle/bottom	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐 <iframe>
frameborder	1/0	HTML5 不支持。规定是否显示周围的边框
height	pixels	规定 <iframe> 的高度
longdesc	URL	HTML5 不支持。规定一个页面，该页面包含了有关的较长描述
marginheight	pixels	HTML5 不支持。规定 <iframe> 的顶部和底部的边距
marginwidth	pixels	HTML5 不支持。规定 <iframe> 的左侧和右侧的边距
name	name	规定 <iframe> 的名称
sandbox	allow-forms/allow-same-origin/allow-scripts/allow-top-navigation	对 <iframe> 的内容定义一系列额外的限制
scrolling	yes/no/auto	HTML5 不支持。规定是否在中显示滚动条
seamless	seamless	规定 <iframe> 看起来像是父文档中的一部分
src	URL	规定在 <iframe> 中显示的文档的 URL
srcdoc	HTML_code	规定页面中的 HTML 内容显示在 <iframe> 中
width	pixels	规定 <iframe> 的宽度

语法：

<iframe src="https://www.baidu.com/"> 
</iframe>

13 全局属性

13.1 accesskey

作用：设置访问元素的键盘快捷键
值：

值	描述
character	指定激活元素的快捷键

语法：

<element accesskey="character">

13.2 class

作用：
值：

值	描述
classname	规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。 <span class=“left important”>. HTML 元素允许使用多个类。名称规则：必须以字母 A-Z 或 a-z 开头、可以是以下字符： (A-Za-z), 数字 (0-9), 横杆 ("-"), 和下划线 ("_")、在 HTML 中, 类名是区分大小写的

语法：

<element class="classname">

13.3 contenteditable

作用：规定是否可编辑元素的内容
值：

值	描述
true	指定元素是可编辑的
false	指定元素是不可编辑的

语法：

<p contenteditable="true">这是一个可编辑段落。</p>

13.4 contextmenu

作用：规定是否可编辑元素的内容
值：

值	描述
menu_id	要打开的 <menu> 元素的 id

语法：

<div contextmenu="mymenu">

<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>

</div>

13.5 data-*

作用：用于存储页面的自定义数据
值：

值	描述
somevalue	指定属性值 (一个字符串)

语法：

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>

13.6 dir

作用：设置元素中内容的文本方向
值：

值	描述
ltr	默认。从左向右的文本方向
rtl	从右向左的文本方向
auto	让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用

语法：

<bdo dir="rtl">文本方向从右到左!</bdo>

13.7 draggable

作用：指定某个元素是否可以拖动
值：

值	描述
true	规定元素是可拖动的
false	规定元素是不可拖动的
auto	使用浏览器的默认特性

语法：

<p draggable="true">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

13.8 dropzone

作用：指定是否将数据复制，移动，或链接，或删除
值：

值	描述
copy	拖动数据会导致被拖数据产生副本
move	拖动数据会导致被拖数据移动到新位置
link	拖动数据会生成指向原始数据的链接

语法：

<div dropzone="copy"></div>

13.9 hidden

作用：hidden 属性规定对元素进行隐藏
语法：

<p hidden>这是一段隐藏的段落。</p>

13.10 id

作用：规定元素的唯一 id
值：

值	描述
id	规定元素的唯一 id。命名规则：必须以字母 A-Z 或 a-z 开头、其后的字符：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号("😊 以及点号(".")、值对大小写敏感

语法：

<h1 id="myHeader">Hello World!</h1>

13.11 lang

作用：设置元素中内容的语言代码
值：

值	描述
language_code	规定元素内容的语言代码

语法：

<p lang="fr">这是一个段落。</p>

13.12 spellcheck

作用：检测元素是否拼写错误
值：

值	描述
true	规定应当对元素的文本进行拼写检查
false	规定不应对元素的文本进行拼写检查

语法：

<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

13.13 style

作用：规定元素的行内样式（inline style）
值：

值	描述
style_definitions	一个或多个由分号分隔的 CSS 属性和值

语法：

<p style="color:green">这是一个段落。</p>

13.14 tabindex

作用：设置元素的 Tab 键控制次序
值：

值	描述
number	规定元素的 tab 键控制顺序（1 是第一）

语法：

<a href="//www.runoob.com//" tabindex="2"> runoob.com 菜鸟教程</a><br />
<a href="//www.google.com/" tabindex="1">Google</a><br />
<a href="//www.microsoft.com/" tabindex="3">Microsoft</a>

13.15 title

作用：规定元素的额外信息（可在工具提示中显示）
值：

值	描述
text	规定元素的工具提示文本（tooltip text）

语法：

<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>

13.16 translate

作用：指定是否一个元素的值在页面载入时是否需要翻译
值：

值	描述
yes	规定元素内容需要翻译
no	规定元素内容不需要翻译

语法：

<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>

14 事件属性

14.1 窗口事件属性

属性	值	描述
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	当用户离开文档时运行脚本

14.2 表单事件

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

14.3 键盘事件

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

14.4 鼠标事件

属性	值	描述
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	当滚动元素的滚动条时运行脚本

14.5 多媒体事件

属性	值	描述
onabort	script	当发生中止事件时运行脚本
oncanplayNew	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	当媒介已停止播放但打算继续播放时运行脚本