今天給大家講解的是include標簽，在打代碼的時候總會出現一些重復的樣式，這個時候就可以用include標簽來減少打代碼的次數。
文件名index.html，代碼：
{% from 'macros/forms.html' import input %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>宏</title> <style> *{ list-style: none; text-decoration: none; } .header{ height: 60px; background: #3a3a3a; color: #fff; margin-bottom: 20px; } .header .nav-group{ margin-left: 10px; } .header .nav-group li{ float: left; line-height: 60px; margin: 0px 20px; } .nav-group li a{ color: #fff; } .footer{ height: 60px; background: #3a3a3a; } .footer p{ color: #fff; margin-left: 30px; padding-top: 20px; } </style></head><body> <div class="header"> <ul class="nav-group"> <li><a href="#">新聞</a></li> <li><a href="#">音樂</a></li> <li><a href="#">貼吧</a></li> <li><a href="#">視頻</a></li> </ul> </div> <table> <tbody> <tr> <td>賬號</td> <td>{{ input(placeholder="請輸入賬號") }}</td> </tr> <tr> <td>密碼</td> <td>{{ input(type="password", placeholder="請輸入密碼") }}</td> </tr> <tr> <td></td> <td>{{ input(type="submit", value="提交") }}</td> </tr> </tbody> </table> <div class="footer"> <p>頁面底部</p> </div></body></html>
現在考慮這樣一個問題，如果頁面頭部和底部是很多頁面要用的樣式，那么如果在每一個新的文件中都要復制相同的代碼肯定不是我們希望的，這時候就可以用到include標簽了：
用法
{% include '引用文件路徑' %}
用include前提是把相同的代碼先提取出來，所以我們將對應的代碼先提取成文件：
文件結構：
headers.html
<style> *{ list-style: none; text-decoration: none; } .header{ height: 60px; background: #3a3a3a; color: #fff; margin-bottom: 20px; } .header .nav-group{ margin-left: 10px; } .header .nav-group li{ float: left; line-height: 60px; margin: 0px 20px; } .nav-group li a{ color: #fff; }</style><div class="header"> <ul class="nav-group"> <li><a href="#">新聞</a></li> <li><a href="#">音樂</a></li> <li><a href="#">貼吧</a></li> <li><a href="#">視頻</a></li> </ul></div>
footers.html
<style> .footer{ height: 60px; background: #3a3a3a; } .footer p{ color: #fff; margin-left: 30px; padding-top: 20px; }</style><div class="footer"> <p>頁面底部</p></div>
將公共部分提取出以后在調用的地方只需要用include標簽調用即可：
index.html
{% from 'macros/forms.html' import input %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>宏</title></head><body> {% include 'index/headers.html' %} <table> <tbody> <tr> <td>賬號</td> <td>{{ input(placeholder="請輸入賬號") }}</td> </tr> <tr> <td>密碼</td> <td>{{ input(type="password", placeholder="請輸入密碼") }}</td> </tr> <tr> <td></td> <td>{{ input(type="submit", value="提交") }}</td> </tr> </tbody> </table> {% include 'index/footers.html' %}</body></html>
如果還有一個詳情頁，那么只需要：
detail.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Detail</title></head><body> {% include 'index/headers.html' %} <p>這是詳情頁</p> {% include 'index/footers.html' %}</body></html>
如果對軟件測試、接口測試、自動化測試、面試經驗交流。感興趣可以加軟件測試交流：1085991341，還會有同行一起技術交流。
顯示
以上內容希望對你有幫助，有被幫助到的朋友歡迎點贊，評論。