给你写一个样式作为参考：
我们提供的服务有：成都做网站、网站建设、微信公众号开发、网站优化、网站认证、闽清ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的闽清网站制作公司
div style="float:left;width:300px; height:25pxl"这是一行包含新闻标题和阅读量的盒子
a style="float:left;width:200px;"新闻标题XXXXXX/a
span style="float:right:width:190px;"【阅读量206】/span
/div
这样就标题在左边，阅读量在右边了
我也在查这个的资料，现在的技术资料很不好取得，不像以前想学什么就找得到什么。
这个标签在HTML5中，意思应该是取代DIV结构的，它定义了一个大的外部框架，就像你我们经常定义的最外层的那对DIV意思一样，现在有了这些自己具有层级结构的不同标记了。
所以article的下面应该还包括很多其它标签。结合后实现分栏之类的设计，CSS也根据这个做了调整以便支持其样式的显示，同时JS也需要些变动，JQuery则依然活跃，并没有因为HTML5重复了其部分功能而被排挤掉。
我目前知道的就这么多了。
我觉得首先，你要买本自己看的上的实体书作为教材来读。虽然有电子版的书，但是实话还是实体书来的安逸，可以笔记，可以勾勾画画。
具体什么书，你自己看的顺眼，不要太厚就行。太厚了，你看着就会放弃的。但是，书本一定要涵盖2大基本知识模块：HTML标签，CSS样式。
看书学习的重点内容：常见的HTML标签，常用的样式-- 什么叫常见的？书上有的都是常见的。不常见的作者也不会写。
看书没看懂，再针对不懂的地方，百度。
实体书看到到你觉得差不多了，可以进行第二步了。PS：什么叫差不多了？就是你觉得自己“入门”了：可以写网页导航、新闻列表、图片列表、图文混排、会左（中）右结构、了解浮动和清除浮动、会使用超链接、懂的:hover 的用法了，我觉得你算“入门”了。
第二步：网上下个PSD网页模版。从头到尾写一遍（ 不用理Javascript交互效果。）
页面效果工整，兼容性良好，兼容IE11及以上，chrome浏览器就ok。
一个不够，就再来一打。直到你能顺利写出页面结构而且效果完美（当然还是没有JS效果）。你就可以开始下一步.
第三步：开始填你的Javascript的坑吧
是不是觉得写了很多页面，但是却点交互哇？不会写图片轮播，不会写二级菜单，不会点击出现弹窗。。。这些都要JS的。所以，在熟悉了HTML和CSS之后，你就要重点学习Javascript了。还是那句话买本书来入门，结合网上的视频教程，坚持学习吧。
第四步：熟悉JS了后，就开始你的HTML5的专项编程吧。
canvas，音视频控制，多线程，本地存储，这些都要JS来操作哒。
第五步：继续你的js的天坑-- 可以熟悉一些常用的JS框架了
jquery，boostrap，vue，AngularJS 等等。又是一条漫长的路。。。
以上走完，你可以去上班了。时间也应该1年了吧。当然，你学的快可能几个月。不过后面还有很多坑，比如node，模块化编程思想，面向对象编程思想等等。。。
加油，前端不易，且学且珍惜。
实现思路，先从集合中取出新闻条数，然后写foreach循环把下表当做序号依次输出即可。
实现的参考代码如下：
form name="f1" method="post" action=""
c:forEach items="${list}" varStatus="state" var="dto"
input type="text" id="ntcode" name="ntcode" value="c:out value="${dto.ntcode}"序号:/c:out"/
label class="control-label" for="exampleInputPassword1"标题:/label
c:out value="${dto.nttitle}"/c:out
label class="control-label" for="exampleInputPassword1"正文：/label
c:out value="${dto.nttext}"/c:out
label class="control-label" for="exampleInputPassword1"发布人：/label
c:out value="${dto.agentcode}"/c:out
label class="control-label" for="exampleInputPassword1"发布时间：/label
c:out value="${dto.ntdate}"/c:out
input type="button" class="btn btn-block btn-red" id="del" name="del" value="删除此公告通知"
onclick="deletegg();"/
/c:forEach
/form
ul标签里面嵌套li会出现实心圆点，当li里面二级再嵌套一个ul此时就会出现空心点，快去试试吧。
ul
li
ul
li/li
li/li
/ul
/li
li/li
/ul
