Question

现在我有两个HTML类和一个CSS文件。一个HTML文件用于编写HTML代码，另一个用于放置大文本/段落。现在我想将HTML文件（包括一个大段落）引用到我的主html文件中。

怎么可能呢？这是一个好习惯吗？或者有没有其他方法可以做到这一点？

我写的代码：

main.html中：

    <!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>


<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">

</style>
</head>

<body>


<h1 id="style_header">Welcome to my green world!</h1></div>


<div id="menu_area" >


<div id="home">HOME</div><br /><br /><br /> 
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />


</div>
<p id="paragraph_home">paragraph.</p>

<!-- I want to call the home.html class here so that the paragraph is shown in my homepage under the home menu.-->

<div id="footer">Developed by Jabir Al Fatah</div>

</body>
</html>

main_design.css：

    /*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/

#style_header {
    background-color:blue;
    text-align:center;
    padding:20px;
    margin:-8px;
    border:4px solid red;
}

#paragraph_home{
    text-align:center;
    display:inline-block;
    width:300px;
    vertical-align:top;
}
#menu_area {
    border:4px solid red;
    margin:-8px;
    background-color:#FFD700;
    padding-top:30px;
    margin-top:4px;
    height:600px;
    width:150px;
    display:inline-block;
    vertical-align:top;
}
body {
    background-image:url(green.JPG);
    background-repeat:no-repeat;
}
#footer {
    background-color:blue;
    margin:-8px;
    border:2px solid red;
    text-align:center;
}
#home {
    font:bold 20px Tahoma;
    text-align:left;
}
#about_me {
    font:bold 20px Tahoma;
    text-align:left;
}
#gallery {
    font:bold 20px Tahoma;
    text-align:left;
}
#contact_me {
    font:bold 20px Tahoma;
    text-align:left;
}
#my_diary {
    font:bold 20px Tahoma;
    text-align:left;
}
#blog {
    font:bold 20px Tahoma;
    text-align:left;
}

home.html的

    <!--
The text I want to add in the home link will go here. As soon as an user
loads the page will be able to see the paragraph. This paragraph should also be shown when the user clicks on Home menu.

-->

<!--
Now, basically I want to call this class in my "main.html" class. how to do that?
The reason I want to do that because I really don't like this giant paragraph in my "main.html" class.
-->

    <p id="paragraph_home">I was born in a beautiful small village <!--Just an example paragraph-->
     of.......
     The villagers were relatively peaceful, almost free from crime 
     and sadness, besides they were very merciful and happy. The 
     reason I was born there is long long time ago my father’s 
     pre-generations were settled in the region. To live for his 
     own, my father had to move in a new village. Our new home was 
     just a kilometer away from my grandfather’s place. I came to 
     hear many legendary tales about that piece of land where our 
     current home is located. People use to say that there was 
     jungle and some evil’s residence long time ago. From our 
     village, some seniors of mine saw some shocking scenery with 
     monster shape in that bush. By the time my father cut the 
     jungle to settle residence. My father was a school teacher. 
     And my mom is a homemaker. I am the fourth child of my parents.
     Among five siblings, my only and one sister is the second child.</p>

[注意：我希望我的所有段落或文字都应出现在菜单区域旁边和标题下方。]

Answer 1

HTML开箱即用不支持此功能。您需要使用PHP或ASP.NET等动态语言。您需要将文本存储在变量中，并在主页上调用它。这是一个关于我如何在一段时间内完成这个的PHP示例：

首先，您将段落存储在另一个PHP文件中，我们称之为paragaph.php。

//paragraph.php

var myParagraph = '<p>your paragraph text here</p>';

让我们调用主文件index.php

//index.php
//Put your include statement in your <head> tag
<?php include('paragraph.php'); ?>

//And this would be your paragraph
<p id="paragraph_home">paragraph.</p>
<?php echo myParagraph; ?>
<div id="footer">Developed by Jabir Al Fatah</div>

唯一的问题是你需要在你的计算机上安装类似WAMP的东西来测试它，因为浏览器不支持PHP。他们需要服务器端处理器为他们创建HTML。

祝你好运！

Answer 2

iframe选项运行良好，但有一种新方法（需要一些工作）

使用Web组件，它看起来像这样：

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

你想要通过jquery包含后备词支持，所以我建议你看一下这个教程：

Web Components Tutorial

祝你好运！

Answer 3

假设我正确理解了你的问题，我看到了两种可能的方法：

客户端：通过ajax调用加载"home.html"（此方法的缺点是依赖于javascript，用户可能已决定禁用）
服务器端：不同的服务器端技术（php，asp.net等）有某种包含机制

我倾向于采用第二种方法，因为它不依赖于javascript的存在，但这是你的呼唤。

以下是一些资源：

jquery ajax | jquery load | php include

如何在另一个HTML类中调用HTML类？

3 个答案: