3.5　项目实战：在线新闻浏览

本节基于前面学习的知识，结合起来设计一个在线新闻浏览的HTML页面。希望能帮助读者尽快掌握HTML文字与排版的设计方法。

下面是项目实战在线新闻浏览的HTML网页代码（详见源代码ch03/ch03-html-news.html文件）。

【代码3-11】

【代码解析】

第08～16行代码通过<div>标签元素定义了新闻页面的导航路径。其中，第10行、第12行和第14行代码通过<a>标签定义了导航链接。第11行和第13行代码通过“>”字符定义了导航箭头。

第18～26行代码通过<div>标签元素定义了新闻页面的标题区域。其中，第19行代码通过<h1>标签元素定义了新闻标题。第20～25行代码通过一组<span>标签元素定义了关键词、新闻发布时间、分享链接和评论链接，第23行和第24行代码通过<img>标签元素为分享链接和评论链接添加了图标。

第28～34行代码通过<div>标签元素定义了第一个新闻页面的内容区域。第29～33行代码通过段落<p>标签元素定义了第一段新闻内容。

第36行代码通过<img>标签元素定义了新闻图片。

第37～43行代码通过<div>标签元素定义了第二个新闻页面的内容区域。第38～42行代码通过<ul><li>标签元素定义了第二段新闻内容。

第45～50行代码通过<div>标签元素定义了新闻页面的底部区域。第46～49行代码通过段落<p>标签元素定义了新闻编辑等信息。

运行测试网页，效果如图3.11所示。

图3.11　在线新闻浏览