HTML(HyperText Markup Language , HTML5标准)超文本标记语言!
HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。 ---维基百科"HTML"
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。
它描述并定义了一个网页的内容和基本布局。
除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 ---MDN web docs
本文将主要介绍HTML中的一些常用标签,默认位阅读本文章的读者是具有一定基础的开发者或者是爱好者,下面我就简单讲讲HTML中的常常用到的标签元素!
Tips:再看此文时,你可能会疑问,不是每一个标签都有对应的结尾的标签吗,对的HTML中的每一个标签都是有一个对应的反斜杠+对应单词结尾的标签(少数标签除外)!
因此我在介绍常用的HTML标签时,在表格中的元素没有对对应的元素标签进行补齐,大家不要觉得意外!
01|根元素
| 元素 | 描述 |
|---|---|
| <html> | HTML<html>元素是一个HTML文档的根元素,所有的元素必须是此元素的后代! |
02|文档元数据
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎， 浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
| 元素 | 描述 |
|---|---|
| <link> | HTML 中<link>元素规定了外部资源与当前文档的关系。 这个元素可用来为导航定义一个关系框架。这个元素最常于链接样式表。 |
| <meta> |
HTML <meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息. |
| <style> | HTML的<style>元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。 |
| <title> | HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。 |
03|内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
| 元素 | 描述 |
|---|---|
| <footer> | HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 |
| <header> |
<header>元素表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。 |
| <h1>~<h6> |
HTML <h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用，例如，自动构造某个文档中的内容表（就像本文档右边浮动栏一样）。 |
| <main> | HTML <main>元素呈现了文档``或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。 |
| <nav> |
HTML导航栏 (<nav>) 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表. |
| <section> |
HTML Section 元素 (<section>) 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>。 |
04|文本内容
使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。
| 元素 | 描述 |
|---|---|
| <dir> |
HTML 目录元素 (<dir>) 表示一个目录，也就是文件名称的集合。 |
| <div> |
HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用 (比如 <article> 或 <nav>) 。 |
| <dl> | HTML <dl> 元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。 |
| <dt> |
HTML <dt> 元素 （或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素， 然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。 |
|
HTML 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。 |
|
| <li> |
HTML <li> 元素 (或者 HTML 列表条目元素) 用于表示列表里的条目。它必须被包含在一个父元素里：一个有顺序的列表(<ol>)，一个无顺序的列表(<ul>)，或者一个菜单 (<menu>)。在菜单或者无顺序的列表里，列表条目通常用点排列显示。在有顺序的列表里，列表条目通常是在左边有按升序排列计数的显示，例如数字或者字母。 |
| <main> | HTML <main>元素呈现了文档``或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。 |
| <ol> | HTML <ol> 元素 表示多个有序列表项，通常渲染为有带编号的列表。 |
| <p> | HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。 |
| <pre> | HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略) |
| <ul> | The HTML <ul> 元素 ( 或 HTML 无序列表元素） 代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性。 |
05|内联文本语义
使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。
| 元素 | 描述 |
|---|---|
| <a> | HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。 |
<br> |
HTML 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。 |
| <em> |
HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。 |
| <kbd> | HTML键盘输入元素(<kbd>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。 |
| <span> |
HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素 . |
| <strong> | Strong 元素 (<strong>)表示文本十分重要，一般用粗体显示。 |
06|图片和多媒体
HTML 支持各种多媒体资源，例如图像，音频和视频。
| 元素 | 描述 |
|---|---|
| <audio> |
HTML <audio> 元素用于在文档中表示音频内容。 <audio> 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。 |
| <img> |
HTML Image 元素（ <img> ）代表文档中的一个图像。 |
| <vedio> | HTML <video> 元素 用于在HTML或者XHTML文档中嵌入视频内容。 |
07|脚本
为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素支持此功能。
| 元素 | 描述 |
|---|---|
| <canvas> | <canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。 |
| <noscript> | 如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在HTML <noscript> 元素中定义脚本未被执行时的替代内容。</noscript> |
| <script> | HTML <script> 元素用于嵌入或引用可执行脚本。 |
08|表格内容
这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。
| 元素 | 描述 |
|---|---|
| <col> | HTML <col> 元素 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于元素内。 |
| <colgroup> | HTML 中的 表格列组（Column Group <colgroup>） 标签用来定义表中的一组列表。 |
| <table> | HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。 |
| <tbody> | 这个 HTML 标签 |
| <td> | The Table cell HTML element (<td>) defines a cell of a table that contains data. It participates in the table model. |
| <tfoot> | HTML 元素<tfoot> 定义了一组计算表格中各列总和的行。 |
| <th> |
HTML <th> 元素 scope and headers 属性 |
| <thead> | HTML的<thead>元素定义了一组定义表格的列头的行。 |
| <tr> | HTML <tr> 元素定义表格中的行。 Those can be a mix of <td> and <th>elements. |
09|表单
HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。详情请参阅 HTML forms guide。
| 元素 | 描述 |
|---|---|
| <button> | HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 |
| <form> | HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。 |
| <input> | HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。 |
| <label> | HTML 元素表示用户界面中项目的标题。 |
| <option> | 在web表单中, HTML元素 <option> 用于定义在select, optgroup 或datalist 元素中包含的项。<option> 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。 |
| <select> | HTML select (<select>) 元素是一种表单控件，可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。 |
| <textarea> |
HTML <textarea> 元素表示一个多行纯文本编辑控件。 |
其中以上就是一些常用的标签,当然我自己也差不多用到了前面所介绍的标签,这些常用的标签在描述中都有简单介绍!
其中的一些详细信息可以点击描述中的一些链接可以看到具体用法!
1.其中在前端领域比较好的教程网站比如:MDN 其中不仅仅是HTML的一些标签之类的 当然还包括:HTML介绍,HTML教程,HTML参考
2.因为本人的只是水品有限,其中的一些标签怕因为个人的不成熟的见解误导别人,因此其中读者所看到的标签描述以及元素介绍都是从MDN(Mozilla Developer Network ,Mozilla 开发者网络) 经过自己在开发中(主要是学习和实践中)主要用到的标签提炼出来,当然还有许多地方没有做到位! 如果您看到这篇Blog对你有帮助的话(当然我也很乐意这样做)或者是你觉得还有很多地方需要改进的地方的话还请联系我:Gump1016@163.com
