用html +js写一个新闻网页
时间: 2023-09-25 09:13:46 浏览: 48
好的,以下是一个使用HTML和JavaScript编写的简单新闻网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>新闻网页</title>
<script>
// 定义一个新闻数组
var news = [
{
title: "新闻标题1",
content: "新闻内容1"
},
{
title: "新闻标题2",
content: "新闻内容2"
},
{
title: "新闻标题3",
content: "新闻内容3"
}
];
// 定义一个函数来动态创建新闻列表
function createNewsList() {
// 获取新闻列表元素
var newsList = document.getElementById("news-list");
// 清空新闻列表
newsList.innerHTML = "";
// 遍历新闻数组,创建新闻列表项
news.forEach(function(item) {
var li = document.createElement("li");
var h3 = document.createElement("h3");
var p = document.createElement("p");
h3.textContent = item.title;
p.textContent = item.content;
li.appendChild(h3);
li.appendChild(p);
newsList.appendChild(li);
});
}
</script>
</head>
<body onload="createNewsList()">
<header>
<h1>新闻标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
<li><a href="#">体育新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>国内新闻</h2>
<ul id="news-list">
<!-- 动态创建新闻列表项 -->
</ul>
</section>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
在这个示例中,我们定义了一个包含多个新闻对象的新闻数组,并且使用JavaScript编写了一个动态创建新闻列表的函数。该函数在页面加载时被调用,会遍历新闻数组并动态创建新闻列表项。我们将动态创建的新闻列表放在了页面的国内新闻栏目中。你可以根据需要自行修改和添加内容。