在現代網頁設計中，HTML5和CSS3已經成為了必備的技能，這兩種技術的原代碼非常重要。
在HTML5中，一個基本的網頁骨架可以寫成：
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="樣式表.css">
</head>
<body>
<header>
<h1>頭部標題</h1>
<nav>
<ul>
<li><a href="#">導航鏈接1</a></li>
<li><a href="#">導航鏈接2</a></li>
<li><a href="#">導航鏈接3</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>主要內容標題1</h2>
<p>主要內容1</p>
</section>
<section>
<h2>主要內容標題2</h2>
<p>主要內容2</p>
</section>
</main>
<footer>
<p>版權信息</p>
</footer>
</body>
</html>上述代碼中，DOCTYPE定義了文檔類型為HTML5。head中的title是網頁標題，meta標簽定義了字符集和屏幕寬度等信息，同時引用了一個樣式表文件。body中包含了網頁的主要結構，header包含了頭部信息，main包含了主要內容，footer包含了頁腳信息。
在CSS3中，可以使用如下方式設置樣式：
body {
font-family: Arial, sans-serif;
background-color: #F5F5F5;
}
header {
background-color: #333;
color: #FFF;
padding: 20px;
}
nav {
display: inline-block;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #FFF;
text-decoration: none;
}
nav a:hover {
color: #F00;
}
main {
margin: 20px;
}
section {
margin-bottom: 20px;
border: 1px solid #CCC;
border-radius: 10px;
padding: 20px;
background-color: #FFF;
}
section h2 {
color: #333;
}
section p {
line-height: 1.5;
}
footer {
background-color: #333;
color: #FFF;
padding: 20px;
}上述代碼中，body設置了字體和背景色；header設置了背景色、字體顏色和內邊距；nav、ul、li、a設置了導航欄的樣式，a:hover實現了鼠標懸停時的效果；main和section設置了內容的外觀，包括邊框、圓角、內邊距、背景色和文字顏色等；footer設置了底部的背景色和內邊距。
綜上所述，HTML5和CSS3的原代碼是網頁設計的基礎，熟練掌握這些代碼對于設計出美觀、高效的網頁至關重要。