HTML和CSS代碼大全是網頁設計和開發的重要基礎知識。在構建網頁時，我們通常需要借助HTML和CSS語言實現各種頁面元素和樣式效果。下面是一些常用HTML和CSS代碼示例，供大家參考。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Webpage</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Welcome to My Webpage</h1> <p>This is a sample paragraph.</p> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </body> </html>上面是一個簡單的HTML文檔結構示例，包含文檔類型聲明、語言定義、頁面標題、引用外部樣式表、頭部和主體內容等基本元素。
body {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f5f5f5;
}
h1 {
color: #333;
font-size: 32px;
}
p {
color: #666;
line-height: 1.5;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
}上面是一些常見的CSS規則示例，定義了全局字體、大小、背景色等，以及標題、段落、列表等元素的樣式。其中list-style可以用于設置列表樣式，margin和padding可以用于設置元素的內外邊距。<a href="#">Click me</a> <img src="image.jpg" alt="The image"> <input type="text" name="username">上面是一些常見的HTML標簽示例，分別是鏈接、圖片和輸入框。a標簽需要定義href屬性指向鏈接地址，img標簽需要定義src屬性指向圖片路徑，input標簽需要定義type屬性指定輸入類型、name屬性指定字段名。
@media (max-width: 768px) {
body {
font-size: 14px;
}
h1 {
font-size: 26px;
}
}上面是一個CSS媒體查詢示例，用于響應式設計。當瀏覽器寬度小于等于768像素時，修改全局字體大小和標題字體大小。
HTML和CSS代碼大全中包含了各種元素和規則的示例，能夠幫助開發人員快速理解和使用這兩種語言，提高網頁開發效率。上一篇css實現漸變色邊框
下一篇css實現漂亮的錄入框