HTML:修订间差异
无编辑摘要 |
无编辑摘要 |
||
第562行: | 第562行: | ||
==元素 Element== | ==元素 Element== | ||
===块级元素与行内元素=== | |||
HTML中元素大多数都是块级元素(block-level element)或行内元素(inline element)。默认情况下,块级元素以新行来开始和结束,而行内元素和其他元素在一行上。 | |||
HTML中的块级元素: | |||
<div style="column-count:5;-moz-column-count:5;-webkit-column-count:5"> | |||
* <nowiki><address></nowiki> | |||
* <nowiki><article></nowiki> | |||
* <nowiki><aside></nowiki> | |||
* <nowiki><audio></nowiki> | |||
* <nowiki><blockquote></nowiki> | |||
* <nowiki><canvas></nowiki> | |||
* <nowiki><dd></nowiki> | |||
* <nowiki><div></nowiki> | |||
* <nowiki><dl></nowiki> | |||
* <nowiki><fieldset></nowiki> | |||
* <nowiki><figcaption></nowiki> | |||
* <nowiki><figure></nowiki> | |||
* <nowiki><footer></nowiki> | |||
* <nowiki><form></nowiki> | |||
* <nowiki><h1>, <h2>, <h3>, <h4>, <h5>, <h6></nowiki> | |||
* <nowiki><header></nowiki> | |||
* <nowiki><hgroup></nowiki> | |||
* <nowiki><hr></nowiki> | |||
</div> | |||
HTML中的行内元素: | |||
<div style="column-count:5;-moz-column-count:5;-webkit-column-count:5"> | |||
* <nowiki><a></nowiki> | |||
* <nowiki><abbr></nowiki> | |||
* <nowiki><acronym></nowiki> | |||
* <nowiki><audio></nowiki> (if it has visible controls) | |||
* <nowiki></nowiki> | |||
* <nowiki><bdi></nowiki> | |||
* <nowiki><bdo></nowiki> | |||
* <nowiki><big></nowiki> | |||
* <nowiki><br></nowiki> | |||
* <nowiki><button></nowiki> | |||
* <nowiki><canvas></nowiki> | |||
* <nowiki><cite></nowiki> | |||
* <nowiki><code></nowiki> | |||
* <nowiki><data></nowiki> | |||
* <nowiki><datalist></nowiki> | |||
* <nowiki><del></nowiki> | |||
* <nowiki><dfn></nowiki> | |||
* <nowiki><em></nowiki> | |||
* <nowiki><embed></nowiki> | |||
* <nowiki><i></nowiki> | |||
* <nowiki><iframe></nowiki> | |||
* <nowiki><img></nowiki> | |||
* <nowiki><input></nowiki> | |||
* <nowiki><ins></nowiki> | |||
* <nowiki><kbd></nowiki> | |||
* <nowiki><label></nowiki> | |||
* <nowiki><map></nowiki> | |||
* <nowiki><mark></nowiki> | |||
* <nowiki><meter></nowiki> | |||
* <nowiki><noscript></nowiki> | |||
* <nowiki><object></nowiki> | |||
* <nowiki><output></nowiki> | |||
* <nowiki><picture></nowiki> | |||
* <nowiki><progress></nowiki> | |||
* <nowiki><q></nowiki> | |||
* <nowiki><ruby></nowiki> | |||
* <nowiki><s></nowiki> | |||
* <nowiki><samp></nowiki> | |||
* <nowiki><script></nowiki> | |||
* <nowiki><select></nowiki> | |||
* <nowiki><slot></nowiki> | |||
* <nowiki><small></nowiki> | |||
* <nowiki><span></nowiki> | |||
* <nowiki><strong></nowiki> | |||
* <nowiki><sub></nowiki> | |||
* <nowiki><sup></nowiki> | |||
* <nowiki><svg></nowiki> | |||
* <nowiki><template></nowiki> | |||
* <nowiki><textarea></nowiki> | |||
* <nowiki><time></nowiki> | |||
* <nowiki><u></nowiki> | |||
* <nowiki><tt></nowiki> | |||
* <nowiki><var></nowiki> | |||
* <nowiki><video></nowiki> | |||
* <nowiki><wbr></nowiki> | |||
</div> | |||
HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5,这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别,而”行内“类别相当于 HTML5 中的措辞内容类别,不过除了这两个还有其他类别。 | |||
{{了解更多 | |||
|[https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements MDN: HTML 块级元素] | |||
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements MDN: HTML 行内元素] | |||
|[https://www.w3.org/TR/2018/SPSD-html401-20180327/struct/global.html#h-7.5.3 W3C:HTML 4.01 - 块级元素与行内元素 ] | |||
}} | |||
==属性== | |||
HTML中的元素拥有属性(attribute)。这些额外的属性值可以配置元素或者以各种方式来调整元素的行为,进而满足用户所需的标准。 | |||
===属性列表=== | |||
{{了解更多 | |||
| [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes MDN:HTML 属性参考] | |||
}} | |||
==资源== | ==资源== | ||
===官网=== | ===官网=== | ||
* [https://html.spec.whatwg.org/ WHATWG:HTML] | * [https://html.spec.whatwg.org/ WHATWG:HTML] | ||
* [https://www.w3.org/html/ W3C:HTML] | * [https://www.w3.org/html/ W3C:HTML] | ||
* [https://www.w3.org/TR/html401/ W3C:HTML 4.01] | |||
* [https://www.w3.org/TR/html52/ W3C:HTML 5.2] | |||
===相关网站=== | ===相关网站=== | ||
2020年8月5日 (三) 15:03的版本
HTML(HyperText Markup Language),超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。现在由WHATWG和W3C共同制定标准,由WHATWG维护。
简介
时间轴
- 1995年11月24日,HTML 2.0作为IETF RFC 1866发布。
- 1997年1月14日,HTML 3.2作为W3C推荐标准发布。
- 1997年12月18日,HTML 4.0作为W3C推荐标准发布。
- 2014年10月28日,HTML 5作为W3C推荐标准发布。
简单示例
以下是一个经典的Hello World程序的例子,:
<!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>
标签 Tag
根标签
标签 | 版本 | 描述 |
---|---|---|
<html> | 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。 |
文档元数据
元数据(Metadata)含有页面的相关信息,包括样式、脚本及数据,能帮助一些软件(例如 搜索引擎、浏览器 等等)更好地运用和渲染页面。对于样式和脚本的元数据,可以直接在网页里定义,也可以链接到包含相关信息的外部文件。
标签 | 版本 | 描述 |
---|---|---|
<head> | 规定文档相关的配置信息(元数据),包括文档的标题,引用的文档样式和脚本等。 | |
<title> | 定义文档的标题,将显示在浏览器的标题栏或标签页上。该元素只能包含文本,包含的标签不会被解释。 | |
<base> | 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。 | |
<link> | 用于链接外部资源到该文档。该元素最常用于链接样式表,此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。 | |
<meta> | 定义其他 HTML 元素无法描述的元数据。 | |
<style> | 包含文档的样式信息或者文档的部分内容。通常用于内联 CSS。 |
章节
标签 | 版本 | 描述 |
---|---|---|
<body> | 代表 HTML 文档的内容。在文档中只能有一个 <body> 元素。 | |
<section> | 5+ | 定义文档中的一个章节。 |
<nav> | 5+ | 定义只包含导航链接的章节。 |
<article> | 5+ | 定义可以独立于内容其余部分的完整独立内容块。 |
<aside> | 5+ | 定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。 |
<html> | 5+ | 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。 |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> | 标题元素实现了六层文档标题,<h1> 是最大的标题,<h6>是最小的标题。标题元素简要地描述章节的主题。 | |
<header> | 5+ | 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。 |
<footer> | 5+ | 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。 |
<address> | 定义包含联系信息的一个章节。 | |
<main> | 5+ | 定义文档中主要或重要的内容。 |
组织内容
标签 | 版本 | 描述 |
---|---|---|
<p> | 定义一个段落。 | |
<hr> | 代表章节、文章或其他长内容中段落之间的分隔符。 | |
<pre> | 代表其内容已经预先排版过,格式应当保留 。 | |
<blockquote> | 代表引用自其他来源的内容。 | |
<ol> | 定义一个有序列表。 | |
<ul> | 定义一个无序列表。 | |
<menu> | -4.01 5+ | [不建议使用] 定义一个工具栏,其形式为无序的项目列表(由li元素表示),每个项目代表一个用户可以执行或激活的命令。 |
<li> | 定义列表中的一个列表项。 | |
<dl> | 定义一个定义列表(一系列术语和其定义)。 | |
<dt> | 代表一个由下一个 <dd> 定义的术语。 | |
<dd> | 代表出现在它之前术语的定义。 | |
<figure> | 5+ | 代表一个和文档有关的图例。 |
<figcaption> | 5+ | 代表一个图例的说明。 |
<main> | 5+ | 用于指定文档的主体内容。 |
<div> | 代表一个通用的容器,没有特殊含义。 |
文本形式
标签 | 版本 | 描述 |
---|---|---|
<a> | 代表一个链接到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。 | |
<em> | 代表强调文字。 <em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。 | |
<strong> | 代表特别重要的文字,一般用粗体显示。 | |
<small> | 將使文本的字体变小一号。在HTML5中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权和法律文本,对理解文档不重要。 | |
<s> | 使用删除线来渲染文本。表示不再相关,或者不再准确的事情。但是当表示文档编辑时,不提倡使用 <s> ,提倡使用 <del> 和 <ins> 元素。 | |
<cite> | HTML引用( Citation)标签 (<cite>) 表示一个作品的引用。它必须包含引用作品的符合简写格式的标题或者URL,它可能是一个根据添加引用元数据的约定的简写形式。 | |
<q> | HTML引用标签 (<q>)表示一个封闭的并且是短的行内引用的文本,所以不要引入换行符。对于长的文本的引用请使用 <blockquote> 替代。 | |
<dfn> | 表示术语的一个定义。 | |
<abbr> | 用于展示缩写,并且可以通过可选的 title 属性提供完整的描述。 | |
<data> | 5+ | 关联一个内容的机器可读的等价形式 (该元素只在 WHATWG 版本的 HTML 标准中,不在 W3C 版本的 HTML5 标准中)。 |
<time> | 5+ | 代表日期 和时间 值;机器可读的等价形式通过 datetime 属性指定。 |
<code> | 表示一段计算机代码。默认情况下, 它以浏览器的默认等宽字体显示。 | |
<var> | Variable元素(<var>)表示数学表达式或编程上下文中的变量名称。通常斜体形式显示。 | |
<samp> | 用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console)。 | |
<kbd> | 用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。 | |
<sub>,<sup> | 分别代表下标 和上标 。 | |
<i> | 代表一段不同性质 的文字,如技术术语、外文短语等。它的内容通常以斜体显示。 | |
<b> | 代表一段需要被关注的文字,多数浏览器显示为粗体。对于显示粗体文字,可以使用 CSS font-weight 属性来创建粗体文字。 | |
<u> | 代表一段需要下划线呈现的文本注释,如标记出拼写错误的文字等。 | |
<mark> | 5+ | 代表一段需要被高亮的引用文字或符号。 |
<ruby> | 5+ | 用来展示东亚文字注音或字符注释,如中文汉字和它的拼音。 |
<rt> | 5+ | 位于 <ruby> 元素内,描述东亚字符的发音 ,如中文拼音。 |
<rp> | 5+ | 位于 <ruby>元素内,用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。 |
<bdi> | 5+ | 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。 |
<bdo> | 指定子元素的文本方向 ,显式地覆盖默认的文本方向。 | |
<span> | 代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素。 | |
<br> | 代表换行 。 | |
<wbr> | 5+ | 代表建议换行 (Word Break Opportunity) ,浏览器可以选择在此处换行。 |
编辑
标签 | 版本 | 描述 |
---|---|---|
<ins> | 定义增加到文档的内容。 | |
<del> | 定义从文档移除 的内容。 |
嵌入内容
标签 | 版本 | 描述 |
---|---|---|
<img> | 代表一张图片 。 | |
<iframe> | 代表一个内联的框架 。 | |
<embed> | 5+ | 代表一个嵌入 的外部资源,如应用程序或交互内容。 |
<object> | 代表一个外部资源 ,如图片、HTML 子文档、插件等。 | |
<param> | 代表 <object> 元素所指定的插件的参数 。 | |
<video> | 5+ | 代表一段视频 及其视频文件和字幕,并提供了播放视频的用户界面。 |
<audio> | 5+ | 代表一段声音 ,或音频流 。 |
<source> | 5+ | 为 <video> 或 <audio> 这类媒体元素指定媒体源 。 |
<track> | 5+ | 为 <video> 或 <audio> 这类媒体元素指定文本轨道(字幕) 。 |
<canvas> | 5+ | 代表位图区域 ,可以通过脚本在它上面实时呈现图形,如图表、游戏绘图等。 |
<map> | 与 <area> 元素共同定义图像映射区域(一个可点击的链接区域)。 | |
<area> | 在图片上定义一个热点区域,可以关联一个超链接。<area>元素仅在<map>元素内部使用。 | |
<svg> | 5+ | 定义一个嵌入式矢量图 。 |
<math> | 5+ | 定义一段数学公式 。 |
表格
标签 | 版本 | 描述 |
---|---|---|
<table> | 一个表格 。 | |
<caption> | 表格的标题 。 | |
<colgroup> | 表格中一组单列或多列 。 | |
<col> | 表格中的列 。 | |
<tbody> | 表格中一块具体数据 (表格主体)。 | |
<thead> | 表格中一块列标签 (表头)。 | |
<tfoot> | 表格中一块列摘要 (表尾)。 | |
<tr> | 表格中的行 。 | |
<td> | 表格中的单元格 。 | |
<th> | 表格中的头部单元格 。 |
表单
标签 | 版本 | 描述 |
---|---|---|
<form> | 一个表单 ,由控件组成。 | |
<fieldset> | 控件组 。 | |
<legend> | <fieldset> 控件组的标题 。 | |
<label> | 表单控件的标题 。 | |
<input> | 代表允许用户编辑数据的数据区 (文本框、单选框、复选框等)。 | |
<button> | 按钮 。 | |
<select> | 下拉框 。 | |
<datalist> | 5+ | 代表提供给其他控件的一组预定义选项 。 |
<optgroup> | 一个选项分组 。 | |
<option> | <select> 元素或 <datalist> 元素中的一个选项 | |
<textarea> | 多行文本框 。 | |
<keygen> | 5+ | 一个密钥对生成器控件。 |
<output> | 5+ | 计算值 。 |
<progress> | 5+ | 进度条 。 |
<meter> | 5+ | 滑动条 。 |
交互元素
标签 | 版本 | 描述 |
---|---|---|
<details> | 5+ | 一个用户可以(点击)获取额外信息或控件的小部件 。 |
<summary> | 5+ | <details> 元素的综述 或标题 。 |
<dialog> | 5+ | 定义对话框或窗口。 |
脚本
标签 | 版本 | 描述 |
---|---|---|
<script> | 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。 | |
<noscript> | 定义当浏览器不支持脚本时显示的替代文字。 | |
<template> | 5+ | 通过 JavaScript 在运行时实例化内容的容器。 |
<slot> | 5+ | |
<canvas> | 5+ | 可被用来通过JavaScript(Canvas API 或 WebGL API)绘制图形及图形动画。 |
了解更多 >> MDN: HTML5 标签列表 WHATWG:HTML元素
元素 Element
块级元素与行内元素
HTML中元素大多数都是块级元素(block-level element)或行内元素(inline element)。默认情况下,块级元素以新行来开始和结束,而行内元素和其他元素在一行上。
HTML中的块级元素:
- <address>
- <article>
- <aside>
- <audio>
- <blockquote>
- <canvas>
- <dd>
- <div>
- <dl>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- <header>
- <hgroup>
- <hr>
HTML中的行内元素:
- <a>
- <abbr>
- <acronym>
- <audio> (if it has visible controls)
- <bdi>
- <bdo>
- <big>
- <br>
- <button>
- <canvas>
- <cite>
- <code>
- <data>
- <datalist>
- <del>
- <dfn>
- <em>
- <embed>
- <i>
- <iframe>
- <img>
- <input>
- <ins>
- <kbd>
- <label>
- <map>
- <mark>
- <meter>
- <noscript>
- <object>
- <output>
- <picture>
- <progress>
- <q>
- <ruby>
- <s>
- <samp>
- <script>
- <select>
- <slot>
- <small>
- <span>
- <strong>
- <sub>
- <sup>
- <svg>
- <template>
- <textarea>
- <time>
- <u>
- <tt>
- <var>
- <video>
- <wbr>
HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5,这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别,而”行内“类别相当于 HTML5 中的措辞内容类别,不过除了这两个还有其他类别。
属性
HTML中的元素拥有属性(attribute)。这些额外的属性值可以配置元素或者以各种方式来调整元素的行为,进而满足用户所需的标准。
属性列表
了解更多 >> MDN:HTML 属性参考