用js循环加载是最佳的办法，如果你不懂，没关系，我写个demo，你跟着学，就算看不会，直接在对象上面填数据即可。
首先我们为了便于筛选给ul加个id ul1 这个实际使用中你根据自身要求重命名即可
<ul id="ul1"></ul>然后我们提取一下需要的变量用来组织数据对象，可以看到li标签里面有id【你id都是mk1，这在实际使用中是不科学的，id应该具有唯一性】，li下面的a标签有href，target。li下面的ims有src。把第一个li的这些属性提取出来，我们得到下面的对象
var data = {id: 'mk1',
href: 'mm33.html',
target: '_blank',
src: '1F.jpg'
}
请记住，这样一个对象针对的是一条li，你有N多条，需要一个数组对象，
var dataArr = [{id: 'mk1', href: 'mm33.html', target: '_blank', src: '1F.jpg'},
{id: 'mk2', href: '#', target: '', src: 'gh4.jpg'},
{id: 'mk3', href: '#', target: '', src: '1F.jpg'}
]
这里我的测试数据只帮你写3条，你实际使用中按这个格式扩展即可。
有了对象，然后写js，请把下面这段代码复制到ul1之后
<script>var dataArr = [
{id: 'mk1', href: 'mm33.html', target: '_blank', src: '1F.jpg'},
{id: 'mk2', href: '#', target: '', src: 'gh4.jpg'},
{id: 'mk3', href: '#', target: '', src: '1F.jpg'}
]
var html = ""
for(var i = 0 i < dataArr.length i++){
html += '<li id="'+ dataArr[i].id +'"><a href="'+ dataArr[i].href +'" target="'+ dataArr[i].target +'"><img src="'+ dataArr[i].src +'" width="250" height="300" alt=""></a></li>'
}
var ul = document.getElementById("ul1") //此处ul1是ul的ID，如果ID改了这里要跟着改
ul.innerHTML = html
</script>
打开运行，可以发现 ul下面已经根据dataArr里面的对象生成相应数量的li，并赋予属性了
"WebStorage适合存储少量的数据，对于大量结构化的数据，则需要IndexedDB来处理。IndexedDB 是HTML5中的一种数据存储方式，支持存储结构化数据。不同于Cookie和Web Storage，IndexedDB 提供了支持分组、循环访问、搜索和筛选 JavaScript 对象的功能。教程的话可以去土豆、优酷上看《Buid New World》，好像第六集是讲这个的"
题主你好，H5前端培训就目前而言，只要找对机构还是挺不错的。首先从前景为你描述下：前端开发虽然早已过了最热门的时候，但依旧有很多慕名而来学习和加入前端大家庭的人，就岗位需求上面来讲，普通前端开发可能相对已经饱和，但中高级前端开发需求量特别大。并且在薪资待遇方面，前端开发也会随着工作年限，逐年上涨。一位好的前端开发者，年收入过百万是没有问题的。
当然，选好培训也是至关重要的一点，这里就不多做赘述，免有广告嫌疑。
总之：多实地查看，多听试听课，没有坏处。钱要花在刀刃上，加油吧
