在Web開發中，我們經常需要構建查詢圖書信息的功能。本文將提供一個HTML的圖書查詢代碼示例，幫助您快速構建一個簡單有效的圖書查詢頁面。
<html>
<head>
<title>圖書查詢頁面</title>
</head>
<body>
<h1>圖書查詢頁面</h1>
<p>請輸入書名或ISBN號:</p>
<form id="book-form">
<input type="text" id="query" name="query" placeholder="請輸入書名或ISBN號">
<input type="submit" value="查詢">
</form>
<div id="result">查詢結果將顯示在此處</div>
<script>
const form = document.querySelector('#book-form');
form.addEventListener('submit', async e => {
e.preventDefault();
const query = document.querySelector('#query').value;
const result = await fetch(`https://api.douban.com/v2/book/search?q=${query}`).then(res => res.json());
renderResult(result.books);
})
function renderResult(books) {
const list = document.createElement('ul');
books.forEach(book => {
const item = document.createElement('li');
item.innerHTML = `
<img src="${book.image}" alt="${book.title}">
<a href="${book.alt}" target="_blank">${book.title}</a><br/>
<span>作者: ${book.author.join(', ')}</span><br/>
<span>出版社: ${book.publisher}</span><br/>
<span>出版年: ${book.pubdate}</span><br/>
<span>價格: ${book.price}</span>
`;
list.appendChild(item);
})
const result = document.querySelector('#result');
result.innerHTML = '';
result.appendChild(list);
}
</script>
</body>
</html>上述代碼中，我們使用了一些HTML元素來構建查詢頁面，包括：h1，p，form，input，div等元素。其中，form元素和submit事件用于發送查詢請求，fetch和async/await用于處理異步API請求。
在查詢結果顯示的部分，我們使用了JavaScript中的createElement方法創建了ul和li元素，并使用了forEach遍歷books數組，渲染出每本書的信息。
通過本文提供的HTML圖書查詢代碼示例，您可以在Web開發中快速構建一個具有查詢功能的圖書頁面，實現更好的用戶體驗。