HTML 基础标签
本文最后更新于：2024年3月18日 凌晨
HTML 基础标签
<!DOCTYPE>
标签定义及使用说明
-
声明位于文档中的最前面的位置，处于 标签之前。
</!doctype>
-
声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
</!doctype>
-
在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML (Standard Generalized Markup Language 标准通用标记语言）,DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。
-
HTML5 不是基于 SGML，因此不要求引用 DTD
-
提示：总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
提示和注释
- 注释:<!DOCTYPE> 标签没有结束标签。
- 提示:<!DOCTYPE> 声明不区分大小写。
- 提示：使用 [W3C 的验证](https://validator.w3.org/）检查您是否编写了一个带有正确 DTD 的合法的 HTML / XHTML 文档!
<html>
标签定义及使用说明
<html>标签告知浏览器这是一个 HTML 文档。<html>标签是 HTML 文档中最外层的元素。<html>标签是所有其他 HTML 元素（除了<!DOCTYPE>标签）的容器。
HTML 4.01 与 HTML5之间的差异
HTML5 中，增加了一个新属性：manifest
HTML 与 XHTML 之间的差异
- xmlns 属性在 XHTML 中是必需的，但在 HTML中不是。
- 然而，即使 XHTML 文档中的
<html>没有使用 xmlns 属性，W3C 上的 HTML 验证器也不会报错，这是因为 “xmlns=http://www.w3.org/1999/xhtml” 是一个固定值，即使您没有包含它，此值也会被添加到<html>标签中。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| manifest | URL | 定义一个 URL，在这个 URL 上描述了文档的缓存信息， |
| xmlns | http://www.w3.org/1999/xhtml | HTML 不支持，只有 XHTML 支持，规定 XML 的 namespace 属性（如果您需要您的内容符合 XHTML，则使用这个属性，), |
<title>
标签定义及使用说明
<title>标签定义文档的标题，在所有 HTML 文档中是必需的。<title>元素：- 定义浏览器工具栏中的标题。
- 提供页面被添加到收藏夹时的标题。
- 显示在搜索引擎结果中的页面标题。
提示和注释
- 注释：一个 HTML 文档中不能有一个以上的
元素。</li> <li><strong>提示</strong>：如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。</li> </ul> <h2 id="body"><code><body> </code></h2> <h3 id="标签定义及使用说明-4">标签定义及使用说明</h3> <ul> <li><code><body></code> 标签定义文档的主体。</li> <li><code><body></code> 元素包含文档的所有内容（比如文本，超链接，图像，表格和列表等等）</li> </ul> <h2 id="h1-h6"><code><h1></code> -<code> <h6></code></h2> <h3 id="标签定义及使用说明-5">标签定义及使用说明</h3> <ul> <li><code><h1> </code>-<code> <h6></code> 标签被用来定义 HTML 标题。</li> <li><code><h1></code> 定义重要等级最高的标题。</li> <li><code><h6></code> 定义重要等级最低的标题。</li> </ul> <h2 id="p"><code><p></code></h2> <h3 id="标签定义及使用说明-6">标签定义及使用说明</h3> <ul> <li><code><p></code> 标签定义段落。</li> <li><code><p></code>元素会自动在其前后创建一些空白，浏览器会自动添加这些空间，您也可以在样式表中规定。</li> </ul> <h2 id="br"><code><br></code></h2> <h3 id="标签定义及使用说明-7">标签定义及使用说明</h3> <ul> <li><code><br> </code>标签插入一个简单的换行符。</li> <li><code><br></code> 标签是一个空标签，意味着它没有结束标签。</li> </ul> <h2 id="hr"><code><hr></code></h2> <h3 id="标签定义及使用说明-8">标签定义及使用说明</h3> <ul> <li><code><hr></code> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。</li> <li><code><hr></code> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）</li> </ul> <h2 id=""><code><!--...--> </code></h2> <h3 id="标签定义及使用说明-9">标签定义及使用说明</h3> <ul> <li><code><!--...--> </code>注释标签用来在源文档中插入注释，注释不会在浏览器中显示。</li> <li>您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑，特别是代码量很大的情况下很有用。</li> <li>您也可以在注释内容存储针对程序所定制的信息，在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的，一个好的习惯是把注释或样式元素放入注释文本中，这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。</li> <li><strong>注释</strong>：命令行最后的两个正斜杠（//）是 JavaScript 注释符号，这确保了 JavaScript 不会执行 --> 标签。</li> <li>除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性，这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作，这些动作可能是简单的包括其他文件中的文本（即所谓的服务器端包含，server-inside include)，也可能是复杂地执行其他命令去动态生成文档的内容。</li> </ul> </div> <hr> <div> <div class="post-metas mb-3"> <div class="post-meta mr-3"> <i class="iconfont icon-category"></i> <a class="hover-with-bg" href="/categories/Software/">Software</a> <a class="hover-with-bg" href="/categories/Software/Language/">Language</a> <a class="hover-with-bg" href="/categories/Software/Language/HTML/">HTML</a> </div> </div> <p class="note note-warning"> 本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！ </p> <div class="post-prevnext"> <article class="post-prev col-6"> <a href="/Software/Language/HTML/%E5%AA%92%E4%BD%93/"> <i class="iconfont icon-arrowleft"></i> <span class="hidden-mobile">HTML 媒体标签</span> <span class="visible-mobile">上一篇</span> </a> </article> <article class="post-next col-6"> <a href="/Software/Language/HTML/%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7/"> <span class="hidden-mobile">HTML 全局属性</span> <span class="visible-mobile">下一篇</span> <i class="iconfont icon-arrowright"></i> </a> </article> </div> </div> <!-- Comments --> <article class="comments" id="comments" lazyload> </article> </article> </div> </div> </div> <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn"> <div id="toc"> <p class="toc-header"><i class="iconfont icon-list"></i> 目录</p> <div class="toc-body" id="toc-body"></div> </div> </div> </div> </div> <!-- Custom --> <a id="scroll-top-button" aria-label="TOP" href="#" role="button"> <i class="iconfont icon-arrowup" aria-hidden="true"></i> </a> <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">搜索</h4> <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-5"> <input type="text" id="local-search-input" class="form-control validate"> <label data-error="x" data-success="v" for="local-search-input">关键词</label> </div> <div class="list-group" id="local-search-result"></div> </div> </div> </div> </div> </main> <footer class="text-center mt-5 py-3"> <div class="footer-content"> </div> </footer> <!-- SCRIPTS --> <script src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" /> <script> NProgress.configure({"showSpinner":false,"trickleSpeed":100}) NProgress.start() window.addEventListener('load', function() { NProgress.done(); }) </script> <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script> <script src="https://cdn.jsdelivr.net/gh/LuShan123888/SoftwareMagic@gh-pages/js/events.js" ></script> <script src="https://cdn.jsdelivr.net/gh/LuShan123888/SoftwareMagic@gh-pages/js/plugins.js" ></script> <!-- Plugins --> <script src="https://cdn.jsdelivr.net/gh/LuShan123888/SoftwareMagic@gh-pages/js/local-search.js" ></script> <script src="https://cdn.jsdelivr.net/gh/LuShan123888/SoftwareMagic@gh-pages/js/img-lazyload.js" ></script> <script src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script> <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script> <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script> <script src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script> <script> (function (window, document) { var typing = Fluid.plugins.typing; var title = document.getElementById('subtitle').title; typing(title) })(window, document); </script> <script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js" ></script> <script> if (window.mermaid) { mermaid.initialize({"theme":"default"}); } </script> <!-- 主题的启动项 保持在最底部 --> <script src="https://cdn.jsdelivr.net/gh/LuShan123888/SoftwareMagic@gh-pages/js/boot.js" ></script> </body> </html>