HTML5和CSS是網頁設計的兩個重要工具。HTML5是一種用于創建網頁及其內容的標準語言，而CSS則是一種用于描述網頁外觀樣式的語言。在網頁設計中，源代碼是不可或缺的部分。下面我們來了解HTML5和CSS的源代碼。
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>網頁標題</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系方式</a></li>
</ul>
</nav>
</header>
<article>
<h2>新聞標題</h2>
<p>新聞內容</p>
</article>
<footer>
<p>版權信息</p>
</footer>
</body>
</html>以上是一個基本的網頁模板，該模板包括DOC TYPE定義、頭部、主體和尾部。頭部包含網頁標題、字符集和樣式表的鏈接。主體包括網頁的內容和結構，可以看到主體中使用了語義化標簽，如header、article和footer等。而尾部包含版權信息等內容。
下面我們再來看一下CSS的源代碼：
header {
background-color: #333;
color: #fff;
height: 50px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
article {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}該樣式表定義了頁面的外觀樣式，包括頁面頭部的背景顏色、字體顏色和高度等。同時，還定義了導航的列表樣式以及文章的邊框和內邊距等。這些樣式可以通過CSS選擇器對HTML元素進行匹配，從而實現樣式的應用。
通過以上源代碼的介紹，我們可以了解到HTML5和CSS源代碼的基本結構和應用方式。在實際應用中，我們可以根據需要進行修改和擴展，從而創建出更加豐富多彩的網頁。