html引入公共部分（header、footer等）
引入公共部分的好处：把公共部分提取出来，修改代码不需要每个html都去修改，只需要修改一份。
1. 使用iframe标签
缺点：无法异步加载外部js
举例：如导入header导航栏
初步使用iframe导入发现的问题：
1. 会显示有高度为0的body
原因：公共部分的html包含了头部标签元素
一个页面不能有多个head、body等
解决方法：公共部分的html只写body里面的内容
2. 导航栏二级菜单显示不出来
原因：iframe部分高度固定
position:absolute; z-index:999;
3. 有边框和滚动条
frameborder="0" scrolling="no" 设置为no
iframe的属性有：
属性值描述align
- left
- right
- top
- middle
- bottom
不赞成使用。请使用样式代替。
规定如何根据周围的元素来对齐此框架。
- 1
- 0
规定是否显示框架周围的边框。height
- pixels
- %
规定 iframe 的高度。longdescURL规定一个页面，该页面包含了有关 iframe 的较长描述。marginheightpixels定义 iframe 的顶部和底部的边距。marginwidthpixels定义 iframe 的左侧和右侧的边距。nameframe_name规定 iframe 的名称。referrerpolicy
- no-referrer
- no-referrer-when-downgrade
- origin
- origin-when-cross-origin
- same-origin
- strict-origin-when-cross-origin
- unsafe-url
规定 iframe 的名称。sandbox
- ""
- allow-forms
- allow-same-origin
- allow-scripts
- allow-top-navigation
启用一系列对 <iframe> 中内容的额外限制。scrolling
- yes
- no
- auto
规定是否在 iframe 中显示滚动条。seamlessseamless规定 <iframe> 看上去像是包含文档的一部分。srcURL规定在 iframe 中显示的文档的 URL。srcdocHTML_code规定在 <iframe> 中显示的页面的 HTML 内容。width
- pixels
- %
定义 iframe 的宽度。
了解了iframe后开始编写代码
第一步：编写header的html
做法：公共部分的页面只需要写<body>的里面的标签（不包括body），不需要写头部标签元素
可以在最上面导入css样式和js
<!-- 外链css -->
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="font/iconfont.css">
<!-- js -->
<script src="js/jquery-3.6.1.js"></script>
<script src="js/header.js"></script>
<header id="header" class="header_animation">
<div class="header-box">
<div class="logo-box">
<a href="header.html"><img src="images/logo.e4cc2c4.svg"></a>
</div>
<div class="head-list-box">
<ul class="head-list">
<li class="head-item">
<a href="#">全部车型<span class="iconfont"></span></a>
<ul class="secondlist">
<li class="second-item"><a href="dynasty.html" target="_blank">王朝</a></li>
<li class="second-item"><a href="ocean.html" target="_blank">海洋</a></li>
</ul>
</li>
<li class="head-item">
<a href="#">购车服务<span class="iconfont"></span></a>
<ul class="secondlist">
<li class="second-item"><a href="#">金融服务</a></li>
<li class="second-item"><a href="#">购车服务</a></li>
<li class="second-item"><a href="#">大客户服务</a></li>
</ul>
</li>
<li class="head-item">
<a href="yuyue.html" target="_blank">预约试驾</a>
</li>
<li class="head-item">
<a href="#">门店查询<span class="iconfont"></span></a>
<ul class="secondlist">
<li class="second-item"><a href="#">经销商服务</a></li>
<li class="second-item"><a href="#">服务店查询</a></li>
</ul>
</li>
<li class="head-item">
<a href="#">品牌中心<span class="iconfont"></span></a>
<ul class="secondlist">
<li class="second-item"><a href="#">两个不只</a></li>
<li class="second-item"><a href="#">三大领先</a></li>
<li class="second-item"><a href="#">链接共建</a></li>
<li class="second-item"><a href="#">一路向前</a></li>
</ul>
</li>
<li class="head-item">
<a href="#">集团网站</a>
</li>
</ul>
</div>
<div class="tool-box">
<ul class="tool-list">
<li class="tool-item" id="search-item"><a href="#"><span class="iconfont"></span>搜索</a>
</li>
<li class="tool-item"><a href="login.html" target="_blank"><span class="iconfont" style="color: #f5f5f5;"></span>登录/注册</a></li>
<li class="tool-item"><a href="#"><span class="iconfont"></span></a>
<ul class="tool-secondlist">
<li class="tool-second-item"><a href="#">金融服务</a></li>
<li class="tool-second-item"><a href="huiyuan.html">会员礼遇</a></li>
<li class="tool-second-item"><a href="#">汉唐精英萃</a></li>
<li class="tool-second-item"><a href="#">我迪朋友们</a></li>
<li class="tool-second-item"><a href="#">木兰荟</a></li>
<li class="tool-second-item"><a href="#">新闻资讯</a></li>
<li class="tool-second-item"><a href="#">品牌互动</a></li>
</ul>
</li>
<li class="tool-item"><a href="#"><span class="iconfont">
</span>选择地区</a>
<ul class="tool-secondlist">
<span class="area" style="color: #cbc6c6;">选择地区</span>
<span class="area">Asia Pacific</span>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Korea</a></li>
<span class="area">Europe</span>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Europe</a></li>
<span class="area">Latin America</span>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6; ">Ecuador</a></li>
<li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Chile</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="search-box">
<div class="searchDiv">
<h4>搜索</h4>
<form method="post">
<input type="text" placeholder="请输入您想了解的信息" id="shuru"><input type="button" id="search-btn" value="Go!">
</form>
</div>
</div>
</header>第二步：index.html引用
<!-- 顶部导航 -->
<div class="headerpage" style="position:absolute;z-index:999;width: 100%;">
<iframe src="./header.html" frameborder="0" scrolling="no" width="100%" height="500px" ></iframe>
</div>尾部同理
<!-- 尾部 -->
<div class="footerpage" style="position:relative; width: 100%;">
<iframe src="./footer.html" frameborder="0" scrolling="no" width="100%" height="450px"></iframe>
</div>完成！ ps:当时完成项目时发现导入的js不出效果，但是现在效果出来了，不知道是什么原因。。
2. 使用jquery提供的load方法
<!-- 顶部导航 -->
<div class="headerpage" style="position:absolute;z-index:999;width: 100%; height: 500px;">
</div>
<script>
$(function(){
$(".headerpage").load("header.html");
})出现的问题：显示不出来
解决方法：
1. load函数里不要写本地的文件，容易引起跨域问题导致浏览器找不到页面，用域名来解决的，或者把本地文件部署到Tomcat
2.在vsCode的插件市场中搜索并安装Live Server插件. 用“
Open with Live Serve”打开文件3.在本地搭建一个server，通过url地址访问测试文件
网上搜集来的解决办法
