Home > Developer > JavaScript
On different HTML pages, how does one share the header and tail ?, Share tail
I. asp and PHP
First, create a header file head. asp or a bottom file foot. asp. For example, if the homepage is index. asp, the code of calling the header is at the beginning of the code of the index. asp file (after the first mark, before the
<!– #include file=”head.asp” –>
The code for calling the shared bottom file is to add the following code to the end position of the index. asp file code (before the last mark:
<!– #include file=”foot.asp” –>
For php files, change the file name to footer. php.
Ii. html language
Create a common header file head.htmor a common background file foot.htm. If the main page file is index.htm, you can call the header and bottom files by adding the following code at the beginning and end of the main page file code:
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe>
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”foot.htm” height="auto" width="100%"></iframe>
For example, the following code homepage: index.html
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">The code of the single-stick head.html is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">The css style code is as follows:
*{margin:0;padding:0;}body{background:white;position:relative;height:100%;color: #777;font-size: 13px;}img{border:none;display:block;}li{list-style:none;text-decoration: none;}.miaov_head{height:36px;width:100%;margin:0 auto;background: black;margin-bottom: 0px;}.miaov_head img{width: 30px ;height: 30px;margin-top: 0;margin-left: 130px;}.miaov_head ul{float: left;width:900px;height: 36px;margin-top: 0px;color: white;position: absolute;top: 0px;margin-left: 200px;}.miaov_head ul li{float: left;padding-left: 80px;margin-left: 0px;color: white;list-style: none; }.miaov_head ul li a{color: white;font-size: 14px;text-decoration: none;}.miaov_head input{position: absolute;top: 5px;margin-left: 1000px;width: 200px;height: 22px;}.miaov_head a{line-height:36px;color:#777;}.miaov_head a:hover{color:#555;}Iii. script Language-recommended
Create a shared header file head. js and a shared bottom file foot. js. For example, if the main page file is index.htm, you can call the header and the bottom file by adding the following code at the beginning and end of the main page file code: <script src = 'head. js'> and <script src = 'foot. js'> calling a common webpage header or webpage bottom reduces the complexity of writing a header or bottom for each page and facilitates modification. You only need to modify a header or bottom file, the header or bottom of all pages change accordingly, increasing productivity.For example: head.js file ------20.small head.html, the use of conversion tools: http://tool.chinaz.com/Tools/Html_Js.aspx
Html conversion to JS:
document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");document.writeln("No matter which page you want to call this header file in the future, you can directly Insert the head. js file: The following is a casual page, // MAC.html
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Iv. shtml files
1: Use the ssi technical page to generate a shtml file, and only add it to the header file location <! -- # Include file = "header.htm" --> after modification, you only need to modify the header.htm file. The advantage of using shtml is that it is more friendly to search engines. The files to be processed are completed on the server side and will not increase the burden on the visitor's browser.
V. Local merge
You can manually merge HTML files into three parts: Header, tail, and content before previewing or publishing. I used it a long time ago. It works well when there is no backend.
6. ajax dynamic pulling and filling
7. web servers (such as IIS)
For example, we can use include to include a file suffixed with .shtml.
Server Side Include (SSI) is usually referred to as "Server-Side embedding" or "Server-Side inclusion". It is a Server-based web page creation technology similar to ASP. The default extensions are. stm,. shtm, And. shtml. SSI is a command or pointer that can be called through the annotation line in an HTML file. SSI has powerful functions. You only need to use a simple SSI command to update the content of the entire website, dynamically display time and date, and execute complex functions such as shell and CGI scripts.
8. Background template engine processing (String concatenation)
9: using images, flash, and other external resources --- not recommended, rather troublesome
10: Use of <ng-include> in angular js
On Static html pages, there are so many methods to introduce files in the header and tail, listing some files. If you are interested, you can study them on your own.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
