如何自定义html模板所以你买了一个html模板，现在你可以把它放在网上，然后你想自定义它，但你不熟悉的代码，你不知道怎么做。好吧，请放心，因为在本教程中，我们将指导您完成整个过程。我们要工作了。你从未见过一行html假设，更不用说编辑一行了，所以无论你在代码中做了多少新工作，你都会发现每一步都做了什么。让我们从头开始。

　　什么是html

　　从技术上讲，这个问题的答案是ldquo超文本标记语言rdquo但是，对于自定义模板，可以将html视为一系列打开和关闭标记，例如：

　　标签说明lt；和gt；标志和标签通常包括/。标签内容如下：

　　lt；（然而，有时前端开发人员有单独的标签，没有封闭的合作伙伴

　　不同的html标签使不同类型的内容出现在网页上。上面的例子

　　标签将创建一个大标题，阅读ldquo约翰史密斯，前端开发；，例如，标签将使图像文件成为“R”；执行JPGrdquo；出现在页面上。编辑html模板所需要知道的是，哪些标记表示页面的一部分，如何更改，如何在代码中找到它们，以及如何编辑它们以获得所需内容。

　　给自己一个代码编辑器是的，在记事本或类似的程序编辑html是完全可能的，但事情会更好，如果你使用一个适当的代码编辑应用程序。其中一个主要的原因是，你会得到你的代码颜色高亮，你很快就会看到，这将使它更容易阅读和编辑。

　　大多数html模板将在aZIP文件-如果是这样，提取您的礼物。然后查看模板文件夹，直到找到您的ldquo；指数htmLrdquo；或ldquo；索引htm报价；文件。在我们的例子中，简历模板ldquo；指标htmlrdquo；文件在ldquo中；01.htm升网站。现在，在Chrome中打开该文件。即使Chrome不是默认浏览器或**浏览器，也请使用它，因为我们希望使用一些内置工具帮助您编辑流程。确定要更改的零件。如果这是你**次编辑模板，试着不要参与调整颜色和布局的想法。你要深入CSS并负责页面的建模语言。在定制新模板时，请关注一件事，这是一个好主意，html是起点。让球滚动，把你在Chrome和找出哪些写元素和图像的页面上，你需要改变模板的外观。如果您愿意，您可以准备一个列表，并可以作为编辑器检查每个项目。在我们的简历模板的情况下，我们需要改变：牛；公牛的名字；职业公牛；个人图片；社交媒体链接；联系方式；简历：ldquo；专业ldquo；工作经历ldquo；技术；和ldquo；教育；公牛；版权信息现在我们有一个变更列表，我们可以在代码中找到相应的html标签。让我们从我们的名字开始。

　　如果找到inspector标签，请右键单击名称，即ldquo约翰史密斯rdquo；默认情况下，选择“检查：

　　组应在浏览器中打开它：

　　ldquo; 检查；面板组向您展示了代码如何交互。将光标悬停在要显示的行上

　　hellip;

　　（级别1标题选项卡），您应该看到屏幕上突出显示的模板名称部分才能看到您。通过将鼠标悬停在代码的不同行上并查看网页的照明区域，此面板可以帮助您找出哪个代码对应于哪个元素。你只是在不同的代码行中徘徊，直到你找到了光明。

　　现在展开H1并单击小三角形的左侧选项卡。你应该看到他们之间是约翰史密斯lt；小型燃气轮机；前端开发；小gt；。

　　这个措辞和你在屏幕上看到的一致，所以你知道你找到了代码的正确部分。

　　在html编辑选项卡中，是时候打开HTML文件进行编辑了。开盘ldquo；索引。在崇高的文本htmlrdquo；文件，您应该看到如下内容：

　　你想在这里找到你在Chrome检查器中看到的代码。滚动到第61-64行。

　　现在您可以编辑“内容”选项卡来更改自己的姓名和职业。一是编辑ldquo约翰史密斯rdquo；您的姓名：

　　然后，在两者之间；小型燃气轮机；书信电报；小型燃气轮机；标签，变更ldquo；前端开发；我的事业。

　　保存文件并刷新模板中的chrome。您应该看到您的更改，如下所示：

　　重复编辑其他内容

　　现在您有了基本流程：

　　检查要更改的内容并确定相应的标记。在HTML文件中找到这些标记，修改代码以适应。让我们重复此过程以编辑要自定义的其他内容。

　　添加您自己的图像下一步我们将采取我们自己的形象左边的姓名和职业领域。右键单击图像复选框并记录相应的标签：

　　您可以看到，在“检查器”窗口中，这一行直接位于顶部。我们刚刚更改了行：转到您的HTML文件，并在第59行找到标签

