如何学习众多的HTML标签？

2020-01-08  本文已影响0人  易景平

先说结论：边用边学
那么，HTML规范哪里来的，又在哪里可以方便快速的学习和查询呢？

W3C？

W3C（World Wide Web Consortium）叫做万维网联盟或W3C理事会，是万维网的主要国际标准组织，为半自治非政府组织。该组织的目的是透过W3C制定的新标准来促进业界成员间的兼容性和协议。多年以来，W3C制定了很多影响深远的标准规范，比如说HTML。

HTML标椎文档详细说明了使用中的一切问题。但对于大多数人来说这个文档太过于复杂，并不方便经常性的学习查询。

MDN？

MDN Web Docs（旧称Mozilla Developer Network、Mozilla Developer Center，简称MDN）是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。 中文版的地址在这里。
MDN 的一切（文档和网站本身）都是由一个开放的开发者社区创造。可以把这个网站当做工具书，HTML的使用有疑惑的都可以在这里查询找到答案。

HTML常用标签有哪些?

  1. <a> -- anchor 锚

可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

<a href="https://example.com">Website</a>
  1. <abbr> -- abbreviation 缩写

用于展示缩写，并且可以通过可选的 title属性提供完整的描述。

<abbr title="Cascading Style Sheets">CSS</abbr>
  1. <address> -- 地址

表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息

<address>

<a href="mailto:jim@rock.com">jim@rock.com</a><br>

<a href="tel:+13115552368">(311) 555-2368</a>

</address>
  1. <area> -- 区域

在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。

<map name="primary">  <area shape="circle"  coords="200,250,25"  href="another.htm"  />  <area shape="default"  nohref  />  </map>
  1. <article> -- 文章

表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目

  1. <aside> -- 侧边栏

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响

  1. <audio> -- 音频

用于在文档中表示音频内容

<audio src="music.mp3">  </audio>
  1. <b> -- bring attention to 提醒注意

用于吸引读者的注意到该元素的内容上。用于关键字、名称或其他需要加粗显示的文字。

  1. <base> --

指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

如果指定了多个，只会使用第一个。

  1. <blockquote> -- 引用块

代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

<blockquote cite="https://www.huxley.net/bnw/four.html">

<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>

<footer>—Aldous Huxley, <cite>Brave New World</cite></footer>

</blockquote>
  1. <body> --

表示文档的内容

  1. <br> --

在文本中生成一个换行（回车）符号。

  1. <button> -- 按钮

表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。

<button name="button">Click me</button>
  1. <canvas> -- 帆布画布

被用来通过脚本（通常是JavaScript）绘制图形。

<canvas id="canvas"  width="300"  height="300">  </canvas>
  1. <caption> -- 标题，说明

展示一个表格的标题， 它常常作为 <table>的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

  1. <data> --

将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 <time>

  1. <datalist> --

包含了一组<option>元素，这些元素表示其它表单控件可选值.

<datalist id="ice-cream-flavors">

<option value="Chocolate">

<option value="Coconut">

<option value="Vanilla">

</datalist>
  1. <dl> -- discription list描述列表

用来指明一个描述列表 <dl>元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 <dt>元素。

  1. <del> -- delete 删除

表示一些被从文档中删除的文字内容，显示时这些文字中有一条横线。

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
  1. <details> --

可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary>元素可为该部件提供概要或者标签。

  1. <div> --

是一个通用型的流内容容器，不表示实际意思。

  1. <em> -- emphasize 强调

标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。

  1. <footer> --

示最近一个章节内容或者根节点元素的页脚。

  1. <form> -- 表单

表示了文档中的一个区域，此区域包含有交互控制元件，用来向 Web 服务器提交信息。

  1. <h1> -- 标题

HTML <h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

  1. <head> --

head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

  1. <heard> --

用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。

28.<hr> --

表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。

  1. <i> --

用于表现因某些原因需要区分普通文本的一系列文本。

  1. <ifram> --

表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。

  1. <img> --

将一份图像嵌入文档。

  1. <input> --

用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。

  1. <kbd> --

键盘输入元素(<kbd>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。

  1. <label> -- 标签

表示用户界面中某个元素的说明

  1. <li> --

用于表示列表里的条目

  1. <link> --

规定了当前文档与外部资源的关系。该元素最常用于链接样式表此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标)。

  1. <main> --

呈现了文档的 <body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

  1. <map> --

与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).

  1. <meta> --

示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style>或 <title>) 之一表示的任何元数据信息.

  1. <nav> --

表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

  1. <noscript> --

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。

  1. <ol> --

表示多个有序列表项，通常渲染为有带编号的列表。

  1. <option> --

用于定义在<select>, <optgroup>或<datalist>元素中包含的项。<option> 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。

  1. <p> -- paragraph段落

表示一个段落

  1. <script> --

用于嵌入或引用可执行脚本。

  1. <section> --

表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

  1. <select> --

表示一个控件，提供一个选项菜单：

  1. <span> --

元素是短语内容的通用行内容器，并没有任何特殊语义。

  1. <strong> --

表示文本十分重要，一般用粗体显示。

  1. <style> --

包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

  1. <summary> --

用作 一个<details>元素的一个内容的摘要，标题或图例。

  1. <tabel> --

表示表格数据 — 即通过二维数据表表示的信息。他的子元素为<tbody> ,<th> ,<tr> ,<td> ,<tfoot>

  1. <textarea> --

元素表示一个多行纯文本编辑控件。

  1. <title> --

定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。

  1. <ul> --

无序列表元素，表示一个内可含多个元素的无序列表或项目符号列表。

  1. <vedio> --

用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

上一篇下一篇

猜你喜欢

热点阅读