📌  相关文章
📜  HTML5 |介绍

📅  最后修改于: 2021-11-07 08:54:17             🧑  作者: Mango

简介： HTML 代表超文本标记语言。它用于使用标记语言设计网页。 HTML 是超文本和标记语言的结合。超文本定义了网页之间的链接。标记语言用于定义标签内的文本文档，标签定义了网页的结构。 HTML 5 是 HTML 的第五个也是当前版本。它改进了可用于文档的标记，并引入了应用程序编程接口 (API) 和文档对象模型 (DOM)。

特征：

  • 它引入了新的多媒体功能，通过使用
  • 有新的图形元素，包括矢量图形和标签。
  • 通过添加
    、
    、
    、
    和
    来丰富语义内容。
  • 拖放 – 用户可以抓取一个对象并将其进一步拖放到新位置。
  • 地理定位服务 – 它有助于定位客户的地理位置。
  • Web 存储设施，提供 Web 应用程序方法以在 Web 浏览器上存储数据。
  • 使用SQL数据库离线存储数据。
  • 允许绘制各种形状，如三角形、矩形、圆形等。
  • 能够处理错误的语法。
  • 简单的 DOCTYPE 声明，即
  • 简单的字符编码，即

从 HTML 5 中删除的元素：下面列出了许多从 HTML 5 中贬值的元素：

Removed Elements Use Instead Elements
CSS
CSS
CSS
    CSS
    </td> <td></td> </tr> <tr> <td style="text-align:center"><isindex></td> <td></td> </tr> <tr> <td style="text-align:center"><strike></td> <td style="text-align:center">CSS, <s> or <del></td> </tr> <tr> <td style="text-align:center"><tt></td> <td style="text-align:center">CSS</td> </tr> </tbody> </table> <p> <strong>HTML 5 中新添加的元素：</strong></p> <ul> <li> <strong><article>：</strong> <article> 标签用于表示一篇文章。更具体地说，<article> 标签中的内容独立于站点的其他内容（即使它可以相关）。</li> <li> <strong><aside>：</strong> <aside> 标签用于以更短的方式描述网页的主要对象，如荧光笔。它基本上标识了与网页的主要内容相关但不构成主要页面的主要意图的内容。 <aside> 标签主要包含作者信息、链接、相关内容等。</li> <li> <strong><figcaption>：</strong> HTML 中的 <figurecaption> 标签用于为文档中的 figure 元素设置标题。</li> <li> <strong><figure>：</strong> HTML 中的<figure> 标签用于在文档中添加自包含的内容，如插图、图表、照片或代码列表。它与主流程有关，但它可以用于文档的任何位置，并且图形与文档的流程相适应，如果将其移除，则不应影响文档的流程。</li> <li> <strong><header>：</strong>它包含部分标题以及其他内容，例如导航链接、目录等。</li> <li> <strong><footer>：</strong> HTML 中的 <footer> 标签用于定义 HTML 文档的页脚。此部分包含页脚信息（作者信息、版权信息、运营商等）。页脚标签在正文标签中使用。 <footer> 标签是 HTML 5 中的新标签。页脚元素需要一个开始标签和一个结束标签。</li> <li> <strong><main>：</strong>描述文档或 Web 应用程序正文的主要内容。</li> <li> <strong><mark>：</strong> HTML 中的 <mark> 标签用于定义标记的文本。它用于突出显示段落中的文本部分。</li> <li> <strong><nav>：</strong> <nav> 标签用于声明 HTML 文档中的导航部分。网站通常有专用于导航链接的部分，使用户能够浏览网站。这些链接可以放在导航标签内。</li> <li> <strong><section>：</strong>它划分了内容的主题分组。</li> <li> <strong><details>：</strong> <details> 标签用于最初隐藏但如果用户希望看到它可以显示的内容/信息。此标签用于创建用户可以打开或关闭它的交互式小部件。打开设置的属性时，详细信息标签的内容是可见的。</li> <li> <strong><summary>：</strong> HTML 中的 <summary> 标签用于定义 <details> 元素的摘要。 <summary> 元素与 <details> 元素一起使用，并提供用户可见的摘要。当用户单击摘要时，放置在 <details> 元素内的内容变得可见，而之前隐藏的内容。 <summary> 标签是在 HTMl 5 中添加的。<summary> 标签需要开始和结束标签。</li> <li> <strong><time>：</strong> <time> 标签用于显示人类可读的数据/时间。它还可以用于以机器可读的形式对日期和时间进行编码。用户的主要优势是他们可以在日历中添加生日提醒或预定事件，搜索引擎可以生成更智能的搜索结果。</li> <li> <strong><bdi>：</strong> <bdi> 标签指的是双向隔离。它将文本与其他可能以不同方向格式化的文本区分开来。当用户生成具有未知方向的文本时使用此标签。</li> <li> <strong><wbr>：</strong> HTML 中的 <wbr> 标签代表分词机会，用于定义文本中被浏览器视为换行符的位置。它主要用于当使用的单词太长并且浏览器可能会在错误的位置换行以适应文本。</li> <li> <strong><datalist>：</strong> <datalist> 标签用于在 HTML 文件中提供自动完成功能。它可以与输入标签一起使用，以便用户可以使用选择数据轻松地在表单中填写数据。</li> <li> <strong><keygen>：</strong> HTML 中的 <keygen> 标签用于指定表单中的密钥对生成器字段。 <keygen> 元素的目的是提供一种安全的方式来验证用户。当提交 from 时，会生成两个密钥，私钥和公钥。私钥存储在本地，公钥发送到服务器。公钥用于生成客户端证书以供将来验证用户。</li> <li> <strong><output>：</strong> HTML 中的 <output> 标签用于表示 JavaScript 等客户端脚本执行的计算结果。</li> <li> <strong><progress>：</strong>用于表示任务的进度。它还定义了完成了多少工作以及还剩下多少来下载一个东西。它不用于表示磁盘空间或相关查询。</li> <li> <strong><svg>：</strong>它是可缩放矢量图形。</li> <li> <strong><canvas>：</strong> HTML 中的 <canvas> 标签用于使用 JavaScript 在网页上绘制图形。它可用于绘制路径、框、文本、渐变和添加图像。默认情况下，它不包含边框和文本。</li> <li> <strong><audio>：</strong>定义音乐或音频内容。</li> <li> <strong><embed>：</strong>定义外部应用程序（通常是视频播放器）的容器。</li> <li> <strong><source>：</strong>它定义了 <video> 和 <audio> 的来源。</li> <li> <strong><track>：</strong>它定义了 <video> 和 <audio> 的轨道。</li> <li> <strong><video>：</strong>定义视频内容。</li> </ul> <p><strong>好处：</strong></p> <p></p> <div class="_ap_apex_ad" id="d6f45c53-ff16-4cc5-8b91-eb6ee7037116" style="min-height:280px"></div> <p></p> <ul> <li>支持所有浏览器。</li> <li>对设备更友好。</li> <li>易于使用和实施。</li> <li> HTML 5 与 CSS、JavaScript 等集成可以帮助构建漂亮的网站。</li> </ul> <p><strong>缺点：</strong></p> <ul> <li>必须编写长代码，这很耗时。</li> <li>只有现代浏览器支持它。</li> </ul> <p><strong>支持的浏览器：</strong>所有现代浏览器都支持它。</p> <p>下面的示例说明了 HTML 5 内容。<br/><strong>示例 1：</strong> </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html>  <html>     <head>      <title>HTML 5</title>      <style>          h1 {              font-size:50px;          }      </style>  </head>         <body>      <h1>GeeksforGeeks</h1>  </body>     </html>                     </code></pre> </div> <p><strong>输出：</strong> <br/><img alt="" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/HTML5_%7C_Introduction_0.jpg"/></p> <p><strong>示例 2：</strong> </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html>     <head>      <title>HTML 5 Demo</title>             <style>          .GFG {              font-size:40px;              font-weight:bold;             color:green;         }          body {             text-align:center;         }     </style>  </head>     <body>      <div class = "GFG">GeeksforGeeks</div>      <aside>          <div>A computer science portal for geeks</div>      </aside>  </body>     </html>                     </code></pre> </div> <p><strong>输出：</strong> <br/><img alt="" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/HTML5_%7C_Introduction_1.jpg"/></p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7" style="min-height:280px"></div> <p></p></div> </article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright &copy; 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>