　　您需要更改在属性IMG标记中看到的值SRC，该标记可以用引号编辑。您将更改其文件名和自己的图像方向。

　　抓取一张自己的图片，大小为150像素x150像素（忽略文件名，比如140x140）png，实际尺寸为150x150）。

　　把你的形象写为ldquocontentrdquo；子文件夹；它与您的ldquo在同一文件夹中；索引htmlrdquo；我不确定。

　　现在，在HTML文件中，将值SRC属性更改为ldquo；140x140.png平方米；文件被添加到ldquocontentrdquo）；子文件夹。请确保检查您的文件扩展名类型是否与一对文件ldquopngrdquo；/ldquo;JPG参考文献：保存文件，刷新浏览器，您将看到新的照片显示：

　　编辑社交媒体链接现在让我们编辑模板右上角的社交媒体图标链接。和以前一样，请右键单击图标进行检查。在窗口中，查看上面高亮显示的行，您将看到它包含文本ldquoFacebookicon；。我们将使用在HTML文件中找到的代码。

　　回到升华文本，按Ctrl+F，然后运行查找ldquoFacebook图标；。你应该在75号线找到。

　　75行中的此标记是导致图标链接的原因，a href您看到了其中确定的属性，将继续。需要更改为FacebookURL（例如：https：//www.（Facebook.Com/mylink）的值a/h属性的值。

　　替换为默认URL的URL。然后与79号线谷歌+83号线、87号线LinkedIn号线推特相同。

　　如果有一个图标要完全删除，请通过链接打开的lt高亮显示它；一个燃气轮机；关闭标签，组织lt；一个燃气轮机；标签，然后删除代码。

　　现在保存并更新您的网站，然后单击链接时，它们应该转到正确的位置。

　　编辑联系人信息，然后让我们更改联系人信息右下角的社会图标。

　　首检ldquo；电子邮件；，所以我们可以找到这个代码开始联系信息。通过遍历强调代码描述，然后脱机，以便在HTML文件中匹配。

　　在升华文本中，按Ctrl+F再次搜索ldquo；电子邮件“或“电子邮件”；。需要找个例子ldquo；电子邮件；，这是与您在inspector窗口中看到的匹配的代理代码。

　　你会在94号线找到的。突出显示的默认电子邮件地址ldquo；john@sitename.comrdquo; ， 两个位置：

　　然后用你自己的电子邮件地址替换它。您也可以在下一行中替换自己的电话号码，并替换以下行，您可以替换自己的网站地址：

　　编辑恢复部分现在让我们开始编辑模板的主简历部分。有几个部分，这些部分，所以我们必须首先检查每个人，这样您就知道在代码中查找什么。这也是一个机会，通过inspector窗口了解移动查找您网站不同部分的更多信息。

　　向下滚动至ldquo；专业概况；在“检查文本”段上单击鼠标右键。

　　在视图面板中，您将看到它已高亮显示p标签ndash；此标签负责在您的中创建文本段落。

　　接下来，我们需要知道，一整段看起来就像简历中的一段文字，好像是在代码中，而不是单独的一段。在inspector窗口中，单击代码行的上述段落，检查是否应看到所有文本都亮起：

　　这告诉您，每个代码都标有DIVclass=ldquoCVrdquo的标签；项目gthellip一DIV短，这些标记用于控制布局和形状。

　　现查CV、ldquo节标题；专业类型

　　首先，您只看到另一组DIV标记，因为实际标题嵌套在它们之间。

　　调用另一端的三角形，展开三角形，查看其内容，然后在下一行中执行相同的操作，直到您看到ldquo；专业类型；短信，你在找什么。你会发现它被包裹在里面

　　hellip；＜0／H2）gt；标签，创建级别2标题：

　　现在我们知道的代码看起来像是简历部分的每一部分，我们可以回到崇高的文本并开始编辑。

　　将光标放在HTML文件的顶部，就可以从上面开始搜索了。按Ctrl+F和ldquo进行新闻CV项目搜索；。继续搜索，直到找到代码实例＜DIVclass=ldquoCVprojectldquo；燃气轮机；就在那里

　　专业简介＜H2>您确认代码。

　　现在你可以用你自己的职业简介来替换文本。把你课文的每一段都写下来

　　hellip;

　　标记执行此操作时，请确保**后一段的**个标记包含属性类和值。**后，像这样：

　　....。

　　. 这适用于布局建模模板CSS，它将确保正确处理下一段文本的间距。

　　如果保存HTML文件并刷新网站，应该会看到前两个部分已经过自定义。

　　谢泼德设计

　　一个免费的开源CMSnode.js和MongoDB计划视频UI设计师与数字艺术家