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是一种基础技术,常与CSSJavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。现在由WHATWGW3C共同制定标准,由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 中的措辞内容类别,不过除了这两个还有其他类别。

了解更多 >> MDN: HTML 块级元素 MDN: HTML 行内元素 W3C:HTML 4.01 - 块级元素与行内元素


属性

HTML中的元素拥有属性(attribute)。这些额外的属性值可以配置元素或者以各种方式来调整元素的行为,进而满足用户所需的标准。

属性列表

了解更多 >> MDN:HTML 属性参考


资源

官网

相关网站

参考资料