编写web前端广告代码的方法有很多种，下面给出一种常见的做法来演示。
首先，在html文件中插入广告代码的容器元素，可以使用div元素来承载广告。假设我们的广告容器元素的id为"ad-container"，则可以在html文件中添加如下代码：
接下来，在javascript文件中编写广告代码的逻辑。通常情况下，我们会使用第三方广告平台的API来加载广告内容。以Google AdSense为例，我们需要先在网站上注册一个广告账号，并获取一个广告单位（ad unit）的ID。然后，我们可以使用Google AdSense提供的JavaScript API来向页面中插入广告。
// 在页面加载完成后执行以下代码
window.onload = function() {
// 获取广告容器元素
var adContainer = document.getElementById("ad-container");
// 创建一个Script元素
var script = document.createElement("script");
// 设置Script元素的src属性，这里的属性值为Google AdSense提供的广告API链接
script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
// 在Script元素加载完成后执行以下代码
script.onload = function() {
// 创建一个Ins元素，用于插入广告
var ins = document.createElement("ins");
// 设置Ins元素的class属性为"adsbygoogle"
ins.className = "adsbygoogle";
// 设置Ins元素的data-ad-client属性为你的Google AdSense广告单位ID
ins.setAttribute("data-ad-client", "YOUR_AD_UNIT_ID");
// 将Ins元素插入到广告容器元素中
adContainer.appendChild(ins);
// 使用Google AdSense的API来加载广告内容
(adsbygoogle = window.adsbygoogle || []).push({});
};
// 将Script元素插入到页面的head元素中
document.head.appendChild(script);
};
在上述代码中，需要将"YOUR_AD_UNIT_ID"替换为你自己的广告单位ID。
最后，记得将上述javascript代码保存到一个.js文件中，并在html文件中引入该文件：
这样，当页面加载完成后，广告代码就会被插入到指定的广告容器元素中，并开始加载广告内容。
以上就是一种常见的web前端广告代码的编写方法，当然不同的广告平台可能有所区别，具体实现方式可能会有所不同。如果使用其他广告平台的API，可以根据其提供的文档来编写代码。