如何学习众多的HTML标签?

先说结论:边用边学
那么,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文档中嵌入媒体播放器,用于支持文档内的视频播放。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,601评论 0 7
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,398评论 1 3
  • 概念及挑战 OCR(Optical Character Recognition, 光学字符识别)传统上指对输入扫描...
    残剑天下论阅读 3,463评论 0 0
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,464评论 1 11
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 8,994评论 0 3