在页面布局中，一些外部页面会被引入HTML。本文将告诉您如何将外部页面的HTML导入方法引入HTML。有需要的朋友可以参考一下，希望对你有用。
html导入提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前Google已经全面支持HTML导入，Opera35之后支持，FF仍然不支持。(在谷歌的地址栏输入:chrome://flags可以启用或禁用部分功能)。虽然目前HTML导入的兼容性不是很好，但是我们还是有必要知道如何使用。W3C已经发布了HTML导入的标准草案，相信后期还是会被广泛使用。使用HTML导入
<!doctype html> <html> <head> <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="Keywords" content="关键词一，关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="Yvette Lau"> <title>Document</title> <link rel = "import" href = "test1.html"/> </head> <body> <div id = "content"></div> </body> </html> <script> var post = document.querySelector("link[rel = 'import']").import; var con = post.querySelector("div"); document.querySelector("#content").appendChild(con.cloneNode(true)); var clone = document.importNode(con,true) document.querySelector("#content").appendChild(clone) </script>本文给出了两种将导入html中需要的部分插入到当前html中的方法。
最后简单介绍一下document.querySelector和document.querySelectorAll。这两种方法是HTML5在Web API中新引入的，大大简化了原生Javascript代码中元素的选择。
document.querySelector和document . query selector都接收一个字符串作为参数，该字符串要符合CSS选择语法，即:标签、类选择器、ID选择器、属性选择器(e [type = "xx"])、结构选择器(:n-child(n))等等。不支持伪类选择器。
document.importNode(node，deep)方法将一个节点从另一个文档复制到应用程序的文档中，第二个值为true，因此该节点的所有后代节点也被复制。
Node.cloneNode(deep):克隆现有节点，deep的值为true，表示克隆其后代节点。如果deep为false，则仅克隆节点本身。
以上是如何将外部页面(HTML imports方法)引入HTML的细节。更多信息请关注AdminJS.cn其他相关文章！
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！