用html制作一个百度热点新闻的网页
时间: 2024-10-13 14:13:36 浏览: 43
jQuery百度新闻热搜词特效代码
要创建一个简单的HTML页面展示百度热门新闻,你需要准备基本的HTML结构,并通过`<script>`标签引入一个外部的JSON文件(这个例子假设存在一个提供新闻数据的API),然后利用JavaScript解析数据并显示在页面上。这里是一个基础的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>百度热门新闻</title>
<style>
.news-item {
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>百度热门新闻</h1>
</header>
<section id="news-container">
<!-- JavaScript将填充新闻内容 -->
</section>
<script src="get_news.js"></script>
</body>
</html>
```
```javascript
// get_news.js (JavaScript部分)
window.onload = function() {
fetch('https://api.example.com/baidu_hot_news') // 替换为实际获取数据的URL
.then(response => response.json()) // 假设API返回的是JSON格式
.then(data => {
const newsContainer = document.getElementById('news-container');
data.forEach(item => {
const newsItem = `<div class="news-item">
<h2><a href="${item.url}">${item.title}</a></h2>
<p>${item.description}</p>
</div>`;
newsContainer.innerHTML += newsItem;
});
})
.catch(error => console.error('Error:', error));
};
```
在这个示例中,首先加载页面,然后用JavaScript异步请求新闻数据。如果请求成功,将数据插入到新闻容器(`#news-container`)里,每个新闻条目包含标题、链接和描述。
阅读全文