HTML和CSS是構建現代Web頁面的基本工具，雖然它們不是完整的編程語言，但掌握它們可以讓你更好地設計和布局網頁。在本文中，我們將介紹如何使用HTML和CSS來創建一個簡單的網頁，并解釋如何使用它們來解決常見的Web設計問題。
讓我們開始創建一個簡單的HTML頁面。以下是一個示例HTML代碼：
```html
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #007bff;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
在這個示例中，我們使用了<!DOCTYPE html>聲明文檔類型，并設置了標題<title>標簽，以顯示頁面的標題。我們還設置了一個背景顏色，一個字體和一個居中對齊的文本。
接下來，讓我們使用CSS來修改頁面的外觀。以下是一個示例CSS代碼：
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #007bff;
text-align: center;
font-size: 16px;
line-height: 1.5;
在這個示例中，我們使用了body元素來設置頁面的背景色和字體，并使用h1元素設置了標題的字體顏色和對齊方式，以及p元素設置了文本的大小和行高。
現在，我們已經創建了一個簡單的HTML和CSS頁面。但是，我們還想讓它更漂亮。我們可以通過在HTML中嵌入圖片來實現這一點。以下是一個示例HTML代碼，其中包含一個圖片：
```html
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
這只是HTML和CSS的簡單示例。在實際項目中，你可以根據需要進行更多的修改和調整，例如添加表格、響應式設計、更改顏色、更改字體等等。
最后，讓我們來解決一個常見的Web設計問題：響應式設計。響應式設計是指將網頁設計適應不同屏幕大小和設備類型。以下是一個示例響應式設計HTML代碼：
```html
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
body {
background-color: #007bff;
font-family: Arial, sans-serif;
}
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
在這個示例中，我們使用了@media查詢來控制CSS樣式在屏幕寬度小于768像素時的變化。在這個查詢中，我們使用了screen和(max-width: 768px)選項來指定樣式在特定屏幕寬度下的應用。
以上就是使用HTML和CSS創建簡單網頁的示例，掌握了這些技能，你就可以創建更復雜的網頁，并解決更多的Web設計問題。